diff --git a/static/css/moover.css b/static/css/moover.css index 81d7b13..1ccab2a 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -133,6 +133,12 @@ p { } } +@media (max-width: 479.98px) { + p { + margin-bottom: 14px; + } +} + b { font-weight: 500; } @@ -1234,7 +1240,7 @@ b { @media (max-width: 767.98px) { .chatterbox { max-width: 100vw; - margin: 0 auto 100px; + margin: 0 auto 121px; position: relative; } } @@ -1404,6 +1410,13 @@ b { } } +@media (max-width: 767.98px) { + .chatterbox__vbtn::before { + width: 55px; + height: 55px; + } +} + .chatterbox__vbtn::before, .chatterbox__vbtn::after { content: ""; position: absolute; @@ -1470,7 +1483,7 @@ b { @media (max-width: 479.98px) { .chatterbox__mbtns { - top: 61%; + top: 61.6%; } } @@ -1484,6 +1497,12 @@ b { } } +@media (max-width: 767.98px) { + .chatterbox .title { + margin-bottom: 50px; + } +} + .chatterbox .slick-next { right: -40px; } @@ -1697,6 +1716,12 @@ b { } } +@media (max-width: 767.98px) { + .use--lett { + margin-bottom: 81px; + } +} + .use--lett .title { margin-bottom: 51px; } @@ -1707,6 +1732,12 @@ b { } } +@media (max-width: 767.98px) { + .use--lett .title { + margin-bottom: 0; + } +} + .use--lett .use__img { margin-left: -5px; margin-right: -5px; @@ -1729,6 +1760,14 @@ b { } } +@media (max-width: 767.98px) { + .use--lett .use__img { + max-width: 103%; + margin-left: -5px; + margin-top: -6px; + } +} + @media (max-width: 991.98px) { .use .h3 { max-width: 75%; @@ -2122,6 +2161,12 @@ b { } } +@media (max-width: 479.98px) { + .animate { + padding: 30px 7px 19px; + } +} + .animate.left { transform: translateX(-180px); } @@ -2153,12 +2198,24 @@ b { } } +@media (max-width: 479.98px) { + .animate.right .title { + margin-bottom: 20px; + } +} + @media (max-width: 991.98px) { .animate.right .subtitle { margin-bottom: 31px; } } +@media (max-width: 479.98px) { + .animate.right .use__btn { + margin-top: -11px; + } +} + .animate__link { color: var(--color-orange); text-decoration: underline !important; @@ -2190,6 +2247,13 @@ b { } } +@media (max-width: 767.98px) { + .animate .title { + max-width: 100%; + margin-bottom: 14px; + } +} + .animate .subtitle { width: 47%; margin: 0 auto 23px; @@ -2216,6 +2280,15 @@ b { } } +@media (max-width: 479.98px) { + .animate .use__btn { + margin-top: -6px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} + .about { margin-bottom: 168px; } @@ -2260,6 +2333,12 @@ b { } } +@media (max-width: 479.98px) { + .about .title { + margin-bottom: 37px; + } +} + .about__grid { display: grid; grid-template-columns: repeat(2, 1fr); @@ -2298,6 +2377,12 @@ b { } } +@media (max-width: 479.98px) { + .about__img { + margin-bottom: 38px; + } +} + .about__right { text-align: left; padding-top: 43px; @@ -2325,6 +2410,12 @@ b { } } +@media (max-width: 479.98px) { + .about__right { + padding: 0; + } +} + .about__right::after { content: ''; display: block; @@ -2365,6 +2456,12 @@ b { } } +@media (max-width: 479.98px) { + .about b { + letter-spacing: 0.9px; + } +} + @media (min-width: 1720px) { .about p { margin-bottom: 39px; @@ -2393,6 +2490,12 @@ b { } } +@media (max-width: 479.98px) { + .benefits { + margin-bottom: 103px; + } +} + .benefits__grid { text-align: left; display: grid; @@ -2405,6 +2508,13 @@ b { } } +@media (max-width: 479.98px) { + .benefits__grid { + grid-template-columns: 1fr; + text-align: center; + } +} + .benefits__item { min-height: 122px; padding-right: 7px; @@ -2423,6 +2533,14 @@ b { } } +@media (max-width: 479.98px) { + .benefits__item { + padding-right: 0; + margin-bottom: 19px; + min-height: 90px; + } +} + @media (max-width: 991.98px) { .benefits__second { grid-column: 1 / 3; @@ -2431,6 +2549,13 @@ b { } } +@media (max-width: 479.98px) { + .benefits__second { + grid-column: 1/2; + margin-bottom: 31px; + } +} + .benefits__third { padding-left: 16px; } @@ -2448,6 +2573,12 @@ b { } } +@media (max-width: 479.98px) { + .benefits__third { + padding-left: 0; + } +} + .benefits .title { margin-bottom: 76px; } @@ -2489,6 +2620,12 @@ b { } } +@media (max-width: 479.98px) { + .benefits p { + margin-bottom: 13px; + } +} + .uses { margin-bottom: 120px; } @@ -2511,6 +2648,12 @@ b { } } +@media (max-width: 479.98px) { + .uses { + margin-bottom: 199px; + } +} + .uses__grid { text-align: left; display: grid; @@ -2526,6 +2669,13 @@ b { } } +@media (max-width: 479.98px) { + .uses__grid { + display: block; + text-align: center; + } +} + .uses__item { min-height: 50px; margin-bottom: 19px; @@ -2574,6 +2724,12 @@ b { } } +@media (max-width: 479.98px) { + .uses .title { + margin-bottom: 30px; + } +} + .sore { margin-bottom: 160px; margin-top: 1px; @@ -2597,6 +2753,12 @@ b { } } +@media (max-width: 479.98px) { + .sore { + margin-bottom: 40px; + } +} + .sore__img { margin: 0 auto 13px; position: relative; @@ -2628,6 +2790,15 @@ b { } } +@media (max-width: 479.98px) { + .sore__img { + max-width: 106%; + top: -26px; + left: -18px; + margin-bottom: 4px; + } +} + .sore .title { margin-bottom: 40px; } @@ -2644,6 +2815,12 @@ b { } } +@media (max-width: 479.98px) { + .sore .title { + margin-bottom: 29px; + } +} + .sore .subtitle { max-width: 62%; margin: 0 auto 10px; @@ -2668,6 +2845,12 @@ b { } } +@media (max-width: 479.98px) { + .sore .subtitle { + max-width: 99%; + } +} + .sore .h3 { max-width: 47%; margin: 0 auto 19px; @@ -2691,3 +2874,20 @@ b { margin-bottom: 21px; } } + +@media (max-width: 479.98px) { + .sore .h3 { + max-width: 100%; + margin-bottom: 17px; + } +} + +@media (max-width: 479.98px) { + .sore__btn { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} diff --git a/static/css/moover/about.css b/static/css/moover/about.css index 782c7c1..191fba1 100644 --- a/static/css/moover/about.css +++ b/static/css/moover/about.css @@ -42,6 +42,12 @@ } } +@media (max-width: 479.98px) { + .about .title { + margin-bottom: 37px; + } +} + .about__grid { display: grid; grid-template-columns: repeat(2, 1fr); @@ -80,6 +86,12 @@ } } +@media (max-width: 479.98px) { + .about__img { + margin-bottom: 38px; + } +} + .about__right { text-align: left; padding-top: 43px; @@ -107,6 +119,12 @@ } } +@media (max-width: 479.98px) { + .about__right { + padding: 0; + } +} + .about__right::after { content: ''; display: block; @@ -147,6 +165,12 @@ } } +@media (max-width: 479.98px) { + .about b { + letter-spacing: 0.9px; + } +} + @media (min-width: 1720px) { .about p { margin-bottom: 39px; diff --git a/static/css/moover/animate.css b/static/css/moover/animate.css index 7b690cf..b7c5d7b 100644 --- a/static/css/moover/animate.css +++ b/static/css/moover/animate.css @@ -29,6 +29,12 @@ } } +@media (max-width: 479.98px) { + .animate { + padding: 30px 7px 19px; + } +} + .animate.left { transform: translateX(-180px); } @@ -60,12 +66,24 @@ } } +@media (max-width: 479.98px) { + .animate.right .title { + margin-bottom: 20px; + } +} + @media (max-width: 991.98px) { .animate.right .subtitle { margin-bottom: 31px; } } +@media (max-width: 479.98px) { + .animate.right .use__btn { + margin-top: -11px; + } +} + .animate__link { color: var(--color-orange); text-decoration: underline !important; @@ -97,6 +115,13 @@ } } +@media (max-width: 767.98px) { + .animate .title { + max-width: 100%; + margin-bottom: 14px; + } +} + .animate .subtitle { width: 47%; margin: 0 auto 23px; @@ -122,3 +147,12 @@ margin-bottom: 26px; } } + +@media (max-width: 479.98px) { + .animate .use__btn { + margin-top: -6px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} diff --git a/static/css/moover/benefits.css b/static/css/moover/benefits.css index 36b43a2..d689a13 100644 --- a/static/css/moover/benefits.css +++ b/static/css/moover/benefits.css @@ -20,6 +20,12 @@ } } +@media (max-width: 479.98px) { + .benefits { + margin-bottom: 103px; + } +} + .benefits__grid { text-align: left; display: grid; @@ -32,6 +38,13 @@ } } +@media (max-width: 479.98px) { + .benefits__grid { + grid-template-columns: 1fr; + text-align: center; + } +} + .benefits__item { min-height: 122px; padding-right: 7px; @@ -50,6 +63,14 @@ } } +@media (max-width: 479.98px) { + .benefits__item { + padding-right: 0; + margin-bottom: 19px; + min-height: 90px; + } +} + @media (max-width: 991.98px) { .benefits__second { grid-column: 1 / 3; @@ -58,6 +79,13 @@ } } +@media (max-width: 479.98px) { + .benefits__second { + grid-column: 1/2; + margin-bottom: 31px; + } +} + .benefits__third { padding-left: 16px; } @@ -75,6 +103,12 @@ } } +@media (max-width: 479.98px) { + .benefits__third { + padding-left: 0; + } +} + .benefits .title { margin-bottom: 76px; } @@ -115,3 +149,9 @@ margin-bottom: 10px; } } + +@media (max-width: 479.98px) { + .benefits p { + margin-bottom: 13px; + } +} diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css index ae052a9..38e8e22 100644 --- a/static/css/moover/chatterbox.css +++ b/static/css/moover/chatterbox.css @@ -25,7 +25,7 @@ @media (max-width: 767.98px) { .chatterbox { max-width: 100vw; - margin: 0 auto 100px; + margin: 0 auto 121px; position: relative; } } @@ -195,6 +195,13 @@ } } +@media (max-width: 767.98px) { + .chatterbox__vbtn::before { + width: 55px; + height: 55px; + } +} + .chatterbox__vbtn::before, .chatterbox__vbtn::after { content: ""; position: absolute; @@ -261,7 +268,7 @@ @media (max-width: 479.98px) { .chatterbox__mbtns { - top: 61%; + top: 61.6%; } } @@ -275,6 +282,12 @@ } } +@media (max-width: 767.98px) { + .chatterbox .title { + margin-bottom: 50px; + } +} + .chatterbox .slick-next { right: -40px; } diff --git a/static/css/moover/root.css b/static/css/moover/root.css index 19e0210..12ba8f0 100644 --- a/static/css/moover/root.css +++ b/static/css/moover/root.css @@ -133,6 +133,12 @@ p { } } +@media (max-width: 479.98px) { + p { + margin-bottom: 14px; + } +} + b { font-weight: 500; } diff --git a/static/css/moover/sore.css b/static/css/moover/sore.css index b55894d..1ff0e29 100644 --- a/static/css/moover/sore.css +++ b/static/css/moover/sore.css @@ -21,6 +21,12 @@ } } +@media (max-width: 479.98px) { + .sore { + margin-bottom: 40px; + } +} + .sore__img { margin: 0 auto 13px; position: relative; @@ -52,6 +58,15 @@ } } +@media (max-width: 479.98px) { + .sore__img { + max-width: 106%; + top: -26px; + left: -18px; + margin-bottom: 4px; + } +} + .sore .title { margin-bottom: 40px; } @@ -68,6 +83,12 @@ } } +@media (max-width: 479.98px) { + .sore .title { + margin-bottom: 29px; + } +} + .sore .subtitle { max-width: 62%; margin: 0 auto 10px; @@ -92,6 +113,12 @@ } } +@media (max-width: 479.98px) { + .sore .subtitle { + max-width: 99%; + } +} + .sore .h3 { max-width: 47%; margin: 0 auto 19px; @@ -115,3 +142,20 @@ margin-bottom: 21px; } } + +@media (max-width: 479.98px) { + .sore .h3 { + max-width: 100%; + margin-bottom: 17px; + } +} + +@media (max-width: 479.98px) { + .sore__btn { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} diff --git a/static/css/moover/use.css b/static/css/moover/use.css index 0151a60..6e78793 100644 --- a/static/css/moover/use.css +++ b/static/css/moover/use.css @@ -122,6 +122,12 @@ } } +@media (max-width: 767.98px) { + .use--lett { + margin-bottom: 81px; + } +} + .use--lett .title { margin-bottom: 51px; } @@ -132,6 +138,12 @@ } } +@media (max-width: 767.98px) { + .use--lett .title { + margin-bottom: 0; + } +} + .use--lett .use__img { margin-left: -5px; margin-right: -5px; @@ -154,6 +166,14 @@ } } +@media (max-width: 767.98px) { + .use--lett .use__img { + max-width: 103%; + margin-left: -5px; + margin-top: -6px; + } +} + @media (max-width: 991.98px) { .use .h3 { max-width: 75%; diff --git a/static/css/moover/uses.css b/static/css/moover/uses.css index 866da1e..baebd86 100644 --- a/static/css/moover/uses.css +++ b/static/css/moover/uses.css @@ -20,6 +20,12 @@ } } +@media (max-width: 479.98px) { + .uses { + margin-bottom: 199px; + } +} + .uses__grid { text-align: left; display: grid; @@ -35,6 +41,13 @@ } } +@media (max-width: 479.98px) { + .uses__grid { + display: block; + text-align: center; + } +} + .uses__item { min-height: 50px; margin-bottom: 19px; @@ -82,3 +95,9 @@ margin-bottom: 39px; } } + +@media (max-width: 479.98px) { + .uses .title { + margin-bottom: 30px; + } +} diff --git a/static/img/png/sore-328.png b/static/img/png/sore-328.png index ea8cdec..5c1e715 100644 Binary files a/static/img/png/sore-328.png and b/static/img/png/sore-328.png differ diff --git a/styles/moover/about.scss b/styles/moover/about.scss index 4f5e61a..6176e2b 100644 --- a/styles/moover/about.scss +++ b/styles/moover/about.scss @@ -27,6 +27,10 @@ @media (max-width: 991.98px) { margin-bottom: 48px; } + + @media (max-width: 479.98px) { + margin-bottom: 37px; + } } &__grid { @@ -60,6 +64,10 @@ margin-bottom: 49px; display: block; } + + @media (max-width: 479.98px) { + margin-bottom: 38px; + } } &__right { @@ -82,6 +90,10 @@ text-align: center; } + @media (max-width: 479.98px) { + padding: 0; + } + &::after { content: ''; display: block; @@ -115,6 +127,10 @@ font-weight: 700; letter-spacing: 0; } + + @media (max-width: 479.98px) { + letter-spacing: 0.9px; + } } p { diff --git a/styles/moover/animate.scss b/styles/moover/animate.scss index 415a398..8a621d0 100644 --- a/styles/moover/animate.scss +++ b/styles/moover/animate.scss @@ -22,6 +22,10 @@ margin-bottom: 121px; } + @media (max-width: 479.98px) { + padding: 30px 7px 19px; + } + &.left { transform: translateX(-180px); } @@ -41,16 +45,26 @@ margin-bottom: 25px; } - @media (max-width: 991.98px) { - margin-bottom: 31px; -} + @media (max-width: 991.98px) { + margin-bottom: 31px; + } + + @media (max-width: 479.98px) { + margin-bottom: 20px; + } } .subtitle { - @media (max-width: 991.98px) { - margin-bottom: 31px; -} + @media (max-width: 991.98px) { + margin-bottom: 31px; + } + } + + .use__btn { + @media (max-width: 479.98px) { + margin-top: -11px; + } } } @@ -78,6 +92,11 @@ font-size: 24px; line-height: 29.05px; } + + @media (max-width: 767.98px) { + max-width: 100%; + margin-bottom: 14px; + } } .subtitle { @@ -99,4 +118,15 @@ margin-bottom: 26px; } } + + .use__btn { + + @media (max-width: 479.98px) { + margin-top: -6px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } + } + } diff --git a/styles/moover/benefits.scss b/styles/moover/benefits.scss index ead7f45..73eece7 100644 --- a/styles/moover/benefits.scss +++ b/styles/moover/benefits.scss @@ -13,6 +13,10 @@ margin-bottom: 93px; } + @media (max-width: 479.98px) { + margin-bottom: 103px; + } + &__grid { text-align: left; display: grid; @@ -21,6 +25,11 @@ @media (max-width: 991.98px) { grid-template-columns: 1fr 1fr; } + + @media (max-width: 479.98px) { + grid-template-columns: 1fr; + text-align: center; + } } &__item { @@ -35,6 +44,12 @@ @media (max-width: 991.98px) { padding-right: 25px; } + + @media (max-width: 479.98px) { + padding-right: 0; + margin-bottom: 19px; + min-height: 90px; + } } @@ -45,6 +60,11 @@ order: -1; margin-bottom: 56px; } + + @media (max-width: 479.98px) { + grid-column: 1/2; + margin-bottom: 31px; + } } &__third { @@ -58,6 +78,10 @@ @media (max-width: 991.98px) { padding-left: 11px; } + + @media (max-width: 479.98px) { + padding-left: 0; + } } .title { @@ -92,4 +116,11 @@ margin-bottom: 10px; } } + + p { + @media (max-width: 479.98px) { + margin-bottom: 13px; + + } + } } \ No newline at end of file diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss index 51eac11..d823d27 100644 --- a/styles/moover/chatterbox.scss +++ b/styles/moover/chatterbox.scss @@ -18,7 +18,7 @@ @media (max-width: 767.98px) { max-width: 100vw; - margin: 0 auto 100px; + margin: 0 auto 121px; position: relative; } @@ -162,6 +162,11 @@ width: 48px; height: 48px; } + + @media (max-width: 767.98px) { + width: 55px; + height: 55px; + } } &::before, @@ -221,7 +226,7 @@ right: 0; @media (max-width: 479.98px) { - top: 61%; + top: 61.6%; } } @@ -231,6 +236,10 @@ @media (max-width: 1304.98px) { margin-bottom: 39px; } + + @media (max-width: 767.98px) { + margin-bottom: 50px; + } } .slick-next { diff --git a/styles/moover/root.scss b/styles/moover/root.scss index 6922bf8..96a8802 100644 --- a/styles/moover/root.scss +++ b/styles/moover/root.scss @@ -120,6 +120,10 @@ p { @media (max-width: 991.98px) { margin-bottom: 18px; } + + @media (max-width: 479.98px) { + margin-bottom: 14px; + } } b { @@ -175,7 +179,7 @@ b { @media (max-width: 767.98px) { margin-bottom: 14px; -} + } } .subtitle { diff --git a/styles/moover/sore.scss b/styles/moover/sore.scss index 5414a2c..365c113 100644 --- a/styles/moover/sore.scss +++ b/styles/moover/sore.scss @@ -14,6 +14,10 @@ margin-bottom: 60px; } + @media (max-width: 479.98px) { + margin-bottom: 40px; + } + &__img { margin: 0 auto 13px; position: relative; @@ -37,6 +41,13 @@ left: -15px; margin-bottom: 18px; } + + @media (max-width: 479.98px) { + max-width: 106%; + top: -26px; + left: -18px; + margin-bottom: 4px; + } } .title { @@ -49,6 +60,10 @@ @media (max-width: 991.98px) { margin-bottom: 20px; } + + @media (max-width: 479.98px) { + margin-bottom: 29px; + } } @@ -68,6 +83,10 @@ @media (max-width: 991.98px) { max-width: 85%; } + + @media (max-width: 479.98px) { + max-width: 99%; + } } .h3 { @@ -86,5 +105,20 @@ max-width: 65%; margin-bottom: 21px; } + @media (max-width: 479.98px) { + max-width: 100%; + margin-bottom: 17px; + } } + + &__btn { + @media (max-width: 479.98px) { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } + } + } diff --git a/styles/moover/use.scss b/styles/moover/use.scss index 6105b4b..fd603c9 100644 --- a/styles/moover/use.scss +++ b/styles/moover/use.scss @@ -46,10 +46,10 @@ text-align: center; @media (max-width: 767.98px) { - max-width: 100%; + max-width: 100%; padding-left: 50px; padding-right: 50px; - } + } } &__link { @@ -92,6 +92,10 @@ margin-bottom: 79px; } + @media (max-width: 767.98px) { + margin-bottom: 81px; + } + .title { margin-bottom: 51px; @@ -99,6 +103,10 @@ @media (max-width: 1304.98px) { margin-bottom: 39px; } + + @media (max-width: 767.98px) { + margin-bottom: 0; + } } .use__img { @@ -118,6 +126,11 @@ width: 1120px; } + @media (max-width: 767.98px) { + max-width: 103%; + margin-left: -5px; + margin-top: -6px; + } } } @@ -128,9 +141,9 @@ } @media (max-width: 767.98px) { - max-width: 100%; + max-width: 100%; margin-bottom: 16px; - } + } } } diff --git a/styles/moover/uses.scss b/styles/moover/uses.scss index d96b46a..900ce09 100644 --- a/styles/moover/uses.scss +++ b/styles/moover/uses.scss @@ -13,6 +13,10 @@ margin-bottom: 100px; } + @media (max-width: 479.98px) { + margin-bottom: 199px; + } + &__grid { text-align: left; display: grid; @@ -24,6 +28,11 @@ grid-template-columns: 1fr 1fr; column-gap: 15px; } + + @media (max-width: 479.98px) { + display: block; + text-align: center; + } } @@ -67,6 +76,10 @@ max-width: 70%; margin-bottom: 39px; } + + @media (max-width: 479.98px) { + margin-bottom: 30px; + } } } \ No newline at end of file