Task:6781 | Стили и верстка главной

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -2031,7 +2031,7 @@ textarea{
 /* breadcrumbs */
 
 .home {
-    padding: 60px 0 68px;
+    padding: 0px 0 0px;
 }
 
 .wc-block-components-checkout-place-order-button{
@@ -2166,7 +2166,6 @@ textarea{
 }
 
 .about_slider {
-    padding-top: 0px!important;
     position: relative;
 }
 
@@ -2216,4 +2215,32 @@ textarea{
     font-size: 0;
     color: transparent !important;
     position: relative;
+}
+
+.home {
+    position: relative;
+    background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%))!important;
+}
+
+.discount__sale {
+    padding: 69px 0 80px;
+    border-radius: 60px;
+    background: var(--creme-white, #F4F1F0);
+    box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15);
+}
+
+.discount_block .discount_form {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 0px!important;
+    margin-bottom: 6px;
+}
+
+@media only screen and (max-width: 1200px) {
+    .footer {
+        margin-top: 0;
+        padding: 24px 16px!important;
+    }
 }

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css

@@ -109,7 +109,7 @@ body.bg-white {
 }
 
 .container {
-    max-width: 1232px;
+    max-width: 1040px;
     margin: 0 auto;
 
     @media (max-width: 1264px) {

wp-content/themes/cosmopet/static/css/front-page.css

@@ -7,10 +7,14 @@
     background: var(--radial);
 }
 .home .container{
-    padding: 157px 30px 245px;
+    padding: 77px 30px 245px;
     position: relative;
 }
 
+main {
+    padding-top: 0px;
+}
+
 @media (min-width: 1281px){
     .home .container{
   
@@ -120,6 +124,7 @@
     line-height: 28.8px;
     letter-spacing: -0.01em;
     color: var(--grey-black, #121212);
+    font-weight: 300;
 }
 
 
@@ -902,9 +907,9 @@
 }
 /* Blog end */
 
-.marketplace{
+/* .marketplace{
     margin-top: 5rem;
-}
+} */
 
 .truth-form{
     display: flex;
@@ -3499,3 +3504,62 @@ color: #f4f1f0;
 .carousel .carousel-item:not(.active) .materialboxed {
   pointer-events: none;
 }
+
+.about_card-text {
+    font-weight: 300!important;
+}
+
+.about_card:nth-child(3) .about_card-title {
+  text-wrap: nowrap;
+}
+
+@media(max-width:990px){
+  .footer-top {
+      flex-direction: column;
+  }
+  .footer-bottom {
+      flex-direction: column;
+  }
+  .footer-content__wrap {
+      flex-direction: column;
+  }
+  .home__title.invisible {
+    font-size:28px;
+  }
+  .home .container {
+    padding: 0px 30px 180px!important;
+  }
+  .container {
+    max-width: 100%!important;
+    margin: 0!important;
+  }
+  .about_slider .carousel .carousel-item {
+    border-radius: 100% !important;
+  }
+  .about_slider .carousel .carousel-item img  {
+    width: 99px!important;
+    height: 99px!important;
+  }
+  .reviews_block .reviews_items {
+    flex-wrap: unset;
+    gap: 20px!important;
+  }
+  .gift_line-img {
+    display: none!important;
+  }
+  .discount__sale .discount_text {
+    order: 1;
+    margin-top: 0;
+    font-size: 18px!important;
+    color: var(--interface-main_black, #121212);
+    font-family: "Craftwork Grotesk";
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    max-width: 100%;
+  }
+  .discount__sale .discount_form {
+    flex-direction: column;
+    gap: 21px!important;
+   }
+}

wp-content/themes/cosmopet/templates/_pages/front-page.twig

@@ -39,7 +39,7 @@
                         src="{{about_img}}"
                         alt="">
                     <img class="img--mobile"
-                        src="{{about_img_m}}"
+                        src="/wp-content/themes/cosmopet/static/img/animations/gus.svg"
                         alt="">
                 </div>
                 <div class="about_info">
@@ -52,7 +52,7 @@
             <div class="about_block">
                 <div class="about_cards">
                 {% for item in about_list %}
-                    <div class="about_card">
+                    <div class="about_card{% if loop.index0 is odd %} about_card-right{% endif %}">
                         <img src="{{ item.img }}" alt="" class="about_card-gif about_card-gif1">
                         <div class="about_card-info">
                             <h3 class="about_card-title">{{ item.title }}</h3>

wp-content/themes/cosmopet/templates/footer.twig

@@ -1,6 +1,6 @@
 {% set current_path = template_path ~ '/modules/footer' %}
             <footer class="footer">
-                <div class="wrapper">
+                <div class="footer__wrapper wrapper">
                     <div class="footer-top">
                         <div class="footer-content__wrap">
                             <div class="footer-content">
@@ -31,7 +31,7 @@
                             <textarea name="message" class="form-textarea" name="" placeholder="{{ function('pll_e', 'Текст обращения') }}" id=""></textarea>
                             <input type="hidden" name="from_url" value="{{ current_url }}">
                             <input type="hidden" name="form_name" value="Contact form in footer">
-                            <button class="footer-contact__submit" type="submit">{{ function('pll_e', 'Отправить') }}</button>
+                            <button class="footer-contact__submit" type="submit">{{ function('pll_e', 'ОТПРАВИТЬ') }}</button>
                         </form>
                     </div>
                     <div class="footer-bottom">

wp-content/themes/cosmopet/templates/forms/discount.twig

@@ -1,15 +1,17 @@
 <section class="{% if class %} {{ class }}{% else %}discount__sale{% endif %} sec-bf">
+    <div class="discount__sale">
         <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/img/labrador%20with%20stars.png"
+                        src="{{ theme.link }}/static/img/dicsount-sale.png"
                         alt="">
                     <img class="dicount_dog-img img--mobile"
-                        src="{{ theme.link }}/static/img/labrador%20with%20stars%20--%20mobile.png"
+                        src="{{ theme.link }}/static/img/dicsount-sale-mob.png"
                         alt="">
                 {% else %}
                     <img class="dicount_dog-img img--desktop"
@@ -23,13 +25,13 @@
             </div>
             <div class="dicsount__body">
 							
-<div class="" id="" lang="ru-RU" dir="ltr">
+<div class="discount_form" id="" lang="ru-RU" dir="ltr">
 <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
 <form class="form-process"  action="subscribe_form" method="post" class="" aria-label="Контактная форма" novalidate="novalidate" data-status="init">
 
 <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/img/discount-line{% if class %}-w{% endif %}.svg">
+  <img src="/wp-content/themes/cosmopet/static/img/discount-line{% if class %}{% endif %}.svg">
   
   <input type="hidden" name="from_url" value="{{ current_url }}">
 <input type="hidden" name="form_name" value="Subscribtion form">
@@ -42,6 +44,11 @@
 							<p class="discount_text">{{sub_text}}</p>
 						</div>
 
+                        </div>
+
+                        </div>
+                    <div class="container">    
+
                         <div class="discount_cosmodog">
                             <div class="discount_cosmodog__slider swiper">
                                 <div class="swiper-wrapper">

wp-content/themes/cosmopet/templates/header.twig

@@ -267,15 +267,7 @@
                     </div>
                 </div>
             </div>
-            <div class="mini-profile__item">
-                <button class="mini-profile__button basket-open" data-modal-target=".modal__basket">
-                    <img src="https://cosmopet.ru/wp-content/themes/woodmart/gp-include/assets/core/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon black">
-                    <img src="https://cosmopet.ru/wp-content/themes/woodmart/gp-include/assets/core/img/svg/mini-profile/basket-w.svg" alt="" class="mini-profile__icon white">
-                    <div class="mini-profile__button--counter {{ cart_count == 0 ? 'disabled' : '' }}">
-                        {{ cart_count }}                    
-                    </div>
-                </button>
-            </div>
+            
                 <div class="mini-profile__item">
     {% if fn('is_user_logged_in') %}
               <a href="{{ fn('wc_get_page_permalink', 'myaccount') }}" class="mini-profile__button">
@@ -289,6 +281,15 @@
                 </button>
     {% endif %}
                         </div>
+            <div class="mini-profile__item">
+                <button class="mini-profile__button basket-open" data-modal-target=".modal__basket">
+                    <img src="https://cosmopet.ru/wp-content/themes/woodmart/gp-include/assets/core/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon black">
+                    <img src="https://cosmopet.ru/wp-content/themes/woodmart/gp-include/assets/core/img/svg/mini-profile/basket-w.svg" alt="" class="mini-profile__icon white">
+                    <div class="mini-profile__button--counter {{ cart_count == 0 ? 'disabled' : '' }}">
+                        {{ cart_count }}                    
+                    </div>
+                </button>
+            </div>            
         </div>
 
 </header>

wp-content/themes/cosmopet/templates/shop/bestsellers.twig

@@ -8,7 +8,7 @@
         <div class="container">
             <div class="seller_block">
                 <div class="sellers_top">
-                    <h2 class="sellers_title">{{ function('pll_e', 'BESTSELLERS') }}</h2>
+                    <h2 class="sellers_title">{% if current_lang == 'ru' %}БЕСТСЕЛЛЕРЫ{% elseif current_lang == 'en' %}BESTSELLERS{% endif %}</h2>
                     <div class="slider-arrows">
                         <button class="slider-arrow slider-arrow-prev sellerSlider-prev" aria-label="{{ function('pll_e', 'Previous products') }}"></button>
                         <button class="slider-arrow slider-arrow-next sellerSlider-next" aria-label="{{ function('pll_e', 'Next products') }}"></button>
@@ -54,7 +54,7 @@
                                                 
                                                 <a href="{{ product.get_permalink() }}" class="seller_link">
                                                     <button class="seller_buy" aria-label="{{ function('pll_e', 'Buy') }} {{ product.get_name() }}">
-                                                        {{ function('pll_e', 'Buy') }}
+                                                        {% if current_lang == 'ru' %}Купить{% elseif current_lang == 'en' %}Buy{% endif %}
                                                     </button>
                                                 </a>
                                             </div>
@@ -71,7 +71,7 @@
                 <div class="seller_full">
                     <div class="container">
                         <a href="{{ function('wc_get_page_permalink', 'shop') }}" class="seller_full-link">
-                            {{ function('pll_e', 'All products') }}
+                            {% if current_lang == 'ru' %}Вся продукция{% elseif current_lang == 'en' %}All products{% endif %}
                         </a>
                     </div>
                 </div>