Fix | task 6607 (изменил форму на главной) (#28)

Co-authored-by: maksim <maksim@good-production.ru> Reviewed-on: #28
2 months ago · 1bebb51162
parent 79ea13566a
commit 1bebb51162
4 changed files with 280 additions and 3 deletions
--- 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;
@ -4281,3 +4282,269 @@ 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;
+}
--- 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 @@
 <svg width="236" height="23" viewBox="0 0 236 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M224.291 1L234.5 11.5M234.5 11.5L224.291 22M234.5 11.5L1 11.5" stroke="#121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M224.291 1L234.5 11.5M234.5 11.5L224.291 22M234.5 11.5L1 11.5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/wp-content/themes/cosmopet/templates/forms/discount.twig
+++ b/wp-content/themes/cosmopet/templates/forms/discount.twig
@ -1,15 +1,24 @@
-<section class="discount__sale sec-bf">
+<section class="{% if class %} {{ class }}{% else %}discount__sale{% endif %} sec-bf">
        <div class="container">
            <div class="discount_top">
                <h3 class="discount_title">{{sub_title}}</span>
                </h3>
                <div class="discount_top-imgs">
+                {% if class %}
+                 <img class="dicount_dog-img img--desktop"
+                        src="{{ theme.link }}/static/front-page/img/labrador%20with%20stars.png"
+                        alt="">
+                    <img class="dicount_dog-img img--mobile"
+                        src="{{ theme.link }}/static/front-page/img/labrador%20with%20stars%20--%20mobile.png"
+                        alt="">
+                {% else %}
                    <img class="dicount_dog-img img--desktop"
                        src="{{ theme.link }}/static/front-page/img/dicsount-sale.png"
                        alt="">
                    <img class="dicount_dog-img img--mobile"
                        src="{{ theme.link }}/static/front-page/img/dicsount-sale-mob.png"
                        alt="">
+                        {% endif %}
                </div>
            </div>
            <div class="dicsount__body">
@ -20,7 +29,7 @@

 <div class="discount_form ">
  <span class="" data-name="subscriber"><input size="40" class="discount_form-inp" aria-required="true" aria-invalid="false" placeholder="{{ function('pll_e', 'Эл.почта') }}" value="" type="email" name="subscriber"></span>
-  <img src="/wp-content/themes/cosmopet/static/front-page/img/discount-line-w.svg" data-src="https://cosmopet.shop/wp-content/themes/woodmart/images/svg/discount-line-w.svg" decoding="async" class=" lazyloaded"><noscript><img src="https://cosmopet.shop/wp-content/themes/woodmart/images/svg/discount-line-w.svg" data-eio="l"></noscript>
+  <img src="/wp-content/themes/cosmopet/static/front-page/img/discount-line{% if class %}-w{% endif %}.svg">
  
  <input type="hidden" name="from_url" value="{{ current_url }}">
 <input type="hidden" name="form_name" value="Subscribtion form">
--- a/wp-content/themes/cosmopet/templates/front-page/front-page.twig
+++ b/wp-content/themes/cosmopet/templates/front-page/front-page.twig
@ -690,6 +690,7 @@
 {% endif %}

 {% if show_promo %}
+    {% set class = 'discount_block' %}
    {% include 'forms/discount.twig' %}
 {% endif %}