diff --git a/static/css/moover.css b/static/css/moover.css index 336c006..7b091e5 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -1,15 +1,16 @@ .container { margin: 0 auto; - max-width: 1280px; + width: 1280px; position: relative; min-height: 695px; } -/*@media (max-width: 1339.98px) {*/ -/* .container {*/ -/* width: 992px*/ -/* }*/ -/*}*/ +@media (min-width: 1720px) { + .container { + width: 1720px; + } +} + /*@media (max-width: 1019.98px) {*/ /* .container {*/ /* width: 720px*/ @@ -39,11 +40,18 @@ font-weight: 700; } -h1, .title { +h1, .h1 { font-size: 44px; line-height: 52px; } +@media (min-width: 1720px) { + h1, .h1 { + font-size: 48px; + line-height: 52px; + } +} + h2, .h2 { font-size: 24px; line-height: 36px; @@ -99,27 +107,64 @@ b { margin-right: auto; } +@media (min-width: 1720px) { + .title { + font-size: 44px; + margin-bottom: 22px; + } +} + .subtitle { margin-bottom: 81px; line-height: 22px; } +@media (min-width: 1720px) { + .subtitle { + font-size: 20px; + margin-bottom: 97px; + } +} + .hide { display: none; } +@media (min-width: 1440px) { + .is-container.wrapper_main { + max-width: initial; + } +} + .presentation { margin: 20px -65px 140px; } +@media (min-width: 1720px) { + .presentation { + margin-left: 0; + margin-right: 0; + } +} + .presentation__top { position: relative; min-height: 270px; margin: 0 auto 116px; padding: 29px 0 40px; - background-image: url(/static/img/webp/Box9.webp), url(/static/img/webp/Box10.webp), url(/static/img/webp/Box11.webp), url(/static/img/webp/Box12.webp); - background-position: top -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px; + 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) { + .presentation__top { + 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 { diff --git a/static/css/moover/presentation.css b/static/css/moover/presentation.css new file mode 100644 index 0000000..7bbcc8f --- /dev/null +++ b/static/css/moover/presentation.css @@ -0,0 +1,84 @@ +.presentation { + margin: 20px -65px 140px; +} + +@media (min-width: 1720px) { + .presentation { + margin-left: 0; + margin-right: 0; + } +} + +.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%; +} + +@media (min-width: 1720px) { + .presentation__top { + 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; +} + +.presentation__subtitle { + margin-bottom: 41px; + font-weight: 600; +} + +.presentation__btn { + margin-bottom: 40px; +} + +.presentation__next { + font-weight: 500; + line-height: 22px; + padding-right: 5px; +} + +.presentation__arrows { + padding-top: 2px; + animation: jump 2s ease-in-out infinite; +} + +@keyframes jump { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } + 60% { + transform: translateY(20px); + } + 70% { + transform: translateY(0px); + } + 80% { + transform: translateY(20px); + } + 100% { + 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 new file mode 100644 index 0000000..81068b6 --- /dev/null +++ b/static/css/moover/root.css @@ -0,0 +1,137 @@ +.container { + margin: 0 auto; + width: 1280px; + position: relative; + min-height: 695px; +} + +@media (min-width: 1720px) { + .container { + width: 1720px; + } +} + +/*@media (max-width: 1019.98px) {*/ +/* .container {*/ +/* width: 720px*/ +/* }*/ +/*}*/ +/*@media (max-width: 767.98px) {*/ +/* .container {*/ +/* margin: 0 15px;*/ +/* width: auto*/ +/* }*/ +/*}*/ +:root { + --color-primary: #FF613A; + --color-white: #FFFFFF; + --color-black: #000000; + --color-black2: #272424; + --color-grey: #F1F1F1; + --color-grey2: #7A7979; + --color-orange: #FF613A; + --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), + 0 -1px 10px 0 rgba(198, 199, 203, 0.20); + text-align: center; + color: var(--color-black2); +} + +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + font-weight: 700; +} + +h1, .h1 { + font-size: 44px; + line-height: 52px; +} + +@media (min-width: 1720px) { + h1, .h1 { + font-size: 48px; + line-height: 52px; + } +} + +h2, .h2 { + font-size: 24px; + line-height: 36px; + margin-bottom: 10px; +} + +h3, .h3 { + font-size: 20px; + line-height: 28px; + margin-bottom: 12px; +} + +h4, .h4 { + font-size: 18px; + line-height: 26px; + margin-bottom: 20px; +} + +p { + line-height: 22px; + margin-bottom: 20px; +} + +b { + font-weight: 500; +} + +.btn { + display: inline-flex; + text-decoration: none; + color: black; + line-height: 22px; + border-radius: 10px; + padding: 20px 76px 18px; + justify-content: center; + align-items: center; + margin: 0 3px; + letter-spacing: 0.2px; + font-size: 18px; +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); +} + +.title { + font-size: 44px; + font-weight: 700; + line-height: 52px; + margin-bottom: 13px; + margin-left: auto; + margin-right: auto; +} + +@media (min-width: 1720px) { + .title { + font-size: 44px; + margin-bottom: 22px; + } +} + +.subtitle { + margin-bottom: 81px; + line-height: 22px; +} + +@media (min-width: 1720px) { + .subtitle { + font-size: 20px; + margin-bottom: 97px; + } +} + +.hide { + display: none; +} + +@media (min-width: 1440px) { + .is-container.wrapper_main { + max-width: initial; + } +} diff --git a/static/img/png/Box10.png b/static/img/png/Box10.png new file mode 100644 index 0000000..ae48cdc Binary files /dev/null and b/static/img/png/Box10.png differ diff --git a/static/img/png/Box11.png b/static/img/png/Box11.png new file mode 100644 index 0000000..11d95a5 Binary files /dev/null and b/static/img/png/Box11.png differ diff --git a/static/img/png/Box12.png b/static/img/png/Box12.png new file mode 100644 index 0000000..128be65 Binary files /dev/null and b/static/img/png/Box12.png differ diff --git a/static/img/png/Box9.png b/static/img/png/Box9.png new file mode 100644 index 0000000..759d170 Binary files /dev/null and b/static/img/png/Box9.png differ diff --git a/static/img/webp/Box10.webp b/static/img/webp/Box10.webp deleted file mode 100644 index c81f80d..0000000 Binary files a/static/img/webp/Box10.webp and /dev/null differ diff --git a/static/img/webp/Box11.webp b/static/img/webp/Box11.webp deleted file mode 100644 index 07d3fdd..0000000 Binary files a/static/img/webp/Box11.webp and /dev/null differ diff --git a/static/img/webp/Box12.webp b/static/img/webp/Box12.webp deleted file mode 100644 index 0cdd4d6..0000000 Binary files a/static/img/webp/Box12.webp and /dev/null differ diff --git a/static/img/webp/Box9.webp b/static/img/webp/Box9.webp deleted file mode 100644 index de27aec..0000000 Binary files a/static/img/webp/Box9.webp and /dev/null differ diff --git a/styles/moover/presentation.scss b/styles/moover/presentation.scss index 8de8836..8ff4492 100644 --- a/styles/moover/presentation.scss +++ b/styles/moover/presentation.scss @@ -1,5 +1,10 @@ .presentation { margin: 20px -65px 140px; + + @media (min-width: 1720px) { + margin-left: 0; + margin-right: 0; + } } .presentation__top { @@ -7,18 +12,29 @@ min-height: 270px; margin: 0 auto 116px; padding: 29px 0 40px; - background-image: url(/static/img/webp/Box9.webp), - url(/static/img/webp/Box10.webp), - url(/static/img/webp/Box11.webp), - url(/static/img/webp/Box12.webp); - background-position: top -5px left 44px, - top -30px right -15px, - bottom 70px left 276px, - bottom 67px right 274px; + 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; + } } .presentation__title { diff --git a/styles/moover/root.scss b/styles/moover/root.scss index c26f7b3..0a2c9b7 100644 --- a/styles/moover/root.scss +++ b/styles/moover/root.scss @@ -1,15 +1,16 @@ .container { margin: 0 auto; - max-width: 1280px; + width: 1280px; position: relative; min-height: 695px; } -/*@media (max-width: 1339.98px) {*/ -/* .container {*/ -/* width: 992px*/ -/* }*/ -/*}*/ +@media (min-width: 1720px) { + .container { + width: 1720px; + } +} + /*@media (max-width: 1019.98px) {*/ /* .container {*/ @@ -23,6 +24,7 @@ /* width: auto*/ /* }*/ /*}*/ + :root { --color-primary: #FF613A; --color-white: #FFFFFF; @@ -33,8 +35,6 @@ --color-orange: #FF613A; - - --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20); text-align: center; @@ -46,9 +46,14 @@ } -h1, .title { +h1, .h1 { font-size: 44px; line-height: 52px; + + @media (min-width: 1720px) { + font-size: 48px; + line-height: 52px; + } } h2, .h2 { @@ -58,8 +63,8 @@ h2, .h2 { } h3, .h3 { -font-size: 20px; -line-height: 28px; + font-size: 20px; + line-height: 28px; margin-bottom: 12px; } @@ -105,13 +110,29 @@ b { margin-bottom: 13px; margin-left: auto; margin-right: auto; + + @media (min-width: 1720px) { + font-size: 44px; + margin-bottom: 22px; + } } .subtitle { margin-bottom: 81px; line-height: 22px; + + @media (min-width: 1720px) { + font-size: 20px; + margin-bottom: 97px; + } } .hide { display: none; +} + +@media (min-width: 1440px) { + .is-container.wrapper_main { + max-width: initial; + } } \ 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 305dfed..99b0191 100644 --- a/templates/pages/p_mover_landing_page.html +++ b/templates/pages/p_mover_landing_page.html @@ -12,7 +12,7 @@ {% block content %}
-

+

{% blocktrans %} Сервис попутных посылок {% endblocktrans %} diff --git a/templates/tb_base.html b/templates/tb_base.html index 9a49310..2439e96 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -176,7 +176,7 @@ function gtag_report_conversion(url) { {% if mobile == 'false' or mobile %} {% endif %}
-
+
{% include 'blocks/b_header.html' %}