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

TRI-283: end adaptive 1920 + start header

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-19 00:25:47 +03:00
parent da6f47f439
commit 4996d02f71
36 changed files with 2118 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

603
static/css/moover.css
View File

@@ -58,6 +58,13 @@ h2, .h2 {
margin-bottom: 10px;
}
@media (min-width: 1720px) {
h2, .h2 {
font-size: 28px;
margin-bottom: 20px;
}
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
@@ -75,6 +82,13 @@ p {
margin-bottom: 20px;
}
@media (min-width: 1720px) {
p {
font-size: 20px;
line-height: 26px;
}
}
b {
font-weight: 500;
}
@@ -109,7 +123,7 @@ b {
@media (min-width: 1720px) {
.title {
font-size: 44px;
font-size: 48px;
margin-bottom: 22px;
}
}
@@ -122,7 +136,7 @@ b {
@media (min-width: 1720px) {
.subtitle {
font-size: 20px;
margin-bottom: 97px;
margin-bottom: 105px;
}
}
@@ -130,10 +144,33 @@ b {
display: none;
}
.hide__xxl {
display: block;
}
@media (min-width: 1720px) {
.hide__xxl {
display: none;
}
}
.show__xxl {
display: none;
}
@media (min-width: 1720px) {
.show__xxl {
display: block;
}
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
.br--xxl {
display: none;
}
}
.presentation {
@@ -144,6 +181,7 @@ b {
.presentation {
margin-left: 0;
margin-right: 0;
margin-bottom: 160px;
}
}
@@ -155,7 +193,7 @@ b {
background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
background-size: 17.5%, 21.8%, 8.5%, 8.8%;
}
@media (min-width: 1720px) {
@@ -191,6 +229,23 @@ b {
animation: jump 2s ease-in-out infinite;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}
@media (min-width: 1720px) {
.presentation__cards {
max-width: initial;
margin-left: -10px;
margin-right: -10px;
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
@keyframes jump {
0% {
transform: translateY(0px);
@@ -212,15 +267,6 @@ b {
}
}
.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);
@@ -239,11 +285,31 @@ b {
margin-bottom: 5px;
}
@media (min-width: 1720px) {
.cards__img {
width: 100%;
margin-bottom: 15px;
}
}
.cards__desc {
font-weight: 500;
line-height: 22px;
}
@media (min-width: 1720px) {
.cards__desc {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
padding-right: 20px;
}
}
.cards__desc a {
color: var(--color-orange);
}
.cards__arrow {
width: 62px;
height: 20px;
@@ -253,19 +319,45 @@ b {
background-image: url("/static/img/svg/Arrow23.svg");
}
@media (min-width: 1720px) {
.cards__arrow {
right: -45px;
top: -29px;
}
}
.easy {
margin-bottom: 162px;
}
@media (min-width: 1720px) {
.easy {
margin-bottom: 180px;
}
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
@media (min-width: 1720px) {
.easy .title {
max-width: 45%;
margin-bottom: 23px;
}
}
.easy .subtitle {
margin-bottom: 41px;
}
@media (min-width: 1720px) {
.easy .subtitle {
margin-bottom: 59px;
}
}
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -276,6 +368,15 @@ b {
margin-bottom: 46px;
}
@media (min-width: 1720px) {
.easy__grid {
grid-column-gap: 147px;
grid-template-rows: repeat(2, minmax(245px, auto));
grid-row-gap: 136px;
margin-bottom: 63px;
}
}
.easy__item {
border-radius: 30px;
background-color: var(--color-grey);
@@ -291,19 +392,31 @@ b {
padding-bottom: 0;
}
@media (min-width: 1720px) {
.easy__item--fir {
margin-right: -10px;
margin-left: 7px;
padding-top: 31px;
}
}
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
@media (min-width: 1720px) {
.easy__item--fir p {
width: 89%;
margin-bottom: 53px;
}
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--sec {
@@ -314,20 +427,20 @@ b {
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--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: 1720px) {
.easy__item--sec img {
margin-right: -12px;
}
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
.easy__item--thr p {
@@ -342,30 +455,71 @@ b {
z-index: 1;
}
@media (min-width: 1720px) {
.easy__arrow {
scale: 1.4;
}
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
@media (min-width: 1720px) {
.easy__arrow--fir {
right: 104%;
top: 34%;
}
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
@media (min-width: 1720px) {
.easy__arrow--sec {
left: 46%;
top: 124%;
}
}
.easy__btn {
margin-top: -21px;
}
.easy__item--sec p,
.easy__item--thr p,
.easy__item--sec,
.easy__item--thr {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.chatterbox {
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.chatterbox {
margin-bottom: 180px;
}
}
.chatterbox__slider {
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 1720px) {
.chatterbox__slider {
max-width: 1640px;
}
}
.chatterbox__slide {
width: 335px;
height: 615px;
@@ -375,6 +529,14 @@ b {
position: relative;
}
@media (min-width: 1720px) {
.chatterbox__slide {
width: 456px;
height: 836px;
background-size: 456px 836px;
}
}
.chatterbox__slide.loaded video {
opacity: 1;
}
@@ -407,6 +569,12 @@ b {
overflow: hidden;
}
@media (min-width: 1720px) {
.chatterbox__wrap {
border-radius: 50px;
}
}
.chatterbox__vbtn {
position: absolute;
left: 0;
@@ -434,6 +602,13 @@ b {
transition: opacity 100ms linear;
}
@media (min-width: 1720px) {
.chatterbox__vbtn::before {
width: 109px;
height: 109px;
}
}
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
content: "";
position: absolute;
@@ -451,6 +626,13 @@ b {
margin-left: 2px;
}
@media (min-width: 1720px) {
.chatterbox__vbtn::after {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
}
.chatterbox__vbox {
position: relative;
display: flex;
@@ -459,6 +641,12 @@ b {
height: 600px;
}
@media (min-width: 1720px) {
.chatterbox__vbox {
height: 827px;
}
}
.chatterbox .title {
margin-bottom: 60px;
}
@@ -490,12 +678,25 @@ b {
margin-bottom: 123px;
}
@media (min-width: 1720px) {
.use {
margin-bottom: 184px;
}
}
.use__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
}
@media (min-width: 1720px) {
.use__img {
width: 50.2%;
margin-left: 27px;
}
}
.use__btn {
margin-bottom: 11px;
}
@@ -512,21 +713,22 @@ b {
margin-bottom: 49px;
}
.use--diff .title {
width: 60%;
margin-bottom: 60px;
}
.use--diff .use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
@media (min-width: 1720px) {
.use .title {
max-width: 40%;
}
}
.use--lett {
margin-bottom: 120px;
}
@media (min-width: 1720px) {
.use--lett {
margin-bottom: 140px;
}
}
.use--lett .title {
margin-bottom: 51px;
}
@@ -538,6 +740,172 @@ b {
width: 1290px;
}
@media (min-width: 1720px) {
.use--lett .use__img {
width: initial;
}
}
.diff {
margin-bottom: 166px;
}
@media (min-width: 1720px) {
.diff {
margin-bottom: 172px;
}
}
.diff .title {
width: 60%;
margin-bottom: 65px;
}
@media (min-width: 1720px) {
.diff .title {
width: 49%;
margin-bottom: 60px;
}
}
.diff__grid {
display: flex;
position: relative;
margin-bottom: 30px;
}
.diff__grid::before {
content: '';
position: absolute;
height: 96%;
width: 5px;
border-radius: 5px;
background-color: #EDEDED;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.diff__coll {
width: 50%;
}
.diff__coll.left {
margin-right: 29px;
}
.diff__coll.left .diff__coll-title {
padding-left: 39px;
}
@media (min-width: 1720px) {
.diff__coll.left .diff__coll-title {
padding-left: 24px;
}
}
.diff__coll.right {
margin-left: 29px;
}
.diff__coll.right .diff__coll-title {
padding-right: 39px;
}
@media (min-width: 1720px) {
.diff__coll.right .diff__coll-title {
padding-right: 24px;
}
}
.diff__coll-title {
margin-bottom: 38px;
}
.diff__item {
position: relative;
text-align: left;
padding-left: 10px;
padding-top: 11px;
padding-bottom: 11px;
display: flex;
gap: 11px;
align-items: center;
background-color: #FFFFFF;
border-radius: 15px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
margin-bottom: 35px;
cursor: default;
}
@media (min-width: 1720px) {
.diff__item {
padding-top: 22px;
padding-bottom: 20px;
padding-left: 27px;
gap: 20px;
margin-bottom: 38px;
}
}
.diff__item:last-child {
margin-bottom: 0;
}
.diff__item:hover .diff__status::before {
scale: 1.2;
}
.diff__status {
position: relative;
height: 48px;
width: 48px;
border-radius: 5px;
flex-shrink: 0;
}
@media (min-width: 1720px) {
.diff__status {
border-radius: 12px;
}
}
.diff__status::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 15%;
}
.diff__status::before {
content: '';
width: 36px;
height: 36px;
}
.diff__item--done .diff__status {
background-color: #CCF9D9;
}
.diff__item--done .diff__status::before {
width: 26px;
height: 26px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
.diff__item--error .diff__status {
background-color: #F9CCCC;
}
.diff__item--error .diff__status::before {
width: 36px;
height: 36px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
.animate {
padding: 60px 40px 49px;
opacity: 0;
@@ -547,6 +915,14 @@ b {
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.animate {
padding-top: 100px;
padding-bottom: 89px;
margin-bottom: 180px;
}
}
.animate.left {
transform: translateX(-180px);
}
@@ -555,6 +931,12 @@ b {
transform: translateX(180px);
}
@media (min-width: 1720px) {
.animate.right .title {
max-width: 80%;
}
}
.animate__link {
color: var(--color-orange);
text-decoration: underline !important;
@@ -566,19 +948,45 @@ b {
/*width: 90%;*/
}
@media (min-width: 1720px) {
.animate .title {
margin-bottom: 40px;
}
}
.animate .subtitle {
width: 47%;
margin: 0 auto 23px;
}
@media (min-width: 1720px) {
.animate .subtitle {
line-height: 26px;
letter-spacing: 0.1px;
margin-bottom: 40px;
}
}
.about {
margin-bottom: 168px;
}
@media (min-width: 1720px) {
.about {
margin-bottom: 188px;
}
}
.about .title {
margin-bottom: 60px;
}
@media (min-width: 1720px) {
.about .title {
margin-bottom: 49px;
}
}
.about__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -587,16 +995,29 @@ b {
.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-left: -20px;
margin-top: 8px;
}
@media (min-width: 1720px) {
.about__img {
margin-top: 19px;
}
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
@media (min-width: 1720px) {
.about__right {
padding-top: 90px;
padding-left: 21px;
}
}
.about__half {
max-width: 50%;
float: left;
@@ -611,10 +1032,29 @@ b {
letter-spacing: 0.4px;
}
@media (min-width: 1720px) {
.about b {
font-weight: 700;
letter-spacing: 0;
}
}
@media (min-width: 1720px) {
.about p {
margin-bottom: 39px;
}
}
.benefits {
margin-bottom: 132px;
}
@media (min-width: 1720px) {
.benefits {
margin-bottom: 147px;
}
}
.benefits__grid {
text-align: left;
display: grid;
@@ -627,24 +1067,61 @@ b {
margin-bottom: 22px;
}
@media (min-width: 1720px) {
.benefits__item {
min-height: 145px;
}
}
.benefits__third {
padding-left: 16px;
}
@media (min-width: 1720px) {
.benefits__third {
padding-left: 31px;
margin-right: 5px;
}
}
.benefits .title {
margin-bottom: 76px;
}
@media (min-width: 1720px) {
.benefits .title {
margin-bottom: 93px;
}
}
.benefits img {
position: relative;
top: 14px;
right: -11px;
}
@media (min-width: 1720px) {
.benefits img {
top: -33px;
}
}
@media (min-width: 1720px) {
.benefits h2 {
margin-bottom: 10px;
}
}
.uses {
margin-bottom: 122px;
}
@media (min-width: 1720px) {
.uses {
margin-bottom: 136px;
}
}
.uses__grid {
text-align: left;
display: grid;
@@ -659,10 +1136,24 @@ b {
padding: 0 50px 0 2px;
}
@media (min-width: 1720px) {
.uses__item {
margin-bottom: 22px;
}
}
.uses__icon {
margin-bottom: 11px;
}
@media (min-width: 1720px) {
.uses__icon {
width: 147px;
height: 147px;
margin-bottom: 20px;
}
}
.uses .title {
max-width: 50%;
margin: 0 auto 60px;
@@ -672,22 +1163,54 @@ b {
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.sore {
margin-bottom: 178px;
}
}
.sore__img {
margin: 0 auto 26px;
position: relative;
left: -17px;
}
@media (min-width: 1720px) {
.sore__img {
margin-bottom: 46px;
}
}
.sore .title {
margin-bottom: 40px;
}
@media (min-width: 1720px) {
.sore .title {
margin-bottom: 61px;
}
}
.sore .subtitle {
max-width: 62%;
margin: 0 auto -1px;
}
@media (min-width: 1720px) {
.sore .subtitle {
line-height: 26px;
max-width: 60%;
margin-bottom: 5px;
}
}
.sore .h3 {
max-width: 47%;
margin: 0 auto 19px;
}
@media (min-width: 1720px) {
.sore .h3 {
max-width: 38%;
}
}

77
static/css/moover/about.css Normal file
View File

@@ -0,0 +1,77 @@
.about {
margin-bottom: 168px;
}
@media (min-width: 1720px) {
.about {
margin-bottom: 188px;
}
}
.about .title {
margin-bottom: 60px;
}
@media (min-width: 1720px) {
.about .title {
margin-bottom: 49px;
}
}
.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: -20px;
margin-top: 8px;
}
@media (min-width: 1720px) {
.about__img {
margin-top: 19px;
}
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
@media (min-width: 1720px) {
.about__right {
padding-top: 90px;
padding-left: 21px;
}
}
.about__half {
max-width: 50%;
float: left;
}
.about__half:last-child {
padding-left: 16px;
max-width: 47%;
}
.about b {
letter-spacing: 0.4px;
}
@media (min-width: 1720px) {
.about b {
font-weight: 700;
letter-spacing: 0;
}
}
@media (min-width: 1720px) {
.about p {
margin-bottom: 39px;
}
}

28
static/css/moover/animate.css vendored
View File

@@ -7,6 +7,14 @@
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.animate {
padding-top: 100px;
padding-bottom: 89px;
margin-bottom: 180px;
}
}
.animate.left {
transform: translateX(-180px);
}
@@ -15,6 +23,12 @@
transform: translateX(180px);
}
@media (min-width: 1720px) {
.animate.right .title {
max-width: 80%;
}
}
.animate__link {
color: var(--color-orange);
text-decoration: underline !important;
@@ -26,7 +40,21 @@
/*width: 90%;*/
}
@media (min-width: 1720px) {
.animate .title {
margin-bottom: 40px;
}
}
.animate .subtitle {
width: 47%;
margin: 0 auto 23px;
}
@media (min-width: 1720px) {
.animate .subtitle {
line-height: 26px;
letter-spacing: 0.1px;
margin-bottom: 40px;
}
}

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

@@ -2,6 +2,12 @@
margin-bottom: 132px;
}
@media (min-width: 1720px) {
.benefits {
margin-bottom: 147px;
}
}
.benefits__grid {
text-align: left;
display: grid;
@@ -14,16 +20,47 @@
margin-bottom: 22px;
}
@media (min-width: 1720px) {
.benefits__item {
min-height: 145px;
}
}
.benefits__third {
padding-left: 16px;
}
@media (min-width: 1720px) {
.benefits__third {
padding-left: 31px;
margin-right: 5px;
}
}
.benefits .title {
margin-bottom: 76px;
}
@media (min-width: 1720px) {
.benefits .title {
margin-bottom: 93px;
}
}
.benefits img {
position: relative;
top: 14px;
right: -11px;
}
@media (min-width: 1720px) {
.benefits img {
top: -33px;
}
}
@media (min-width: 1720px) {
.benefits h2 {
margin-bottom: 10px;
}
}

58
static/css/moover/cards.css Normal file
View File

@@ -0,0 +1,58 @@
.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;
}
@media (min-width: 1720px) {
.cards__img {
width: 100%;
margin-bottom: 15px;
}
}
.cards__desc {
font-weight: 500;
line-height: 22px;
}
@media (min-width: 1720px) {
.cards__desc {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
padding-right: 20px;
}
}
.cards__desc a {
color: var(--color-orange);
}
.cards__arrow {
width: 62px;
height: 20px;
position: absolute;
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
}
@media (min-width: 1720px) {
.cards__arrow {
right: -45px;
top: -29px;
}
}

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

@@ -2,11 +2,23 @@
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.chatterbox {
margin-bottom: 180px;
}
}
.chatterbox__slider {
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 1720px) {
.chatterbox__slider {
max-width: 1640px;
}
}
.chatterbox__slide {
width: 335px;
height: 615px;
@@ -16,6 +28,14 @@
position: relative;
}
@media (min-width: 1720px) {
.chatterbox__slide {
width: 456px;
height: 836px;
background-size: 456px 836px;
}
}
.chatterbox__slide.loaded video {
opacity: 1;
}
@@ -48,6 +68,12 @@
overflow: hidden;
}
@media (min-width: 1720px) {
.chatterbox__wrap {
border-radius: 50px;
}
}
.chatterbox__vbtn {
position: absolute;
left: 0;
@@ -75,6 +101,13 @@
transition: opacity 100ms linear;
}
@media (min-width: 1720px) {
.chatterbox__vbtn::before {
width: 109px;
height: 109px;
}
}
.chatterbox__vbtn::before, .chatterbox__vbtn::after {
content: "";
position: absolute;
@@ -92,6 +125,13 @@
margin-left: 2px;
}
@media (min-width: 1720px) {
.chatterbox__vbtn::after {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
}
.chatterbox__vbox {
position: relative;
display: flex;
@@ -100,6 +140,12 @@
height: 600px;
}
@media (min-width: 1720px) {
.chatterbox__vbox {
height: 827px;
}
}
.chatterbox .title {
margin-bottom: 60px;
}

159
static/css/moover/diff.css Normal file
View File

@@ -0,0 +1,159 @@
.diff {
margin-bottom: 166px;
}
@media (min-width: 1720px) {
.diff {
margin-bottom: 172px;
}
}
.diff .title {
width: 60%;
margin-bottom: 65px;
}
@media (min-width: 1720px) {
.diff .title {
width: 49%;
margin-bottom: 60px;
}
}
.diff__grid {
display: flex;
position: relative;
margin-bottom: 30px;
}
.diff__grid::before {
content: '';
position: absolute;
height: 96%;
width: 5px;
border-radius: 5px;
background-color: #EDEDED;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
.diff__coll {
width: 50%;
}
.diff__coll.left {
margin-right: 29px;
}
.diff__coll.left .diff__coll-title {
padding-left: 39px;
}
@media (min-width: 1720px) {
.diff__coll.left .diff__coll-title {
padding-left: 24px;
}
}
.diff__coll.right {
margin-left: 29px;
}
.diff__coll.right .diff__coll-title {
padding-right: 39px;
}
@media (min-width: 1720px) {
.diff__coll.right .diff__coll-title {
padding-right: 24px;
}
}
.diff__coll-title {
margin-bottom: 38px;
}
.diff__item {
position: relative;
text-align: left;
padding-left: 10px;
padding-top: 11px;
padding-bottom: 11px;
display: flex;
gap: 11px;
align-items: center;
background-color: #FFFFFF;
border-radius: 15px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
margin-bottom: 35px;
cursor: default;
}
@media (min-width: 1720px) {
.diff__item {
padding-top: 22px;
padding-bottom: 20px;
padding-left: 27px;
gap: 20px;
margin-bottom: 38px;
}
}
.diff__item:last-child {
margin-bottom: 0;
}
.diff__item:hover .diff__status::before {
scale: 1.2;
}
.diff__status {
position: relative;
height: 48px;
width: 48px;
border-radius: 5px;
flex-shrink: 0;
}
@media (min-width: 1720px) {
.diff__status {
border-radius: 12px;
}
}
.diff__status::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 15%;
}
.diff__status::before {
content: '';
width: 36px;
height: 36px;
}
.diff__item--done .diff__status {
background-color: #CCF9D9;
}
.diff__item--done .diff__status::before {
width: 26px;
height: 26px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}
.diff__item--error .diff__status {
background-color: #F9CCCC;
}
.diff__item--error .diff__status::before {
width: 36px;
height: 36px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
}

172
static/css/moover/easy.css Normal file
View File

@@ -0,0 +1,172 @@
.easy {
margin-bottom: 162px;
}
@media (min-width: 1720px) {
.easy {
margin-bottom: 180px;
}
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
@media (min-width: 1720px) {
.easy .title {
max-width: 45%;
margin-bottom: 23px;
}
}
.easy .subtitle {
margin-bottom: 41px;
}
@media (min-width: 1720px) {
.easy .subtitle {
margin-bottom: 59px;
}
}
.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;
}
@media (min-width: 1720px) {
.easy__grid {
grid-column-gap: 147px;
grid-template-rows: repeat(2, minmax(245px, auto));
grid-row-gap: 136px;
margin-bottom: 63px;
}
}
.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;
}
@media (min-width: 1720px) {
.easy__item--fir {
margin-right: -10px;
margin-left: 7px;
padding-top: 31px;
}
}
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
@media (min-width: 1720px) {
.easy__item--fir p {
width: 89%;
margin-bottom: 53px;
}
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
@media (min-width: 1720px) {
.easy__item--sec img {
margin-right: -12px;
}
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
.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;
}
@media (min-width: 1720px) {
.easy__arrow {
scale: 1.4;
}
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
@media (min-width: 1720px) {
.easy__arrow--fir {
right: 104%;
top: 34%;
}
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
@media (min-width: 1720px) {
.easy__arrow--sec {
left: 46%;
top: 124%;
}
}
.easy__btn {
margin-top: -21px;
}
.easy__item--sec p,
.easy__item--thr p,
.easy__item--sec,
.easy__item--thr {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}

29
static/css/moover/presentation.css
View File

@@ -6,6 +6,7 @@
.presentation {
margin-left: 0;
margin-right: 0;
margin-bottom: 160px;
}
}
@@ -17,7 +18,7 @@
background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
background-size: 17.5%, 21.8%, 8.5%, 8.8%;
}
@media (min-width: 1720px) {
@@ -53,6 +54,23 @@
animation: jump 2s ease-in-out infinite;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}
@media (min-width: 1720px) {
.presentation__cards {
max-width: initial;
margin-left: -10px;
margin-right: -10px;
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
@keyframes jump {
0% {
transform: translateY(0px);
@@ -73,12 +91,3 @@
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}

41
static/css/moover/root.css
View File

@@ -58,6 +58,13 @@ h2, .h2 {
margin-bottom: 10px;
}
@media (min-width: 1720px) {
h2, .h2 {
font-size: 28px;
margin-bottom: 20px;
}
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
@@ -75,6 +82,13 @@ p {
margin-bottom: 20px;
}
@media (min-width: 1720px) {
p {
font-size: 20px;
line-height: 26px;
}
}
b {
font-weight: 500;
}
@@ -109,7 +123,7 @@ b {
@media (min-width: 1720px) {
.title {
font-size: 44px;
font-size: 48px;
margin-bottom: 22px;
}
}
@@ -122,7 +136,7 @@ b {
@media (min-width: 1720px) {
.subtitle {
font-size: 20px;
margin-bottom: 97px;
margin-bottom: 105px;
}
}
@@ -130,8 +144,31 @@ b {
display: none;
}
.hide__xxl {
display: block;
}
@media (min-width: 1720px) {
.hide__xxl {
display: none;
}
}
.show__xxl {
display: none;
}
@media (min-width: 1720px) {
.show__xxl {
display: block;
}
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
.br--xxl {
display: none;
}
}

32
static/css/moover/sore.css
View File

@@ -2,22 +2,54 @@
margin-bottom: 160px;
}
@media (min-width: 1720px) {
.sore {
margin-bottom: 178px;
}
}
.sore__img {
margin: 0 auto 26px;
position: relative;
left: -17px;
}
@media (min-width: 1720px) {
.sore__img {
margin-bottom: 46px;
}
}
.sore .title {
margin-bottom: 40px;
}
@media (min-width: 1720px) {
.sore .title {
margin-bottom: 61px;
}
}
.sore .subtitle {
max-width: 62%;
margin: 0 auto -1px;
}
@media (min-width: 1720px) {
.sore .subtitle {
line-height: 26px;
max-width: 60%;
margin-bottom: 5px;
}
}
.sore .h3 {
max-width: 47%;
margin: 0 auto 19px;
}
@media (min-width: 1720px) {
.sore .h3 {
max-width: 38%;
}
}

38
static/css/moover/use.css
View File

@@ -2,12 +2,25 @@
margin-bottom: 123px;
}
@media (min-width: 1720px) {
.use {
margin-bottom: 184px;
}
}
.use__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
}
@media (min-width: 1720px) {
.use__img {
width: 50.2%;
margin-left: 27px;
}
}
.use__btn {
margin-bottom: 11px;
}
@@ -24,21 +37,22 @@
margin-bottom: 49px;
}
.use--diff .title {
width: 60%;
margin-bottom: 60px;
}
.use--diff .use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
@media (min-width: 1720px) {
.use .title {
max-width: 40%;
}
}
.use--lett {
margin-bottom: 120px;
}
@media (min-width: 1720px) {
.use--lett {
margin-bottom: 140px;
}
}
.use--lett .title {
margin-bottom: 51px;
}
@@ -49,3 +63,9 @@
max-width: 110%;
width: 1290px;
}
@media (min-width: 1720px) {
.use--lett .use__img {
width: initial;
}
}

20
static/css/moover/uses.css
View File

@@ -2,6 +2,12 @@
margin-bottom: 122px;
}
@media (min-width: 1720px) {
.uses {
margin-bottom: 136px;
}
}
.uses__grid {
text-align: left;
display: grid;
@@ -16,10 +22,24 @@
padding: 0 50px 0 2px;
}
@media (min-width: 1720px) {
.uses__item {
margin-bottom: 22px;
}
}
.uses__icon {
margin-bottom: 11px;
}
@media (min-width: 1720px) {
.uses__icon {
width: 147px;
height: 147px;
margin-bottom: 20px;
}
}
.uses .title {
max-width: 50%;
margin: 0 auto 60px;

BIN
static/img/png/about-1920.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
static/img/png/benefits-1920.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 257 KiB

BIN
static/img/png/sender-card1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
static/img/png/sender-card2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
static/img/png/sender-card3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/img/png/sore-1920.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

0
static/img/png/sore2.png → static/img/png/sore.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
static/img/png/use-letters-1920.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 622 KiB

1
styles/moover.scss
View File

@@ -4,6 +4,7 @@
@import "./moover/easy";
@import "./moover/chatterbox";
@import "./moover/use";
@import "./moover/diff";
@import "./moover/animate";
@import "./moover/about";
@import "./moover/benefits";

92
styles/moover/about.scss
View File

@@ -1,42 +1,70 @@
.about {
margin-bottom: 168px;
}
.about .title {
margin-bottom: 60px;
}
@media (min-width: 1720px) {
margin-bottom: 188px;
}
.about__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.title {
margin-bottom: 60px;
.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;
}
@media (min-width: 1720px) {
margin-bottom: 49px;
}
}
.about__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
}
&__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
.about__half {
max-width: 50%;
float: left;
}
}
.about__half:last-child {
padding-left: 16px;
max-width: 47%;
}
&__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: -20px;
margin-top: 8px;
.about b {
letter-spacing: 0.4px;
@media (min-width: 1720px) {
margin-top: 19px;
}
}
&__right {
text-align: left;
padding-top: 43px;
padding-left: 50px;
@media (min-width: 1720px) {
padding-top: 90px;
padding-left: 21px;
}
}
&__half {
max-width: 50%;
float: left;
&:last-child {
padding-left: 16px;
max-width: 47%;
}
}
b {
letter-spacing: 0.4px;
@media (min-width: 1720px) {
font-weight: 700;
letter-spacing: 0;
}
}
p {
@media (min-width: 1720px) {
margin-bottom: 39px;
}
}
}

22
styles/moover/animate.scss vendored
View File

@@ -6,12 +6,24 @@
color: white;
margin-bottom: 160px;
@media (min-width: 1720px) {
padding-top: 100px;
padding-bottom: 89px;
margin-bottom: 180px;
}
&.left {
transform: translateX(-180px);
}
&.right {
transform: translateX(180px);
.title {
@media (min-width: 1720px) {
max-width: 80%;
}
}
}
&__link {
@@ -23,10 +35,20 @@
margin-bottom: 25px;
max-width: 87%;
/*width: 90%;*/
@media (min-width: 1720px) {
margin-bottom: 40px;
}
}
.subtitle {
width: 47%;
margin: 0 auto 23px;
@media (min-width: 1720px) {
line-height: 26px;
letter-spacing: 0.1px;
margin-bottom: 40px;
}
}
}

27
styles/moover/benefits.scss
View File

@@ -1,6 +1,10 @@
.benefits {
margin-bottom: 132px;
@media (min-width: 1720px) {
margin-bottom: 147px;
}
&__grid {
text-align: left;
display: grid;
@@ -11,19 +15,42 @@
min-height: 122px;
padding-right: 7px;
margin-bottom: 22px;
@media (min-width: 1720px) {
min-height: 145px;
}
}
&__third {
padding-left: 16px;
@media (min-width: 1720px) {
padding-left: 31px;
margin-right: 5px;
}
}
.title {
margin-bottom: 76px;
@media (min-width: 1720px) {
margin-bottom: 93px;
}
}
img {
position: relative;
top: 14px;
right: -11px;
@media (min-width: 1720px) {
top: -33px;
}
}
h2 {
@media (min-width: 1720px) {
margin-bottom: 10px;
}
}
}

21
styles/moover/cards.scss
View File

@@ -17,11 +17,27 @@
.cards__img {
margin-bottom: 5px;
@media (min-width: 1720px) {
width: 100%;
margin-bottom: 15px;
}
}
.cards__desc {
font-weight: 500;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
padding-left: 20px;
padding-right: 20px;
}
a {
color: var(--color-orange);
}
}
.cards__arrow {
@@ -31,4 +47,9 @@
right: -30px;
top: -21px;
background-image: url("/static/img/svg/Arrow23.svg");
@media (min-width: 1720px) {
right: -45px;
top: -29px;
}
}

32
styles/moover/chatterbox.scss
View File

@@ -1,9 +1,17 @@
.chatterbox {
margin-bottom: 160px;
@media (min-width: 1720px) {
margin-bottom: 180px;
}
&__slider {
max-width: 1200px;
margin: 0 auto;
@media (min-width: 1720px) {
max-width: 1640px;
}
}
&__slide {
@@ -14,6 +22,12 @@
margin: auto;
position: relative;
@media (min-width: 1720px) {
width: 456px;
height: 836px;
background-size: 456px 836px;
}
&.loaded {
video {
opacity: 1;
@@ -47,6 +61,10 @@
border-radius: 25px;
background-color: grey;
overflow: hidden;
@media (min-width: 1720px) {
border-radius: 50px;
}
}
&__vbtn {
@@ -73,6 +91,11 @@
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;
@media (min-width: 1720px) {
width: 109px;
height: 109px;
}
}
&::before,
@@ -91,6 +114,11 @@
border-width: 15px 0 15px 25px;
display: inline-block;
margin-left: 2px;
@media (min-width: 1720px) {
border-width: 23px 0 23px 35px;
margin-left: 4px;
}
}
}
@@ -100,6 +128,10 @@
justify-content: center;
align-items: center;
height: 600px;
@media (min-width: 1720px) {
height: 827px;
}
}
.title {

154
styles/moover/diff.scss Normal file
View File

@@ -0,0 +1,154 @@
.diff {
margin-bottom: 166px;
@media (min-width: 1720px) {
margin-bottom: 172px;
}
.title {
width: 60%;
margin-bottom: 65px;
@media (min-width: 1720px) {
width: 49%;
margin-bottom: 60px;
}
}
&__grid {
display: flex;
position: relative;
margin-bottom: 30px;
&::before {
content: '';
position: absolute;
height: 96%;
width: 5px;
border-radius: 5px;
background-color: #EDEDED;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
}
&__coll {
width: 50%;
&.left {
margin-right: 29px;
.diff__coll-title {
padding-left: 39px;
@media (min-width: 1720px) {
padding-left: 24px;
}
}
}
&.right {
margin-left: 29px;
.diff__coll-title {
padding-right: 39px;
@media (min-width: 1720px) {
padding-right: 24px;
}
}
}
}
&__coll-title {
margin-bottom: 38px;
}
&__item {
position: relative;
text-align: left;
padding-left: 10px;
padding-top: 11px;
padding-bottom: 11px;
display: flex;
gap: 11px;
align-items: center;
background-color: #FFFFFF;
border-radius: 15px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
margin-bottom: 35px;
cursor: default;
@media (min-width: 1720px) {
padding-top: 22px;
padding-bottom: 20px;
padding-left: 27px;
gap: 20px;
margin-bottom: 38px;
}
&:last-child {
margin-bottom: 0;
}
&:hover {
.diff__status::before {
scale: 1.2;
}
}
}
&__status {
position: relative;
height: 48px;
width: 48px;
border-radius: 5px;
flex-shrink: 0;
@media (min-width: 1720px) {
border-radius: 12px;
}
&::before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 15%;
}
&::before {
content: '';
width: 36px;
height: 36px;
}
.diff__item--done & {
background-color: #CCF9D9;
&::before {
width: 26px;
height: 26px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
}
}
.diff__item--error & {
background-color: #F9CCCC;
&::before {
width: 36px;
height: 36px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
}
}
}
}

214
styles/moover/easy.scss
View File

@@ -1,64 +1,148 @@
.easy {
margin-bottom: 162px;
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
@media (min-width: 1720px) {
margin-bottom: 180px;
}
.easy .subtitle {
margin-bottom: 41px;
}
.title {
max-width: 55%;
margin-bottom: 21px;
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
@media (min-width: 1720px) {
max-width: 45%;
margin-bottom: 23px;
}
}
.subtitle {
margin-bottom: 41px;
@media (min-width: 1720px) {
margin-bottom: 59px;
}
}
&__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;
}
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);
}
@media (min-width: 1720px) {
grid-column-gap: 147px;
grid-template-rows: repeat(2, minmax(245px, auto));
grid-row-gap: 136px;
margin-bottom: 63px;
}
}
.easy__item--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
}
&__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 p {
width: 93%;
margin-bottom: 29px;
}
&--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
@media (min-width: 1720px) {
margin-right: -10px;
margin-left: 7px;
padding-top: 31px;
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
p {
width: 93%;
margin-bottom: 29px;
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: 1720px) {
width: 89%;
margin-bottom: 53px;
}
}
}
&--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
&--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
img {
margin-bottom: -10px;
margin-right: -5px;
@media (min-width: 1720px) {
margin-right: -12px;
}
}
}
&--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
&--thr p {
max-width: 50%;
}
}
&__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
@media (min-width: 1720px) {
scale: 1.4;
}
&--fir {
top: 46%;
right: 101%;
@media (min-width: 1720px) {
right: 104%;
top: 34%;
}
}
&--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
@media (min-width: 1720px) {
left: 46%;
top: 124%;
}
}
}
&__btn {
margin-top: -21px;
}
}
.easy__item--sec p,
@@ -69,37 +153,3 @@
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;
}

117
styles/moover/presentation.scss
View File

@@ -4,61 +4,77 @@
@media (min-width: 1720px) {
margin-left: 0;
margin-right: 0;
margin-bottom: 160px;
}
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/png/Box9.png),
url(/static/img/png/Box10.png),
url(/static/img/png/Box11.png),
url(/static/img/png/Box12.png);
background-position: top -4px left 46px,
top -30px right -14px,
bottom 73px left 278px,
bottom 71px right 276px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
&__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/png/Box9.png),
url(/static/img/png/Box10.png),
url(/static/img/png/Box11.png),
url(/static/img/png/Box12.png);
background-position: top -4px left 46px,
top -30px right -14px,
bottom 73px left 278px,
bottom 71px right 276px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-size: 17.5%, 21.8%, 8.5%, 8.8%;
@media (min-width: 1720px) {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px,
top -31px right 20px,
bottom 8px left 347px,
bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
@media (min-width: 1720px) {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px,
top -31px right 20px,
bottom 8px left 347px,
bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
}
}
}
.presentation__title {
margin-bottom: 23px;
}
&__title {
margin-bottom: 23px;
}
.presentation__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
&__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
.presentation__btn {
margin-bottom: 40px;
}
&__btn {
margin-bottom: 40px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
&__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
&__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
&__cards {
max-width: 1300px;
margin: 0 auto;
@media (min-width: 1720px) {
max-width: initial;
margin-left: -10px;
margin-right: -10px;
}
}
&__bottom .presentation__title {
margin-bottom: 13px;
}
}
@keyframes jump {
@@ -81,12 +97,3 @@
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}

50
styles/moover/root.scss
View File

@@ -60,6 +60,11 @@ h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
@media (min-width: 1720px) {
font-size: 28px;
margin-bottom: 20px;
}
}
h3, .h3 {
@@ -77,6 +82,11 @@ h4, .h4 {
p {
line-height: 22px;
margin-bottom: 20px;
@media (min-width: 1720px) {
font-size: 20px;
line-height: 26px;
}
}
b {
@@ -111,9 +121,9 @@ b {
margin-left: auto;
margin-right: auto;
@media (min-width: 1720px) {
font-size: 44px;
margin-bottom: 22px;
@media (min-width: 1720px) {
font-size: 48px;
margin-bottom: 22px;
}
}
@@ -121,18 +131,44 @@ b {
margin-bottom: 81px;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
margin-bottom: 97px;
@media (min-width: 1720px) {
font-size: 20px;
margin-bottom: 105px;
}
}
.hide {
display: none;
&__xxl {
display: block;
@media (min-width: 1720px) {
display: none;
}
}
}
.show {
&__xxl {
display: none;
@media (min-width: 1720px) {
display: block;
}
}
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}
.br {
&--xxl {
display: none;
}
}
}

21
styles/moover/sore.scss
View File

@@ -1,15 +1,26 @@
.sore {
margin-bottom: 160px;
@media (min-width: 1720px) {
margin-bottom: 178px;
}
&__img {
margin: 0 auto 26px;
position: relative;
left: -17px;
@media (min-width: 1720px) {
margin-bottom: 46px;
}
}
.title {
margin-bottom: 40px;
@media (min-width: 1720px) {
margin-bottom: 61px;
}
}
@@ -17,11 +28,19 @@
max-width: 62%;
margin: 0 auto -1px;
@media (min-width: 1720px) {
line-height: 26px;
max-width: 60%;
margin-bottom: 5px;
}
}
.h3 {
max-width: 47%;
margin: 0 auto 19px;
margin: 0 auto 19px;
@media (min-width: 1720px) {
max-width: 38%;
}
}
}

31
styles/moover/use.scss
View File

@@ -1,10 +1,19 @@
.use {
margin-bottom: 123px;
@media (min-width: 1720px) {
margin-bottom: 184px;
}
&__img {
width: 67.5%;
margin-left: 16px;
margin-bottom: 31px;
@media (min-width: 1720px) {
width: 50.2%;
margin-left: 27px;
}
}
&__btn {
@@ -21,24 +30,20 @@
.title {
max-width: 80%;
margin-bottom: 49px;
}
&--diff {
.title {
width: 60%;
margin-bottom: 60px;
}
.use__img {
width: 100%;
margin-left: 0;
margin-bottom: 17px;
@media (min-width: 1720px) {
max-width: 40%;
}
}
&--lett {
margin-bottom: 120px;
@media (min-width: 1720px) {
margin-bottom: 140px;
}
.title {
margin-bottom: 51px;
}
@@ -48,6 +53,10 @@
margin-right: -5px;
max-width: 110%;
width: 1290px;
@media (min-width: 1720px) {
width: initial;
}
}
}
}

17
styles/moover/uses.scss
View File

@@ -1,12 +1,18 @@
.uses {
margin-bottom: 122px;
@media (min-width: 1720px) {
margin-bottom: 136px;
}
&__grid {
text-align: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
/* max-width: 101.5%; */
/* width: 101.5%; */
}
@@ -14,12 +20,23 @@
min-height: 50px;
margin-bottom: 43px;
padding: 0 50px 0 2px;
@media (min-width: 1720px) {
margin-bottom: 22px;
}
}
&__icon {
margin-bottom: 11px;
@media (min-width: 1720px) {
width: 147px;
height: 147px;
margin-bottom: 20px;
}
}
.title {
max-width: 50%;
margin: 0 auto 60px;

26
templates/blocks/n_header.html Normal file
View File

@@ -0,0 +1,26 @@
{% load i18n %}
{% load base_tags_extra %}
{% load webpush_notifications %}
</div>
<header id="header_bg" class="header">
<div class="header__logo">
</div>
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#benefits" class="header__link">Преимущества</a>
</li>
<li class="header__item">
<a href="#rewiews" class="header__link">Отзывы</a>
</li>
<li class="header__item">
<a href="#howtowork" class="header__link">Как это работает</a>
</li>
<li class="header__item">
<a href="#about" class="header__link">О сервисе</a>
</li>
</ul>
</nav>
</header>

337
templates/pages/p_mover_landing_page.html
View File

@@ -47,8 +47,8 @@
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/image1.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария, хочет отправить<br class='br1'/> посылку, но её не устраивает<br class='br1'/> цена доставки почтовых<br class='br1'/>" %}
{% translate "сервисов и она устала искать в<br class='br1'/> чатах тех, кто сможет перевезти<br class='br1'/> посылку." %}
{% translate "Мария, хочет отправить<br class='br--xxl'/> посылку, но её не устраивает<br class='br--xxl'/> цена доставки почтовых<br class='br1'/>" %}
{% translate "сервисов и она устала искать в<br class='br--xxl'/> чатах тех, кто сможет перевезти<br class='br--xxl'/> посылку." %}
</p>
</div>
<div class="cards__item">
@@ -58,20 +58,20 @@
{% translate "Мария, узнаёт о нашем сервисе<br class='br1'/>" %}
<a href="/">TripWB.com. </a>
{% translate "Регистрируется<br class='br1'/> и очень быстро размещает<br class='br1'/> объявление." %}
{% translate "Регистрируется<br class='br--xxl'/> и очень быстро размещает<br class='br--xxl'/> объявление." %}
</p>
</div>
<div class="cards__item">
<div class="cards__arrow"></div>
<img class="cards__img" src="{% static "img/webp/image3.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Попутчик Егор увидел<br class='br1'/> объявление Марии, нажал<br class='br1'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br1'/> удобным для него способом." %}
{% translate "Попутчик Егор увидел<br class='br--xxl'/> объявление Марии, нажал<br class='br--xxl'/> откликнуться и получил<br class='br1'/> возможность связаться с ней,<br class='br--xxl'/> удобным для него способом." %}
</p>
</div>
<div class="cards__item">
<img class="cards__img" src="{% static "img/webp/image4.webp" %}" alt="img1"/>
<p class="cards__desc">
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br1'/> чего Мария передала посылку<br class='br1'/> Егору и он её доставил." %}
{% translate "Мария и Егор обговорили детали<br class='br1'/> доставки и потом встретились в<br class='br1'/> удобном для всех месте. После<br class='br--xxl'/> чего Мария передала посылку<br class='br--xxl'/> Егору и он её доставил." %}
</p>
</div>
</div>
@@ -89,17 +89,18 @@
<div class="easy__item easy__item--fir">
<h2>{% translate "Один простой шаг" %}</h2>
<p>{% translate "За пару кликов <b>размещаешь объявление</b> на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}</p>
<img src="{% static 'img/webp/sender-card1.webp' %}" alt="sender1">
<img src="{% static 'img/png/sender-card1.png' %}" alt="sender1">
</div>
<div class="easy__item easy__item--sec">
<div class="easy__arrow easy__arrow--fir"></div>
<div class="easy__arrow easy__arrow--sec"></div>
<p>{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
<img src="{% static 'img/webp/sender-card2.webp' %}" alt="sender1">
<img src="{% static 'img/png/sender-card2.png' %}" alt="sender1">
</div>
<div class="easy__item easy__item--thr">
<p>{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
<img src="{% static 'img/webp/sender-card3.webp' %}" alt="sender1">
<p class="hide__xxl">{% translate "Тебе остаётся только выбрать перевозчика, связаться и&nbsp;обсудить детали перевозки." %}</p>
<p class="show__xxl">{% translate "Попутчики видят твое объявление и&nbsp;оставляют отклики на&nbsp;него." %}</p>
<img src="{% static 'img/png/sender-card3.png' %}" alt="sender1">
</div>
</div>
@@ -118,119 +119,172 @@
<br/>
<a href="#registr" class="use__link">{% translate "Зарегистрироваться" %}</a>
</section>
<section class="use use--diff">
<section class="diff">
<div class="title">{% translate "Чем мы отличаемся от классических почтовых сервисов" %}</div>
<img src="{% static "img/webp/diff.webp" %}" alt="list differences" class="use__img">
<div class="diff__grid">
<div class="diff__coll left">
<div class="diff__coll-title h2">
Trip With Bonus
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Стоимость перевозки назначаете сами
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Возможность контакта с перевозчиком в режиме онлайн
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Встреча с перевозчиком в удобном для вас месте
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Без дополнительных платежей и комиссий за параметры посылки
</div>
<div class="diff__item diff__item--done">
<div class="diff__status"></div>
Вы сами выбираете оптимальный маршрут и время доставки
</div>
</div>
<div class="diff__coll right">
<div class="diff__coll-title h2">
Другие почтовые сервисы
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Стоимость перевозки назначает сервис
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Автоматический трекинг не всегда даёт актуальную информацию
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Нужно ехать только в пункт отправки посылки
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Дополнительная стоимость за разные параметры посылки
</div>
<div class="diff__item diff__item--error">
<div class="diff__status"></div>
Посылка может перевозиться долго и с большим количеством перегрузок
</div>
</div>
</div>
</section>
<section class="chatterbox">
<section class="chatterbox" >
<div class="title">{% translate "Что о нас говорят люди" %}</div>
<div class="chatterbox__slider slick-slider">
{% for media_item in page.get_media_items %}
<div class="slick-slide">
<div class="chatterbox__slide">
<div class="chatterbox__vbtn"></div>
<div class="chatterbox__wrap">
<div class="chatterbox__vbox">
<img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">
<video
data-src="{{ MEDIA_URL }}{{ media_item.video }}"
poster="{{ MEDIA_URL }}{{ media_item.picture }}"
controls
autoplay
></video>
</div>
</div>
{# {% for media_item in page.get_media_items %}#}
{# <div class="slick-slide">#}
{# <div class="chatterbox__slide">#}
{# <div class="chatterbox__vbtn"></div>#}
{# <div class="chatterbox__wrap">#}
{# <div class="chatterbox__vbox">#}
{# <img src="{{ MEDIA_URL }}{{ media_item.picture }}" alt="user" class="chatterbox__poster">#}
{# <video#}
{# data-src="{{ MEDIA_URL }}{{ media_item.video }}"#}
{# poster="{{ MEDIA_URL }}{{ media_item.picture }}"#}
{# 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">
<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>
{% 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>#}
{##}
{# </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 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>#}
{# <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/5.mp4"#}
{# poster="/media/media_items/image/ava2.jpg"#}
{# controls#}
{# autoplay#}
{# >#}
{# </video>#}
{# </div>#}
{# </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/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 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>
<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/5.mp4"
poster="/media/media_items/image/ava2.jpg"
controls
autoplay
>
</video>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
@@ -292,9 +346,12 @@
});
</script>
</section>
<section class="use use--lett">
<section class="use use--lett" id="rewiews">
<div class="title">{% translate "Что о нас пишут люди" %}</div>
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
<picture>
<source srcset="{% static "img/png/use-letters-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "img/png/use-letterss.png" %}" alt="list letters" class="use__img">
</picture>
</section>
<section class="animate left">
<div class="title">
@@ -331,10 +388,14 @@
});
</script>
</section>
<section class="about">
<section class="about" id="about">
<div class="title">{% translate "О сервисе Trip With Bonus" %}</div>
<div class="about__grid">
<img src="{% static "/img/png/about.png" %}" alt="" class="about__img">
<picture class="about__img">
<source srcset="{% static "img/png/about-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/about.png" %}" alt="about">
</picture>
{# <img src="{% static "/img/png/about.png" %}" alt="about" class="about__img">#}
<div class="about__right">
<p>{% translate "TripWB&nbsp;- это сервис попутных посылок, который <b>соединяет отправителя посылки</b> того, кому нужно что-то передать в&nbsp;другой город или страну, и&nbsp;<b>перевозчика посылки</b>, а&nbsp;именно попутчика или путешественника, который следует по&nbsp;пути назначения." %}</p>
<p>{% translate "<b>Тебе не&nbsp;нужно больше бежать в&nbsp;чаты и&nbsp;группы</b> в&nbsp;социальных сетях и&nbsp;искать тех, кто сможет перевезти посылку, а&nbsp;достаточно просто зайти на&nbsp;сайт, разместить объявление в&nbsp;пару кликов и&nbsp;дождаться откликов от&nbsp;попутчиков." %}
@@ -344,7 +405,7 @@
</div>
{# </div>#}
</section>
<section class="benefits">
<section class="benefits" id="benefits">
<div class="title">{% translate "Преимущества сервиса" %}</div>
<div class="benefits__grid">
<div class="benefits__first">
@@ -362,7 +423,10 @@
</div>
</div>
<div class="benefits__second">
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
<picture>
<source srcset="{% static "img/png/benefits-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/benefits.png" %}" alt="benefits">
</picture>
</div>
<div class="benefits__third">
<div class="benefits__item">
@@ -386,39 +450,39 @@
<div class="uses__grid">
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/files.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нужно отправить документы партнеру или родственнику" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/box.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда необходимо отправить посылку в&nbsp;другую страну" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/present.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/bax.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/books.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нужно отправить не&nbsp;только маленькую посылку, но&nbsp;и&nbsp;крупногабаритный груз" %}
</div>
</p>
</div>
<div class="uses__item">
<img class="uses__icon" src="{% static "img/svg/earth.svg" %}" alt="image icon">
<div class="uses__desc">
<p class="uses__desc">
{% translate "Когда нет прямого сообщения из&nbsp;пункта&nbsp;А в&nbsp;пункт&nbsp;Б обычными сервисами доставки" %}
</div>
</p>
</div>
</div>
</section>
@@ -438,7 +502,10 @@
<div class="subtitle">
{% translate "Мы&nbsp;знаем, каково это без конца и&nbsp;края закидывать сообщения в&nbsp;чаты и&nbsp;группы в&nbsp;социальных сетях, в&nbsp;надежде найти человека, который едет или летит в&nbsp;нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и&nbsp;стоимость пересылки в&nbsp;обычных почтовых сервисах выше стоимости самой посылки." %}
</div>
<img src="{% static "img/png/sore2.png" %}" alt="sore image" class="sore__img">
<picture>
<source srcset="{% static "img/png/sore-1920.png" %}" media="(min-width: 1720px)"/>
<img src="{% static "/img/png/sore.png" %}" alt="sore image" class="sore__img">
</picture>
<div class="h3">
{% translate "Зарегистрируйте бесплатно прямо сейчас и&nbsp;размести свое первое объявление об&nbsp;отправке посылки" %}
</div>