sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: add scss posterinvideo

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-16 15:02:15 +03:00
parent f58038ab90
commit 034d5faa0d
16 changed files with 926 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -415,3 +415,7 @@ fabric.properties
# Android studio 3.1+ serialized cache file # Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser .idea/caches/build_file_checksums.ser
# packages for node
package.json
package-lock.json

18
BillingApp/migrations/0006_alter_subscribeorder_currency.py Normal file
View File

@@ -0,0 +1,18 @@
# Generated by Django 4.2.2 on 2024-11-16 11:33
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('BillingApp', '0005_subscribeorder_last_operation_status'),
]
operations = [
migrations.AlterField(
model_name='subscribeorder',
name='currency',
field=models.CharField(default='KZT', max_length=3, verbose_name='Валюта'),
),
]

597
static/css/moover.css
View File

@@ -1,11 +1,590 @@
@import url('./moover/root.css'); .container {
@import url('./moover/presentation.css'); margin: 0 auto;
@import url('./moover/cards.css'); max-width: 1280px;
@import url('./moover/easy.css'); position: relative;
@import url('./moover/use.css'); min-height: 695px;
@import url('./moover/chatterbox.css'); }
@import url('./moover/animate.css');
@import url('./moover/about.css');
@import url('./moover/benefits.css');
/*@media (max-width: 1339.98px) {*/
/* .container {*/
/* width: 992px*/
/* }*/
/*}*/
/*@media (max-width: 1019.98px) {*/
/* .container {*/
/* width: 720px*/
/* }*/
/*}*/
/*@media (max-width: 767.98px) {*/
/* .container {*/
/* margin: 0 15px;*/
/* width: auto*/
/* }*/
/*}*/
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-black2: #272424;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--color-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
color: var(--color-black2);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
h1, .title {
font-size: 44px;
line-height: 52px;
}
h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
}
h4, .h4 {
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
p {
line-height: 22px;
margin-bottom: 20px;
}
b {
font-weight: 500;
}
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px 18px;
justify-content: center;
align-items: center;
margin: 0 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
.title {
font-size: 44px;
font-weight: 700;
line-height: 52px;
margin-bottom: 13px;
margin-left: auto;
margin-right: auto;
}
.subtitle {
margin-bottom: 81px;
line-height: 22px;
}
.hide {
display: none;
}
.presentation {
margin: 20px -65px 140px;
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/webp/Box9.webp), url(/static/img/webp/Box10.webp), url(/static/img/webp/Box11.webp), url(/static/img/webp/Box12.webp);
background-position: top -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.presentation__title {
margin-bottom: 23px;
}
.presentation__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
.presentation__btn {
margin-bottom: 40px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
60% {
transform: translateY(20px);
}
70% {
transform: translateY(0px);
}
80% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}
.cards__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.cards__item {
position: relative;
}
.cards__img:hover {
scale: 1.05;
transition: scale 0.15s linear;
}
.cards__img {
margin-bottom: 5px;
}
.cards__desc {
font-weight: 500;
line-height: 22px;
}
.cards__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
}
.easy {
margin-bottom: 162px;
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
.easy .subtitle {
margin-bottom: 41px;
}
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas: 'a b' 'a c';
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 46px;
}
.easy__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
}
.easy__item--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
}
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--sec p,
.easy__item--thr p,
.easy__item--sec,
.easy__item--thr {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--thr p {
max-width: 50%;
}
.easy__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
.easy__btn {
margin-top: -21px;
}
.chatterbox {
margin-bottom: 160px;
}
.chatterbox__slider {
max-width: 1200px;
margin: 0 auto;
}
.chatterbox__slide {
width: 335px;
height: 615px;
background: url("/static/img/webp/phone-border.webp") center no-repeat;
transition: scale 0.2s ease-in-out;
margin: auto;
position: relative;
}
.chatterbox__slide.loaded video {
opacity: 1;
}
.chatterbox__slide.loaded img {
z-index: -10;
}
.chatterbox__slide video {
max-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
}
.chatterbox__slide img {
position: absolute;
scale: 1.32;
top: 11%;
}
.chatterbox__wrap {
position: absolute;
left: 8px;
right: 8px;
top: 8px;
bottom: 8px;
border-radius: 25px;
background-color: grey;
overflow: hidden;
}
.chatterbox__vbtn {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
}
.loaded .chatterbox__vbtn {
display: none;
}
.chatterbox__vbtn::before {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;
}
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.chatterbox__vbtn::after {
border-color: transparent transparent transparent #ffffff;
border-style: solid;
border-width: 15px 0 15px 25px;
display: inline-block;
margin-left: 2px;
}
.chatterbox__vbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 16px);
}
.chatterbox .title {
margin-bottom: 60px;
}
.chatterbox .slick-next {
right: -40px;
}
.chatterbox .slick-prev {
left: -40px;
}
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.72;
}
.slick-center .chatterbox__vbtn {
opacity: 1;
pointer-events: initial;
z-index: 1;
}
.slick-center .chatterbox__vbox video {
pointer-events: initial;
cursor: pointer;
}
.use {
margin-bottom: 123px;
}
.use .title {
max-width: 80%;
margin-bottom: 49px;
}
.use__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
}
.use__btn {
margin-bottom: 11px;
}
.use__link {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--color-grey2);
}
.use.use--diff .title {
width: 60%;
margin-bottom: 60px;
}
.use.use--diff .use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
}
.use.use--lett {
margin-bottom: 120px;
}
.use.use--lett .title {
margin-bottom: 51px;
}
.use.use--lett .use__img {
margin-left: -5px;
margin-right: -5px;
max-width: 110%;
width: 1290px;
}
.animate {
padding: 60px 40px 49px;
opacity: 0;
transform: translateX(-180px);
background-color: var(--color-black2);
border-radius: 30px;
color: white;
margin-bottom: 160px;
}
.animate .title {
margin-bottom: 25px;
max-width: 87%;
/*width: 90%;*/
}
.animate .subtitle {
width: 47%;
margin: 0 auto 23px;
}
.animate__link {
color: var(--color-orange);
text-decoration: underline !important;
}
.about {
margin-bottom: 168px;
}
.about .title {
margin-bottom: 60px;
}
.about__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.about__img {
box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933;
border-radius: 31px;
margin-left: 8px;
margin-top: 8px;
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
.about__half {
max-width: 50%;
float: left;
}
.about__half:last-child {
padding-left: 16px;
max-width: 47%;
}
.about b {
letter-spacing: 0.4px;
}
.benefits {
margin-bottom: 50px;
}
.benefits__grid {
text-align: left;
display: grid;
grid-template-columns: 1.5fr 3fr 1.5fr;
}
.benefits__item {
min-height: 122px;
padding-right: 7px;
margin-bottom: 22px;
}
.benefits__third {
padding-left: 16px;
}
.benefits .title {
margin-bottom: 76px;
}
.benefits img {
position: relative;
top: 14px;
right: -11px;
}

30
static/css/moover/benefits.css
View File

@@ -1,10 +1,5 @@
.benefits { .benefits {
/*padding: 0 50px;*/ margin-bottom: 50px;
}
.benefits .title {
margin-bottom: 76px;
} }
.benefits__grid { .benefits__grid {
@@ -13,13 +8,18 @@
grid-template-columns: 1.5fr 3fr 1.5fr; grid-template-columns: 1.5fr 3fr 1.5fr;
} }
.benefits__col { .benefits__item {
min-height: 122px;
padding-right: 7px;
margin-bottom: 22px;
} }
.benefits__item { .benefits__third {
margin-bottom: 54px; padding-left: 16px;
padding-right: 5px; }
.benefits .title {
margin-bottom: 76px;
} }
.benefits img { .benefits img {
@@ -27,11 +27,3 @@
top: 14px; top: 14px;
right: -11px; right: -11px;
} }
.benefits__third {
padding-left: 16px;
}
.benefits__third .benefits__item {
margin-bottom: 22px;
}

108
static/css/moover/chatterbox.css
View File

@@ -2,27 +2,11 @@
margin-bottom: 160px; margin-bottom: 160px;
} }
.chatterbox .title {
margin-bottom: 60px;
}
.chatterbox__slider { .chatterbox__slider {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.slick-slide {
/*padding: 50px;*/
}
.chatterbox .slick-next {
right: -40px;
}
.chatterbox .slick-prev {
left: -40px;
}
.chatterbox__slide { .chatterbox__slide {
width: 335px; width: 335px;
height: 615px; height: 615px;
@@ -32,31 +16,36 @@
position: relative; position: relative;
} }
.chatterbox__wrap { .chatterbox__slide.loaded video {
position: absolute;
/* z-index: -1; */
left: 8px;
right: 8px;
top: 8px;
bottom: 8px;
border-radius: 25px;
background-color: grey;
overflow: hidden;
}
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.72;
}
.slick-center .chatterbox__vbtn {
opacity: 1; opacity: 1;
pointer-events: initial;
z-index: 1;
} }
.slick-center .chatterbox__vbox video { .chatterbox__slide.loaded img {
pointer-events: initial; z-index: -10;
cursor: pointer; }
.chatterbox__slide video {
max-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
}
.chatterbox__slide img {
position: absolute;
scale: 1.32;
top: 11%;
}
.chatterbox__wrap {
position: absolute;
left: 8px;
right: 8px;
top: 8px;
bottom: 8px;
border-radius: 25px;
background-color: grey;
overflow: hidden;
} }
.chatterbox__vbtn { .chatterbox__vbtn {
@@ -70,9 +59,13 @@
pointer-events: none; pointer-events: none;
} }
.loaded .chatterbox__vbtn {
display: none;
}
.chatterbox__vbtn::before { .chatterbox__vbtn::before {
width: 20px; width: 80px;
height: 20px; height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -82,11 +75,6 @@
transition: opacity 100ms linear; transition: opacity 100ms linear;
} }
.chatterbox__vbtn::before {
width: 80px;
height: 80px;
}
.chatterbox__vbtn::before, .chatterbox__vbtn::after { .chatterbox__vbtn::before, .chatterbox__vbtn::after {
content: ""; content: "";
position: absolute; position: absolute;
@@ -106,27 +94,35 @@
.chatterbox__vbox { .chatterbox__vbox {
position: relative; position: relative;
/*z-index: -1;*/
padding: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: calc(100% - 16px); height: calc(100% - 16px);
} }
.chatterbox video { .chatterbox .title {
max-width: 100%; margin-bottom: 60px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
} }
.loaded .chatterbox__vbtn { .chatterbox .slick-next {
display: none; right: -40px;
} }
.loaded video { .chatterbox .slick-prev {
left: -40px;
}
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.72;
}
.slick-center .chatterbox__vbtn {
opacity: 1; opacity: 1;
pointer-events: initial;
z-index: 1;
} }
.slick-center .chatterbox__vbox video {
pointer-events: initial;
cursor: pointer;
}

9
styles/moover.scss Normal file
View File

@@ -0,0 +1,9 @@
@import "./moover/root";
@import "./moover/presentation";
@import "./moover/cards";
@import "./moover/easy";
@import "./moover/chatterbox";
@import "./moover/use";
@import "./moover/animate";
@import "./moover/about";
@import "./moover/benefits";

0
static/css/moover/about.css → styles/moover/about.scss
View File

0
static/css/moover/animate.css → styles/moover/animate.scss vendored
View File

29
styles/moover/benefits.scss Normal file
View File

@@ -0,0 +1,29 @@
.benefits {
margin-bottom: 50px;
&__grid {
text-align: left;
display: grid;
grid-template-columns: 1.5fr 3fr 1.5fr;
}
&__item {
min-height: 122px;
padding-right: 7px;
margin-bottom: 22px;
}
&__third {
padding-left: 16px;
}
.title {
margin-bottom: 76px;
}
img {
position: relative;
top: 14px;
right: -11px;
}
}

0
static/css/moover/cards.css → styles/moover/cards.scss
View File

131
styles/moover/chatterbox.scss Normal file
View File

@@ -0,0 +1,131 @@
.chatterbox {
margin-bottom: 160px;
&__slider {
max-width: 1200px;
margin: 0 auto;
}
&__slide {
width: 335px;
height: 615px;
background: url("/static/img/webp/phone-border.webp") center no-repeat;
transition: scale 0.2s ease-in-out;
margin: auto;
position: relative;
&.loaded {
video {
opacity: 1;
}
img {
z-index: -10;
}
}
video {
max-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
}
img {
position: absolute;
scale: 1.32;
top: 11%;
}
}
&__wrap {
position: absolute;
left: 8px;
right: 8px;
top: 8px;
bottom: 8px;
border-radius: 25px;
background-color: grey;
overflow: hidden;
}
&__vbtn {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
.loaded & {
display: none;
}
&::before {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;
}
&::before,
&::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
&::after {
border-color: transparent transparent transparent #ffffff;
border-style: solid;
border-width: 15px 0 15px 25px;
display: inline-block;
margin-left: 2px;
}
}
&__vbox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 16px);
}
.title {
margin-bottom: 60px;
}
.slick-next {
right: -40px;
}
.slick-prev {
left: -40px;
}
}
.slick-slide:not(.slick-center) .chatterbox__slide {
scale: 0.72;
}
.slick-center .chatterbox__vbtn {
opacity: 1;
pointer-events: initial;
z-index: 1;
}
.slick-center .chatterbox__vbox video {
pointer-events: initial;
cursor: pointer;
}

