Стили и верстка главной ae

dev_10_fixbugs
Your Name 2 months ago
parent e7e0abb4da
commit 8f0fb7814b
  1. 50
      wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css
  2. 38
      wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
  3. 127
      wp-content/themes/cosmopet/static/css/forms.css
  4. 20
      wp-content/themes/cosmopet/static/css/front-page.css
  5. 16
      wp-content/themes/cosmopet/templates/_pages/front-page.twig
  6. 51
      wp-content/themes/cosmopet/templates/footer.twig
  7. 14
      wp-content/themes/cosmopet/templates/forms/discount.twig
  8. 11
      wp-content/themes/cosmopet/templates/header.twig
  9. 4
      wp-content/themes/cosmopet/templates/shop/bestsellers.twig

@ -205,3 +205,53 @@
.login_btn { .login_btn {
margin-bottom: 24px; margin-bottom: 24px;
} }
.footer_ae .footer__wrapper {
width: 100%;
display: flex;
}
.footer_ae .footer__content {
width: calc(100% - 364px);
}
.footer_ae .footer-contact {
margin-left: 48px;
width: 364px;
}
.footer_ae .footer__list {
margin: 28px -12px -12px -12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
}
.footer_ae .footer-list__item:nth-child(even) {
width: 322px;
}
.footer_ae .footer-list__item {
margin: 12px;
width: calc(50% - 24px);
display: flex;
flex-direction: column;
}
.footer_ae .footer__about {
margin-top: 16px;
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--text-white);
flex-wrap: wrap;
}
.footer_ae .footer-content ul {
display: flex;
flex-direction: row;
gap: 24px;
}

