parent
c35aa5535d
commit
ddf4d4dfd2
@ -1,7 +1 @@ |
|||||||
|
|
||||||
# BEGIN WebP Converter |
|
||||||
# ! --- DO NOT EDIT PREVIOUS LINE --- ! |
|
||||||
# ! --- DO NOT EDIT NEXT LINE --- ! |
|
||||||
# END WebP Converter |
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,6 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
include_module('blog'); |
||||||
|
include_component('blog', 'archive'); |
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
pll_register_string ('Темы', 'Темы'); |
||||||
|
pll_register_string ('САМЫЕ ЧИТАЕМЫЕ', 'САМЫЕ ЧИТАЕМЫЕ'); |
||||||
|
pll_register_string ('время чтения', 'время чтения'); |
||||||
|
pll_register_string ('ВСЕ СТАТЬИ', 'ВСЕ СТАТЬИ'); |
||||||
|
pll_register_string ('ПРЕДЛОЖИТЕ СТАТЬЮ ИЛИ СТАНЬТЕ АВТОРОМ', 'ПРЕДЛОЖИТЕ СТАТЬЮ ИЛИ СТАНЬТЕ АВТОРОМ'); |
||||||
|
pll_register_string ('НАПИШИТЕ НАМ', 'НАПИШИТЕ НАМ'); |
||||||
|
pll_register_string ('COSMO тема редакции', 'COSMO тема редакции'); |
||||||
|
pll_register_string ('мин.', 'мин.'); |
||||||
|
pll_register_string ('Форма обратной связи', 'Форма обратной связи'); |
||||||
|
pll_register_string ('Ваше имя', 'Ваше имя'); |
||||||
|
pll_register_string ('Эл.почта', 'Эл.почта'); |
||||||
|
pll_register_string ('Текст обращения', 'Текст обращения'); |
||||||
|
pll_register_string ('Отправить', 'Отправить'); |
||||||
|
pll_register_string ('Чат бот с ветеринаром', 'Чат бот с ветеринаром'); |
||||||
|
pll_register_string ('Калькулятор рациона', 'Калькулятор рациона'); |
||||||
|
pll_register_string ('ПОКАЗАТЬ ЕЩЁ', 'ПОКАЗАТЬ ЕЩЁ'); |
||||||
|
pll_register_string ('ВСЕ', 'ВСЕ'); |
||||||
|
pll_register_string ('читать статью', 'читать статью'); |
||||||
|
pll_register_string ('Блог', 'Блог'); |
||||||
|
pll_register_string ('Главная', 'Главная'); |
||||||
|
pll_register_string ('Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших, предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции', 'Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции'); |
||||||
|
pll_register_string ('Подписываясь на рассылку, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах', 'Подписываясь на рассылку, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах'); |
||||||
|
pll_register_string ('подписаться', 'подписаться'); |
||||||
|
pll_register_string ('Узнайте о нас больше и получите <span>скидку!</span>', 'Узнайте о нас больше и получите <span>скидку!</span>'); |
||||||
@ -1,14 +1,15 @@ |
|||||||
{% set current_path = template_path ~ '/modules/blog/components/author-banner' %} |
{% set current_path = template_path ~ '/modules/blog/components/author-banner' %} |
||||||
|
|
||||||
<section class="author"> |
<section class="author"> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<div class="author-content"> |
<div class="author-content"> |
||||||
<img src="{{ current_path }}/assets/img/star-1.png" alt="" class="author-content__star-1"> |
<img src="{{ current_path }}/assets/img/star-1.png" alt="" class="author-content__star-1"> |
||||||
<img src="{{ current_path }}/assets/img/star-2.png" alt="" class="author-content__star-2"> |
<img src="{{ current_path }}/assets/img/star-2.png" alt="" class="author-content__star-2"> |
||||||
<img src="{{ current_path }}/assets/img/author-card.png" alt="" class="author-content__img"> |
<img src="{{ current_path }}/assets/img/author-card.png" alt="" class="author-content__img"> |
||||||
<img src="{{ current_path }}/assets/img/author-card-mb.png" alt="" class="author-content__img mb"> |
<img src="{{ current_path }}/assets/img/author-card-mb.png" alt="" class="author-content__img mb"> |
||||||
<h2 class="author-content__title">ПРЕДЛОЖИТЕ СТАТЬЮ <br>ИЛИ СТАНЬТЕ АВТОРОМ</h2> |
<h2 class="author-content__title">{{ function('pll_e', 'ПРЕДЛОЖИТЕ СТАТЬЮ ИЛИ СТАНЬТЕ АВТОРОМ') }} |
||||||
<a href="#" class="author-content__link">НАПИШИТЕ НАМ</a> |
</h2> |
||||||
</div> |
<a href="#" class="author-content__link">{{ function('pll_e', 'НАПИШИТЕ НАМ') }}</a> |
||||||
</div> |
</div> |
||||||
</section> |
</div> |
||||||
|
</section> |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
.home-swp { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.home-swp__btn { |
||||||
|
position: absolute; |
||||||
|
bottom: 22px; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
z-index: 2; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-swp__btn button { |
||||||
|
border: 1px solid var(--main_black); |
||||||
|
background: var(--main_white); |
||||||
|
width: 56px; |
||||||
|
height: 56px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-swp .swiper-slide:not(.swiper-slide-active) { |
||||||
|
height: 0; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card { |
||||||
|
border-radius: 60px; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 24px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card.bg-yellow { |
||||||
|
background: var(--orange_80); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card.bg-green { |
||||||
|
background: var(--green_90); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card.bg-violet { |
||||||
|
background: var(--violet_90); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__img { |
||||||
|
width: 395px; |
||||||
|
border-radius: 60px; |
||||||
|
overflow: hidden; |
||||||
|
height: 393px; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__img img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content { |
||||||
|
padding: 32px 79px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-title { |
||||||
|
font-size: 36px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 40px; |
||||||
|
text-transform: uppercase; |
||||||
|
max-width: 660px; |
||||||
|
margin-bottom: 10px; |
||||||
|
color: var(--interface_title); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-description { |
||||||
|
color: var(--interface_title); |
||||||
|
margin-bottom: 10px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 24px; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-line-clamp: 3; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__alerts { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__alerts li { |
||||||
|
background: var(--interface_hover); |
||||||
|
color: var(--background); |
||||||
|
border-radius: 16px; |
||||||
|
padding: 6px 8px; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__day { |
||||||
|
color: var(--interface_hover); |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__time { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 16px; |
||||||
|
color: var(--interface_hover); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data>div { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 4px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 16px; |
||||||
|
color: var(--interface_hover); |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data>div .main-img { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
border-radius: 50%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__link { |
||||||
|
border: 1px solid #000000; |
||||||
|
border-radius: 28px; |
||||||
|
background: var(--main_white); |
||||||
|
position: absolute; |
||||||
|
right: 37px; |
||||||
|
bottom: 26px; |
||||||
|
padding: 8.5px 16px 8.5px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 24px; |
||||||
|
transition: all .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__link:hover{ |
||||||
|
background-color: #000; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
/* Стили для планшетов */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.home-swp__btn { |
||||||
|
bottom: auto; |
||||||
|
top: 93px; |
||||||
|
left: -10px; |
||||||
|
width: calc(100% + 20px); |
||||||
|
justify-content: space-between; |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
|
||||||
|
.home-swp__btn button { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card { |
||||||
|
flex-direction: column; |
||||||
|
border-radius: 24px; |
||||||
|
gap: 17px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__img { |
||||||
|
height: 234px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content { |
||||||
|
padding: 0 16px 89px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-title { |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-description { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
margin-bottom: 15px; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-line-clamp: 5; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body { |
||||||
|
gap: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__alerts { |
||||||
|
gap: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__alerts li { |
||||||
|
font-size: 14px; |
||||||
|
line-height: 16px; |
||||||
|
padding: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__day { |
||||||
|
font-size: 14px; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__time { |
||||||
|
font-size: 14px; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data { |
||||||
|
gap: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data>div { |
||||||
|
gap: 4px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__data .main-img { |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.home-card__content-body__link { |
||||||
|
right: 50%; |
||||||
|
bottom: 27px; |
||||||
|
transform: translateX(50%); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,112 @@ |
|||||||
|
.article-content p { |
||||||
|
color: var(--grey-black); |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.article-content h2 { |
||||||
|
max-width: 661px; |
||||||
|
font-size: 36px; |
||||||
|
line-height: 40px; |
||||||
|
font-weight: bold; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.indent { |
||||||
|
background: #E2F3FF; |
||||||
|
border-radius: 32px; |
||||||
|
padding: 36px 49px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 32px; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/* Discount */ |
||||||
|
.discount { |
||||||
|
background: radial-gradient(122% 156.56% at 100% 0%, #7E90FF 0%, #8187FF 45%, #F8A6FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; |
||||||
|
border-radius: 32px; |
||||||
|
padding: 32px; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-title { |
||||||
|
font-size: 36px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 40px; |
||||||
|
text-transform: uppercase; |
||||||
|
max-width: 517px; |
||||||
|
color: var(--main_black); |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-bg { |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
right: 8px; |
||||||
|
width: 369px; |
||||||
|
z-index: -1; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-bg.mb { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-title span { |
||||||
|
color: var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 8px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form input { |
||||||
|
width: 280px; |
||||||
|
height: 50px; |
||||||
|
border: 2px solid var(--main_black); |
||||||
|
border-radius: 48px; |
||||||
|
background: #F5F5F5; |
||||||
|
padding: 0 18px; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--main_black); |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form button { |
||||||
|
border: 2px solid var(--main_black); |
||||||
|
background: transparent; |
||||||
|
height: 50px; |
||||||
|
padding: 0 30px; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--main_black); |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form button:hover { |
||||||
|
background: var(--interface_title); |
||||||
|
color: var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
p.discount-description__1 { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--main_black); |
||||||
|
max-width: 621px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
p.discount-description__2 { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--main_black); |
||||||
|
} |
||||||
|
/* Discount end */ |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
@media (max-width: 992px) { |
||||||
|
.discount { |
||||||
|
padding: 32px 24px; |
||||||
|
border-radius: 32px; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-title { |
||||||
|
font-size: 26px; |
||||||
|
line-height: 32px; |
||||||
|
margin-bottom: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-bg { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-bg.mb { |
||||||
|
display: inline-block; |
||||||
|
position: static; |
||||||
|
margin-bottom: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form { |
||||||
|
flex-direction: column; |
||||||
|
gap: 21px; |
||||||
|
margin-bottom: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form img { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form input { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-form button { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-descriptions { |
||||||
|
display: flex; |
||||||
|
flex-direction: column-reverse; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-description__2 { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 500; |
||||||
|
grid-area: 21px; |
||||||
|
margin-bottom: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.discount-description__1 { |
||||||
|
margin-bottom: 0; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,6 +1,6 @@ |
|||||||
<?php |
<?php |
||||||
|
|
||||||
|
include_component('blog', 'featured-slider'); |
||||||
$context = Timber::get_context(); |
$context = Timber::get_context(); |
||||||
|
|
||||||
Timber::render('blog/components/single/component-template.twig', $context); |
Timber::render('blog/components/single/component-template.twig', $context); |
||||||
|
|||||||
@ -1,15 +1,15 @@ |
|||||||
|
<div class="anons-theme"> |
||||||
|
<h3 class="anons-theme__title">{{ function('pll_e', 'Темы') }}:</h3> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="/" class="{% if not current_category %} active {% endif %}">{{ function('pll_e', 'ВСЕ') }}</a> |
||||||
|
</li> |
||||||
|
{% for category in category_list %} |
||||||
|
<li> |
||||||
|
<a href="/category/{{category.slug}}" |
||||||
|
class="{% if current_category == category.name %} active {% endif %}">{{ category.name }}</a> |
||||||
|
</li> |
||||||
|
|
||||||
<div class="anons-theme"> |
{% endfor %} |
||||||
<h3 class="anons-theme__title">Темы:</h3> |
</ul> |
||||||
<ul> |
</div> |
||||||
<li> |
|
||||||
<a href="" class="{% if not current_category %} active {% endif %}">ВСЕ</a> |
|
||||||
</li> |
|
||||||
{% for category in category_list %} |
|
||||||
<li> |
|
||||||
<a href="{{ category.link }}" class="{% if current_category == category.name %} active {% endif %}">{{ category.name }}</a> |
|
||||||
</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
@ -0,0 +1,77 @@ |
|||||||
|
.block-accent { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card { |
||||||
|
padding: 36px 63px 36px 49px; |
||||||
|
border-radius: 32px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 32px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent .card-violet { |
||||||
|
flex-direction: row-reverse; |
||||||
|
background: var(--violet_90); |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card-content { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 21px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card h3 { |
||||||
|
font-size: 26px; |
||||||
|
font-weight: bold; |
||||||
|
color: var(--grey-black); |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card p { |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card img { |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent .card-orange { |
||||||
|
background: var(--orange_80); |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent .card-blue { |
||||||
|
background: #E0FDFF; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 992px) { |
||||||
|
.block-accent__card { |
||||||
|
padding: 36px 24px; |
||||||
|
gap: 32px; |
||||||
|
flex-direction: column !important; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card-content { |
||||||
|
gap: 27px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card-content h3 { |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.block-accent__card-content p { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function accent_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['color'] = get_field('color'); |
||||||
|
$context['content'] = get_field('content'); |
||||||
|
$context['order'] = get_field('order'); |
||||||
|
$context['img'] = get_field('img'); |
||||||
|
Timber::render('modules/blog/editor-blocks/accent/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_accent', |
||||||
|
'title' => __('GP - accent'), |
||||||
|
'description' => __('accent block'), |
||||||
|
'render_callback' => 'accent_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'accent', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_accent_style', get_template_directory_uri() . '/modules/blog/editor-blocks/accent/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
} |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
|
||||||
|
<section class="block-accent"> |
||||||
|
<div class="block-accent__card card-violet" style="background-color: {{color}}"> |
||||||
|
{% if order %} |
||||||
|
<img src="{{img.url}}" alt="{{img.src}}"> |
||||||
|
{% endif %} |
||||||
|
<div class="block-accent__card-content"> |
||||||
|
{{content}} |
||||||
|
</div> |
||||||
|
{% if not order %} |
||||||
|
<img src="{{img.url}}" alt="{{img.src}}"> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
</section> |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
|
||||||
|
/* Alerts */ |
||||||
|
.alerts { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey { |
||||||
|
padding: 32px 98px; |
||||||
|
border-radius: 32px; |
||||||
|
background: var(--bg-light-grey); |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey p { |
||||||
|
color: #191919; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey .icon-1 { |
||||||
|
position: absolute; |
||||||
|
top: 32px; |
||||||
|
left: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey .icon-2 { |
||||||
|
position: absolute; |
||||||
|
bottom: 32px; |
||||||
|
right: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-violet { |
||||||
|
background: #FAEAE9; |
||||||
|
border-radius: 32px; |
||||||
|
padding: 32px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-violet img { |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-violet p { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
color: #191919; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-yellow { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background: #FEF8E6; |
||||||
|
border-radius: 32px; |
||||||
|
padding: 32px; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-yellow img { |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-yellow p { |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
font-weight: 500; |
||||||
|
color: #191919; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-green { |
||||||
|
background: #E9F8EB; |
||||||
|
border-radius: 32px; |
||||||
|
padding: 32px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-green img { |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-green p { |
||||||
|
color: #191919; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
/* Alerts end */ |
||||||
|
|
||||||
|
@media (max-width: 992px) { |
||||||
|
.alerts-grey { |
||||||
|
padding: 32px 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey .icon-1 { |
||||||
|
width: 24px; |
||||||
|
top: 32px; |
||||||
|
left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey .icon-2 { |
||||||
|
width: 24px; |
||||||
|
right: 16px; |
||||||
|
bottom: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-grey p { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-violet, |
||||||
|
.alerts-yellow, |
||||||
|
.alerts-green { |
||||||
|
padding: 32px 24px; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.alerts-violet p, |
||||||
|
.alerts-yellow p, |
||||||
|
.alerts-green p { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1021 B |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1,38 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function alerts_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['color'] = get_field('type'); |
||||||
|
$context['content'] = get_field('content'); |
||||||
|
Timber::render('modules/blog/editor-blocks/alerts/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_alerts', |
||||||
|
'title' => __('GP - alerts'), |
||||||
|
'description' => __('Alerts block'), |
||||||
|
'render_callback' => 'alerts_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'alerts', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_alerts_style', get_template_directory_uri() . '/modules/blog/editor-blocks/alerts/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
} |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<section class="alerts"> |
||||||
|
<div class="alerts-{{color}}"> |
||||||
|
{% if color == 'grey' %} |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/alerts/assets/img/icon-1.svg" alt="" class="icon-1"> |
||||||
|
{% elseif color == 'violet' %} |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/alerts/assets/img/icon-3.svg" alt="" class="icon-1"> |
||||||
|
{% elseif color == 'yellow' %} |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/alerts/assets/img/icon-4.svg" alt="" class="icon-1"> |
||||||
|
{% elseif color == 'green' %} |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/alerts/assets/img/icon-5.svg" alt="" class="icon-1"> |
||||||
|
{% endif %} |
||||||
|
<p>{{content}}</p> |
||||||
|
{% if color == 'grey' %} |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/alerts/assets/img/icon-2.svg" alt="" class="icon-2"> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
</section> |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
|
||||||
|
/* Article block */ |
||||||
|
.article-block__head { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||||
|
margin-bottom: 48px; |
||||||
|
gap: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 23px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left h3 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: bold; |
||||||
|
left: 28px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left p { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-right img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-wrap { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 72px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item { |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
gap: 23px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content h3 { |
||||||
|
font-size: 26px; |
||||||
|
font-weight: bold; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content p { |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul { |
||||||
|
width: 100%; |
||||||
|
background: var(--bg-light-grey); |
||||||
|
border-radius: 24px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
padding: 20px; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul li { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 20px; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul li img { |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-img { |
||||||
|
width: 315px; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-img img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
/* Article block end */ |
||||||
|
|
||||||
|
@media (max-width: 992px) { |
||||||
|
.article-block__head { |
||||||
|
grid-template-columns: repeat(1, minmax(0, 1fr)); |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left { |
||||||
|
order: 2; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left h3 { |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-left p { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head-right { |
||||||
|
order: 1; |
||||||
|
height: 319px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-wrap { |
||||||
|
gap: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item { |
||||||
|
flex-direction: column; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-img { |
||||||
|
order: 1; |
||||||
|
width: 100%; |
||||||
|
height: 450px; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content { |
||||||
|
order: 2; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content h3 { |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content p { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul { |
||||||
|
flex-direction: column; |
||||||
|
padding: 20px 14px 20px 20px; |
||||||
|
gap: 28px; |
||||||
|
border-radius: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul li { |
||||||
|
gap: 19px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__item-content ul li p { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,41 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function block_img_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['order'] = get_field('order'); |
||||||
|
$context['shrink'] = get_field('shrink'); |
||||||
|
$context['img'] = get_field('img'); |
||||||
|
$context['plus_minus'] = get_field('plus_minus'); |
||||||
|
$context['content'] = get_field('content'); |
||||||
|
Timber::render('modules/blog/editor-blocks/block_img/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_block_img', |
||||||
|
'title' => __('GP - block_img'), |
||||||
|
'description' => __('block_img'), |
||||||
|
'render_callback' => 'block_img_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'block_img', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_img_style', get_template_directory_uri() . '/modules/blog/editor-blocks/block_img/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
} |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
<section class="article-block"> |
||||||
|
{% if shrink %} |
||||||
|
<div class="article-block__head"> |
||||||
|
{% if order %} |
||||||
|
<div class="article-block__head-right"> |
||||||
|
<img src="{{img.url}}" alt="{{img.alt}}"> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
<div class="article-block__head-left"> |
||||||
|
{{content}} |
||||||
|
</div> |
||||||
|
{% if not order %} |
||||||
|
<div class="article-block__head-right"> |
||||||
|
<img src="{{img.url}}" alt="{{img.alt}}"> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
{% else %} |
||||||
|
<div class="article-block__item-wrap"> |
||||||
|
<div class="article-block__item"> |
||||||
|
{% if order %} |
||||||
|
<div class="article-block__item-img"> |
||||||
|
<img src="{{img.url}}" alt="{{img.alt}}"> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
<div class="article-block__item-content"> |
||||||
|
{{content}} |
||||||
|
{% if plus_minus.plus %} |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/block_img/assets/img/plus-icon.svg" alt=""> |
||||||
|
<p>{{ plus_minus.plus }}</p> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<img src="{{ template_path }}/modules/blog/editor-blocks/block_img/assets/img/minus-icon.svg" alt=""> |
||||||
|
<p>{{ plus_minus.minus }}</p> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
{% if not order %} |
||||||
|
<div class="article-block__item-img"> |
||||||
|
<img src="{{img.url}}" alt="{{img.alt}}"> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
</section> |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
/* Diet */ |
||||||
|
.diet { |
||||||
|
background: var(--violet_90); |
||||||
|
border-radius: 32px; |
||||||
|
padding: 36px 49px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 32px; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.diet p { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
color: var(--grey-black); |
||||||
|
} |
||||||
|
|
||||||
|
.diet a { |
||||||
|
padding: 12px 24px; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid var(--main_black); |
||||||
|
background: var(--main_white); |
||||||
|
border-radius: 20px; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.diet a:hover { |
||||||
|
background: var(--interface_title); |
||||||
|
color: var(--main_white) |
||||||
|
} |
||||||
|
/* Diet end */ |
||||||
|
|
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
.diet { |
||||||
|
padding: 36px 24px; |
||||||
|
border-radius: 32px; |
||||||
|
flex-direction: column; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.diet p { |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.diet a { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,46 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function button_block_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['text'] = get_field('text'); |
||||||
|
$context['button'] = get_field('button'); |
||||||
|
$context['link'] = get_field('link'); |
||||||
|
$context['color'] = get_field('color'); |
||||||
|
Timber::render('modules/blog/editor-blocks/button_block/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_button_block', |
||||||
|
'title' => __('GP - button_block'), |
||||||
|
'description' => __('button_block block'), |
||||||
|
'render_callback' => 'button_block_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'button_block', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_button_block_style', get_template_directory_uri() . '/modules/blog/editor-blocks/button_block/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
}, |
||||||
|
'supports' => array( |
||||||
|
'align' => true, |
||||||
|
'multiple' => true, |
||||||
|
'jsx' => true, |
||||||
|
'__experimentalInnerBlocks' => true, // Включение поддержки вложенных блоков |
||||||
|
), |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
<section class="diet" {% if color %}style="background: {{color}}"{% endif %}> |
||||||
|
<p>{{ text }}</p> |
||||||
|
<a href="{{link}}">{{button}}</a> |
||||||
|
</section> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/* Product card */ |
||||||
|
.product-card { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 50px; |
||||||
|
justify-content: center; |
||||||
|
background: var(--blue_90); |
||||||
|
padding: 32px; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-card img { |
||||||
|
max-width: 740px; |
||||||
|
max-height: 512px; |
||||||
|
} |
||||||
|
/* Product card end */ |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function image_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['image'] = get_field('image'); |
||||||
|
$context['color'] = get_field('color'); |
||||||
|
Timber::render('modules/blog/editor-blocks/image/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_image', |
||||||
|
'title' => __('GP - image'), |
||||||
|
'description' => __('image block'), |
||||||
|
'render_callback' => 'image_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'image', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_image_style', get_template_directory_uri() . '/modules/blog/editor-blocks/image/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
}, |
||||||
|
'supports' => array( |
||||||
|
'align' => true, |
||||||
|
'multiple' => true, |
||||||
|
'jsx' => true, |
||||||
|
'__experimentalInnerBlocks' => true, // Включение поддержки вложенных блоков |
||||||
|
), |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<section class="product-card" {% if color %}style="background: {{color}}"{% endif %}> |
||||||
|
<img src="{{image.url}}" alt="{{image.alt}}"> |
||||||
|
</section> |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
.list_v1 { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.list_v1 li { |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.list_v1 li h3 { |
||||||
|
font-size: 26px; |
||||||
|
font-weight: bold; |
||||||
|
text-transform: uppercase; |
||||||
|
color: var(--grey-black); |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.list_v1 li img { |
||||||
|
flex-shrink: 0; |
||||||
|
max-width: 54px; |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function list_v1_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['list'] = get_field('list'); |
||||||
|
$context['icon'] = get_field('icon'); |
||||||
|
Timber::render('modules/blog/editor-blocks/list_v1/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_list_v1', |
||||||
|
'title' => __('GP - list_v1'), |
||||||
|
'description' => __('list_v1 block'), |
||||||
|
'render_callback' => 'list_v1_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'list_v1', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_list_v1_style', get_template_directory_uri() . '/modules/blog/editor-blocks/list_v1/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
}, |
||||||
|
'supports' => array( |
||||||
|
'align' => true, |
||||||
|
'multiple' => true, |
||||||
|
'jsx' => true, |
||||||
|
'__experimentalInnerBlocks' => true, // Включение поддержки вложенных блоков |
||||||
|
), |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<ul class="list_v1"> |
||||||
|
{% for item in list %} |
||||||
|
<li> |
||||||
|
<img src="{{ icon.url }}" alt="{{ icon.alt }}"> |
||||||
|
<div> |
||||||
|
{{ item.text }} |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
/* block_lists */ |
||||||
|
.block-lists { |
||||||
|
margin: 48px 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-list_block { |
||||||
|
display: flex; |
||||||
|
align-items: start; |
||||||
|
gap: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-list_block img { |
||||||
|
width: 145px; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-list_block h3 { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 700; |
||||||
|
line-height: 28px; |
||||||
|
color: var(--main_black); |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-list_block p { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
color: var(--main_black); |
||||||
|
} |
||||||
|
/* block_lists */ |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function list_v2_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['list'] = get_field('list'); |
||||||
|
Timber::render('modules/blog/editor-blocks/list_v2/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_list_list_v2', |
||||||
|
'title' => __('GP - list_v2'), |
||||||
|
'description' => __('list_v2 block'), |
||||||
|
'render_callback' => 'list_v2_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'list_v2', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_list_v2_style', get_template_directory_uri() . '/modules/blog/editor-blocks/list_v2/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
}, |
||||||
|
'supports' => array( |
||||||
|
'align' => true, |
||||||
|
'multiple' => true, |
||||||
|
'jsx' => true, |
||||||
|
'__experimentalInnerBlocks' => true, // Включение поддержки вложенных блоков |
||||||
|
), |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<section class="block-lists"> |
||||||
|
{% for item in list %} |
||||||
|
<div class="block-list_block"> |
||||||
|
<img src="{{ item.icon.url }}" alt="{{ item.icon.alt }}"> |
||||||
|
<div class="block-lists_text"> |
||||||
|
{{ item.text }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</section> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
.texts-swp { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.texts-swp__prev { |
||||||
|
position: absolute; |
||||||
|
z-index: 2; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
left: 10px; |
||||||
|
background: var(--main_white); |
||||||
|
width: 56px; |
||||||
|
height: 56px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.texts-swp__next { |
||||||
|
position: absolute; |
||||||
|
z-index: 2; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
right: 10px; |
||||||
|
background: var(--main_white); |
||||||
|
width: 56px; |
||||||
|
height: 56px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.texts-swp .swiper-slide img { |
||||||
|
height: 517px; |
||||||
|
width: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
/* .texts-swp .swiper-slide:not(.swiper-slide-active) { |
||||||
|
height: 0; |
||||||
|
overflow: hidden; |
||||||
|
} */ |
||||||
|
|
||||||
|
.texts-swp__pagination { |
||||||
|
position: absolute; |
||||||
|
top: auto !important; |
||||||
|
bottom: 20px !important; |
||||||
|
right: auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
z-index: 2; |
||||||
|
gap: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
.texts-swp__pagination span { |
||||||
|
opacity: 0.5; |
||||||
|
background: var(--main_white); |
||||||
|
width: 40px; |
||||||
|
height: 6px; |
||||||
|
border-radius: 6px; |
||||||
|
margin: 0 !important; |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.texts-swp__pagination span.swiper-pagination-bullet-active { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,14 @@ |
|||||||
|
const textsSwp = new Swiper('.texts-swp .swiper', { |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 0, |
||||||
|
loop: true, |
||||||
|
effect: 'fade', |
||||||
|
navigation: { |
||||||
|
nextEl: '.texts-swp__next', |
||||||
|
prevEl: '.texts-swp__prev' |
||||||
|
}, |
||||||
|
pagination: { |
||||||
|
el: ".texts-swp__pagination", |
||||||
|
clickable: true, |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function slider_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['gallery'] = get_field('gallery'); |
||||||
|
Timber::render('modules/blog/editor-blocks/swiper/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_slider', |
||||||
|
'title' => __('GP - slider'), |
||||||
|
'description' => __('Slider block'), |
||||||
|
'render_callback' => 'slider_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'slider', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_script('layout-swiper-bundle.min-js',get_template_directory_uri() . '/modules/layout/assets/js/swiper-bundle.min.js', ['jquery'], '1.0', 'all'); |
||||||
|
wp_enqueue_script('gp_arcticle_slider_js',get_template_directory_uri() . '/modules/blog/editor-blocks/swiper/assets/js/script.js', ['jquery'], '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_slider_style', get_template_directory_uri() . '/modules/blog/editor-blocks/swiper/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
wp_enqueue_style('layout-swiper-bundle-css', get_template_directory_uri() . '/modules/layout/assets/css/swiper-bundle.css', array(), '1.0', 'all'); |
||||||
|
} |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<div class="texts-swp"> |
||||||
|
<button class="texts-swp__prev"> |
||||||
|
<img src="{{ template_path }}/modules/blog/components/featured-slider/assets/img/swp-prev.svg" alt=""> |
||||||
|
</button> |
||||||
|
<button class="texts-swp__next"> |
||||||
|
<img src="{{ template_path }}/modules/blog/components/featured-slider/assets/img/swp-next.svg" alt=""> |
||||||
|
</button> |
||||||
|
<div class="texts-swp__pagination"></div> |
||||||
|
<div class="swiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
{% for slide in gallery %} |
||||||
|
<div class="swiper-slide"> |
||||||
|
<img src="{{ slide.img.url }}" alt="{{ slide.img.alt }}"> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> <div id="appointment" data-auth="ZpG3K" data-widgetUrl="https://tekhosmotr-ryadom.ru"></div> |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
/* Article table */ |
||||||
|
.article-table__wrap { |
||||||
|
background: var(--accent-3); |
||||||
|
border-radius: 24px; |
||||||
|
overflow: hidden; |
||||||
|
padding: 2px; |
||||||
|
margin-bottom: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table { |
||||||
|
background: var(--main_white); |
||||||
|
border-radius: 22px; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item { |
||||||
|
display: flex; |
||||||
|
width: calc(100% / 3 - 36px / 3); |
||||||
|
align-items: stretch; |
||||||
|
border: 1px solid #E1E1E1; |
||||||
|
text-align: center; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item ul { |
||||||
|
width: 50%; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item li { |
||||||
|
padding: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item li:not(:last-child) { |
||||||
|
border-bottom: 1px solid #E1E1E1; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item li:first-child { |
||||||
|
background: #E1E1E1; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item ul:first-child li:first-child { |
||||||
|
border-right: 1px solid var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item ul:not(:last-child) li { |
||||||
|
border-right: 1px solid #E1E1E1; |
||||||
|
} |
||||||
|
/* Article table end */ |
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 992px) { |
||||||
|
.article-table { |
||||||
|
flex-direction: column; |
||||||
|
gap: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item:not(:first-child) li:first-child { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item:not(:first-child) { |
||||||
|
border-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.article-table__item ul li { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.article-block__head { |
||||||
|
grid-template-columns: repeat(1, minmax(0, 1fr)); |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function table_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['content'] = get_field('content'); |
||||||
|
Timber::render('modules/blog/editor-blocks/table/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_table', |
||||||
|
'title' => __('GP - table'), |
||||||
|
'description' => __('table block'), |
||||||
|
'render_callback' => 'table_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'table', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_table_style', get_template_directory_uri() . '/modules/blog/editor-blocks/table/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
} |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
<section class="article-table__wrap"> |
||||||
|
<div class="article-table"> |
||||||
|
{%for item in content %} |
||||||
|
<div class="article-table__item"> |
||||||
|
<ul> |
||||||
|
<li>{{ item.head_1 }}</li> |
||||||
|
{% for c in item.table %} |
||||||
|
<li>{{c.text_1}}</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
|
<ul> |
||||||
|
<li>{{ item.head_2 }}</li> |
||||||
|
{% for c in item.table %} |
||||||
|
<li>{{c.text_2}}</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
{% endfor %} |
||||||
|
|
||||||
|
</div> |
||||||
|
</section> |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
.video_block { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
function video_render_callback($block, $content = '', $is_preview = false, $post_id = 0) { |
||||||
|
$context = Timber::context(); |
||||||
|
$context['block'] = $block; |
||||||
|
$context['is_preview'] = $is_preview; |
||||||
|
$context['video'] = get_field('video'); |
||||||
|
Timber::render('modules/blog/editor-blocks/video/editor-block-template.twig', $context); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
add_action('acf/init', function(){ |
||||||
|
if( function_exists('acf_register_block') ) { |
||||||
|
// register a testimonial block |
||||||
|
|
||||||
|
acf_register_block(array( |
||||||
|
'name' => 'gp_video', |
||||||
|
'title' => __('GP - video'), |
||||||
|
'description' => __('video block'), |
||||||
|
'render_callback' => 'video_render_callback', |
||||||
|
'category' => 'formatting', |
||||||
|
'icon' => 'admin-comments', |
||||||
|
'keywords' => array( 'video', 'gp-block',), |
||||||
|
'mode' => 'preview', |
||||||
|
'enqueue_assets' => function(){ |
||||||
|
wp_enqueue_style('gp_util_style', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-core.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_normalize', get_template_directory_uri() . '/modules/layout/assets/css/gp-style-normalize.css', array(), '1.0', 'all'); |
||||||
|
wp_enqueue_style('gp_video_style', get_template_directory_uri() . '/modules/blog/editor-blocks/video/assets/css/style.css', array(), '2.0', 'all'); |
||||||
|
}, |
||||||
|
'supports' => array( |
||||||
|
'align' => true, |
||||||
|
'multiple' => true, |
||||||
|
'jsx' => true, |
||||||
|
'__experimentalInnerBlocks' => true, // Включение поддержки вложенных блоков |
||||||
|
), |
||||||
|
)); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
<section class="video_block"> |
||||||
|
{{video}} |
||||||
|
</section> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_shortcode( 'intend_open', 'intend_open' ); |
||||||
|
|
||||||
|
function intend_open( $atts ){ |
||||||
|
$context = Timber::get_context(); |
||||||
|
$context['color'] = $atts['color']; |
||||||
|
return \Timber\Timber::compile( 'blog/shortcodes/intend/shortcode.twig', $context ); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1 @@ |
|||||||
|
<section class="indent" {% if color %}style="background:{{color}}"{% endif %}> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_shortcode( 'intend_close', 'intend_close' ); |
||||||
|
|
||||||
|
function intend_close( $atts ){ |
||||||
|
return \Timber\Timber::compile( 'blog/shortcodes/intend_close/shortcode.twig'); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1 @@ |
|||||||
|
</section> |
||||||
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 142 KiB |
@ -0,0 +1,10 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_shortcode( 'subs_form', 'subs_form' ); |
||||||
|
|
||||||
|
function subs_form( $atts ){ |
||||||
|
return \Timber\Timber::compile( 'blog/shortcodes/subs_form/shortcode.twig'); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<!-- Discount --> |
||||||
|
{% set current_path = '/wp-content/themes/cosmopet/modules/blog/shortcodes/subs_form' %} |
||||||
|
<section class="discount form-process"> |
||||||
|
<h2 class="discount-title">{{ function('pll_e', 'Узнайте о нас больше и получите <span>скидку!</span>') }}</h2> |
||||||
|
<img src="{{ current_path }}/assets/img/discount-bg.png" alt="" class="discount-bg"> |
||||||
|
<img src="{{ current_path }}/assets/img/discount-bg-sm.png" alt="" class="discount-bg mb"> |
||||||
|
<form action="" class="discount-form"> |
||||||
|
<input type="email" placeholder="{{ function('pll_e', 'Эл.почта') }}"> |
||||||
|
<img src="assets/img/long-arrow.svg" alt=""> |
||||||
|
<button type="submit">{{ function('pll_e', 'подписаться') }}</button> |
||||||
|
</form> |
||||||
|
<div class="discount-descriptions"> |
||||||
|
<p class="discount-description__1">{{ function('pll_e', 'Подписываясь на рассылку, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах') }} </p> |
||||||
|
<p class="discount-description__2">{{ function('pll_e', 'Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших, предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции', 'Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции') }}</p> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- Discount end --> |
||||||
@ -1,4 +0,0 @@ |
|||||||
<!-- Подключаем хуки ajax_wp стандартным способом |
|
||||||
данный файл подключается только при ajax запросах на сервер |
|
||||||
поэтому не нужно использовать его для хранени |
|
||||||
функций используемых вне ajax логики --> |
|
||||||
@ -1,3 +1,14 @@ |
|||||||
<?php |
<?php |
||||||
|
|
||||||
|
|
||||||
|
add_filter('timber/context', function($context) { |
||||||
|
$context['email_list'] = get_field('email_list', 'options'); |
||||||
|
$context['adres'] = get_field('adres', 'options'); |
||||||
|
$context['social'] = get_field('social', 'options'); |
||||||
|
$context['links'] = get_field('links', 'options'); |
||||||
|
return $context; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
?> |
?> |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
jQuery(document).ready(function($) { |
||||||
|
$('.form-process').submit(function(event) { |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
let formData = $(this).serialize(); |
||||||
|
|
||||||
|
$.ajax({ |
||||||
|
type: 'POST', |
||||||
|
url: '/wp-admin/admin-ajax.php', |
||||||
|
data: { |
||||||
|
action: 'process_form', |
||||||
|
formData: formData |
||||||
|
}, |
||||||
|
success: function(response) { |
||||||
|
alert(response.message); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
require_once 'module-controller.php'; |
||||||
|
|
||||||
|
add_action('wp_ajax_process_form', 'process_form'); |
||||||
|
add_action('wp_ajax_nopriv_process_form', 'process_form'); |
||||||
|
|
||||||
|
function process_form() { |
||||||
|
$formData = $_POST['formData']; |
||||||
|
|
||||||
|
// Получаем обработчик с цепочкой декораторов |
||||||
|
$handler = FormHandlerFactory::getHandler(); |
||||||
|
|
||||||
|
// Обрабатываем форму (отправляем в несколько сервисов) |
||||||
|
$response = $handler->handle($formData); |
||||||
|
|
||||||
|
wp_send_json($response); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
abstract class FormHandler { |
||||||
|
protected $nextHandler; |
||||||
|
|
||||||
|
public function __construct($nextHandler = null) { |
||||||
|
$this->nextHandler = $nextHandler; |
||||||
|
} |
||||||
|
|
||||||
|
public function handle($data) { |
||||||
|
if ($this->nextHandler) { |
||||||
|
return $this->nextHandler->handle($data); |
||||||
|
} |
||||||
|
return ['success' => true, 'message' => 'Форма обработана']; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class b24Handler extends FormHandler { |
||||||
|
public function handle($data) { |
||||||
|
// Логика отправки в Mailchimp |
||||||
|
error_log("Отправка в b24: " . json_encode($data)); |
||||||
|
|
||||||
|
// Вызываем следующий обработчик в цепочке |
||||||
|
return parent::handle($data); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class zohoHandler extends FormHandler { |
||||||
|
public function handle($data) { |
||||||
|
// Логика отправки в HubSpot |
||||||
|
error_log("Отправка в Zoho: " . json_encode($data)); |
||||||
|
|
||||||
|
return parent::handle($data); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class mindboxHandler extends FormHandler { |
||||||
|
public function handle($data) { |
||||||
|
// Отправка в стандартный обработчик (например, email) |
||||||
|
error_log("Отправка в mindBox: " . json_encode($data)); |
||||||
|
|
||||||
|
return parent::handle($data); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class emailHandler extends FormHandler { |
||||||
|
public function handle($data) { |
||||||
|
$to = 'fcs.andrew@gmail.com'; |
||||||
|
$subject = 'Test Email'; |
||||||
|
$message = json_encode($data, JSON_PRETTY_PRINT); // Преобразуем данные в строку |
||||||
|
$headers = ['Content-Type: text/plain; charset=UTF-8']; |
||||||
|
wp_mail($to, $subject, $message, $headers); |
||||||
|
return parent::handle($data); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
class FormHandlerFactory { |
||||||
|
public static function getHandler() { |
||||||
|
// Базовый обработчик |
||||||
|
$handler = new emailHandler(); |
||||||
|
|
||||||
|
// Добавляем в цепочку обработчиков |
||||||
|
$handler = new mindboxHandler($handler); |
||||||
|
$handler = new zohoHandler($handler); |
||||||
|
$handler = new b24Handler($handler); |
||||||
|
return $handler; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -1,87 +1,740 @@ |
|||||||
/* Header */ |
.main-menu{ |
||||||
.header { |
display: flex; |
||||||
background: var(--main_white); |
align-items: center; |
||||||
border-bottom: 1px solid var(--interface_title); |
|
||||||
position: fixed; |
list-style-type: none; |
||||||
top: 0; |
margin-bottom: 0; |
||||||
left: 0; |
} |
||||||
width: 100%; |
.main-menu li{ |
||||||
z-index: 4; |
margin-bottom: 0; |
||||||
} |
} |
||||||
|
.lang p{ |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.main-menu__item{ |
||||||
|
margin-left: 24px; |
||||||
|
|
||||||
|
transition: opacity .2s ease-out; |
||||||
|
} |
||||||
|
.main-menu__item:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.main-menu__item:hover{ |
||||||
|
opacity: .8; |
||||||
|
|
||||||
|
background: #f2f2f2; |
||||||
|
border-radius: 24px; |
||||||
|
} |
||||||
|
.header.white .main-menu__item:hover .main-menu__link{ |
||||||
|
color: #000 |
||||||
|
} |
||||||
|
.main-menu__item:active{ |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.main-menu__link{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
padding: 8px 12px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
|
||||||
|
transition: color .2s ease-out; |
||||||
|
} |
||||||
|
.main-menu__button{ |
||||||
|
padding: 8px 32px 8px 12px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
border: none; |
||||||
|
border-radius: 24px; |
||||||
|
|
||||||
|
background: var(--gradient-turquoise); |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.main-menu__button::before{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: 14px; |
||||||
|
right: 14px; |
||||||
|
|
||||||
|
width: 13px; |
||||||
|
height: 8px; |
||||||
|
|
||||||
|
background-image: url(../img/arrow-black.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
|
||||||
.header-container { |
/* lang*/ |
||||||
|
.lang{ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.lang__open{ |
||||||
|
padding: 12px 15px; |
||||||
|
|
||||||
|
width: 74px; |
||||||
|
|
||||||
|
background: none; |
||||||
|
border: none; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
transition: opacity .2s ease-out; |
||||||
|
} |
||||||
|
.lang__open:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
.lang-open p{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
|
||||||
|
text-align: start; |
||||||
|
|
||||||
|
color: #000 |
||||||
|
} |
||||||
|
.lang-open__arrow{ |
||||||
|
margin-left: 7.25px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.lang-open__black{ |
||||||
|
|
||||||
|
} |
||||||
|
.lang-open__white{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.lang__content{ |
||||||
|
position: absolute; |
||||||
|
top: 33px; |
||||||
|
left: -13px; |
||||||
|
|
||||||
|
height: 0; |
||||||
|
|
||||||
|
border-radius: 6px; |
||||||
|
|
||||||
|
transition: height .2s ease-out; |
||||||
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
.lang__list{ |
||||||
|
width: 104px; |
||||||
|
|
||||||
|
padding: 8px; |
||||||
|
|
||||||
|
list-style-type: none; |
||||||
|
} |
||||||
|
.lang-item{ |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
|
.lang-item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.lang-item a{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
text-transform: uppercase; |
||||||
|
padding: 4px; |
||||||
|
|
||||||
|
border-radius: 6px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 400; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: var(--text-dark); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
transition: background-color .2s ease-out; |
||||||
|
} |
||||||
|
.lang-item a:hover, |
||||||
|
.lang-item.current-lang a{ |
||||||
|
background-color: var(--background-grey); |
||||||
|
} |
||||||
|
.lang-item.current-lang a::before{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: 10px; |
||||||
|
right: 8px; |
||||||
|
|
||||||
|
width: 16px; |
||||||
|
height: 12px; |
||||||
|
|
||||||
|
background-image: url(../img/arrow-selected.svg); |
||||||
|
} |
||||||
|
/* lang */ |
||||||
|
/* mini-profile */ |
||||||
|
.mini-profile{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.mini-profile__item{ |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
.mini-profile__item:first-child{ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.mini-profile__button{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
padding: 8px; |
||||||
|
|
||||||
display: flex; |
display: flex; |
||||||
|
justify-content: center; |
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: space-between; |
|
||||||
padding: 16px 0; |
background: none; |
||||||
|
border: none; |
||||||
|
|
||||||
|
transition: opacity .2s ease-out; |
||||||
|
} |
||||||
|
.mini-profile__button:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
.mini-profile__icon{ |
||||||
|
width: 24px; |
||||||
|
aspect-ratio: 1; |
||||||
|
} |
||||||
|
.mini-profile__icon.white{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
/* mini-profile */ |
||||||
|
|
||||||
|
|
||||||
|
/* header start */ |
||||||
|
|
||||||
|
.header{ |
||||||
|
position: relative; |
||||||
|
|
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
|
||||||
|
z-index: 200; |
||||||
} |
} |
||||||
|
.header::after{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
left: auto; |
||||||
|
right: auto; |
||||||
|
bottom: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
height: 1px; |
||||||
|
|
||||||
|
background: var(--text-3); |
||||||
|
|
||||||
.header-bars { |
|
||||||
display: none; |
|
||||||
} |
} |
||||||
|
|
||||||
.header-logo { |
.header__content{ |
||||||
display: flex; |
height: 72px; |
||||||
align-items: center; |
|
||||||
gap: 8px; |
padding: 14px 24px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
z-index: 101; |
||||||
} |
} |
||||||
|
|
||||||
.header-logo span { |
.header__open-menu{ |
||||||
color: var(---main_black); |
display: none; |
||||||
font-size: 20px; |
|
||||||
text-transform: uppercase; |
width: 24px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
|
||||||
|
border: none; |
||||||
|
background: none; |
||||||
} |
} |
||||||
|
.header__open-menu::before{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: 8px; |
||||||
|
left: 4px; |
||||||
|
|
||||||
|
width: 16px; |
||||||
|
height: 2px; |
||||||
|
|
||||||
|
background: #000; |
||||||
|
border-radius: 1px; |
||||||
|
|
||||||
.header-navs { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
gap: 24px; |
|
||||||
} |
} |
||||||
|
.header__open-menu::after{ |
||||||
|
content: ''; |
||||||
|
|
||||||
.header-navs__link { |
position: absolute; |
||||||
padding: 8px 12px; |
left: 4px; |
||||||
font-size: 16px; |
bottom: 8px; |
||||||
font-weight: bold; |
|
||||||
text-transform: uppercase; |
width: 16px; |
||||||
line-height: 20px; |
height: 2px; |
||||||
|
|
||||||
|
background: #000; |
||||||
|
border-radius: 1px; |
||||||
} |
} |
||||||
|
|
||||||
.header-accordion {} |
.header__logo{ |
||||||
|
width: 182px; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
.header__logo-black, |
||||||
|
.header__logo-white{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header__logo-white{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
.header-accordion__btn { |
.header__menu-block{ |
||||||
display: flex; |
position: absolute; |
||||||
align-items: center; |
top: 72px; |
||||||
gap: 4px; |
left: 0; |
||||||
padding: 8px 12px; |
|
||||||
border-radius: 24px; |
width: 100%; |
||||||
background: var(--accent-2); |
height: 0; |
||||||
cursor: pointer; |
|
||||||
user-select: none; |
overflow: hidden; |
||||||
font-size: 16px; |
transition: height .2s ease-out; |
||||||
font-weight: bold; |
|
||||||
line-height: 20px; |
background-color: #fff; |
||||||
color: var(---main_black); |
|
||||||
|
z-index: 100; |
||||||
} |
} |
||||||
|
|
||||||
.header-right { |
.header__pc-menu{ |
||||||
display: flex; |
padding: 40px 46px; |
||||||
align-items: center; |
|
||||||
gap: 8px; |
display: flex; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.header__pc-menu::before{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 46px; |
||||||
|
|
||||||
|
width: 330px; |
||||||
|
height: 248px; |
||||||
|
|
||||||
|
background-image: url(../img/cat.png); |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.header__pc-menu::after{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
right: 46px; |
||||||
|
|
||||||
|
width: 330px; |
||||||
|
height: 248px; |
||||||
|
|
||||||
|
background-image: url(../img/dog.png); |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.header-pc-menu__content{ |
||||||
|
width: 600px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
} |
} |
||||||
|
.header-pc-menu__item{ |
||||||
|
|
||||||
|
} |
||||||
|
.header-pc-menu__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 26px; |
||||||
|
line-height: 123%; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.header-pc-menu__list{ |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
list-style-type: none; |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
.header-pc-menu__list-li{ |
||||||
|
margin-top: 25px; |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
.header-pc-menu__list-li:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.header-pc-menu__list-li a{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 600; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: var(--text-0); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.header__phone-menu{ |
||||||
|
display: none; |
||||||
|
|
||||||
|
padding: 24px 16px; |
||||||
|
|
||||||
.header-lang__btn { |
height: calc(100vh - 56px); |
||||||
|
|
||||||
|
overflow-x: auto; |
||||||
|
} |
||||||
|
.header-phone-menu__item{ |
||||||
|
padding: 16px 0; |
||||||
|
|
||||||
|
border-top: 1px solid #f4f1f0; |
||||||
|
border-bottom: 1px solid #f4f1f0; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.header-phone-menu__item:first-child{ |
||||||
|
border-top: 0; |
||||||
|
} |
||||||
|
.header-phone-menu__item:last-child{ |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
.header-phone-menu__title{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 120%; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.header-phone-menu__title--gradient{ |
||||||
|
background: var(--gradient-blue); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
.header-phone-menu__category{ |
||||||
|
margin-top: 16px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 133%; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.header-phone-menu__list{ |
||||||
|
margin-top: 24px; |
||||||
|
|
||||||
|
padding-left: 32px; |
||||||
|
|
||||||
|
list-style-type: none; |
||||||
|
} |
||||||
|
.header-phone-menu__list-item{ |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.header-phone-menu__list-item:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
.header-phone-menu__list-item a{ |
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: #121212; |
||||||
|
color: #000 |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
.header.white{ |
||||||
|
background: none; |
||||||
|
} |
||||||
|
.header.white .header__logo-black{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header.white .header__logo-white{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header.white .main-menu__link{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.header.white .main-menu__button{ |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.header.white .lang__open{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.header.white::after{ |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.header.white .lang-open__black{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header.white .lang-open__white{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header.white .mini-profile__icon.white{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header.white .mini-profile__icon.black{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header.white .header__open-menu::before, |
||||||
|
.header.white .header__open-menu::after{ |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.header__phone-menu::-webkit-scrollbar { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
main{ |
||||||
|
padding-top: 72px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.modal__login { |
||||||
|
width: 412px; |
||||||
|
} |
||||||
|
.login_back { |
||||||
|
position: absolute; |
||||||
|
top: 24px; |
||||||
|
left: 24px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.login_wrap { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.login_wrap.hide { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.login_inner { |
||||||
|
display: none; |
||||||
|
margin-top: 128px; |
||||||
|
} |
||||||
|
.login_inner.active { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.login_title { |
||||||
|
color: #121212; |
||||||
|
font-size: 24px; |
||||||
|
line-height: 28px; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
.login_subtitle { |
||||||
|
color: #575775; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
.login_subtitle span { |
||||||
|
display: block; |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
|
.login_input { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
.login_input.error input { |
||||||
|
border-color: #FA0505; |
||||||
|
} |
||||||
|
.login_error { |
||||||
|
font-size: 12px; |
||||||
|
line-height: 16px; |
||||||
|
color: #FA0505; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.login_input.error .login_error { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.login_input input { |
||||||
|
border: 1px solid #999999; |
||||||
|
color: #999999; |
||||||
|
border-radius: 20px; |
||||||
|
padding: 12px 16px; |
||||||
|
width: 100%; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
.login_btn { |
||||||
|
padding: 12px 24px; |
||||||
|
border-radius: 20px; |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 54px; |
||||||
|
text-transform: none; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.login_btn.btn_gradient { |
||||||
|
margin-top: 24px; |
||||||
|
background: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%); |
||||||
|
} |
||||||
|
.login_btn.account_link { |
||||||
|
background: #121212; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.login_privacy { |
||||||
|
font-size: 12px; |
||||||
|
line-height: 16px; |
||||||
|
color: #333333; |
||||||
|
position: absolute; |
||||||
|
bottom: 24px; |
||||||
|
left: 24px; |
||||||
|
right: 24px; |
||||||
|
} |
||||||
|
.login_privacy a { |
||||||
|
color: #333333; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
.login_inner.step_2 .login_subtitle, |
||||||
|
.login_success .login_subtitle, |
||||||
|
.login_auth .login_subtitle { |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.login_timer { |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
|
margin-top: 24px; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.js-repeat-code { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.login_success img { |
||||||
|
margin: 40px 0; |
||||||
|
} |
||||||
|
/* |
||||||
|
.wptelegram-login-output-wrap.container { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.wptelegram-login-output-wrap.container:after { |
||||||
|
content: 'Войти через Telegram'; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
background: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%); |
||||||
display: flex; |
display: flex; |
||||||
|
justify-content: center; |
||||||
align-items: center; |
align-items: center; |
||||||
|
width: 100%; |
||||||
|
height: 54px; |
||||||
|
top: 0; |
||||||
|
border-radius: 20px; |
||||||
|
font-weight: var(--btn-font-weight); |
||||||
|
font-family: var(--btn-font-family); |
||||||
|
font-style: var(--btn-font-style); |
||||||
|
font-size: 20px; |
||||||
|
line-height: 24px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
user-select: none; |
|
||||||
gap: 4px; |
|
||||||
padding: 12px 15px; |
|
||||||
color: var(---main_black); |
|
||||||
font-size: 16px; |
|
||||||
font-weight: bold; |
|
||||||
line-height: 20px; |
|
||||||
} |
} |
||||||
|
*/ |
||||||
|
.wptelegram-login-output-wrap { |
||||||
|
display: flex; |
||||||
|
margin-top: 15px; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
@media(max-width: 480px) { |
||||||
|
.modal__login { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.login_title { |
||||||
|
font-size: 19px; |
||||||
|
line-height: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
/* header end */ |
||||||
|
|
||||||
/* Header end */ |
|
||||||
|
|
||||||
|
/* Стили для планшетов */ |
||||||
|
@media only screen and (max-width: 1200px) { |
||||||
|
/* header */ |
||||||
|
main{ |
||||||
|
padding-top: 64px; |
||||||
|
} |
||||||
|
.main-menu{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__open-menu{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.lang{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__logo{ |
||||||
|
width: 136px; |
||||||
|
height: 29px; |
||||||
|
} |
||||||
|
.header__content{ |
||||||
|
height: auto; |
||||||
|
|
||||||
|
padding: 8px 16px; |
||||||
|
} |
||||||
|
.mini-profile__item:nth-child(2){ |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
.header::after{ |
||||||
|
left: 0; |
||||||
|
|
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.header__pc-menu{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.header__phone-menu{ |
||||||
|
display: block; |
||||||
|
} |
||||||
|
.header__menu-block{ |
||||||
|
top: 56px; |
||||||
|
} |
||||||
|
.header__content::after{ |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
/* header */ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 493 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,151 @@ |
|||||||
|
'use strict'; |
||||||
|
|
||||||
|
// function
|
||||||
|
function modalOpen(buttonElement, contentElement){ |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
elements = document.querySelectorAll(buttonElement), |
||||||
|
device = window.screen.width; |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisContentElement = document.querySelector(contentElement); |
||||||
|
|
||||||
|
e.onclick = function () { |
||||||
|
modal.classList.add('active'); |
||||||
|
thisContentElement.classList.add('active'); |
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth; |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
if (device <= 720) { |
||||||
|
aside.style.width = `${device}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
}else{ |
||||||
|
aside.style.width = `${width}px`; |
||||||
|
thisContentElement.style.opacity = 1; |
||||||
|
thisContentElement.style.filter = 'blur(0px)'; |
||||||
|
} |
||||||
|
}, 10); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function modalClose(buttonElement) { |
||||||
|
let modal = document.querySelector('.modal'), |
||||||
|
aside = document.querySelector('.modal__aside'), |
||||||
|
asideItems = document.querySelectorAll('.modal__item'), |
||||||
|
elements = document.querySelectorAll(buttonElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
e.onclick = function () {
|
||||||
|
aside.style.width = '0px'; |
||||||
|
|
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.style.filter = 'blur(10px)'; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
asideItems.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
modal.classList.remove('active'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { |
||||||
|
let elements = document.querySelectorAll(mainElement); |
||||||
|
|
||||||
|
elements.forEach(e => { |
||||||
|
let thisMainElement = e, |
||||||
|
thisButtonElement = e.querySelector(buttonElement), |
||||||
|
thisHeightElement = e.querySelector(heightElement), |
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) { |
||||||
|
let height = thisHeightElement.clientHeight; |
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) { |
||||||
|
elements.forEach(e => { |
||||||
|
if (e.classList.contains('active')) { |
||||||
|
e.classList.remove('active'); |
||||||
|
e.querySelector(contentElement).style.height = null |
||||||
|
}
|
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) { |
||||||
|
thisContentElement.style.height = `${height}px`; |
||||||
|
thisMainElement.classList.add('active'); |
||||||
|
}else{ |
||||||
|
thisContentElement.style.height = null; |
||||||
|
thisMainElement.classList.remove('active'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
var menu_opened = false; |
||||||
|
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { |
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content), |
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '', |
||||||
|
thisBlockheight = document.querySelector(blockheight); |
||||||
|
|
||||||
|
thisButton.onclick = function () { |
||||||
|
let height = thisBlockheight.clientHeight; |
||||||
|
|
||||||
|
if (!thisContent.classList.contains('open')) { |
||||||
|
thisContent.style.height = `${height}px`; |
||||||
|
thisContent.classList .add('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
thisRemoveBlock.classList.remove(removeClass); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
thisContent.style.height = null; |
||||||
|
thisContent.classList.remove('open'); |
||||||
|
|
||||||
|
if (removeBlock) { |
||||||
|
if (window.Y <= 25) { |
||||||
|
thisRemoveBlock.classList.add(removeClass); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
menu_opened = !menu_opened; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (document.querySelector('.header').classList.contains('white')) { |
||||||
|
window.addEventListener("scroll", function (e) { |
||||||
|
let header = document.querySelector('.header'); |
||||||
|
let scroll = window.scrollY; |
||||||
|
if(!menu_opened){ |
||||||
|
if (scroll >= 25) { |
||||||
|
header.classList.remove('white') |
||||||
|
}else{ |
||||||
|
|
||||||
|
header.classList.add('white') |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); |
||||||
|
toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); |
||||||
|
toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); |
||||||
|
// scroll
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,46 +0,0 @@ |
|||||||
{% set current_path = template_path ~ '/modules/header' %} |
|
||||||
<header class="header"> |
|
||||||
<div class="container header-container"> |
|
||||||
<button class="header-bars"> |
|
||||||
<img src="{{ current_path }}/assets/img/bars.svg" alt=""> |
|
||||||
</button> |
|
||||||
<a href="/" class="header-logo"> |
|
||||||
<img src="{{ current_path }}/assets/img/logo.svg" alt=""> |
|
||||||
<span>сosmopet</span> |
|
||||||
</a> |
|
||||||
<ul class="header-navs"> |
|
||||||
<li> |
|
||||||
<a href="#" class="header-navs__link">ГЛАВНАЯ</a> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<a href="#" class="header-navs__link">О COSMOPET</a> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<a href="#" class="header-navs__link">ПРОИЗВОДСТВО</a> |
|
||||||
</li> |
|
||||||
<li> |
|
||||||
<a href="#" class="header-navs__link">БЛОГ</a> |
|
||||||
</li> |
|
||||||
<li class="header-accordion"> |
|
||||||
<div class="header-accordion__btn"> |
|
||||||
<span>ПРОДУКЦИЯ</span> |
|
||||||
<img src="{{ current_path }}/assets/img/arrow-down.svg" alt=""> |
|
||||||
</div> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
<div class="header-right"> |
|
||||||
<div class="header-lang"> |
|
||||||
<div class="header-lang__btn"> |
|
||||||
<span>RU</span> |
|
||||||
<img src="{{ current_path }}/assets/img/arrow-down.svg" alt=""> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<a href="#"> |
|
||||||
<img src="{{ current_path }}/assets/img/user-icon.svg" alt=""> |
|
||||||
</a> |
|
||||||
<a href="#"> |
|
||||||
<img src="{{ current_path }}/assets/img/basket-icon.svg" alt=""> |
|
||||||
</a> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</header> |
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,5 @@ |
|||||||
<?php |
<?php |
||||||
|
|
||||||
|
|
||||||
include_module('header'); |
include_module('header'); |
||||||
include_module('footer'); |
include_module('footer'); |
||||||
|
|||||||
@ -0,0 +1,154 @@ |
|||||||
|
/* Footer */ |
||||||
|
.footer { |
||||||
|
background: var(--main_black); |
||||||
|
padding: 40px 0 38px; |
||||||
|
color: var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top { |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 48px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top .logo { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 10px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
text-transform: uppercase; |
||||||
|
background: var(--accent-1); |
||||||
|
color: transparent; |
||||||
|
-webkit-background-clip: text; |
||||||
|
background-clip: text; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content__address { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
margin-bottom: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul li { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul p { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul a { |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content__wrap { |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top__link { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top__link .link-black { |
||||||
|
padding: 7px 15px; |
||||||
|
color: var(--main_white); |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
font-weight: 500; |
||||||
|
white-space: nowrap; |
||||||
|
border: 1px solid var(--main_white); |
||||||
|
border-radius: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top__link .link-white { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
background: var(--main_white); |
||||||
|
color: var(--main_black); |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 24px; |
||||||
|
padding: 12px; |
||||||
|
border-radius: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-contact { |
||||||
|
width: 364px; |
||||||
|
flex-shrink: 0; |
||||||
|
background: var(--accent-1); |
||||||
|
border-radius: 24px; |
||||||
|
padding: 24px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-contact__title { |
||||||
|
color: var(--main_black); |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-contact__submit { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
height: 48px; |
||||||
|
border-radius: 16px; |
||||||
|
background: var(--main_black); |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 24px; |
||||||
|
color: var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-bottom { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding-top: 17px; |
||||||
|
margin-top: 19px; |
||||||
|
border-top: 1px solid var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-network { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-bottom a { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
font-weight: 500; |
||||||
|
color: var(--main_white); |
||||||
|
opacity: 0.6; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
/* Footer end */ |
||||||
|
|
||||||
@ -0,0 +1,68 @@ |
|||||||
|
/* Стили для мобильных устройств */ |
||||||
|
@media only screen and (max-width: 576px) { |
||||||
|
.footer { |
||||||
|
padding: 24px 0 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top { |
||||||
|
align-items: flex-start; |
||||||
|
text-align: left; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content__wrap { |
||||||
|
align-items: flex-start; |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content { |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content .logo { |
||||||
|
font-size: 20px; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content__address { |
||||||
|
font-size: 18px; |
||||||
|
line-height: 24px; |
||||||
|
margin-bottom: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul { |
||||||
|
gap: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul p { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-content ul a { |
||||||
|
font-size: 24px; |
||||||
|
line-height: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-top__link .link-white { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-contact { |
||||||
|
width: 100%; |
||||||
|
padding: 16px; |
||||||
|
border-radius: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer-contact__title { |
||||||
|
color: var(--main_white); |
||||||
|
} |
||||||
|
|
||||||
|
.footer-bottom { |
||||||
|
margin-top: 0; |
||||||
|
padding-top: 24px; |
||||||
|
border: 0; |
||||||
|
align-items: flex-start; |
||||||
|
gap: 17px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
/* Стили для планшетов */ |
||||||
|
@media only screen and (max-width: 992px) { |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
add_filter('timber/context', function($context) { |
||||||
|
#Подготавливаем данные для рендеринга |
||||||
|
#$context['field_name'] = get_field('field_name') |
||||||
|
return $context; |
||||||
|
}); |
||||||
|
|
||||||
|
$context = Timber::get_context(); |
||||||
|
|
||||||
|
# Если необходимо рендерим шаблон компонента |
||||||
|
#Timber::render('example/components/example/component-template.twig', $context); |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
|
||||||
|
add_filter('timber/context', function($context) { |
||||||
|
return $context; |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?> |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
{% set current_path = template_path ~ '/modules/footer' %} |
||||||
|
<footer class="footer"> |
||||||
|
<div class="container"> |
||||||
|
<div class="footer-top"> |
||||||
|
<div class="footer-content__wrap"> |
||||||
|
<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> |
||||||
|
{% for item in email_list %} |
||||||
|
<li> |
||||||
|
<p>{{item.name}}</p> |
||||||
|
<a href="mailto:{{item.email}}">{{item.email}}</a> |
||||||
|
</li> |
||||||
|
{% endfor %} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="footer-top__link"> |
||||||
|
<a href="#" class="link-black">{{ function('pll_e', 'Чат бот с ветеринаром') }}</a> |
||||||
|
<a href="#" class="link-white">{{ function('pll_e', 'Калькулятор рациона') }}</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<form class="footer-contact"> |
||||||
|
<h3 class="footer-contact__title">{{ function('pll_e', 'Форма обратной связи') }}</h3> |
||||||
|
<input type="text" placeholder="{{ function('pll_e', 'Ваше имя') }}" class="form-inp"> |
||||||
|
<input type="email" placeholder="{{ function('pll_e', 'Эл.почта') }}" class="form-inp"> |
||||||
|
<textarea class="form-textarea" name="" placeholder="{{ function('pll_e', 'Текст обращения') }}" id=""></textarea> |
||||||
|
<button class="footer-contact__submit" type="submit">{{ function('pll_e', 'Отправить') }}</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="footer-bottom"> |
||||||
|
<ul class="footer-network"> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-1.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-2.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#"> |
||||||
|
<img src="{{ current_path }}/assets/img/footer-network-3.svg" alt=""> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<a href="#">Соглашение о конфиденциальности</a> |
||||||
|
<a href="#">Декларация соответствия корма</a> |
||||||
|
<a href="#">Декларация соответствия лакомств</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
<!-- Footer end --> |
||||||
Loading…
Reference in new issue