0
static/css/moover/easy.css → styles/moover/easy.scss
View File

0
static/css/moover/presentation.css → styles/moover/presentation.scss
View File

0
static/css/moover/root.css → styles/moover/root.scss
View File

0
static/css/moover/use.css → styles/moover/use.scss
View File

136
templates/pages/p_mover_landing_page.html
View File

@@ -133,60 +133,86 @@
<section class="chatterbox"> <section class="chatterbox">
<div class="title">{% translate "Что о нас говорят люди" %}</div> <div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider"> <div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %} {# {% for media_item in page.get_video_items %}#}
<div class="slick-slide"> {# <div class="slick-slide">#}
<div class="chatterbox__slide"> {# <div class="chatterbox__slide">#}
<div class="chatterbox__vbtn"></div> {# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{##}
{# <video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# {% endfor %}#}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap"> <div class="chatterbox__wrap">
<div class="chatterbox__vbox"> <div class="chatterbox__vbox">
<img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/1.mp4"
poster="/media/media_items/image/ava1.jpg"
controls
autoplay
></video>
</div>
</div>
</div>
<video data-src="{{ MEDIA_URL }}{{ media_item.video }}" autoplay></video> </div>
</div> <div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/2.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
></video>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %} <div class="slick-slide">
{# <div class="slick-slide">#} <div class="chatterbox__slide">
{# <div class="chatterbox__slide">#} <div class="chatterbox__vbtn"></div>
{# <div class="chatterbox__vbtn"></div>#} <div class="chatterbox__wrap">
{# <div class="chatterbox__wrap">#} <div class="chatterbox__vbox">
{# <div class="chatterbox__vbox">#} <img src="/media/media_items/image/ava3.jpg" alt="user" class="chatterbox__poster">
{# <video controls data-src="/media/uploads/1.mp4" autoplay></video>#} <video
{# </div>#} data-src="/media/media_items/video/3.mp4"
{# </div>#} poster="/media/media_items/image/ava3.jpg"
{# </div>#} controls
{##} autoplay
{# </div>#} >
{# <div class="slick-slide">#} </video>
{# <div class="chatterbox__slide">#} </div>
{# <div class="chatterbox__vbtn"></div>#} </div>
{# <div class="chatterbox__vbox">#} </div>
{# <video controls data-src="/media/uploads/2.mp4" autoplay></video>#}
{# </div>#} </div>
{# </div>#} <div class="slick-slide">
{# </div>#} <div class="chatterbox__slide">
{# <div class="slick-slide">#} <div class="chatterbox__vbtn"></div>
{# <div class="chatterbox__slide">#} <div class="chatterbox__wrap">
{# <div class="chatterbox__vbtn"></div>#} <div class="chatterbox__vbox">
{# <div class="chatterbox__wrap">#} <img src="/media/media_items/image/ava1.jpg" alt="user" class="chatterbox__poster">
{# <div class="chatterbox__vbox">#} <video
{# <video controls data-src="/media/uploads/3.mp4" autoplay>#} data-src="/media/media_items/video/4.mp4"
{# </video>#} poster="/media/media_items/image/ava1.jpg"
{# </div>#} controls
{# </div>#} autoplay
{# </div>#} >
{##} </video>
{# </div>#} </div>
{# <div class="slick-slide">#} </div>
{# <div class="chatterbox__slide">#} </div>
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <video controls data-src="/media/uploads/4.mp4" autoplay>#}
{# </video>#}
{# </div>#}
{# </div>#}
{# </div>#}
</div> </div>
@@ -195,7 +221,13 @@
<div class="chatterbox__vbtn"></div> <div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap"> <div class="chatterbox__wrap">
<div class="chatterbox__vbox"> <div class="chatterbox__vbox">
<video controls data-src="/media/uploads/5.mp4" autoplay> <img src="/media/media_items/image/ava2.jpg" alt="user" class="chatterbox__poster">
<video
data-src="/media/media_items/video/5.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
>
</video> </video>
</div> </div>
</div> </div>
@@ -312,13 +344,13 @@
<p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p> <p class="about__half">{% translate "Если не&nbsp;хочешь размещать объявление и&nbsp;ждать, то&nbsp;можешь <b>самостоятельно на&nbsp;нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
</div> </div>
</div> </div>
{# </div>#} {# </div>#}
</section> </section>
<section class="benefits"> <section class="benefits">
<div class="title">{% translate "Преимущества сервиса" %}</div> <div class="title">{% translate "Преимущества сервиса" %}</div>
<div class="benefits__grid"> <div class="benefits__grid">
<div class="benefits__first benefits__col"> <div class="benefits__first">
<div class="benefits__item"> <div class="benefits__item">
<h2>{% translate "Прямой контакт" %}</h2> <h2>{% translate "Прямой контакт" %}</h2>
<p>{% translate "Общаешься напрямую с&nbsp;перевозчиком, никаких посредников" %}</p> <p>{% translate "Общаешься напрямую с&nbsp;перевозчиком, никаких посредников" %}</p>
@@ -335,7 +367,7 @@
<div class="benefits__second"> <div class="benefits__second">
<img src="{% static "/img/png/benefits.png" %}" alt="benefits"> <img src="{% static "/img/png/benefits.png" %}" alt="benefits">
</div> </div>
<div class="benefits__third benefits__col"> <div class="benefits__third">
<div class="benefits__item"> <div class="benefits__item">
<h2>{% translate "Уведомления" %}</h2> <h2>{% translate "Уведомления" %}</h2>
<p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на&nbsp;сайте." %}</p> <p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на&nbsp;сайте." %}</p>