You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
template-for-verstka/articles.html

962 lines
69 KiB

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO title</title>
<meta name="description" content="SEO Description">
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Базовые стили -->
<link rel="stylesheet" href="/assets/css/gp-style-normalize.css?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
<link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
<!-- Адаптив -->
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="/assets/css/gp-style-xl.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
<!-- Яндекс.Вебмастер + Google Search Console -->
<meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" />
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" />
<!-- /Яндекс.Вебмастер + Google Search Console -->
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (m, e, t, r, i, k, a) {
m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date();
for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(XXXXXX, "init", { // XXXXXX - счетчик
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
ecommerce: "dataLayer"
});
</script>
<noscript>
<div><img src="https://mc.yandex.ru/watch/85828806" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
<div class="wrapper">
<!-- Header -->
<header class="header">
<div class="container header-container">
<button class="header-bars">
<img src="./assets/img/bars.svg" alt="">
</button>
<a href="/" class="header-logo">
<img src="./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="./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="./assets/img/arrow-down.svg" alt="">
</div>
</div>
<a href="#">
<img src="./assets/img/user-icon.svg" alt="">
</a>
<a href="#">
<img src="./assets/img/basket-icon.svg" alt="">
</a>
</div>
</div>
</header>
<!-- Header end -->
<main>
<!-- Breadcrumb -->
<section class="breadcrumb">
<div class="container">
<a href="#">Главная</a> /
<a href="#">Блог</a> /
<a href="#">Статья</a>
</div>
</section>
<!-- Breadcrumb end -->
<!-- Article home -->
<!--
use classes position-1, position-2
<div class="article-home position-1 position-2"></div>
-->
<section class="article-home">
<div class="container">
<h1>Сколько корма нужно именно вашей <br>собаке?</h1>
<div class="article-home__data">
<ul class="article-home__data-alerts">
<li>
<a href="#">Хештег 1</a>
</li>
<li>
<a href="#">Хештег 2</a>
</li>
</ul>
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<p>
<img src="./assets/img/heart-white.svg" alt="">
<span>22</span>
</p>
<p>
<img src="./assets/img/msg-white.svg" alt="">
<span>5</span>
</p>
<div class="user">
<img src="./assets/img/user-logo.png" alt="">
<span>Ольга М.</span>
</div>
</div>
<div class="article-home__card">
<img src="./assets/img/article-home-card.png" alt="">
</div>
</div>
</section>
<!-- Article home end -->
<!-- Article content -->
<div class="article-content">
<div class="article-container">
<!-- Discount -->
<section class="discount">
<h2 class="discount-title">Узнайте о нас больше и получите <span>скидку!</span></h2>
<img src="./assets/img/discount-bg.png" alt="" class="discount-bg">
<img src="./assets/img/discount-bg-sm.png" alt="" class="discount-bg mb">
<form action="" class="discount-form">
<input type="email" placeholder="почта">
<img src="./assets/img/long-arrow.svg" alt="">
<button type="submit">подписаться</button>
</form>
<div class="discount-descriptions">
<p class="discount-description__1">Подписываясь на рассылка, я даю согласие на обработку персональных данных, на получение рекламных сообщений и новостей о товарах и услугах</p>
<p class="discount-description__2">Подпишитесь, чтобы быть в курсе деятельности Cosmopet и узнавать о наших предложениях. Обещаем не заваливать вас бесполезными письмами. А за подписку дарим -25% на весь ассортимент нашей продукции</p>
</div>
</section>
<!-- Discount end -->
<!-- Diet -->
<section class="diet">
<p>Удобный инструмент - калькулятор, который поможет вам определить дневную дозировку корма непосредственно для вашего котика и пёсика.</p>
<a href="#">Калькулятор рациона</a>
</section>
<!-- Diet end -->
<!-- Texts -->
<section class="texts">
<h2>ЗАГОЛОВОК 2</h2>
<h3>ЗАГОЛОВОК 3</h3>
<div class="texts-description">
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
<p>
<b>Текст Body large Текст Body large</b> Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
<p>
Текст Body large Текст Body large Текст <a href="#">Body large Текст Body large</a> Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
</div>
<ol>
<li>
<h4>1</h4>
<p>Нумерованный список</p>
</li>
<li>
<h4>2</h4>
<p>Нумерованный список</p>
</li>
<li>
<h4>3</h4>
<p>Нумерованный список</p>
</li>
<li>
<h4>4</h4>
<p>Нумерованный список</p>
</li>
<li>
<h4>5</h4>
<p>Нумерованный список</p>
</li>
</ol>
<ul>
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
<li>Маркированный список</li>
</ul>
<div class="texts-swp">
<button class="texts-swp__prev">
<img src="./assets/img/swp-prev.svg" alt="">
</button>
<button class="texts-swp__next">
<img src="./assets/img/swp-next.svg" alt="">
</button>
<div class="texts-swp__pagination"></div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./assets/img/texts-card-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/img/texts-card-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="./assets/img/texts-card-3.png" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- Texts end -->
<!-- Alerts -->
<section class="alerts">
<div class="alerts-grey">
<img src="./assets/img/icon-1.svg" alt="" class="icon-1">
<p>Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.</p>
<img src="./assets/img/icon-2.svg" alt="" class="icon-2">
</div>
<div class="alerts-violet">
<img src="./assets/img/icon-3.svg" alt="" class="icon-1">
<p>Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.</p>
</div>
<div class="alerts-yellow">
<img src="./assets/img/icon-4.svg" alt="" class="icon-1">
<p>Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.</p>
</div>
<div class="alerts-green">
<img src="./assets/img/icon-5.svg" alt="" class="icon-1">
<p>Значимость этих проблем настолько очевидна, что рамки и место обучения кадров позволяет выполнять важные задания по разработке соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров требуют определения и уточнения соответствующий условий активизации. Разнообразный и богатый опыт укрепление и развитие структуры влечет за собой процесс внедрения и модернизации форм развития.</p>
</div>
</section>
<!-- Alerts end -->
<!-- Article table -->
<section class="article-table__wrap">
<div class="article-table">
<div class="article-table__item">
<ul>
<li>Масса собаки, кг</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
</ul>
<ul>
<li>ПЕ в день, ккал</li>
<li>118</li>
<li>118</li>
<li>118</li>
<li>118</li>
</ul>
</div>
<div class="article-table__item">
<ul>
<li>Масса собаки, кг</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
</ul>
<ul>
<li>ПЕ в день, ккал</li>
<li>118</li>
<li>118</li>
<li>118</li>
<li>118</li>
</ul>
</div>
<div class="article-table__item">
<ul>
<li>Масса собаки, кг</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
<li>0,8</li>
</ul>
<ul>
<li>ПЕ в день, ккал</li>
<li>118</li>
<li>118</li>
<li>118</li>
<li>118</li>
</ul>
</div>
</div>
</section>
<!-- Article table end -->
<!-- Article block -->
<section class="article-block">
<div class="article-block__head">
<div class="article-block__head-left">
<h3>ЗАГОЛОВОК 3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</div>
<div class="article-block__head-right">
<img src="./assets/img/article-block-card-1.png" alt="">
</div>
</div>
<div class="article-block__item-wrap">
<div class="article-block__item">
<div class="article-block__item-content">
<h3>ЗАГОЛОВОК H3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
<ul>
<li>
<img src="./assets/img/plus-icon.svg" alt="">
<p>Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small</p>
</li>
<li>
<img src="./assets/img/minus-icon.svg" alt="">
<p>Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small</p>
</li>
</ul>
</div>
<div class="article-block__item-img">
<img src="./assets/img/article-block-card-2.png" alt="">
</div>
</div>
<div class="article-block__item">
<div class="article-block__item-img">
<img src="./assets/img/article-block-card-3.png" alt="">
</div>
<div class="article-block__item-content">
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
<ul>
<li>
<img src="./assets/img/plus-icon.svg" alt="">
<p>Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small</p>
</li>
<li>
<img src="./assets/img/minus-icon.svg" alt="">
<p>Текст Body Small Текст Body Small Текст Body Small Текст Body Small Текст Body Small</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Article block end -->
<!-- Block Accent -->
<section class="block-accent">
<div class="block-accent__card card-violet">
<img src="./assets/img/block-accent-icon-1.svg" alt="">
<div class="block-accent__card-content">
<h3>ЗАГОЛОВОК H3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</div>
</div>
<div class="block-accent__card card-orange">
<img src="./assets/img/block-accent-icon-2.svg" alt="">
<p>Кстати: экологически чистые картонные когтеточки можно получить в подарок при покупке корма для кошек Cosmocat в упаковках 2 кг.</p>
</div>
<div class="block-accent__card card-blue">
<img src="./assets/img/block-accent-icon-3.svg" alt="">
<div class="block-accent__card-content">
<h3>Взрослая кошка (1-7 лет)</h3>
<p>Как правило, в этом возрасте питомцу нужно просто поддерживать вес – исходя из уровня его активности и особых указаний ветеринара (если они будут).</p>
</div>
</div>
</section>
<!-- Block Accent end -->
<!-- Indent -->
<section class="indent">
<h2 class="indent-title">ЗАГОЛОВОК H2 ЗАГОЛОВОК H2 ЗАГОЛОВОК H2 </h2>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
<ul>
<li>
<img src="./assets/img/indent-icon-1.svg" alt="">
<div>
<h3>ЗАГОЛОВОК H3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</div>
</li>
<li>
<img src="./assets/img/indent-icon-1.svg" alt="">
<div>
<h3>ЗАГОЛОВОК H3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</div>
</li>
<li>
<img src="./assets/img/indent-icon-1.svg" alt="">
<div>
<h3>ЗАГОЛОВОК H3</h3>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</div>
</li>
</ul>
<p>Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large </p>
</section>
<!-- Indent end -->
<!-- Product card -->
<section class="product-card">
<img src="./assets/img/product-card.png" alt="">
</section>
<!-- Product card end -->
<!-- Alohida -->
<section class="block-lists">
<div class="block-list_block">
<img src="./assets/img/block-list-icon-1.svg" alt="">
<div class="block-lists_text">
<h3>
ЗАГОЛОВОК H3
</h3>
<p>
Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
</div>
</div>
<div class="block-list_block">
<img src="./assets/img/block-list-icon-2.svg" alt="">
<div class="block-lists_text">
<p>
Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
</div>
</div>
<div class="block-list_block">
<img src="./assets/img/block-list-icon-3.svg" alt="">
<div class="block-lists_text">
<p>
Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
</div>
</div>
<div class="block-list_block">
<img src="./assets/img/block-list-icon-4.svg" alt="">
<div class="block-lists_text">
<p>
Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large Текст Body large
</p>
</div>
</div>
</section>
<section class="video_block">
<iframe width="339" height="602" src="https://www.youtube.com/embed/3zrGER3nNiw" title="Котята проголодались, мяукают и хотят кушать | Котенок Арнольд ворует еду" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</section>
<section class="comment">
<div class="comment-btn">
<button>
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7859 4.66406C14.7135 4.66406 13.3546 6.89752 13.0591 8.01424C12.8425 6.89752 11.5348 4.66406 8.03702 4.66406C3.66481 4.66406 1.71504 10.267 5.55549 15.0612C8.62786 18.8966 11.8381 20.3945 13.0591 20.6641C14.4181 20.4138 17.8686 18.8619 20.7991 14.6568C24.4623 9.40052 21.6263 4.66406 17.7859 4.66406Z" fill="#121212"/>
</svg>
Нравится
</button>
<span>
22
</span>
</div>
<div class="comment-in">
<h3 class="comment-title">
КОММЕНТАРИИ (5)
</h3>
<div class="comment-block">
<p class="comment-block_text">
<a href="#">Войдите</a>, чтобы оставлять комментарии
</p>
</div>
<div class="comment-block_wrapper">
<div class="comment-block">
<div class="comment-user">
<img src="./assets/img/user_img.png" alt="">
<div class="comment-user_text">
<h6>
Ольга М.
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
Лучший обзор на когтеточки!
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<button class="answer-btn">
<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1.41406L7.5 7.91406L1 1.41406" stroke="#76CE75" stroke-width="2"/>
</svg>
1 <span>
ответ
</span>
</button>
</div>
<div class="comment-block answer-block active">
<div class="comment-user">
<img src="./assets/img/user_img2.png" alt="">
<div class="comment-user_text">
<h6>
Дед
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
Помню в 1937 году когтеточки были лучше
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<div class="comment-block">
<div class="comment-user">
<img src="./assets/img/user_img3.png" alt="">
<div class="comment-user_text">
<h6>
Чжон Д.
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
关于挠痒柱的最佳评论
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<div class="comment-block_wrapper">
<div class="comment-block">
<div class="comment-user">
<img src="./assets/img/user_img4.png" alt="">
<div class="comment-user_text">
<h6>
Пётр Ш.
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
А расскажите как самому сделать когтеточки?
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<button class="answer-btn">
<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1.41406L7.5 7.91406L1 1.41406" stroke="#76CE75" stroke-width="2"/>
</svg>
1
<span>
ответ
</span>
</button>
</div>
<div class="comment-block answer-block">
<div class="comment-user">
<img src="./assets/img/user_img2.png" alt="">
<div class="comment-user_text">
<h6>
Дед
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
Помню в 1937 году когтеточки были лучше
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<div class="comment-block_wrapper">
<div class="comment-block">
<div class="comment-user">
<img src="./assets/img/user_img5.png" alt="">
<div class="comment-user_text">
<h6>
Ира О.
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
Классный обзор когтеточек!
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
<button class="answer-btn">
<svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1.41406L7.5 7.91406L1 1.41406" stroke="#76CE75" stroke-width="2"/>
</svg>
1
<span>
ответ
</span>
</button>
</div>
<div class="comment-block answer-block">
<div class="comment-user">
<img src="./assets/img/user_img2.png" alt="">
<div class="comment-user_text">
<h6>
Дед
</h6>
<span>
15 января 2025
</span>
</div>
</div>
<p>
Помню в 1937 году когтеточки были лучше
</p>
<div class="comment-btns">
<button>
<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 3H3.25C2.00736 3 1 4.00736 1 5.25V5.25C1 6.49264 2.00736 7.5 3.25 7.5H3.5" stroke="#666666"/>
<path d="M7 0.5L9.5 3L7 5.5" stroke="#666666"/>
</svg>
Ответить
</button>
<button>
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7745 1C8.67239 1 7.7426 2.5355 7.54047 3.30325C7.39224 2.5355 6.49748 1 4.10427 1C1.11276 1 -0.221288 4.85199 2.40639 8.14801C4.50853 10.7848 6.705 11.8147 7.54047 12C8.47026 11.8279 10.8311 10.761 12.8363 7.87004C15.3427 4.25632 13.4022 1 10.7745 1Z" stroke="#666666"/>
</svg>
2
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Article content end -->
<!-- Home -->
<section class="home other-home">
<div class="container">
<div class="home-swp">
<div class="home-swp__btn">
<button class="home-swp__btn-prev">
<img src="./assets/img/swp-prev.svg" alt="">
</button>
<button class="home-swp__btn-next">
<img src="./assets/img/swp-next.svg" alt="">
</button>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="home-card bg-yellow">
<div class="home-card__img">
<img src="./assets/img/home-card.png" alt="">
</div>
<div class="home-card__content">
<h3 class="home-card__content-title">Как выбрать когтеточку: обзор мастхевов для вашей кошки</h3>
<p class="home-card__content-description">Простая с виду задача «купить когтеточку» может оказаться утомительным и дорогим занятием. Типичная ситуация: вы приобрели сразу несколько вариантов ...</p>
<div class="home-card__content-body">
<ul class="home-card__content-body__alerts">
<li>Обзоры</li>
<li>Тренды</li>
</ul>
<div class="home-card__content-body__day">21.10.24</div>
<div class="home-card__content-body__time">время чтения: 5 минут</div>
<div class="home-card__content-body__data">
<div>
<img src="./assets/img/heart.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/msg.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/user-logo.png" alt="" class="main-img">
</div>
</div>
<a href="#" class="home-card__content-body__link">читать статью</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-card bg-green">
<div class="home-card__img">
<img src="./assets/img/home-card-2.png" alt="">
</div>
<div class="home-card__content">
<h3 class="home-card__content-title">Краткая история кормов: от хлебных корок до лечебных рационов</h3>
<p class="home-card__content-description">Современный мир сложно представить без готовых кормов для собак и кошек. И сложно поверить, что это относительно современная концепция, существующая менее 150 лет. Поэтапно о том ...</p>
<div class="home-card__content-body">
<ul class="home-card__content-body__alerts">
<li>Обзоры</li>
<li>Тренды</li>
</ul>
<div class="home-card__content-body__day">21.10.24</div>
<div class="home-card__content-body__time">время чтения: 5 минут</div>
<div class="home-card__content-body__data">
<div>
<img src="./assets/img/heart.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/msg.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/user-logo.png" alt="" class="main-img">
</div>
</div>
<a href="#" class="home-card__content-body__link">читать статью</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="home-card bg-violet">
<div class="home-card__img">
<img src="./assets/img/home-card-3.png" alt="">
</div>
<div class="home-card__content">
<h3 class="home-card__content-title">Пищевая аллергия у собак. Причины и пути решения</h3>
<p class="home-card__content-description">Даже привычный рацион может вызвать у питомца нежелательную реакцию – зуд, расстройства ЖКТ, изменения в поведении. Хорошая новость: с этой проблемой можно справиться. Рассказываем, как ...</p>
<div class="home-card__content-body">
<ul class="home-card__content-body__alerts">
<li>Обзоры</li>
<li>Тренды</li>
</ul>
<div class="home-card__content-body__day">21.10.24</div>
<div class="home-card__content-body__time">время чтения: 5 минут</div>
<div class="home-card__content-body__data">
<div>
<img src="./assets/img/heart.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/msg.svg" alt="">
<span>22</span>
</div>
<div>
<img src="./assets/img/user-logo.png" alt="" class="main-img">
</div>
</div>
<a href="#" class="home-card__content-body__link">читать статью</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Home end -->
</main>
<!-- 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="./assets/img/logo-green.svg" alt="">
<span>сosmopet</span>
</a>
<p class="footer-content__address">
123182 г. Москва, <br>
4-й Красногорский пр., <br>
д. 2/4, стр. 1, этаж/ком. 3/1
</p>
<ul>
<li>
<p>Отзывы и предложения</p>
<a href="mailto:pro@cosmopet.shop" target="_blank">pro@cosmopet.shop</a>
</li>
<li>
<p>Заявки для оптовых покупателей</p>
<a href="mailto:pro@cosmopet.shop" target="_blank">pro@cosmopet.shop</a>
</li>
<li>
<p>Связь с ветеринаром</p>
<a href="mailto:vetvopros@cosmopet.shop" target="_blank">vetvopros@cosmopet.shop</a>
</li>
</ul>
</div>
<div class="footer-top__link">
<a href="#" class="link-black">Чат бот с ветеринаром</a>
<a href="#" class="link-white">Калькулятор рациона</a>
</div>
</div>
<form class="footer-contact">
<h3 class="footer-contact__title">Форма обратной связи</h3>
<input type="text" placeholder="Ваше имя" class="form-inp">
<input type="email" placeholder="Эл.почта" class="form-inp">
<textarea class="form-textarea" name="" placeholder="Текст обращения" id=""></textarea>
<button class="footer-contact__submit" type="submit">Отправить</button>
</form>
</div>
<div class="footer-bottom">
<ul class="footer-network">
<li>
<a href="#">
<img src="./assets/img/footer-network-1.svg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./assets/img/footer-network-2.svg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./assets/img/footer-network-3.svg" alt="">
</a>
</li>
</ul>
<a href="#">Соглашение о конфиденциальности</a>
<a href="#">Декларация соответствия корма</a>
<a href="#">Декларация соответствия лакомств</a>
</div>
</div>
</footer>
<!-- Footer end -->
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>