@ -2242,6 +2242,10 @@ textarea{
background: radial-gradient(250% 285% at 120% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%)!important; background: radial-gradient(250% 285% at 120% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%)!important;
} }
.discount_block_ae {
background: none!important;
}
.section_wrap { .section_wrap {
margin-top: -70px; margin-top: -70px;
padding: 178px 0 90px; padding: 178px 0 90px;
@ -2354,3 +2358,37 @@ textarea{
content: "\e016"; content: "\e016";
color: #b81c23 color: #b81c23
} }
@media screen and (max-width: 768px) {
.home_ae {
background: radial-gradient(346.57% 244.17% at 149.73% -58.39%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%)!important;
}
.truth_ae .truth_top .gift_img {
width: 64vw;
margin: unset;
transform: translateX(-22%) rotate(-45deg);
margin-left: 24px!important;
}
.truth_ae .gift_line-img {
display: flex !important;
}
.footer_ae .footer__wrapper {
width: 100%;
display: flex;
flex-direction: column;
}
.footer_ae .footer-contact {
margin-left: 0!important;
width: 100%!important;
margin-top: 20px;
}
.discount_block_ae {
overflow-x: hidden;
}
.footer_ae .footer__about {
align-items: flex-start!important;
}
.footer-contact__title {
color: #121212!important;
}
}

@ -22,6 +22,12 @@
top: 55px; top: 55px;
right: -80px; right: -80px;
} }
.discount_block_ae .discount_top .discount_top-imgs{
position: absolute;
top: 55px;
right: -27%;
}
.discount_block .discount_form{ .discount_block .discount_form{
position: relative; position: relative;
z-index: 1; z-index: 1;
@ -85,6 +91,9 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.discount_block_ae .discount_cosmodog {
margin-top: -8rem!important;
}
.discount_cosmodog .discount_cosmodog-img{ .discount_cosmodog .discount_cosmodog-img{
width: 100%; width: 100%;
@ -143,6 +152,14 @@
margin-bottom: 6rem; margin-bottom: 6rem;
} }
.discount_block_ae .discount__sale {
padding: 69px 0 80px;
border-radius: 60px;
background: none;
box-shadow: none;
margin-bottom: 6rem;
}
.discount__sale .discount_title { .discount__sale .discount_title {
color: var(--interface-main_black, #121212); color: var(--interface-main_black, #121212);
font-family: "Craftwork Grotesk"; font-family: "Craftwork Grotesk";
@ -153,6 +170,14 @@
text-transform: uppercase; text-transform: uppercase;
} }
.discount_block_ae .discount__sale .discount_title {
font-size: 82px;
font-weight: 700;
line-height: 98.4px;
color: var(--creme-white, #F4F1F0);
text-transform: uppercase;
}
.discount__sale .discount_title span { .discount__sale .discount_title span {
background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #76CE75 90%, #BBE38D 100%)); background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #76CE75 90%, #BBE38D 100%));
background-clip: text; background-clip: text;
@ -169,6 +194,36 @@
border: 2px solid var(--interface-main_black, #121212); border: 2px solid var(--interface-main_black, #121212);
} }
.discount_block_ae .discount__sale .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_block_ae .discount__sale .discount_form .discount_form-btn {
font-size: 24px;
font-weight: 500;
line-height: 28.8px;
color: var(--creme-white, #F4F1F0);
width: 221px;
height: 50px;
padding: 10px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
border-radius: 48px;
border: 2px solid var(--creme-white, #F4F1F0);
transition: .3s ease all;
}
.discount__sale .discount_form .discount_form-btn { .discount__sale .discount_form .discount_form-btn {
color: var(--interface-main_black, #121212); color: var(--interface-main_black, #121212);
border: 2px solid var(--interface-main_black, #121212); border: 2px solid var(--interface-main_black, #121212);
@ -178,6 +233,15 @@
color: #FFF; color: #FFF;
} }
.discount_block_ae .discount__sale .discount_form-text {
font-size: 14px;
line-height: 16.8px;
color: var(--creme-white, #F4F1F0);
opacity: .6;
max-width: 778px;
margin-bottom: 27px;
}
.discount__sale .discount_form-text { .discount__sale .discount_form-text {
color: var(--interface-main_black, #121212); color: var(--interface-main_black, #121212);
font-family: "Craftwork Grotesk"; font-family: "Craftwork Grotesk";
@ -200,6 +264,12 @@
line-height: normal; line-height: normal;
} }
.discount_block_ae .discount__sale .discount_text {
font-size: 20px;
line-height: 24px;
color: var(--creme-white, #F4F1F0);
}
.discount__sale .discount_form .discount_form-inp::placeholder { .discount__sale .discount_form .discount_form-inp::placeholder {
color: var(--interface-main_black, #121212); color: var(--interface-main_black, #121212);
} }
@ -296,6 +366,10 @@
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.discount_block_ae .discount_form .discount_form-inp::placeholder {
color: var(--creme-white, #F4F1F0);
}
@media only screen and (max-width: 1170px) { @media only screen and (max-width: 1170px) {
.discount_top .discount_title { .discount_top .discount_title {
font-size: 60px; font-size: 60px;
@ -432,6 +506,59 @@
width: 100%; width: 100%;
} }
.discount_block_ae .discount__sale .discount_top .discount_top-imgs {
right: -27%!important;
top: 0!important;
transform: scale(1.8)!important;
z-index: 0!important;
margin-bottom: -91%!important;
margin-top: 20%!important;
position: relative!important;
}
.discount_block_ae .discount__sale .discount_top .discount_top-imgs .dicount_dog-img {
width: 110vw!important;
height: auto;
}
.discount_block_ae .discount__sale .discount_title {
font-size: 30px!important;
line-height: 36px!important;
}
.discount_block_ae .discount__sale .discount_text {
max-width: 260px!important;
font-size: 12px!important;
line-height: 14.2px!important;
}
.discount_block_ae .dicsount__body {
margin-top: 120px!important;
}
.discount_block_ae .discount_form .discount_form-inp, .discount_block_ae .discount_form .discount_form-btn {
width: 100%!important;
height: 29px!important;
padding: 6px 13px!important;
font-size: 12px!important;
line-height: 14.4px!important;
text-align: left!important;
}
.discount_block_ae .discount_form .discount_form-inp::placeholder {
font-size: 12px!important;
line-height: 14.4px!important;
color: var(--creme-white, #F4F1F0);
}
.discount_block_ae .form-process {
width: 100%;
}
.discount_block_ae .discount__sale .discount_form {
flex-direction: column;
gap: 10px !important;
}
.discount_block_ae .discount_form .discount_form-btn {
justify-content: start;
padding: 5px 15px;
background: var(--creme-white, #F4F1F0);
color: #62c57e!important;
opacity: 0.6;
text-align: left!important;
}
/* Узнайте о нас больше и получите скидку! - конец */ /* Узнайте о нас больше и получите скидку! - конец */
} }

@ -204,6 +204,9 @@ main {
.about_slider{ .about_slider{
padding-top: 110px; padding-top: 110px;
} }
.about_slider_ae{
padding-top: 0px;
}
.about_slider .slider-container { .about_slider .slider-container {
position: relative; position: relative;
/* max-width: 636px; */ /* max-width: 636px; */
@ -316,6 +319,19 @@ main {
/* GP | fix */ /* GP | fix */
} }
.seller_buy {
font-family: "Craftwork Grotesk";
font-weight: 700;
text-transform: capitalize;
width: 100%;
height: 48px;
padding: 12px 24px 12px 24px;
gap: 8px;
border-radius: 20px;
color: #fff;
background: var(--interface-main_black, #121212);
}
/* Reviews start */ /* Reviews start */
@ -478,6 +494,10 @@ main {
/* Reviews end */ /* Reviews end */
.truth_ae .truth_top .gift_img {
margin-left: -180px;
}
/* About us start */ /* About us start */
.about_us{ .about_us{
padding-bottom: 54px; padding-bottom: 54px;

@ -5,7 +5,7 @@
{% block content %} {% block content %}
<section class="home"> <section class="home {% if site_region == 'ae' %}home_ae{% endif %}">
<h1 class="home__title invisible">{{ function('pll_e', 'Заголовок (скрытый) H1 на главной') }}</h1> <h1 class="home__title invisible">{{ function('pll_e', 'Заголовок (скрытый) H1 на главной') }}</h1>
<div class="container"> <div class="container">
@ -95,7 +95,7 @@
{% endif %} {% endif %}
<div class="container-fluid"> <div class="container-fluid">
<div class="about_slider"> <div class="about_slider {% if site_region == 'ae' %}about_slider_ae{% endif %}">
<button class="about_slider_nav next"> <button class="about_slider_nav next">
<img src="/wp-content/themes/cosmopet/static/img/slider-next.svg" alt="Next"> <img src="/wp-content/themes/cosmopet/static/img/slider-next.svg" alt="Next">
</button> </button>
@ -363,15 +363,25 @@
} }
</style> </style>
{% endif %} {% endif %}
<section class="truth sec-bf"> <section class="truth {% if site_region == 'ae' %}truth_ae{% endif %} sec-bf">
<div class="container"> <div class="container">
<div class="truth_top"> <div class="truth_top">
{% if site_region == 'ae' %}
<img src="{{ theme.link }}/static/img/gift.png" alt="" class="gift_img">
<img src="{{ theme.link }}/static/img/gift-line.svg" alt="" class="gift_line-img">
{% elseif site_region == 'ru' %}
<picture> <picture>
<source media="(min-width:576px)" <source media="(min-width:576px)"
srcset="{{ theme.link }}/static/img/gift-new.png"> srcset="{{ theme.link }}/static/img/gift-new.png">
<img src="{{ theme.link }}/static/img/gift-new-mob.png" <img src="{{ theme.link }}/static/img/gift-new-mob.png"
alt=""> alt="">
</picture> </picture>
{% endif %}
<h2 class="truth_title">{{ q_title }}</span></h2> <h2 class="truth_title">{{ q_title }}</span></h2>
<img src="{{ theme.link }}/static/img/gift-line.svg" alt="" class="gift_line-img"></div> <img src="{{ theme.link }}/static/img/gift-line.svg" alt="" class="gift_line-img"></div>

@ -1,6 +1,51 @@
{% set current_path = template_path ~ '/modules/footer' %} {% set current_path = template_path ~ '/modules/footer' %}
<footer class="footer"> <footer class="footer {% if site_region == 'ae' %}footer_ae{% endif %}">
<div class="footer__wrapper wrapper"> <div class="footer__wrapper wrapper">
{% if site_region == 'ae' %}
<div class="footer-content">
<a href="/" class="logo">
<img src="{{ current_path }}/assets/img/logo-green.svg" alt="">
<span>сosmopet</span>
</a>
<p class="footer-content__address">
{{adres}}
</p>
<ul class="footer__list">
{% for item in email_list %}
<li class="footer-list__item">
<p>{{item.name}}</p>
<a href="mailto:{{item.email}}">{{item.email}}</a>
</li>
{% endfor %}
</ul>
<div class="footer-bottom footer__about">
<ul class="footer-network">
{% for item in social %}
<li>
<a href="{{item.link}}" target="_blank">
<img class="social-media__icon" src="{{item.img}}">
</a>
</li>
{% endfor %}
</ul>
{% for item in links %}
<a href="{{item.link}}">{{item.name}}</a>
{% endfor %}
</div>
</div>
<form class="footer-contact form-process" action="contact_form">
<h3 class="footer-contact__title">Want to partner?</h3>
<input name="name" type="text" placeholder="{{ function('pll_e', 'Ваше имя') }}" class="form-inp">
<input name="email" type="email" placeholder="{{ function('pll_e', 'Эл.почта') }}" class="form-inp">
<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>
</form>
{% elseif site_region == 'ru' %}
<div class="footer-top"> <div class="footer-top">
<div class="footer-content__wrap"> <div class="footer-content__wrap">
<div class="footer-content"> <div class="footer-content">
@ -48,6 +93,10 @@
<a href="{{item.link}}">{{item.name}}</a> <a href="{{item.link}}">{{item.name}}</a>
{% endfor %} {% endfor %}
</div> </div>
{% endif %}
</div> </div>
</footer> </footer>

@ -1,4 +1,4 @@
<section class="{% if class %} {{ class }}{% else %}discount__sale{% endif %} sec-bf"> <section class="{% if class %} {{ class }}{% else %}discount__sale{% endif %} {% if site_region == 'ae' %}discount_block_ae{% endif %} sec-bf">
<div class="discount__sale"> <div class="discount__sale">
<div class="container"> <div class="container">
@ -6,19 +6,19 @@
<h3 class="discount_title">{{sub_title}}</span> <h3 class="discount_title">{{sub_title}}</span>
</h3> </h3>
<div class="discount_top-imgs"> <div class="discount_top-imgs">
{% if class %} {% if site_region == 'ru' %}
<img class="dicount_dog-img img--desktop" <img class="dicount_dog-img img--desktop"
src="{{ theme.link }}/static/img/dicsount-sale.png" src="{{ theme.link }}/static/img/dicsount-sale.png"
alt=""> alt="">
<img class="dicount_dog-img img--mobile" <img class="dicount_dog-img img--mobile"
src="{{ theme.link }}/static/img/dicsount-sale-mob.png" src="{{ theme.link }}/static/img/dicsount-sale-mob.png"
alt=""> alt="">
{% else %} {% elseif site_region == 'ae' %}
<img class="dicount_dog-img img--desktop" <img class="dicount_dog-img img--desktop"
src="{{ theme.link }}/static/img/dicsount-sale.png" src="{{ theme.link }}/static/img/labrador with stars.png"
alt=""> alt="">
<img class="dicount_dog-img img--mobile" <img class="dicount_dog-img img--mobile"
src="{{ theme.link }}/static/img/dicsount-sale-mob.png" src="{{ theme.link }}/static/img/labrador with stars -- mobile.png"
alt=""> alt="">
{% endif %} {% endif %}
</div> </div>
@ -31,7 +31,11 @@
<div class="discount_form "> <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> <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>
{% if site_region == 'ru' %}
<img src="/wp-content/themes/cosmopet/static/img/discount-line{% if class %}{% endif %}.svg"> <img src="/wp-content/themes/cosmopet/static/img/discount-line{% if class %}{% endif %}.svg">
{% elseif site_region == 'ae' %}
<img src="/wp-content/themes/cosmopet/static/img/discount-line-w.svg">
{% endif %}
<input type="hidden" name="from_url" value="{{ current_url }}"> <input type="hidden" name="from_url" value="{{ current_url }}">
<input type="hidden" name="form_name" value="Subscribtion form"> <input type="hidden" name="form_name" value="Subscribtion form">

@ -119,7 +119,7 @@
{% elseif current_lang == 'en' %} {% elseif current_lang == 'en' %}
<div class="header-phone-menu__item"> <div class="header-phone-menu__item">
<a href="/shop/" class="header-phone-menu__title"> <a href="/shop/" class="header-phone-menu__title">
PRODUCTS BUY
</a> </a>
<a href="/shop/" class="header-phone-menu__category">For <a href="/shop/" class="header-phone-menu__category">For
cats</a> cats</a>
@ -204,7 +204,7 @@
<ul class="main-menu"> <ul class="main-menu">
<li class="main-menu__item"> <li class="main-menu__item">
<a href="{% if current_lang == 'ru' %}{{front_url}}{% elseif current_lang == 'en' %}{{front_url_en}}{% endif %}" <a href="{% if current_lang == 'ru' %}{{front_url}}{% elseif current_lang == 'en' %}{{front_url_en}}{% endif %}"
class="main-menu__link">{% if current_lang == 'ru' %}ГЛАВНАЯ{% elseif current_lang == 'en' %}MAIN{% endif %}</a> class="main-menu__link">{% if current_lang == 'ru' %}ГЛАВНАЯ{% elseif current_lang == 'en' %}HOME{% endif %}</a>
</li> </li>
<li class="main-menu__item"> <li class="main-menu__item">
@ -237,12 +237,13 @@
{% endif %} {% endif %}
<li class="main-menu__item"> <li class="main-menu__item">
<button class="main-menu__button" id="pc-menu"> <button class="main-menu__button" id="pc-menu">
{% if current_lang == 'ru' %}ПРОДУКЦИЯ{% elseif current_lang == 'en' %}PRODUCTS{% endif %} {% if current_lang == 'ru' %}ПРОДУКЦИЯ{% elseif current_lang == 'en' %}BUY{% endif %}
</button> </button>
</li> </li>
</ul> </ul>
<div class="mini-profile"> <div class="mini-profile">
{% if site_region == 'ru' %}
<div class="mini-profile__item"> <div class="mini-profile__item">
<div class="lang"> <div class="lang">
<button class="lang__open"> <button class="lang__open">
@ -262,14 +263,16 @@
</svg> </svg>
</div> </div>
</button> </button>
<div class="lang__content"> <div class="lang__content">
<ul class="lang__list"> <ul class="lang__list">
{{ function('pll_the_languages', {'echo': false, 'display_names_as': 'slug'}) }} {{ function('pll_the_languages', {'echo': false, 'display_names_as': 'slug'}) }}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
{% endif %}
<div class="mini-profile__item"> <div class="mini-profile__item">
{% if fn('is_user_logged_in') %} {% if fn('is_user_logged_in') %}
<a href="{{ fn('wc_get_page_permalink', 'myaccount') }}" class="mini-profile__button"> <a href="{{ fn('wc_get_page_permalink', 'myaccount') }}" class="mini-profile__button">

@ -1,6 +1,10 @@
{# Bestsellers Slider Template with Polylang support #} {# Bestsellers Slider Template with Polylang support #}
{% if site_region == 'ru' %}
{% set best = function('get_field', 'best', 'options') %} {% set best = function('get_field', 'best', 'options') %}
{% elseif site_region == 'ae' %}
{% set best = function('get_field', 'best-ae', 'options') %}
{% endif %}
{% set currency = function('get_woocommerce_currency_symbol') %} {% set currency = function('get_woocommerce_currency_symbol') %}
<div class="section_wrap"> <div class="section_wrap">

Loading…
Cancel
Save