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>'); |
||||
@ -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 |
||||
|
||||
|
||||
include_component('blog', 'featured-slider'); |
||||
$context = Timber::get_context(); |
||||
|
||||
Timber::render('blog/components/single/component-template.twig', $context); |
||||
|
||||
@ -1,15 +1,15 @@ |
||||
|
||||
|
||||
<div class="anons-theme"> |
||||
<h3 class="anons-theme__title">Темы:</h3> |
||||
<h3 class="anons-theme__title">{{ function('pll_e', 'Темы') }}:</h3> |
||||
<ul> |
||||
<li> |
||||
<a href="" class="{% if not current_category %} active {% endif %}">ВСЕ</a> |
||||
<a href="/" class="{% if not current_category %} active {% endif %}">{{ function('pll_e', 'ВСЕ') }}</a> |
||||
</li> |
||||
{% for category in category_list %} |
||||
<li> |
||||
<a href="{{ category.link }}" class="{% if current_category == category.name %} active {% endif %}">{{ category.name }}</a> |
||||
<a href="/category/{{category.slug}}" |
||||
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 |
||||
|
||||
|
||||
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{ |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
list-style-type: none; |
||||
margin-bottom: 0; |
||||
} |
||||
.main-menu li{ |
||||
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; |
||||
} |
||||
|
||||
/* 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; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
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{ |
||||
background: var(--main_white); |
||||
border-bottom: 1px solid var(--interface_title); |
||||
position: relative; |
||||
|
||||
background-color: #fff; |
||||
|
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
|
||||
z-index: 200; |
||||
} |
||||
.header::after{ |
||||
content: ''; |
||||
|
||||
position: absolute; |
||||
left: auto; |
||||
right: auto; |
||||
bottom: 0; |
||||
|
||||
width: 100%; |
||||
z-index: 4; |
||||
height: 1px; |
||||
|
||||
background: var(--text-3); |
||||
|
||||
} |
||||
|
||||
.header-container { |
||||
.header__content{ |
||||
height: 72px; |
||||
|
||||
padding: 14px 24px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 16px 0; |
||||
align-items: center; |
||||
position: relative; |
||||
z-index: 101; |
||||
} |
||||
|
||||
.header__open-menu{ |
||||
display: none; |
||||
|
||||
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__open-menu::after{ |
||||
content: ''; |
||||
|
||||
.header-bars { |
||||
position: absolute; |
||||
left: 4px; |
||||
bottom: 8px; |
||||
|
||||
width: 16px; |
||||
height: 2px; |
||||
|
||||
background: #000; |
||||
border-radius: 1px; |
||||
} |
||||
|
||||
.header__logo{ |
||||
width: 182px; |
||||
height: 40px; |
||||
} |
||||
.header__logo-black, |
||||
.header__logo-white{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.header__logo-white{ |
||||
display: none; |
||||
} |
||||
|
||||
.header-logo { |
||||
.header__menu-block{ |
||||
position: absolute; |
||||
top: 72px; |
||||
left: 0; |
||||
|
||||
width: 100%; |
||||
height: 0; |
||||
|
||||
overflow: hidden; |
||||
transition: height .2s ease-out; |
||||
|
||||
background-color: #fff; |
||||
|
||||
z-index: 100; |
||||
} |
||||
|
||||
.header__pc-menu{ |
||||
padding: 40px 46px; |
||||
|
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
justify-content: center; |
||||
|
||||
position: relative; |
||||
} |
||||
.header__pc-menu::before{ |
||||
content: ''; |
||||
|
||||
.header-logo span { |
||||
color: var(---main_black); |
||||
font-size: 20px; |
||||
text-transform: uppercase; |
||||
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; |
||||
|
||||
.header-navs { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24px; |
||||
justify-content: space-between; |
||||
} |
||||
.header-pc-menu__item{ |
||||
|
||||
.header-navs__link { |
||||
padding: 8px 12px; |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
} |
||||
.header-pc-menu__title{ |
||||
font-family: var(--font-family); |
||||
font-weight: 700; |
||||
font-size: 26px; |
||||
line-height: 123%; |
||||
text-transform: uppercase; |
||||
line-height: 20px; |
||||
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; |
||||
|
||||
height: calc(100vh - 56px); |
||||
|
||||
overflow-x: auto; |
||||
} |
||||
.header-phone-menu__item{ |
||||
padding: 16px 0; |
||||
|
||||
.header-accordion {} |
||||
border-top: 1px solid #f4f1f0; |
||||
border-bottom: 1px solid #f4f1f0; |
||||
|
||||
.header-accordion__btn { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 4px; |
||||
padding: 8px 12px; |
||||
border-radius: 24px; |
||||
background: var(--accent-2); |
||||
cursor: pointer; |
||||
user-select: none; |
||||
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; |
||||
font-weight: bold; |
||||
line-height: 20px; |
||||
color: var(---main_black); |
||||
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; |
||||
} |
||||
|
||||
.header-right { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
main{ |
||||
padding-top: 72px; |
||||
} |
||||
|
||||
.header-lang__btn { |
||||
|
||||
.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; |
||||
justify-content: 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; |
||||
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 */ |
||||
|
||||
|
||||
/* Стили для планшетов */ |
||||
@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) { |
||||
|
||||
} |
||||
|
||||
/* Header end */ |
||||
|
||||
|
||||
|
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 |
||||
|
||||
|
||||
include_module('header'); |
||||
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