diff --git a/static/css/moover.css b/static/css/moover.css
index 7b091e5..a57054c 100644
--- a/static/css/moover.css
+++ b/static/css/moover.css
@@ -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%;
+ }
+}
diff --git a/static/css/moover/about.css b/static/css/moover/about.css
new file mode 100644
index 0000000..3af5c71
--- /dev/null
+++ b/static/css/moover/about.css
@@ -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;
+ }
+}
diff --git a/static/css/moover/animate.css b/static/css/moover/animate.css
index f3eb592..9a14c2d 100644
--- a/static/css/moover/animate.css
+++ b/static/css/moover/animate.css
@@ -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;
+ }
+}
diff --git a/static/css/moover/benefits.css b/static/css/moover/benefits.css
index fd502f0..fdc7f70 100644
--- a/static/css/moover/benefits.css
+++ b/static/css/moover/benefits.css
@@ -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;
+ }
+}
diff --git a/static/css/moover/cards.css b/static/css/moover/cards.css
new file mode 100644
index 0000000..4fe0e9d
--- /dev/null
+++ b/static/css/moover/cards.css
@@ -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;
+ }
+}
diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css
index 0599c85..64b8a1d 100644
--- a/static/css/moover/chatterbox.css
+++ b/static/css/moover/chatterbox.css
@@ -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;
}
diff --git a/static/css/moover/diff.css b/static/css/moover/diff.css
new file mode 100644
index 0000000..119c5e7
--- /dev/null
+++ b/static/css/moover/diff.css
@@ -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==);
+}
diff --git a/static/css/moover/easy.css b/static/css/moover/easy.css
new file mode 100644
index 0000000..787e50d
--- /dev/null
+++ b/static/css/moover/easy.css
@@ -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;
+}
diff --git a/static/css/moover/presentation.css b/static/css/moover/presentation.css
index 7bbcc8f..53606b6 100644
--- a/static/css/moover/presentation.css
+++ b/static/css/moover/presentation.css
@@ -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;
-}
diff --git a/static/css/moover/root.css b/static/css/moover/root.css
index 81068b6..9fd4146 100644
--- a/static/css/moover/root.css
+++ b/static/css/moover/root.css
@@ -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;
+ }
}
diff --git a/static/css/moover/sore.css b/static/css/moover/sore.css
index a6e7efd..0804eb3 100644
--- a/static/css/moover/sore.css
+++ b/static/css/moover/sore.css
@@ -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%;
+ }
+}
diff --git a/static/css/moover/use.css b/static/css/moover/use.css
index 07f4cfc..c88239f 100644
--- a/static/css/moover/use.css
+++ b/static/css/moover/use.css
@@ -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;
+ }
+}
diff --git a/static/css/moover/uses.css b/static/css/moover/uses.css
index 57cf5a7..5dd1d2e 100644
--- a/static/css/moover/uses.css
+++ b/static/css/moover/uses.css
@@ -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;
diff --git a/static/img/png/about-1920.png b/static/img/png/about-1920.png
new file mode 100644
index 0000000..9ac1767
Binary files /dev/null and b/static/img/png/about-1920.png differ
diff --git a/static/img/png/benefits-1920.png b/static/img/png/benefits-1920.png
new file mode 100644
index 0000000..daa26e5
Binary files /dev/null and b/static/img/png/benefits-1920.png differ
diff --git a/static/img/png/sender-card1.png b/static/img/png/sender-card1.png
new file mode 100644
index 0000000..d6eb8c0
Binary files /dev/null and b/static/img/png/sender-card1.png differ
diff --git a/static/img/png/sender-card2.png b/static/img/png/sender-card2.png
new file mode 100644
index 0000000..a2c8e88
Binary files /dev/null and b/static/img/png/sender-card2.png differ
diff --git a/static/img/png/sender-card3.png b/static/img/png/sender-card3.png
new file mode 100644
index 0000000..b5ab195
Binary files /dev/null and b/static/img/png/sender-card3.png differ
diff --git a/static/img/png/sore-1920.png b/static/img/png/sore-1920.png
new file mode 100644
index 0000000..6e2762b
Binary files /dev/null and b/static/img/png/sore-1920.png differ
diff --git a/static/img/png/sore2.png b/static/img/png/sore.png
similarity index 100%
rename from static/img/png/sore2.png
rename to static/img/png/sore.png
diff --git a/static/img/png/use-letters-1920.png b/static/img/png/use-letters-1920.png
new file mode 100644
index 0000000..d5ce5f2
Binary files /dev/null and b/static/img/png/use-letters-1920.png differ
diff --git a/styles/moover.scss b/styles/moover.scss
index 5b6a646..7fe9b9d 100644
--- a/styles/moover.scss
+++ b/styles/moover.scss
@@ -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";
diff --git a/styles/moover/about.scss b/styles/moover/about.scss
index 01d615f..b04de04 100644
--- a/styles/moover/about.scss
+++ b/styles/moover/about.scss
@@ -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;
+ }
+ }
}
\ No newline at end of file
diff --git a/styles/moover/animate.scss b/styles/moover/animate.scss
index 7364eef..bd4b1f2 100644
--- a/styles/moover/animate.scss
+++ b/styles/moover/animate.scss
@@ -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;
+ }
}
}
diff --git a/styles/moover/benefits.scss b/styles/moover/benefits.scss
index ee87a13..76c5beb 100644
--- a/styles/moover/benefits.scss
+++ b/styles/moover/benefits.scss
@@ -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;
+ }
}
}
\ No newline at end of file
diff --git a/styles/moover/cards.scss b/styles/moover/cards.scss
index 4cc63d0..d5e1ab6 100644
--- a/styles/moover/cards.scss
+++ b/styles/moover/cards.scss
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss
index c0f6aa2..ec6d258 100644
--- a/styles/moover/chatterbox.scss
+++ b/styles/moover/chatterbox.scss
@@ -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 {
diff --git a/styles/moover/diff.scss b/styles/moover/diff.scss
new file mode 100644
index 0000000..ac3adf9
--- /dev/null
+++ b/styles/moover/diff.scss
@@ -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==)
+ }
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/styles/moover/easy.scss b/styles/moover/easy.scss
index 1dbbdf0..7e36d5e 100644
--- a/styles/moover/easy.scss
+++ b/styles/moover/easy.scss
@@ -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;
-}
diff --git a/styles/moover/presentation.scss b/styles/moover/presentation.scss
index 8ff4492..57008b3 100644
--- a/styles/moover/presentation.scss
+++ b/styles/moover/presentation.scss
@@ -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;
-}
\ No newline at end of file
diff --git a/styles/moover/root.scss b/styles/moover/root.scss
index 0a2c9b7..ebc9ecb 100644
--- a/styles/moover/root.scss
+++ b/styles/moover/root.scss
@@ -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;
}
-}
\ No newline at end of file
+
+ .br {
+ &--xxl {
+ display: none;
+ }
+ }
+}
+
diff --git a/styles/moover/sore.scss b/styles/moover/sore.scss
index 59fdb8d..df26c46 100644
--- a/styles/moover/sore.scss
+++ b/styles/moover/sore.scss
@@ -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%;
+ }
}
}
diff --git a/styles/moover/use.scss b/styles/moover/use.scss
index 892de9a..40e0f9a 100644
--- a/styles/moover/use.scss
+++ b/styles/moover/use.scss
@@ -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;
+ }
}
}
}
diff --git a/styles/moover/uses.scss b/styles/moover/uses.scss
index 039b017..66ea46b 100644
--- a/styles/moover/uses.scss
+++ b/styles/moover/uses.scss
@@ -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;
diff --git a/templates/blocks/n_header.html b/templates/blocks/n_header.html
new file mode 100644
index 0000000..4727066
--- /dev/null
+++ b/templates/blocks/n_header.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+{% load base_tags_extra %}
+{% load webpush_notifications %}
+
+
+
- {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %}
- {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %}
+ {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %}
+ {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %}
- {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %}
+ {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %}
- {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %}
+ {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %}
{% translate "За пару кликов размещаешь объявление на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}
-
+
{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}
-
+
{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}
-
+ {% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}
+{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}
+