diff --git a/static/css/moover.css b/static/css/moover.css index a57054c..ffef5f1 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -2,7 +2,6 @@ margin: 0 auto; width: 1280px; position: relative; - min-height: 695px; } @media (min-width: 1720px) { @@ -11,11 +10,19 @@ } } -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ +@media (max-width: 1304.98px) { + .container { + width: 1120px; + max-width: 88vw; + } +} + +@media (max-width: 991.98px) { + .container { + width: 640px; + } +} + /*@media (max-width: 767.98px) {*/ /* .container {*/ /* margin: 0 15px;*/ @@ -36,6 +43,10 @@ color: var(--color-black2); } +body { + overflow-x: hidden; +} + .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; } @@ -128,6 +139,19 @@ b { } } +@media (max-width: 1304.98px) { + .title { + margin-bottom: 20px; + } +} + +@media (max-width: 991.98px) { + .title { + font-size: 32px; + line-height: 38.73px; + } +} + .subtitle { margin-bottom: 81px; line-height: 22px; @@ -140,12 +164,18 @@ b { } } +@media (max-width: 1304.98px) { + .subtitle { + margin-bottom: 71px; + } +} + .hide { display: none; } .hide__xxl { - display: block; + display: initial; } @media (min-width: 1720px) { @@ -154,6 +184,16 @@ b { } } +.hide__md { + display: initial; +} + +@media (max-width: 991.98px) { + .hide__md { + display: none; + } +} + .show__xxl { display: none; } @@ -164,17 +204,136 @@ b { } } -@media (min-width: 1440px) { - .is-container.wrapper_main { - max-width: initial; +.show__md { + display: none; +} + +@media (max-width: 991.98px) { + .show__md { + display: initial; } +} + +@media (min-width: 1440px) { .br--xxl { display: none; } } +@media (max-width: 991.98px) { + .br--md { + display: none; + } +} + +@media (min-width: 1440px) { + .is-container.wrapper_main { + max-width: initial; + } +} + +.header { + margin-top: 0; + position: relative; + padding: 40px 5px; +} + +@media (max-width: 991.98px) { + .header { + padding-top: 19px; + padding-bottom: 19px; + } +} + +.header__grid, .header__list { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header__logo { + width: 48px; + height: 48px; + position: relative; + left: 5px; +} + +@media (max-width: 1304.98px) { + .header__logo { + left: 14px; + } +} + +@media (max-width: 991.98px) { + .header__logo { + left: 0; + } +} + +.header__nav { + flex-grow: 1; + max-width: 41%; + margin-left: auto; +} + +@media (min-width: 1720px) { + .header__nav { + max-width: 34%; + } +} + +@media (max-width: 1304.98px) { + .header__nav { + max-width: 46%; + } +} + +.header__link { + color: var(--color-black2); + text-decoration: none; +} + +.header__btn { + padding: 8px 0 6px; + font-size: 16px; + margin-left: 61px; + margin-right: -3px; +} + +@media (min-width: 1720px) { + .header__btn { + margin-left: 81px; + } +} + +@media (max-width: 1304.98px) { + .header__btn { + margin-right: -8px; + } +} + +@media (max-width: 991.98px) { + .header__btn { + display: none; + } +} + +.header .dropdown { + left: -4px; +} + +.header .dropdown-content { + right: 0; + height: initial; +} + +.header .dropdown img { + width: 25px; + height: 25px; +} + .presentation { - margin: 20px -65px 140px; + margin: 12px -65px 140px; } @media (min-width: 1720px) { @@ -185,6 +344,18 @@ b { } } +@media (max-width: 1304.98px) { + .presentation { + margin-bottom: 120px; + } +} + +@media (max-width: 991.98px) { + .presentation { + margin-bottom: 105px; + } +} + .presentation__top { position: relative; min-height: 270px; @@ -205,19 +376,65 @@ b { } } +@media (max-width: 1304.98px) { + .presentation__top { + background-size: 16%, 20%, 9.5%, 10.1%; + background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%; + margin-bottom: 96px; + } +} + +@media (max-width: 991.98px) { + .presentation__top { + background-size: 14.5%, 17%, 8.3%, 9.1%; + background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%; + padding-top: 31px; + margin-bottom: 76px; + } +} + +@media (max-width: 991.98px) { + .presentation__bottom .subtitle { + max-width: 40%; + margin: 0 auto 30px; + } +} + .presentation__title { margin-bottom: 23px; } +@media (max-width: 991.98px) { + .presentation__title { + max-width: 75%; + margin: 0 auto 19px; + } +} + .presentation__subtitle { margin-bottom: 41px; font-weight: 600; } +@media (max-width: 991.98px) { + .presentation__subtitle { + max-width: 55%; + margin: 0 auto 40px; + font-size: 16px; + } +} + .presentation__btn { margin-bottom: 40px; } +@media (max-width: 991.98px) { + .presentation__btn { + padding-left: 82px; + padding-right: 82px; + } +} + .presentation__next { font-weight: 500; line-height: 22px; @@ -242,6 +459,12 @@ b { } } +@media (max-width: 1304.98px) { + .presentation__cards { + max-width: 1140px; + } +} + .presentation__bottom .presentation__title { margin-bottom: 13px; } @@ -276,9 +499,10 @@ b { position: relative; } -.cards__img:hover { - scale: 1.05; - transition: scale 0.15s linear; +@media (max-width: 991.98px) { + .cards__item { + max-width: 270px; + } } .cards__img { @@ -292,6 +516,17 @@ b { } } +@media (max-width: 991.98px) { + .cards__img { + margin-bottom: 8px; + } +} + +.cards__img:hover { + scale: 1.05; + transition: scale 0.15s linear; +} + .cards__desc { font-weight: 500; line-height: 22px; @@ -306,6 +541,21 @@ b { } } +@media (max-width: 1279.98px) { + .cards__desc { + padding-left: 5px; + padding-right: 5px; + margin-bottom: 3px; + } +} + +@media (max-width: 991.98px) { + .cards__desc { + padding-left: 8px; + padding-right: 8px; + } +} + .cards__desc a { color: var(--color-orange); } @@ -326,6 +576,49 @@ b { } } +@media (max-width: 1304.98px) { + .cards__arrow { + top: -8%; + } +} + +@media (max-width: 991.98px) { + .cards__arrow { + display: none; + } +} + +.cards .slick-list { + overflow: visible; +} + +.slick-dots { + display: flex; + justify-content: center; + margin: 0; + padding: 1rem 0; + list-style-type: none; +} + +.slick-dots li { + margin: 0 0.25rem; +} + +.slick-dots button { + display: block; + width: 8px; + height: 8px; + padding: 0; + border: none; + border-radius: 100%; + background-color: #D9D9D9; + text-indent: -9999px; +} + +.slick-dots li.slick-active button { + background-color: var(--color-orange); +} + .easy { margin-bottom: 162px; } @@ -336,6 +629,18 @@ b { } } +@media (max-width: 1304.98px) { + .easy { + margin-bottom: 142px; + } +} + +@media (max-width: 991.98px) { + .easy { + margin-bottom: 121px; + } +} + .easy .title { max-width: 55%; margin-bottom: 21px; @@ -348,6 +653,12 @@ b { } } +@media (max-width: 991.98px) { + .easy .title { + max-width: 75%; + } +} + .easy .subtitle { margin-bottom: 41px; } @@ -377,6 +688,21 @@ b { } } +@media (max-width: 1304.98px) { + .easy__grid { + grid-column-gap: 69px; + grid-template-rows: repeat(2, minmax(172px, auto)); + margin-bottom: 41px; + } +} + +@media (max-width: 991.98px) { + .easy__grid { + display: block; + margin-bottom: 40px; + } +} + .easy__item { border-radius: 30px; background-color: var(--color-grey); @@ -400,6 +726,20 @@ b { } } +@media (max-width: 1304.98px) { + .easy__item--fir { + margin-right: 13px; + } +} + +@media (max-width: 991.98px) { + .easy__item--fir { + padding-top: 17px; + margin-right: 0; + margin-bottom: 43px; + } +} + .easy__item--fir p { width: 93%; margin-bottom: 29px; @@ -412,24 +752,29 @@ b { } } -.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; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--sec { + padding-top: 35px; + padding-bottom: 37px; + margin-bottom: 39px; + } } .easy__item--sec img { margin-bottom: -10px; margin-right: -5px; + max-width: 50.1%; } @media (min-width: 1720px) { @@ -438,13 +783,78 @@ b { } } -.easy__item--thr img { +@media (max-width: 1304.98px) { + .easy__item--sec img { + max-width: 43.1%; + } +} + +@media (max-width: 991.98px) { + .easy__item--sec img { + margin-right: 0; + margin-bottom: 0; + } +} + +.easy__item--sec p { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +.easy__item--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--thr { + padding-top: 42px; + padding-bottom: 46px; + } +} + +.easy__item--thr .img { margin-bottom: -10px; margin-right: 24px; + max-width: 80%; +} + +@media (max-width: 1279.98px) { + .easy__item--thr .img { + max-width: 35%; + } +} + +@media (max-width: 1304.98px) { + .easy__item--thr .img { + margin-right: 2px; + } +} + +@media (max-width: 991.98px) { + .easy__item--thr .img { + margin-right: 0; + max-width: 34%; + } } .easy__item--thr p { max-width: 50%; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--thr p { + max-width: 60%; + } } .easy__arrow { @@ -461,6 +871,18 @@ b { } } +@media (max-width: 1304.98px) { + .easy__arrow { + scale: 0.8; + } +} + +@media (max-width: 991.98px) { + .easy__arrow { + display: none; + } +} + .easy__arrow--fir { top: 46%; right: 101%; @@ -473,6 +895,12 @@ b { } } +@media (max-width: 1304.98px) { + .easy__arrow--fir { + top: 48%; + } +} + .easy__arrow--sec { top: 117%; left: 30%; @@ -486,17 +914,22 @@ b { } } +@media (max-width: 1304.98px) { + .easy__arrow--sec { + left: 38%; + } +} + .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; +@media (max-width: 991.98px) { + .easy__btn { + margin-top: -26px; + padding-left: 54px; + padding-right: 54px; + } } .chatterbox { @@ -537,6 +970,14 @@ b { } } +@media (max-width: 1304.98px) { + .chatterbox__slide { + width: 300px; + height: 615px; + background-size: 300px 615px; + } +} + .chatterbox__slide.loaded video { opacity: 1; } @@ -647,6 +1088,12 @@ b { } } +@media (max-width: 1304.98px) { + .chatterbox__vbox { + height: 530px; + } +} + .chatterbox .title { margin-bottom: 60px; } @@ -684,6 +1131,18 @@ b { } } +@media (max-width: 1304.98px) { + .use { + margin-bottom: 145px; + } +} + +@media (max-width: 991.98px) { + .use { + margin-bottom: 121px; + } +} + .use__img { width: 67.5%; margin-left: 16px; @@ -694,6 +1153,21 @@ b { .use__img { width: 50.2%; margin-left: 27px; + margin-bottom: 35px; + } +} + +@media (max-width: 1304.98px) { + .use__img { + width: 77%; + } +} + +@media (max-width: 991.98px) { + .use__img { + margin-left: 0; + width: 100%; + margin-bottom: 40px; } } @@ -719,13 +1193,19 @@ b { } } +@media (max-width: 991.98px) { + .use .title { + margin-bottom: 38px; + } +} + .use--lett { margin-bottom: 120px; } @media (min-width: 1720px) { .use--lett { - margin-bottom: 140px; + margin-bottom: 135px; } } @@ -746,8 +1226,15 @@ b { } } +@media (max-width: 991.98px) { + .use .h3 { + max-width: 75%; + margin: 0 auto 22px; + } +} + .diff { - margin-bottom: 166px; + margin-bottom: 168px; } @media (min-width: 1720px) { @@ -756,6 +1243,12 @@ b { } } +@media (max-width: 991.98px) { + .diff { + margin-bottom: 125px; + } +} + .diff .title { width: 60%; margin-bottom: 65px; @@ -768,6 +1261,20 @@ b { } } +@media (max-width: 1304.98px) { + .diff .title { + width: 73%; + margin-bottom: 40px; + } +} + +@media (max-width: 991.98px) { + .diff .title { + width: 90%; + margin-bottom: 40px; + } +} + .diff__grid { display: flex; position: relative; @@ -786,14 +1293,38 @@ b { bottom: 0; } +@media (max-width: 991.98px) { + .diff__grid::before { + display: none; + } +} + +@media (max-width: 991.98px) { + .diff__grid { + display: block; + } +} + .diff__coll { width: 50%; } +@media (max-width: 991.98px) { + .diff__coll { + width: 100%; + } +} + .diff__coll.left { margin-right: 29px; } +@media (max-width: 991.98px) { + .diff__coll.left { + margin-right: 0; + } +} + .diff__coll.left .diff__coll-title { padding-left: 39px; } @@ -804,10 +1335,23 @@ b { } } +@media (max-width: 991.98px) { + .diff__coll.left .diff__coll-title { + padding-left: 0; + } +} + .diff__coll.right { margin-left: 29px; } +@media (max-width: 991.98px) { + .diff__coll.right { + margin-left: 0; + display: none; + } +} + .diff__coll.right .diff__coll-title { padding-right: 39px; } @@ -818,10 +1362,22 @@ b { } } +@media (max-width: 991.98px) { + .diff__coll.right .diff__coll-title { + padding-right: 0; + } +} + .diff__coll-title { margin-bottom: 38px; } +@media (max-width: 991.98px) { + .diff__coll-title { + margin-bottom: 19px; + } +} + .diff__item { position: relative; text-align: left; @@ -850,6 +1406,14 @@ b { } } +@media (max-width: 991.98px) { + .diff__item { + font-size: 18px; + margin-bottom: 25px; + padding-bottom: 9px; + } +} + .diff__item:last-child { margin-bottom: 0; } @@ -872,6 +1436,12 @@ b { } } +@media (max-width: 991.98px) { + .diff__status { + border-radius: 11px; + } +} + .diff__status::before { position: absolute; left: 50%; @@ -1113,7 +1683,7 @@ b { } .uses { - margin-bottom: 122px; + margin-bottom: 120px; } @media (min-width: 1720px) { @@ -1132,7 +1702,7 @@ b { .uses__item { min-height: 50px; - margin-bottom: 43px; + margin-bottom: 19px; padding: 0 50px 0 2px; } @@ -1161,6 +1731,7 @@ b { .sore { margin-bottom: 160px; + margin-top: 1px; } @media (min-width: 1720px) { diff --git a/static/css/moover/cards.css b/static/css/moover/cards.css index 4fe0e9d..38413e2 100644 --- a/static/css/moover/cards.css +++ b/static/css/moover/cards.css @@ -7,9 +7,10 @@ position: relative; } -.cards__img:hover { - scale: 1.05; - transition: scale 0.15s linear; +@media (max-width: 991.98px) { + .cards__item { + max-width: 270px; + } } .cards__img { @@ -23,6 +24,17 @@ } } +@media (max-width: 991.98px) { + .cards__img { + margin-bottom: 8px; + } +} + +.cards__img:hover { + scale: 1.05; + transition: scale 0.15s linear; +} + .cards__desc { font-weight: 500; line-height: 22px; @@ -37,6 +49,21 @@ } } +@media (max-width: 1279.98px) { + .cards__desc { + padding-left: 5px; + padding-right: 5px; + margin-bottom: 3px; + } +} + +@media (max-width: 991.98px) { + .cards__desc { + padding-left: 8px; + padding-right: 8px; + } +} + .cards__desc a { color: var(--color-orange); } @@ -56,3 +83,46 @@ top: -29px; } } + +@media (max-width: 1304.98px) { + .cards__arrow { + top: -8%; + } +} + +@media (max-width: 991.98px) { + .cards__arrow { + display: none; + } +} + +.cards .slick-list { + overflow: visible; +} + +.slick-dots { + display: flex; + justify-content: center; + margin: 0; + padding: 1rem 0; + list-style-type: none; +} + +.slick-dots li { + margin: 0 0.25rem; +} + +.slick-dots button { + display: block; + width: 8px; + height: 8px; + padding: 0; + border: none; + border-radius: 100%; + background-color: #D9D9D9; + text-indent: -9999px; +} + +.slick-dots li.slick-active button { + background-color: var(--color-orange); +} diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css index 64b8a1d..504b6b4 100644 --- a/static/css/moover/chatterbox.css +++ b/static/css/moover/chatterbox.css @@ -36,6 +36,14 @@ } } +@media (max-width: 1304.98px) { + .chatterbox__slide { + width: 300px; + height: 615px; + background-size: 300px 615px; + } +} + .chatterbox__slide.loaded video { opacity: 1; } @@ -146,6 +154,12 @@ } } +@media (max-width: 1304.98px) { + .chatterbox__vbox { + height: 530px; + } +} + .chatterbox .title { margin-bottom: 60px; } diff --git a/static/css/moover/diff.css b/static/css/moover/diff.css index 119c5e7..7dec701 100644 --- a/static/css/moover/diff.css +++ b/static/css/moover/diff.css @@ -1,5 +1,5 @@ .diff { - margin-bottom: 166px; + margin-bottom: 168px; } @media (min-width: 1720px) { @@ -8,6 +8,12 @@ } } +@media (max-width: 991.98px) { + .diff { + margin-bottom: 125px; + } +} + .diff .title { width: 60%; margin-bottom: 65px; @@ -20,6 +26,20 @@ } } +@media (max-width: 1304.98px) { + .diff .title { + width: 73%; + margin-bottom: 40px; + } +} + +@media (max-width: 991.98px) { + .diff .title { + width: 90%; + margin-bottom: 40px; + } +} + .diff__grid { display: flex; position: relative; @@ -38,14 +58,38 @@ bottom: 0; } +@media (max-width: 991.98px) { + .diff__grid::before { + display: none; + } +} + +@media (max-width: 991.98px) { + .diff__grid { + display: block; + } +} + .diff__coll { width: 50%; } +@media (max-width: 991.98px) { + .diff__coll { + width: 100%; + } +} + .diff__coll.left { margin-right: 29px; } +@media (max-width: 991.98px) { + .diff__coll.left { + margin-right: 0; + } +} + .diff__coll.left .diff__coll-title { padding-left: 39px; } @@ -56,10 +100,23 @@ } } +@media (max-width: 991.98px) { + .diff__coll.left .diff__coll-title { + padding-left: 0; + } +} + .diff__coll.right { margin-left: 29px; } +@media (max-width: 991.98px) { + .diff__coll.right { + margin-left: 0; + display: none; + } +} + .diff__coll.right .diff__coll-title { padding-right: 39px; } @@ -70,10 +127,22 @@ } } +@media (max-width: 991.98px) { + .diff__coll.right .diff__coll-title { + padding-right: 0; + } +} + .diff__coll-title { margin-bottom: 38px; } +@media (max-width: 991.98px) { + .diff__coll-title { + margin-bottom: 19px; + } +} + .diff__item { position: relative; text-align: left; @@ -102,6 +171,14 @@ } } +@media (max-width: 991.98px) { + .diff__item { + font-size: 18px; + margin-bottom: 25px; + padding-bottom: 9px; + } +} + .diff__item:last-child { margin-bottom: 0; } @@ -124,6 +201,12 @@ } } +@media (max-width: 991.98px) { + .diff__status { + border-radius: 11px; + } +} + .diff__status::before { position: absolute; left: 50%; diff --git a/static/css/moover/easy.css b/static/css/moover/easy.css index 787e50d..f6a47af 100644 --- a/static/css/moover/easy.css +++ b/static/css/moover/easy.css @@ -8,6 +8,18 @@ } } +@media (max-width: 1304.98px) { + .easy { + margin-bottom: 142px; + } +} + +@media (max-width: 991.98px) { + .easy { + margin-bottom: 121px; + } +} + .easy .title { max-width: 55%; margin-bottom: 21px; @@ -20,6 +32,12 @@ } } +@media (max-width: 991.98px) { + .easy .title { + max-width: 75%; + } +} + .easy .subtitle { margin-bottom: 41px; } @@ -49,6 +67,21 @@ } } +@media (max-width: 1304.98px) { + .easy__grid { + grid-column-gap: 69px; + grid-template-rows: repeat(2, minmax(172px, auto)); + margin-bottom: 41px; + } +} + +@media (max-width: 991.98px) { + .easy__grid { + display: block; + margin-bottom: 40px; + } +} + .easy__item { border-radius: 30px; background-color: var(--color-grey); @@ -72,6 +105,20 @@ } } +@media (max-width: 1304.98px) { + .easy__item--fir { + margin-right: 13px; + } +} + +@media (max-width: 991.98px) { + .easy__item--fir { + padding-top: 17px; + margin-right: 0; + margin-bottom: 43px; + } +} + .easy__item--fir p { width: 93%; margin-bottom: 29px; @@ -84,24 +131,29 @@ } } -.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; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--sec { + padding-top: 35px; + padding-bottom: 37px; + margin-bottom: 39px; + } } .easy__item--sec img { margin-bottom: -10px; margin-right: -5px; + max-width: 50.1%; } @media (min-width: 1720px) { @@ -110,13 +162,78 @@ } } -.easy__item--thr img { +@media (max-width: 1304.98px) { + .easy__item--sec img { + max-width: 43.1%; + } +} + +@media (max-width: 991.98px) { + .easy__item--sec img { + margin-right: 0; + margin-bottom: 0; + } +} + +.easy__item--sec p { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +.easy__item--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--thr { + padding-top: 42px; + padding-bottom: 46px; + } +} + +.easy__item--thr .img { margin-bottom: -10px; margin-right: 24px; + max-width: 80%; +} + +@media (max-width: 1279.98px) { + .easy__item--thr .img { + max-width: 35%; + } +} + +@media (max-width: 1304.98px) { + .easy__item--thr .img { + margin-right: 2px; + } +} + +@media (max-width: 991.98px) { + .easy__item--thr .img { + margin-right: 0; + max-width: 34%; + } } .easy__item--thr p { max-width: 50%; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--thr p { + max-width: 60%; + } } .easy__arrow { @@ -133,6 +250,18 @@ } } +@media (max-width: 1304.98px) { + .easy__arrow { + scale: 0.8; + } +} + +@media (max-width: 991.98px) { + .easy__arrow { + display: none; + } +} + .easy__arrow--fir { top: 46%; right: 101%; @@ -145,6 +274,12 @@ } } +@media (max-width: 1304.98px) { + .easy__arrow--fir { + top: 48%; + } +} + .easy__arrow--sec { top: 117%; left: 30%; @@ -158,15 +293,20 @@ } } +@media (max-width: 1304.98px) { + .easy__arrow--sec { + left: 38%; + } +} + .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; +@media (max-width: 991.98px) { + .easy__btn { + margin-top: -26px; + padding-left: 54px; + padding-right: 54px; + } } diff --git a/static/css/moover/header.css b/static/css/moover/header.css new file mode 100644 index 0000000..5d67e8e --- /dev/null +++ b/static/css/moover/header.css @@ -0,0 +1,99 @@ +.header { + margin-top: 0; + position: relative; + padding: 40px 5px; +} + +@media (max-width: 991.98px) { + .header { + padding-top: 19px; + padding-bottom: 19px; + } +} + +.header__grid, .header__list { + display: flex; + align-items: center; + justify-content: space-between; +} + +.header__logo { + width: 48px; + height: 48px; + position: relative; + left: 5px; +} + +@media (max-width: 1304.98px) { + .header__logo { + left: 14px; + } +} + +@media (max-width: 991.98px) { + .header__logo { + left: 0; + } +} + +.header__nav { + flex-grow: 1; + max-width: 41%; + margin-left: auto; +} + +@media (min-width: 1720px) { + .header__nav { + max-width: 34%; + } +} + +@media (max-width: 1304.98px) { + .header__nav { + max-width: 46%; + } +} + +.header__link { + color: var(--color-black2); + text-decoration: none; +} + +.header__btn { + padding: 8px 0 6px; + font-size: 16px; + margin-left: 61px; + margin-right: -3px; +} + +@media (min-width: 1720px) { + .header__btn { + margin-left: 81px; + } +} + +@media (max-width: 1304.98px) { + .header__btn { + margin-right: -8px; + } +} + +@media (max-width: 991.98px) { + .header__btn { + display: none; + } +} + +.header .dropdown { + left: -4px; +} + +.header .dropdown-content { + right: 0; + height: initial; +} + +.header .dropdown img { + width: 25px; + height: 25px; +} diff --git a/static/css/moover/presentation.css b/static/css/moover/presentation.css index 53606b6..e54fd3a 100644 --- a/static/css/moover/presentation.css +++ b/static/css/moover/presentation.css @@ -1,5 +1,5 @@ .presentation { - margin: 20px -65px 140px; + margin: 12px -65px 140px; } @media (min-width: 1720px) { @@ -10,6 +10,18 @@ } } +@media (max-width: 1304.98px) { + .presentation { + margin-bottom: 120px; + } +} + +@media (max-width: 991.98px) { + .presentation { + margin-bottom: 105px; + } +} + .presentation__top { position: relative; min-height: 270px; @@ -30,19 +42,65 @@ } } +@media (max-width: 1304.98px) { + .presentation__top { + background-size: 16%, 20%, 9.5%, 10.1%; + background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%; + margin-bottom: 96px; + } +} + +@media (max-width: 991.98px) { + .presentation__top { + background-size: 14.5%, 17%, 8.3%, 9.1%; + background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%; + padding-top: 31px; + margin-bottom: 76px; + } +} + +@media (max-width: 991.98px) { + .presentation__bottom .subtitle { + max-width: 40%; + margin: 0 auto 30px; + } +} + .presentation__title { margin-bottom: 23px; } +@media (max-width: 991.98px) { + .presentation__title { + max-width: 75%; + margin: 0 auto 19px; + } +} + .presentation__subtitle { margin-bottom: 41px; font-weight: 600; } +@media (max-width: 991.98px) { + .presentation__subtitle { + max-width: 55%; + margin: 0 auto 40px; + font-size: 16px; + } +} + .presentation__btn { margin-bottom: 40px; } +@media (max-width: 991.98px) { + .presentation__btn { + padding-left: 82px; + padding-right: 82px; + } +} + .presentation__next { font-weight: 500; line-height: 22px; @@ -67,6 +125,12 @@ } } +@media (max-width: 1304.98px) { + .presentation__cards { + max-width: 1140px; + } +} + .presentation__bottom .presentation__title { margin-bottom: 13px; } diff --git a/static/css/moover/root.css b/static/css/moover/root.css index 9fd4146..8f12b33 100644 --- a/static/css/moover/root.css +++ b/static/css/moover/root.css @@ -2,7 +2,6 @@ margin: 0 auto; width: 1280px; position: relative; - min-height: 695px; } @media (min-width: 1720px) { @@ -11,11 +10,19 @@ } } -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ +@media (max-width: 1304.98px) { + .container { + width: 1120px; + max-width: 88vw; + } +} + +@media (max-width: 991.98px) { + .container { + width: 640px; + } +} + /*@media (max-width: 767.98px) {*/ /* .container {*/ /* margin: 0 15px;*/ @@ -36,6 +43,10 @@ color: var(--color-black2); } +body { + overflow-x: hidden; +} + .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; } @@ -128,6 +139,19 @@ b { } } +@media (max-width: 1304.98px) { + .title { + margin-bottom: 20px; + } +} + +@media (max-width: 991.98px) { + .title { + font-size: 32px; + line-height: 38.73px; + } +} + .subtitle { margin-bottom: 81px; line-height: 22px; @@ -140,12 +164,18 @@ b { } } +@media (max-width: 1304.98px) { + .subtitle { + margin-bottom: 71px; + } +} + .hide { display: none; } .hide__xxl { - display: block; + display: initial; } @media (min-width: 1720px) { @@ -154,6 +184,16 @@ b { } } +.hide__md { + display: initial; +} + +@media (max-width: 991.98px) { + .hide__md { + display: none; + } +} + .show__xxl { display: none; } @@ -164,11 +204,30 @@ b { } } -@media (min-width: 1440px) { - .is-container.wrapper_main { - max-width: initial; +.show__md { + display: none; +} + +@media (max-width: 991.98px) { + .show__md { + display: initial; } +} + +@media (min-width: 1440px) { .br--xxl { display: none; } } + +@media (max-width: 991.98px) { + .br--md { + display: none; + } +} + +@media (min-width: 1440px) { + .is-container.wrapper_main { + max-width: initial; + } +} diff --git a/static/css/moover/sore.css b/static/css/moover/sore.css index 0804eb3..2216d9d 100644 --- a/static/css/moover/sore.css +++ b/static/css/moover/sore.css @@ -1,5 +1,6 @@ .sore { margin-bottom: 160px; + margin-top: 1px; } @media (min-width: 1720px) { diff --git a/static/css/moover/use.css b/static/css/moover/use.css index c88239f..1c2d6d7 100644 --- a/static/css/moover/use.css +++ b/static/css/moover/use.css @@ -8,6 +8,18 @@ } } +@media (max-width: 1304.98px) { + .use { + margin-bottom: 145px; + } +} + +@media (max-width: 991.98px) { + .use { + margin-bottom: 121px; + } +} + .use__img { width: 67.5%; margin-left: 16px; @@ -18,6 +30,21 @@ .use__img { width: 50.2%; margin-left: 27px; + margin-bottom: 35px; + } +} + +@media (max-width: 1304.98px) { + .use__img { + width: 77%; + } +} + +@media (max-width: 991.98px) { + .use__img { + margin-left: 0; + width: 100%; + margin-bottom: 40px; } } @@ -43,13 +70,19 @@ } } +@media (max-width: 991.98px) { + .use .title { + margin-bottom: 38px; + } +} + .use--lett { margin-bottom: 120px; } @media (min-width: 1720px) { .use--lett { - margin-bottom: 140px; + margin-bottom: 135px; } } @@ -69,3 +102,10 @@ width: initial; } } + +@media (max-width: 991.98px) { + .use .h3 { + max-width: 75%; + margin: 0 auto 22px; + } +} diff --git a/static/css/moover/uses.css b/static/css/moover/uses.css index 5dd1d2e..a52f635 100644 --- a/static/css/moover/uses.css +++ b/static/css/moover/uses.css @@ -1,5 +1,5 @@ .uses { - margin-bottom: 122px; + margin-bottom: 120px; } @media (min-width: 1720px) { @@ -18,7 +18,7 @@ .uses__item { min-height: 50px; - margin-bottom: 43px; + margin-bottom: 19px; padding: 0 50px 0 2px; } diff --git a/static/img/png/sender-card3-md.png b/static/img/png/sender-card3-md.png new file mode 100644 index 0000000..4407a80 Binary files /dev/null and b/static/img/png/sender-card3-md.png differ diff --git a/static/img/png/use-md.png b/static/img/png/use-md.png new file mode 100644 index 0000000..7a05977 Binary files /dev/null and b/static/img/png/use-md.png differ diff --git a/styles/moover.scss b/styles/moover.scss index 7fe9b9d..9022f20 100644 --- a/styles/moover.scss +++ b/styles/moover.scss @@ -1,4 +1,5 @@ @import "./moover/root"; +@import "./moover/header"; @import "./moover/presentation"; @import "./moover/cards"; @import "./moover/easy"; diff --git a/styles/moover/cards.scss b/styles/moover/cards.scss index d5e1ab6..7bd56a0 100644 --- a/styles/moover/cards.scss +++ b/styles/moover/cards.scss @@ -1,55 +1,122 @@ .cards { -} -.cards__list { - display: grid; - grid-template-columns: repeat(4, 1fr); -} + &__list { + display: grid; + grid-template-columns: repeat(4, 1fr); + } -.cards__item { - position: relative; -} + &__item { + position: relative; -.cards__img:hover { - scale: 1.05; - transition: scale 0.15s linear; -} + @media (max-width: 991.98px) { + max-width: 270px; + } + } -.cards__img { - margin-bottom: 5px; + &__img { + margin-bottom: 5px; - @media (min-width: 1720px) { - width: 100%; - margin-bottom: 15px; + @media (min-width: 1720px) { + width: 100%; + margin-bottom: 15px; + } + + @media (max-width: 991.98px) { + margin-bottom: 8px; + } + + &:hover { + scale: 1.05; + transition: scale 0.15s linear; + } + } + + &__desc { + font-weight: 500; + line-height: 22px; + + @media (min-width: 1720px) { + font-size: 20px; + line-height: 26px; + padding-left: 20px; + padding-right: 20px; + } + + @media (max-width: 1279.98px) { + padding-left: 5px; + padding-right: 5px; + margin-bottom: 3px; + } + + @media (max-width: 991.98px) { + padding-left: 8px; + padding-right: 8px; + } + + a { + color: var(--color-orange); + } + } + + + &__arrow { + width: 62px; + height: 20px; + position: absolute; + right: -30px; + top: -21px; + background-image: url("/static/img/svg/Arrow23.svg"); + + @media (min-width: 1720px) { + right: -45px; + top: -29px; + } + + @media (max-width: 1304.98px) { + top: -8%; + } + + @media (max-width: 991.98px) { + display: none; + } + + + } + + + .slick-list { + overflow: visible; } } -.cards__desc { - font-weight: 500; - line-height: 22px; +.slick-dots { + display: flex; + justify-content: center; - @media (min-width: 1720px) { - font-size: 20px; - line-height: 26px; - padding-left: 20px; - padding-right: 20px; + margin: 0; + padding: 1rem 0; + + list-style-type: none; + + li { + margin: 0 0.25rem; } - a { - color: var(--color-orange); - } -} + button { + display: block; + width: 8px; + height: 8px; + padding: 0; -.cards__arrow { - width: 62px; - height: 20px; - position: absolute; - right: -30px; - top: -21px; - background-image: url("/static/img/svg/Arrow23.svg"); + border: none; + border-radius: 100%; + background-color: #D9D9D9; - @media (min-width: 1720px) { - right: -45px; - top: -29px; + text-indent: -9999px; } + + li.slick-active button { + background-color: var(--color-orange); + } + } \ No newline at end of file diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss index ec6d258..1eacdea 100644 --- a/styles/moover/chatterbox.scss +++ b/styles/moover/chatterbox.scss @@ -1,8 +1,8 @@ .chatterbox { margin-bottom: 160px; - @media (min-width: 1720px) { - margin-bottom: 180px; + @media (min-width: 1720px) { + margin-bottom: 180px; } &__slider { @@ -28,6 +28,12 @@ background-size: 456px 836px; } + @media (max-width: 1304.98px) { + width: 300px; + height: 615px; + background-size: 300px 615px; + } + &.loaded { video { opacity: 1; @@ -92,10 +98,10 @@ border-radius: 50%; transition: opacity 100ms linear; - @media (min-width: 1720px) { - width: 109px; - height: 109px; - } + @media (min-width: 1720px) { + width: 109px; + height: 109px; + } } &::before, @@ -115,10 +121,10 @@ display: inline-block; margin-left: 2px; - @media (min-width: 1720px) { - border-width: 23px 0 23px 35px; - margin-left: 4px; - } + @media (min-width: 1720px) { + border-width: 23px 0 23px 35px; + margin-left: 4px; + } } } @@ -132,6 +138,10 @@ @media (min-width: 1720px) { height: 827px; } + + @media (max-width: 1304.98px) { + height: 530px; + } } .title { diff --git a/styles/moover/diff.scss b/styles/moover/diff.scss index ac3adf9..33c78ee 100644 --- a/styles/moover/diff.scss +++ b/styles/moover/diff.scss @@ -1,8 +1,12 @@ .diff { - margin-bottom: 166px; + margin-bottom: 168px; - @media (min-width: 1720px) { - margin-bottom: 172px; + @media (min-width: 1720px) { + margin-bottom: 172px; + } + + @media (max-width: 991.98px) { + margin-bottom: 125px; } .title { @@ -13,6 +17,16 @@ width: 49%; margin-bottom: 60px; } + + @media (max-width: 1304.98px) { + width: 73%; + margin-bottom: 40px; + } + + @media (max-width: 991.98px) { + width: 90%; + margin-bottom: 40px; + } } &__grid { @@ -30,33 +44,62 @@ left: 50%; transform: translateX(-50%); bottom: 0; + + @media (max-width: 991.98px) { + display: none; + } + } + + @media (max-width: 991.98px) { + display: block; } } &__coll { width: 50%; + @media (max-width: 991.98px) { + width: 100%; + } + &.left { margin-right: 29px; + @media (max-width: 991.98px) { + margin-right: 0; + } + .diff__coll-title { padding-left: 39px; @media (min-width: 1720px) { padding-left: 24px; } + + @media (max-width: 991.98px) { + padding-left: 0; + } } } &.right { margin-left: 29px; + @media (max-width: 991.98px) { + margin-left: 0; + display: none; + } + .diff__coll-title { padding-right: 39px; @media (min-width: 1720px) { padding-right: 24px; } + + @media (max-width: 991.98px) { + padding-right: 0; + } } } @@ -64,6 +107,10 @@ &__coll-title { margin-bottom: 38px; + + @media (max-width: 991.98px) { + margin-bottom: 19px; + } } &__item { @@ -91,6 +138,12 @@ margin-bottom: 38px; } + @media (max-width: 991.98px) { + font-size: 18px; + margin-bottom: 25px; + padding-bottom: 9px; + } + &:last-child { margin-bottom: 0; } @@ -115,6 +168,10 @@ border-radius: 12px; } + @media (max-width: 991.98px) { + border-radius: 11px; + } + &::before { position: absolute; left: 50%; diff --git a/styles/moover/easy.scss b/styles/moover/easy.scss index 7e36d5e..501e174 100644 --- a/styles/moover/easy.scss +++ b/styles/moover/easy.scss @@ -1,10 +1,19 @@ .easy { margin-bottom: 162px; - @media (min-width: 1720px) { - margin-bottom: 180px; + @media (min-width: 1720px) { + margin-bottom: 180px; } + @media (max-width: 1304.98px) { + margin-bottom: 142px; + } + + @media (max-width: 991.98px) { + margin-bottom: 121px; + } + + .title { max-width: 55%; margin-bottom: 21px; @@ -13,6 +22,10 @@ max-width: 45%; margin-bottom: 23px; } + + @media (max-width: 991.98px) { + max-width: 75%; + } } .subtitle { @@ -40,6 +53,17 @@ grid-row-gap: 136px; margin-bottom: 63px; } + + @media (max-width: 1304.98px) { + grid-column-gap: 69px; + grid-template-rows: repeat(2, minmax(172px, auto)); + margin-bottom: 41px; + } + + @media (max-width: 991.98px) { + display: block; + margin-bottom: 40px; + } } &__item { @@ -61,6 +85,16 @@ padding-top: 31px; } + @media (max-width: 1304.98px) { + margin-right: 13px; + } + + @media (max-width: 991.98px) { + padding-top: 17px; + margin-right: 0; + margin-bottom: 43px; + } + p { width: 93%; margin-bottom: 29px; @@ -72,38 +106,93 @@ } } - &--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; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + + @media (max-width: 991.98px) { + padding-top: 35px; + padding-bottom: 37px; + + margin-bottom: 39px; + } img { margin-bottom: -10px; margin-right: -5px; + max-width: 50.1%; @media (min-width: 1720px) { margin-right: -12px; } + + @media (max-width: 1304.98px) { + max-width: 43.1%; + } + + @media (max-width: 991.98px) { + margin-right: 0; + margin-bottom: 0; + } + } + + p { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; } } + &--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + //background-color: #00a420; - &--thr img { - margin-bottom: -10px; - margin-right: 24px; - } + @media (max-width: 991.98px) { + padding-top: 42px; + padding-bottom: 46px; + } - &--thr p { - max-width: 50%; + .img { + margin-bottom: -10px; + margin-right: 24px; + max-width: 80%; + + @media (max-width: 1279.98px) { + max-width: 35%; + } + + @media (max-width: 1304.98px) { + margin-right: 2px; + } + + @media (max-width: 991.98px) { + margin-right: 0; + max-width: 34%; + } + } + + p { + max-width: 50%; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + + @media (max-width: 991.98px) { + max-width: 60%; + } + } } } @@ -118,6 +207,14 @@ scale: 1.4; } + @media (max-width: 1304.98px) { + scale: 0.8; + } + + @media (max-width: 991.98px) { + display: none; + } + &--fir { top: 46%; right: 101%; @@ -126,6 +223,9 @@ right: 104%; top: 34%; } + @media (max-width: 1304.98px) { + top: 48%; + } } &--sec { @@ -137,19 +237,20 @@ left: 46%; top: 124%; } + + @media (max-width: 1304.98px) { + left: 38%; + } } } &__btn { margin-top: -21px; + + @media (max-width: 991.98px) { + margin-top: -26px; + padding-left: 54px; + padding-right: 54px; + } } } - -.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/styles/moover/header.scss b/styles/moover/header.scss new file mode 100644 index 0000000..9e618fa --- /dev/null +++ b/styles/moover/header.scss @@ -0,0 +1,89 @@ +.header { + margin-top: 0; + position: relative; + padding: 40px 5px; + + @media (max-width: 991.98px) { + padding-top: 19px; + padding-bottom: 19px; + } + + &__grid, + &__list { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__grid { + } + + &__logo { + width: 48px; + height: 48px; + position: relative; + left: 5px; + + @media (max-width: 1304.98px) { + left: 14px; + } + + @media (max-width: 991.98px) { + left: 0; + } + } + + &__nav { + flex-grow: 1; + max-width: 41%; + margin-left: auto; + + @media (min-width: 1720px) { + max-width: 34%; + } + + @media (max-width: 1304.98px) { + max-width: 46%; + } + //@media (max-width: 991.98px) { + //} + } + + &__link { + color: var(--color-black2); + text-decoration: none; + } + + &__btn { + padding: 8px 0 6px; + font-size: 16px; + margin-left: 61px; + margin-right: -3px; + + @media (min-width: 1720px) { + margin-left: 81px; + } + + @media (max-width: 1304.98px) { + margin-right: -8px; + } + + @media (max-width: 991.98px) { + display: none; + } + } + + .dropdown { + left: -4px; + + &-content { + right: 0; + height: initial; + } + + img { + width: 25px; + height: 25px; + } + } +} diff --git a/styles/moover/presentation.scss b/styles/moover/presentation.scss index 57008b3..efa17c6 100644 --- a/styles/moover/presentation.scss +++ b/styles/moover/presentation.scss @@ -1,5 +1,5 @@ .presentation { - margin: 20px -65px 140px; + margin: 12px -65px 140px; @media (min-width: 1720px) { margin-left: 0; @@ -7,6 +7,14 @@ margin-bottom: 160px; } + @media (max-width: 1304.98px) { + margin-bottom: 120px; + } + + @media (max-width: 991.98px) { + margin-bottom: 105px; + } + &__top { position: relative; min-height: 270px; @@ -35,19 +43,64 @@ padding-top: 95px; margin-bottom: 176px; } + + @media (max-width: 1304.98px) { + background-size: 16%, 20%, 9.5%, 10.1%; + background-position: top -2.8% left 6.5%, + top -19% right 3.5%, + bottom 32% left 23%, + bottom 29% right 22.6%; + margin-bottom: 96px; + } + + @media (max-width: 991.98px) { + background-size: 14.5%, 17%, 8.3%, 9.1%; + background-position: top 9% left 7%, + top 5% right 6%, + bottom 51% left 14.8%, + bottom 47.5% right 13.8%; + padding-top: 31px; + margin-bottom: 76px; + } + } + + &__bottom { + .subtitle { + @media (max-width: 991.98px) { + max-width: 40%; + margin: 0 auto 30px; + } + } } &__title { margin-bottom: 23px; + + @media (max-width: 991.98px) { + max-width: 75%; + margin: 0 auto 19px; + } } &__subtitle { margin-bottom: 41px; font-weight: 600; + + @media (max-width: 991.98px) { + max-width: 55%; + margin: 0 auto 40px; + font-size: 16px; + + } } &__btn { margin-bottom: 40px; + + @media (max-width: 991.98px) { + padding-left: 82px; + padding-right: 82px; + } } &__next { @@ -70,6 +123,10 @@ margin-left: -10px; margin-right: -10px; } + + @media (max-width: 1304.98px) { + max-width: 1140px; + } } &__bottom .presentation__title { diff --git a/styles/moover/root.scss b/styles/moover/root.scss index ebc9ecb..b380c0f 100644 --- a/styles/moover/root.scss +++ b/styles/moover/root.scss @@ -2,7 +2,6 @@ margin: 0 auto; width: 1280px; position: relative; - min-height: 695px; } @media (min-width: 1720px) { @@ -12,11 +11,19 @@ } -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ +@media (max-width: 1304.98px) { + .container { + width: 1120px; + max-width: 88vw; + } +} + +@media (max-width: 991.98px) { + .container { + width: 640px + //max-width: 85vw; + } +} /*@media (max-width: 767.98px) {*/ /* .container {*/ @@ -41,6 +48,11 @@ color: var(--color-black2); } + +body { + overflow-x: hidden; +} + .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; @@ -125,6 +137,15 @@ b { font-size: 48px; margin-bottom: 22px; } + + @media (max-width: 1304.98px) { + margin-bottom: 20px; + } + + @media (max-width: 991.98px) { + font-size: 32px; + line-height: 38.73px; + } } .subtitle { @@ -135,18 +156,32 @@ b { font-size: 20px; margin-bottom: 105px; } + + @media (max-width: 1304.98px) { + margin-bottom: 71px; + } + + } .hide { display: none; &__xxl { - display: block; + display: initial; @media (min-width: 1720px) { display: none; } } + + &__md { + display: initial; + + @media (max-width: 991.98px) { + display: none; + } + } } .show { @@ -158,17 +193,33 @@ b { display: block; } } + + &__md { + display: none; + + @media (max-width: 991.98px) { + display: initial; + } + } +} + +.br { + &--xxl { + @media (min-width: 1440px) { + display: none; + } + } + + &--md { + @media (max-width: 991.98px) { + display: none; + } + } } @media (min-width: 1440px) { .is-container.wrapper_main { max-width: initial; } - - .br { - &--xxl { - display: none; - } - } } diff --git a/styles/moover/sore.scss b/styles/moover/sore.scss index df26c46..0b48cb4 100644 --- a/styles/moover/sore.scss +++ b/styles/moover/sore.scss @@ -1,5 +1,6 @@ .sore { margin-bottom: 160px; + margin-top: 1px; @media (min-width: 1720px) { margin-bottom: 178px; diff --git a/styles/moover/use.scss b/styles/moover/use.scss index 40e0f9a..f4a819a 100644 --- a/styles/moover/use.scss +++ b/styles/moover/use.scss @@ -5,6 +5,14 @@ margin-bottom: 184px; } + @media (max-width: 1304.98px) { + margin-bottom: 145px; + } + + @media (max-width: 991.98px) { + margin-bottom: 121px; + } + &__img { width: 67.5%; margin-left: 16px; @@ -13,6 +21,17 @@ @media (min-width: 1720px) { width: 50.2%; margin-left: 27px; + margin-bottom: 35px; + } + + @media (max-width: 1304.98px) { + width: 77%; + } + + @media (max-width: 991.98px) { + margin-left: 0; + width: 100%; + margin-bottom: 40px; } } @@ -34,13 +53,17 @@ @media (min-width: 1720px) { max-width: 40%; } + + @media (max-width: 991.98px) { + margin-bottom: 38px; + } } &--lett { margin-bottom: 120px; @media (min-width: 1720px) { - margin-bottom: 140px; + margin-bottom: 135px; } @@ -57,6 +80,14 @@ @media (min-width: 1720px) { width: initial; } + + } + } + + .h3 { + @media (max-width: 991.98px) { + max-width: 75%; + margin: 0 auto 22px; } } } diff --git a/styles/moover/uses.scss b/styles/moover/uses.scss index 66ea46b..8c1236c 100644 --- a/styles/moover/uses.scss +++ b/styles/moover/uses.scss @@ -1,5 +1,5 @@ .uses { - margin-bottom: 122px; + margin-bottom: 120px; @media (min-width: 1720px) { margin-bottom: 136px; @@ -18,7 +18,7 @@ &__item { min-height: 50px; - margin-bottom: 43px; + margin-bottom: 19px; padding: 0 50px 0 2px; @media (min-width: 1720px) { diff --git a/templates/blocks/n_header.html b/templates/blocks/n_header.html index 4727066..ad4dec4 100644 --- a/templates/blocks/n_header.html +++ b/templates/blocks/n_header.html @@ -3,24 +3,50 @@ {% load webpush_notifications %} -
-
@@ -76,6 +76,61 @@
+
@@ -95,12 +150,16 @@

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

- sender1 + sender2

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

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

- sender1 + + + + sender3 +
@@ -111,7 +170,10 @@
{% translate "Уже пользуются сайтом и находят перевозчиков" %}
- list users + + + list users +
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
@@ -176,7 +238,7 @@
-
+
{% translate "Что о нас говорят люди" %}
{# {% for media_item in page.get_media_items %}#} @@ -294,9 +356,6 @@ vtns.off('click.load-lazy').on('click.load-lazy', (e) => { const vtn = e.target; vtn.nextElementSibling.querySelector('video'); - window.d = vtn; - {#console.log($(vtn).siblings().find('video')[0]);#} - {#console.log(vtn, e.target)#} LazyLoad.load($(vtn).siblings().find('video')[0], { callback_loaded: (e) => callbackLoaded(e, vtn), }); @@ -312,32 +371,13 @@ $('.slick-slider') .slick({ centerMode: true, + draggable: false, {#centerPadding: '160px',#} slidesToShow: 3, infinite: false, initialSlide: 1, {#lazyLoad: 'ondemand',#} {#lazyLoad: 'progressive',#} - responsive: [ - { - breakpoint: 768, - settings: { - arrows: false, - centerMode: true, - centerPadding: '40px', - slidesToShow: 3 - } - }, - { - breakpoint: 480, - settings: { - arrows: false, - centerMode: true, - centerPadding: '40px', - slidesToShow: 1 - } - } - ] }) .on('beforeChange', function (event, slick, currentSlide, nextSlide) { slick.$slides[currentSlide]?.querySelector('video')?.pause(); diff --git a/templates/tb_base.html b/templates/tb_base.html index 2439e96..98fe1cd 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -177,8 +177,11 @@ function gtag_report_conversion(url) { {% endif %}
- - {% include 'blocks/b_header.html' %} + {% if page.url == "landing_mover" or page.url == 'landing_customer' %} + {% include 'blocks/n_header.html' %} + {% else %} + {% include 'blocks/b_header.html' %} + {% endif %}