diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css index 61cc78b..a874969 100644 --- a/wp-content/themes/cosmopet/static/front-page/css/style.css +++ b/wp-content/themes/cosmopet/static/front-page/css/style.css @@ -1076,6 +1076,7 @@ border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) max-width: 778px; margin-bottom: 27px; } + .discount_block .discount_text{ font-size: 20px; line-height: 24px; @@ -4280,4 +4281,270 @@ color: #f4f1f0; .invisible { visibility: hidden; +} + + +/* Discount start */ +.discount{ + padding-top: 50px; + padding-bottom: 50px; +} +.discount .discount_block{ + display: flex; + flex-direction: column; +} +.discount .discount_top{ + position: relative; + margin-bottom: 50px; +} +.discount_top .discount_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +.discount_top .discount_top-imgs{ + position: absolute; + top: 55px; + right: -80px; +} +.discount_block .discount_form{ + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 6px; +} +.discount_form .discount_form-btn { + background: inherit; + min-height: unset; +} +.discount_form .discount_form-btn:hover{ + background: var(--btn-color); + border-color: var(--btn-color); + color: #3ab18f; +} +.discount_form .discount_form-inp{ + width: 280px; + height: 50px; + border: 2px solid var(--creme-white, #F4F1F0); + padding: 10px 18px; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); + border-radius: 28px; + opacity: .6; +} +.discount_form .discount_form-inp::placeholder{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); +} +.discount_form .discount_form-btn { + text-transform: lowercase; +} +.discount_block .discount_form-text{ + font-size: 14px; + line-height: 16.8px; + color: var(--creme-white, #F4F1F0); + opacity: .6; + max-width: 778px; + margin-bottom: 27px; +} +.discount_block .discount_text{ + font-size: 20px; + line-height: 24px; + color: var(--creme-white, #F4F1F0); +} + +.discount_block .discount_cosmodog{ + position: relative; + width: 100%; + height: 626px; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + display: flex; + align-items: end; + justify-content: center; + overflow: hidden; + cursor: pointer; +} +.discount_cosmodog .discount_cosmodog-img{ + + width: 100%; + height: 100%; + object-fit: cover; + +} + +.discount_cosmodog__slider{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.discount_cosmodog .discount_cosmodog-img.active{ + opacity: 1; +} +.discount_cosmodog:hover .discount_cosmodog-img:nth-child(2) { + opacity: 1; +} +.discount_cosmodog .discount_cosmodog_info{ + position: relative; + z-index: 1; + padding: 33px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: end; + background: linear-gradient(0deg, #F4F1F0 56%, rgba(244, 241, 240, 0) 100%); + width: 100%; + height: 219px; +} +.discount_cosmodog .discount_cosmodog-title{ + font-size: 40px; + font-weight: 700; + line-height: 48px; + text-align: center; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.discount_cosmodog .discount_cosmodog-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; +} + +/* Discount end */ + +@media only screen and (max-width: 1170px) { + .discount_top .discount_title { + font-size: 60px; + max-width: 550px; + line-height: 65px; + } + .discount_top .discount_top-imgs { + position: absolute; + top: 20px; + right: -50px; + } + .discount_top .discount_top-imgs .dicount_dog-img { + width: 400px; + } + + +} + +@media (max-width: 576px){ + /* Узнайте о нас больше и получите скидку! */ + .discount { + padding: 0px 0 43px; + } + .discount_top .discount_title, + .blog_block .blog_title, + .truth_block .truth_block-title, + .about_us .about_us-title, + .sellers_top .sellers_title { + font-size: 30px; + line-height: 36px; + } + + .discount_block .discount_text { + max-width: 260px; + } + + .discount_top .discount_top-imgs { + right: -136px; + top: 87px; + } + + .discount_top .discount_top-imgs .dicount_dog-img { + width: 314px; + width: 110vw; + } + + .discount_form .discount_form-inp { + height: 29px; + padding: 6px 13px; + font-size: 12px; + line-height: 14.4px; + } + + .discount_form .discount_form-inp::placeholder { + font-size: 12px; + line-height: 14.4px; + } +.discount_block .discount_text { + font-size: 12px; + line-height: 14.2px; + } + .discount_block .discount_form .discount_form-inp{ + width: 100%; + } + .discount_form .discount_form-btn { + justify-content: start; + padding: 5px 15px; + background: var(--creme-white, #F4F1F0); + color: #62c57e; + opacity: 0.6; + } + .discount_form img{ + display: none; + } + .discount_form span{ + width: 100%; + } + + .discount_block .discount_cosmodog { + border-radius: 25px; + height: 415px; + } + + .discount_cosmodog .discount_cosmodog_info { + height: 245px; + gap: 14px; + padding: 10px 19px; + } + + .discount_cosmodog .discount_cosmodog-title { + text-align: start; + font-size: 26px; + line-height: 31.2px; + max-width: 202px; + margin-right: auto; + } + + .discount_cosmodog .discount_cosmodog-text { + font-size: 12px; + line-height: 14.4px; + max-width: 231px; + text-align: start; + margin-right: auto; + } + + .discount_top .discount_top-imgs { + right: -20%; + top: 0; + transform: scale(1.8); + z-index: 0; + margin-bottom: -91%; + margin-top: 20%; + position: relative; + } + + .discount_block .wpcf7 { + order: 3; + } + + /* Узнайте о нас больше и получите скидку! - конец */ +} + +.discount_block{ + padding-bottom: 80px; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg b/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg index bd7fb64..0d4a0a2 100644 --- a/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg +++ b/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg @@ -1,3 +1,3 @@ - + diff --git a/wp-content/themes/cosmopet/templates/forms/discount.twig b/wp-content/themes/cosmopet/templates/forms/discount.twig index d3acd3b..fbc15f7 100644 --- a/wp-content/themes/cosmopet/templates/forms/discount.twig +++ b/wp-content/themes/cosmopet/templates/forms/discount.twig @@ -1,15 +1,24 @@ -
+

{{sub_title}}

+ {% if class %} + + + {% else %} + {% endif %}
@@ -20,7 +29,7 @@
- + diff --git a/wp-content/themes/cosmopet/templates/front-page/front-page.twig b/wp-content/themes/cosmopet/templates/front-page/front-page.twig index 2ef50e5..3eefdf1 100644 --- a/wp-content/themes/cosmopet/templates/front-page/front-page.twig +++ b/wp-content/themes/cosmopet/templates/front-page/front-page.twig @@ -689,6 +689,7 @@ {% endif %} {% if show_promo %} + {% set class = 'discount_block' %} {% include 'forms/discount.twig' %} {% endif %}