TRI-283: add scss posterinvideo
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -415,3 +415,7 @@ fabric.properties
|
||||
# Android studio 3.1+ serialized cache file
|
||||
.idea/caches/build_file_checksums.ser
|
||||
|
||||
# packages for node
|
||||
package.json
|
||||
package-lock.json
|
||||
|
||||
|
||||
18
BillingApp/migrations/0006_alter_subscribeorder_currency.py
Normal file
18
BillingApp/migrations/0006_alter_subscribeorder_currency.py
Normal 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='Валюта'),
|
||||
),
|
||||
]
|
||||
@@ -1,11 +1,590 @@
|
||||
@import url('./moover/root.css');
|
||||
@import url('./moover/presentation.css');
|
||||
@import url('./moover/cards.css');
|
||||
@import url('./moover/easy.css');
|
||||
@import url('./moover/use.css');
|
||||
@import url('./moover/chatterbox.css');
|
||||
@import url('./moover/animate.css');
|
||||
@import url('./moover/about.css');
|
||||
@import url('./moover/benefits.css');
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
position: relative;
|
||||
min-height: 695px;
|
||||
}
|
||||
|
||||
/*@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;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
.benefits {
|
||||
/*padding: 0 50px;*/
|
||||
|
||||
}
|
||||
|
||||
.benefits .title {
|
||||
margin-bottom: 76px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.benefits__grid {
|
||||
@@ -13,13 +8,18 @@
|
||||
grid-template-columns: 1.5fr 3fr 1.5fr;
|
||||
}
|
||||
|
||||
.benefits__col {
|
||||
|
||||
.benefits__item {
|
||||
min-height: 122px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.benefits__item {
|
||||
margin-bottom: 54px;
|
||||
padding-right: 5px;
|
||||
.benefits__third {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.benefits .title {
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
|
||||
.benefits img {
|
||||
@@ -27,11 +27,3 @@
|
||||
top: 14px;
|
||||
right: -11px;
|
||||
}
|
||||
|
||||
.benefits__third {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.benefits__third .benefits__item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
@@ -2,27 +2,11 @@
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.chatterbox__slider {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
/*padding: 50px;*/
|
||||
}
|
||||
|
||||
.chatterbox .slick-next {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
.chatterbox .slick-prev {
|
||||
left: -40px;
|
||||
}
|
||||
|
||||
.chatterbox__slide {
|
||||
width: 335px;
|
||||
height: 615px;
|
||||
@@ -32,9 +16,29 @@
|
||||
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;
|
||||
/* z-index: -1; */
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
@@ -44,21 +48,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -70,9 +59,13 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loaded .chatterbox__vbtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -82,11 +75,6 @@
|
||||
transition: opacity 100ms linear;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -106,27 +94,35 @@
|
||||
|
||||
.chatterbox__vbox {
|
||||
position: relative;
|
||||
/*z-index: -1;*/
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.chatterbox video {
|
||||
max-width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
.chatterbox .title {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.loaded .chatterbox__vbtn {
|
||||
display: none;
|
||||
.chatterbox .slick-next {
|
||||
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;
|
||||
pointer-events: initial;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slick-center .chatterbox__vbox video {
|
||||
pointer-events: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
9
styles/moover.scss
Normal file
9
styles/moover.scss
Normal 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";
|
||||
29
styles/moover/benefits.scss
Normal file
29
styles/moover/benefits.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
131
styles/moover/chatterbox.scss
Normal file
131
styles/moover/chatterbox.scss
Normal 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;
|
||||
}
|
||||
@@ -133,60 +133,86 @@
|
||||
<section class="chatterbox">
|
||||
<div class="title">{% translate "Что о нас говорят люди" %}</div>
|
||||
<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="chatterbox__slide">#}
|
||||
{# <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__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 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>
|
||||
{% endfor %}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <video controls data-src="/media/uploads/1.mp4" autoplay></video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <video controls data-src="/media/uploads/2.mp4" autoplay></video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <div class="chatterbox__vbtn"></div>#}
|
||||
{# <div class="chatterbox__wrap">#}
|
||||
{# <div class="chatterbox__vbox">#}
|
||||
{# <video controls data-src="/media/uploads/3.mp4" autoplay>#}
|
||||
{# </video>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
{##}
|
||||
{# </div>#}
|
||||
{# <div class="slick-slide">#}
|
||||
{# <div class="chatterbox__slide">#}
|
||||
{# <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 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/ava3.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/3.mp4"
|
||||
poster="/media/media_items/image/ava3.jpg"
|
||||
controls
|
||||
autoplay
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</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/ava1.jpg" alt="user" class="chatterbox__poster">
|
||||
<video
|
||||
data-src="/media/media_items/video/4.mp4"
|
||||
poster="/media/media_items/image/ava1.jpg"
|
||||
controls
|
||||
autoplay
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -195,7 +221,13 @@
|
||||
<div class="chatterbox__vbtn"></div>
|
||||
<div class="chatterbox__wrap">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,13 +344,13 @@
|
||||
<p class="about__half">{% translate "Если не хочешь размещать объявление и ждать, то можешь <b>самостоятельно на нашем сайте найти перевозчика</b> через удобную систему поиска" %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{# </div>#}
|
||||
{# </div>#}
|
||||
</section>
|
||||
|
||||
<section class="benefits">
|
||||
<div class="title">{% translate "Преимущества сервиса" %}</div>
|
||||
<div class="benefits__grid">
|
||||
<div class="benefits__first benefits__col">
|
||||
<div class="benefits__first">
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Прямой контакт" %}</h2>
|
||||
<p>{% translate "Общаешься напрямую с перевозчиком, никаких посредников" %}</p>
|
||||
@@ -335,7 +367,7 @@
|
||||
<div class="benefits__second">
|
||||
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
|
||||
</div>
|
||||
<div class="benefits__third benefits__col">
|
||||
<div class="benefits__third">
|
||||
<div class="benefits__item">
|
||||
<h2>{% translate "Уведомления" %}</h2>
|
||||
<p>{% translate "Можешь самостоятельно найти перевозчиков или разместить объявление на сайте." %}</p>
|
||||
|
||||
Reference in New Issue
Block a user