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 %} + + +
+ + +
\ No newline at end of file diff --git a/templates/pages/p_mover_landing_page.html b/templates/pages/p_mover_landing_page.html index 066183d..b1b9a2f 100644 --- a/templates/pages/p_mover_landing_page.html +++ b/templates/pages/p_mover_landing_page.html @@ -47,8 +47,8 @@
img1

- {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %} - {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %} + {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %} + {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %}

@@ -58,20 +58,20 @@ {% translate "Мария, узнаёт о нашем сервисе
" %} TripWB.com. - {% translate "Регистрируется
и очень быстро размещает
объявление." %} + {% translate "Регистрируется
и очень быстро размещает
объявление." %}

img1

- {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %} + {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %}

img1

- {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %} + {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %}

@@ -89,17 +89,18 @@

{% translate "Один простой шаг" %}

{% translate "За пару кликов размещаешь объявление на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}

- sender1 + sender1

{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}

- sender1 + sender1
-

{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}

- sender1 +

{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}

+

{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}

+ sender1
@@ -118,119 +119,172 @@
{% translate "Зарегистрироваться" %} -
+
{% translate "Чем мы отличаемся от классических почтовых сервисов" %}
- list differences +
+
+
+ Trip With Bonus +
+
+
+ Стоимость перевозки назначаете сами +
+
+
+ Возможность контакта с перевозчиком в режиме онлайн +
+
+
+ Встреча с перевозчиком в удобном для вас месте +
+
+
+ Без дополнительных платежей и комиссий за параметры посылки +
+
+
+ Вы сами выбираете оптимальный маршрут и время доставки +
+
+
+
+ Другие почтовые сервисы +
+
+
+ Стоимость перевозки назначает сервис +
+
+
+ Автоматический трекинг не всегда даёт актуальную информацию +
+
+
+ + Нужно ехать только в пункт отправки посылки +
+
+
+ Дополнительная стоимость за разные параметры посылки +
+
+
+ Посылка может перевозиться долго и с большим количеством перегрузок +
+ +
+
-
+
{% translate "Что о нас говорят люди" %}
- {% for media_item in page.get_media_items %} -
-
-
-
-
- user - -
-
+ {# {% for media_item in page.get_media_items %}#} + {#
#} + {#
#} + {#
#} + {#
#} + {#
#} + {# user#} + {# #} + {#
#} + {#
#} + {#
#} + {##} + {#
#} + {# {% endfor %}#} +
+
+
+
+
+ user +
- +
- {% endfor %} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# user#} -{# #} -{#
#} -{#
#} -{#
#} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# user#} -{# #} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# user#} -{# #} -{# #} -{#
#} -{#
#} -{#
#} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# user#} -{# #} -{# #} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# user#} -{# #} -{# #} -{#
#} -{#
#} -{##} -{##} -{#
#} -{#
#} + +
+
+
+
+
+
+ user + +
+
+
+
+
+
+
+
+
+ user + +
+
+
+ +
+
+
+
+
+
+ user + +
+
+
+
+
+
+
+
+
+ user + +
+
+ + +
+
-
+
{% translate "Что о нас пишут люди" %}
- list letters + + + list letters +
@@ -331,10 +388,14 @@ });
-
+
{% translate "О сервисе Trip With Bonus" %}
- + + + about + + {# about#}

{% translate "TripWB - это сервис попутных посылок, который соединяет отправителя посылки того, кому нужно что-то передать в другой город или страну, и перевозчика посылки, а именно попутчика или путешественника, который следует по пути назначения." %}

{% translate "Тебе не нужно больше бежать в чаты и группы в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %} @@ -344,7 +405,7 @@

{#
#}
-
+
{% translate "Преимущества сервиса" %}
@@ -362,7 +423,10 @@
- benefits + + + benefits +
@@ -386,39 +450,39 @@
image icon -
+

{% translate "Когда нужно отправить документы партнеру или родственнику" %} -

+

image icon -
+

{% translate "Когда необходимо отправить посылку в другую страну" %} -

+

image icon -
+

{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %} -

+

image icon -
+

{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %} -

+

image icon -
+

{% translate "Когда нужно отправить не только маленькую посылку, но и крупногабаритный груз" %} -

+

image icon -
+

{% translate "Когда нет прямого сообщения из пункта А в пункт Б обычными сервисами доставки" %} -

+

@@ -438,7 +502,10 @@
{% translate "Мы знаем, каково это без конца и края закидывать сообщения в чаты и группы в социальных сетях, в надежде найти человека, который едет или летит в нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и стоимость пересылки в обычных почтовых сервисах выше стоимости самой посылки." %}
- sore image + + + sore image +
{% translate "Зарегистрируйте бесплатно прямо сейчас и размести свое первое объявление об отправке посылки" %}