Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task:6949 | Смена порядка блоков на главной.Правки стилей

Browse Source
pull/36/head
Максим Максимов 2 months ago
parent 7e5f294615
commit f56f54c0c0
2 changed files with 259 additions and 218 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      wp-content/themes/cosmopet/static/css/front-page.css
  2. 378
      wp-content/themes/cosmopet/templates/_pages/front-page.twig

31
wp-content/themes/cosmopet/static/css/front-page.css
Unescape View File

@ -3535,6 +3535,32 @@ color: #f4f1f0;
text-wrap: nowrap;
}
.marketplace {
position: relative;
margin-top: 5%;
margin-bottom: 5%;
}
.blog_card .blog_card-title {
/* font-size: 36px; */
font-size: 2.1vw;
font-weight: 700;
line-height: 2.2vw;
color: var(--grey-black, #121212);
text-transform: uppercase;
transition: .3s ease all;
}
.truth {
border-radius: 60px 60px 0px 0px;
}
.about_smi {
padding-top: 5%;
padding-bottom: 10%;
border-radius: 0px 0px 60px 60px;
}
@media (min-width: 769px) and (max-width: 1200px) {
.home .container {
padding: 88px 30px 180px !important;
@ -3652,4 +3678,9 @@ color: #f4f1f0;
line-height: 133%;
margin-bottom: 20px;
}
.about_smi {
padding-top: 5%;
padding-bottom: 40%;
border-radius: 0px 0px 60px 60px;
}
}

378
wp-content/themes/cosmopet/templates/_pages/front-page.twig
Unescape View File

@ -161,34 +161,8 @@
</div>
</div>
</div>
{% if site_region == 'ru' %}
<div class="marketplace">
<div class="container">
<div class="marketplace__title">отзывы Покупателей</div>
<div class="marketplace__swiper swiper">
<div class="swiper-wrapper">
{% for i in 1..9 %}
<div class="swiper-slide">
<div class="marketplace__slide">
<img src="/wp-content/themes/cosmopet/static/img/scrollable-{{ i }}.svg" alt="Review {{ i }}">
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
</section>
{% endif %}
{% include 'shop/bestsellers.twig' %}
{% if show_rev %}
<section class="reviews">
{% if show_rev %}
<div class="reviews">
<div class="container">
<h2 class="reviews_title">{{reviews_title}}</h2>
<div class="reviews_block">
@ -231,128 +205,89 @@
<img src="{{ theme.link }}/static/img/pets-reviews.png" alt="" class="reviews_person">
</div>
</div>
</section>
</div>
{% endif %}
</section>
{% endif %}
{% include 'shop/bestsellers.twig' %}
{% if site_region == 'ru' %}
<section class="about_us">
<section class="about_us about">
{% if site_region == 'ru' %}
<div class="marketplace">
<div class="container">
<h1 class="about_us-title">О нас пишут СМИ</h1>
<div class="smi_slider">
<div class="swiper smiSlider">
<h2 class="about_us-title">Отзывы Покупателей</h2>
<div class="marketplace__swiper swiper">
<div class="swiper-wrapper">
{% for slide in [
{
url: 'https://globalpetindustry.com/news/the-advantages-and-disadvantages-of-insect-based-pet-food/',
img: '/wp-content/uploads/2025/06/image-3-1.png',
alt: 'The advantages and disadvantages of insect-based pet food',
date: '08/01/2025',
title: 'The advantages and disadvantages of insect-based pet food',
logo: '/wp-content/uploads/2025/06/group-1.png',
logo_alt: 'Логотип СМИ 1'
},
{
url: 'https://bk.asia-city.com/shopping/news/cosmopet-launches-thailand-nutritious-insect-based-digestible-treats-your-furry',
img: '/wp-content/uploads/2025/06/uaa1-1.png',
alt: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
date: '17/07/2024',
title: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
logo: '/wp-content/uploads/2025/06/image-67.png',
logo_alt: 'Логотип СМИ 2'
},
{
url: 'https://lapkins.ru/p/chem-kormit-sobaku-allergika/',
img: '/wp-content/uploads/2025/06/frame-237.jpg',
alt: 'Чем кормить собаку-аллергика',
date: '15/04/2024',
title: 'Чем кормить собаку-аллергика',
logo: '/wp-content/uploads/2025/06/image-64.png',
logo_alt: 'Логотип СМИ 3'
},
{
url: 'https://drtclub.ru/superpremium-korm-cosmodog-dlya-sobak/',
img: '/wp-content/uploads/2025/06/frame-238.png',
alt: 'Суперпремиум корм для собак Cosmodog',
date: '18/10/2023',
title: 'Суперпремиум корм для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-66.png',
logo_alt: 'Логотип СМИ 4',
text: 'drtclub.ru'
},
{
url: 'https://dzen.ru/a/ZUPLWi5yTXW_QlCM',
img: '/wp-content/uploads/2025/06/frame-233-2.png',
alt: 'Тестирую инновационный корм для собак',
date: '02/11/2023',
title: 'Тестирую инновационный корм для собак',
logo: '/wp-content/uploads/2025/06/group-1-1.png',
logo_alt: 'Логотип СМИ 5',
text: 'ВетБлог'
},
{
url: 'https://recyclemag.ru/article/rossii-vpervie-poyavilsya-zhivotnih-osnove-entoproteina',
img: '/wp-content/uploads/2025/06/frame-236.png',
alt: 'В России впервые появился корм для животных на основе энтопротеина',
date: '09/06/2024',
title: 'В России впервые появился корм для животных на основе энтопротеина',
logo: '/wp-content/uploads/2025/06/image-60.png',
logo_alt: 'Логотип СМИ 6'
},
{
url: 'https://zooinform.ru/polnoraczionnyj-korm-dlya-shhenkov-cosmodogc-indejkoj-i-e-protein',
img: '/wp-content/uploads/2025/06/frame-234.png',
alt: 'Полнорационный корм для щенков Cosmodog',
date: '10/04/2024',
title: 'Полнорационный корм для щенков Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 7'
},
{
url: 'https://zooinform.ru/business/nachalis-prodazhi-innovacionnogo-korma-dlya-sobak-cosmodog/',
img: '/wp-content/uploads/2025/06/frame-235.png',
alt: 'Начались продажи инновационного корма для собак Cosmodog',
date: '18/10/2023',
title: 'Начались продажи инновационного корма для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 8'
},
{
url: 'https://orbsteppe.ru/katastrofa-vseh-splotila-kak-neravnodushnye-pomogali-postradavshim-ot-navodneniya-v-orenburzhe',
img: '/wp-content/uploads/2025/06/frame-239-1.png',
alt: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
date: '18/10/2023',
title: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
logo_alt: 'Логотип СМИ 9',
text: 'orbsteppe.ru'
}
] %}
{% for i in 1..9 %}
<div class="swiper-slide">
<div class="smi-card-wrapper">
<a href="{{ slide.url }}" class="smi-card">
<img src="{{ slide.img }}" alt="{{ slide.alt }}" class="smi-card-img">
<div class="smi-card-date">{{ slide.date }}</div>
<div class="smi-card-title">{{ slide.title }}</div>
<div class="smi-card-label">
{% if slide.logo is defined %}
<img src="{{ slide.logo }}" alt="{{ slide.logo_alt }}">
<div class="marketplace__slide">
<img src="/wp-content/themes/cosmopet/static/img/scrollable-{{ i }}.svg" alt="Review {{ i }}">
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
{% if slide.text is defined %}
<p>{{ slide.text }}</p>
</section>
{% endif %}
{% if show_blog %}
<section class="blog">
<div class="container">
<div class="blog_block">
<div class="blog_top">
<h2 class="blog_title">{{ function('pll_e', 'Наш блог') }}</h2>
</div>
<div class="blog__row">
<p class="blog_text">{{ function('pll_e', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных') }}</p>
<a href="/blog/" class="blog_link main_link"><span>{{ function('pll_e', 'Все статьи') }}</span></a>
</div>
</div>
</div>
<div class="blog_slider">
<div class="swiper blogSlider">
<div class="swiper-wrapper">
{% for post in blog_posts %}
<div class="swiper-slide">
<a class="blog_card" href="{{ post.link }}">
<div class="blog__card-wrapper">
<img src="{{ post.thumbnail }}" alt="{{ post.title }}" class="blog_card-img">
</div>
<div class="blog_card-info-wrap">
<div class="blog_card-info">
<h2 class="blog_card-title">{{ post.title }}</h2>
<p class="blog_card-text">
{% set words = post.excerpt|split(' ') %}
{% if words|length > 14 %}
{{ words|slice(0, 14)|join(' ') }}...
{% else %}
{{ post.excerpt }}...
{% endif %}
</p>
<div class="blog__card-btn">{{ function('pll_e', 'читать статью') }}</div>
</div>
</a>
<img src="{{ theme.link }}/static/img/card-line.svg" alt="" class="card-line-img">
</div>
</a>
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev smiSlider-prev"></button>
<button class="slider-arrow slider-arrow-next smiSlider-next"></button>
</div>
<button class="slider-arrow slider-arrow-prev blogSlider-prev"></button>
<button class="slider-arrow slider-arrow-next blogSlider-next"></button>
</div>
</div>
</div>
</section>
{% endif %}
{% endif %}
</section>
{% endif %}
{% if show_q %}
{% if site_region == 'ae' %}
<style>
@ -770,6 +705,129 @@
</div>
</section>
{% endif %}
{% if site_region == 'ru' %}
<section class="about_us about_smi">
<div class="container">
<h2 class="about_us-title">О нас пишут СМИ</h2>
<div class="smi_slider">
<div class="swiper smiSlider">
<div class="swiper-wrapper">
{% for slide in [
{
url: 'https://globalpetindustry.com/news/the-advantages-and-disadvantages-of-insect-based-pet-food/',
img: '/wp-content/uploads/2025/06/image-3-1.png',
alt: 'The advantages and disadvantages of insect-based pet food',
date: '08/01/2025',
title: 'The advantages and disadvantages of insect-based pet food',
logo: '/wp-content/uploads/2025/06/group-1.png',
logo_alt: 'Логотип СМИ 1'
},
{
url: 'https://bk.asia-city.com/shopping/news/cosmopet-launches-thailand-nutritious-insect-based-digestible-treats-your-furry',
img: '/wp-content/uploads/2025/06/uaa1-1.png',
alt: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
date: '17/07/2024',
title: 'Cosmopet launches in Thailand with nutritious, insect-based digestible treats for your furry friends',
logo: '/wp-content/uploads/2025/06/image-67.png',
logo_alt: 'Логотип СМИ 2'
},
{
url: 'https://lapkins.ru/p/chem-kormit-sobaku-allergika/',
img: '/wp-content/uploads/2025/06/frame-237.jpg',
alt: 'Чем кормить собаку-аллергика',
date: '15/04/2024',
title: 'Чем кормить собаку-аллергика',
logo: '/wp-content/uploads/2025/06/image-64.png',
logo_alt: 'Логотип СМИ 3'
},
{
url: 'https://drtclub.ru/superpremium-korm-cosmodog-dlya-sobak/',
img: '/wp-content/uploads/2025/06/frame-238.png',
alt: 'Суперпремиум корм для собак Cosmodog',
date: '18/10/2023',
title: 'Суперпремиум корм для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-66.png',
logo_alt: 'Логотип СМИ 4',
text: 'drtclub.ru'
},
{
url: 'https://dzen.ru/a/ZUPLWi5yTXW_QlCM',
img: '/wp-content/uploads/2025/06/frame-233-2.png',
alt: 'Тестирую инновационный корм для собак',
date: '02/11/2023',
title: 'Тестирую инновационный корм для собак',
logo: '/wp-content/uploads/2025/06/group-1-1.png',
logo_alt: 'Логотип СМИ 5',
text: 'ВетБлог'
},
{
url: 'https://recyclemag.ru/article/rossii-vpervie-poyavilsya-zhivotnih-osnove-entoproteina',
img: '/wp-content/uploads/2025/06/frame-236.png',
alt: 'В России впервые появился корм для животных на основе энтопротеина',
date: '09/06/2024',
title: 'В России впервые появился корм для животных на основе энтопротеина',
logo: '/wp-content/uploads/2025/06/image-60.png',
logo_alt: 'Логотип СМИ 6'
},
{
url: 'https://zooinform.ru/polnoraczionnyj-korm-dlya-shhenkov-cosmodogc-indejkoj-i-e-protein',
img: '/wp-content/uploads/2025/06/frame-234.png',
alt: 'Полнорационный корм для щенков Cosmodog',
date: '10/04/2024',
title: 'Полнорационный корм для щенков Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 7'
},
{
url: 'https://zooinform.ru/business/nachalis-prodazhi-innovacionnogo-korma-dlya-sobak-cosmodog/',
img: '/wp-content/uploads/2025/06/frame-235.png',
alt: 'Начались продажи инновационного корма для собак Cosmodog',
date: '18/10/2023',
title: 'Начались продажи инновационного корма для собак Cosmodog',
logo: '/wp-content/uploads/2025/06/image-58.png',
logo_alt: 'Логотип СМИ 8'
},
{
url: 'https://orbsteppe.ru/katastrofa-vseh-splotila-kak-neravnodushnye-pomogali-postradavshim-ot-navodneniya-v-orenburzhe',
img: '/wp-content/uploads/2025/06/frame-239-1.png',
alt: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
date: '18/10/2023',
title: 'Как неравнодушные помогали пострадавшим от наводнения в Оренбуржье',
logo_alt: 'Логотип СМИ 9',
text: 'orbsteppe.ru'
}
] %}
<div class="swiper-slide">
<div class="smi-card-wrapper">
<a href="{{ slide.url }}" class="smi-card">
<img src="{{ slide.img }}" alt="{{ slide.alt }}" class="smi-card-img">
<div class="smi-card-date">{{ slide.date }}</div>
<div class="smi-card-title">{{ slide.title }}</div>
<div class="smi-card-label">
{% if slide.logo is defined %}
<img src="{{ slide.logo }}" alt="{{ slide.logo_alt }}">
{% endif %}
{% if slide.text is defined %}
<p>{{ slide.text }}</p>
{% endif %}
</div>
</a>
</div>
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev smiSlider-prev"></button>
<button class="slider-arrow slider-arrow-next smiSlider-next"></button>
</div>
</div>
</div>
</div>
</section>
{% endif %}
{% if post.meta('cosmopet_x_slider') %}
<div class="section_wrap">
<section class="cosmopet-x">
@ -798,55 +856,7 @@
</div>
</div>
</section>
{% if show_blog %}
<section class="blog">
<div class="container">
<div class="blog_block">
<div class="blog_top">
<h2 class="blog_title">{{ function('pll_e', 'Наш блог') }}</h2>
</div>
<div class="blog__row">
<p class="blog_text">{{ function('pll_e', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных') }}</p>
<a href="/blog/" class="blog_link main_link"><span>{{ function('pll_e', 'Все статьи') }}</span></a>
</div>
</div>
</div>
<div class="blog_slider">
<div class="swiper blogSlider">
<div class="swiper-wrapper">
{% for post in blog_posts %}
<div class="swiper-slide">
<a class="blog_card" href="{{ post.link }}">
<div class="blog__card-wrapper">
<img src="{{ post.thumbnail }}" alt="{{ post.title }}" class="blog_card-img">
</div>
<div class="blog_card-info-wrap">
<div class="blog_card-info">
<h2 class="blog_card-title">{{ post.title }}</h2>
<p class="blog_card-text">
{% set words = post.excerpt|split(' ') %}
{% if words|length > 14 %}
{{ words|slice(0, 14)|join(' ') }}...
{% else %}
{{ post.excerpt }}...
{% endif %}
</p>
<div class="blog__card-btn">{{ function('pll_e', 'читать статью') }}</div>
</div>
<img src="{{ theme.link }}/static/img/card-line.svg" alt="" class="card-line-img">
</div>
</a>
</div>
{% endfor %}
</div>
<div class="slider-arrows">
<button class="slider-arrow slider-arrow-prev blogSlider-prev"></button>
<button class="slider-arrow slider-arrow-next blogSlider-next"></button>
</div>
</div>
</div>
</section>
{% endif %}
</div>
{% endif %}

Write Preview
Loading…
Cancel
Save