Files
template-for-verstka/index.html
2025-01-28 16:07:21 +05:00

803 lines
50 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<!-- Home -->
<section class="home">
<div class="container">
<h1 class="home-title">БЛОГ</h1>
<p class="home-description">Мы пишем про то, что нас по‑настоящему цепляет: биотехнологии, науку, здоровье и то, как этот мир сделать лучше. Мы не боимся сложных тем и неудобных вопросов, ведь именно с них начинается будущее</p>
<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">
<a href="#" class="home-card__img">
<img src="./assets/img/home-card.png" alt="">
</a>
<div class="home-card__content">
<a href="#" class="home-card__content-title">Как выбрать когтеточку: обзор мастхевов для вашей кошки</a>
<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">
<a href="#" class="home-card__img">
<img src="./assets/img/home-card-2.png" alt="">
</a>
<div class="home-card__content">
<a href="#" class="home-card__content-title">Краткая история кормов: от хлебных корок до лечебных рационов</a>
<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">
<a href="#" class="home-card__img">
<img src="./assets/img/home-card-3.png" alt="">
</a>
<div class="home-card__content">
<a href="#" class="home-card__content-title">Пищевая аллергия у собак. Причины и пути решения</a>
<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 -->
<!-- Anons -->
<section class="anons">
<div class="container">
<div class="anons-theme">
<h3 class="anons-theme__title">Темы:</h3>
<ul>
<li>
<a href="#" class="active">ВСЕ</a>
</li>
<li>
<a href="#">ТРЕНДЫ</a>
</li>
<li>
<a href="#">БИОТЕХНОЛОГИИ</a>
</li>
<li>
<a href="#">ОБЗОРЫ</a>
</li>
<li>
<a href="#">ЗДОРОВЬЕ</a>
</li>
<li>
<a href="#">НАУКА</a>
</li>
<li>
<a href="#">ЭКОЛОГИЯ</a>
</li>
<li>
<a href="#">РАЗВИТИЕ</a>
</li>
<li>
<a href="#">ИСТОРИИ</a>
</li>
<li>
<a href="#">BSF</a>
</li>
<li>
<a href="#">ПСИХОЛОГИЯ</a>
</li>
</ul>
</div>
<div class="anons-best">
<h2 class="anons-best__title">САМЫЕ ЧИТАЕМЫЕ:</h2>
<ul class="anons-best__card-wrap">
<li class="anons-best__card">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-best-card-1.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Как рассчитать дневную порцию корма для кошки?</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-white.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-white.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-best-card-2.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Вечно голодная кошка: 8 способов решить проблему</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-white.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-white.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-best-card-3.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Корма для животных на основе энтобелка</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-white.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-white.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="anons-article">
<h2 class="anons-article__title">ВСЕ СТАТЬИ</h2>
<ul class="anons-article__card-wrap">
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">обзоры</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-1.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">E-protein: новый белок, изменивший правила игры</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Здоровье</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-2.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Как совершенствовалась формула Cosmodog</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Экология</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-3.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Как выбрать когтеточку: обзор мастхевов для кошки</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">BSF</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-4.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Вечно голодная кошка: 8 способов решить проблему</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Истории</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-5.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Вечно голодная кошка: 8 способов решить проблему</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="anons-best__card light">
<ul class="anons-best__card-alerts">
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="main-img">
<img src="./assets/img/anons-article-card-6.png" alt="">
</a>
<div class="anons-best__card-body">
<a href="#" class="anons-best__card-body__title">Вечно голодная кошка: 8 способов решить проблему</a>
<div class="anons-best__card-body__datas">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/heart-grey.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-grey.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="anons-article__more-link">
<a href="#">ПОКАЗАТЬ ЕЩЁ</a>
</div>
</div>
</section>
<!-- Anons end -->
<!-- Author -->
<section class="author">
<div class="container">
<div class="author-content">
<img src="./assets/img/star-1.png" alt="" class="author-content__star-1">
<img src="./assets/img/star-2.png" alt="" class="author-content__star-2">
<img src="./assets/img/author-card.png" alt="" class="author-content__img">
<img src="./assets/img/author-card-mb.png" alt="" class="author-content__img mb">
<h2 class="author-content__title">ПРЕДЛОЖИТЕ СТАТЬЮ <br>ИЛИ СТАНЬТЕ АВТОРОМ</h2>
<a href="#" class="author-content__link">НАПИШИТЕ НАМ</a>
</div>
</div>
</section>
<!-- Author end -->
<!-- Editorial -->
<section class="editorial">
<div class="container">
<div class="editorial-head">
<h2 class="editorial-head__title">COSMO тема редакции</h2>
<img src="./assets/img/editorial-head-icon.png" alt="" class="editorial-head__img">
<img src="./assets/img/editorial-head-star.png" alt="" class="editorial-head__star">
</div>
<ul class="editorial-card__wrap">
<li class="editorial-card">
<a href="#" class="main-img">
<img src="./assets/img/editorial-card.png" alt="">
</a>
<div class="editorial-card__content">
<ul class="editorial-card__content-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="editorial-card__content-title">Как рассчитать дневную порцию корма для кошки?</a>
<div class="editorial-card__content-data">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/header-red.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-green.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="editorial-card">
<a href="#" class="main-img">
<img src="./assets/img/editorial-card.png" alt="">
</a>
<div class="editorial-card__content">
<ul class="editorial-card__content-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="" class="editorial-card__content-title">Как рассчитать дневную порцию корма для кошки?</a>
<div class="editorial-card__content-data">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/header-red.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-green.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="editorial-card">
<a href="#" class="main-img">
<img src="./assets/img/editorial-card.png" alt="">
</a>
<div class="editorial-card__content">
<ul class="editorial-card__content-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="editorial-card__content-title">Как рассчитать дневную порцию корма для кошки?</a>
<div class="editorial-card__content-data">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/header-red.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-green.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
<li class="editorial-card">
<a href="#" class="main-img">
<img src="./assets/img/editorial-card.png" alt="">
</a>
<div class="editorial-card__content">
<ul class="editorial-card__content-alerts">
<li>
<a href="#">Обзоры</a>
</li>
<li>
<a href="#">Наука</a>
</li>
</ul>
<a href="#" class="editorial-card__content-title">Как рассчитать дневную порцию корма для кошки?</a>
<div class="editorial-card__content-data">
<p>21.10.24</p>
<p>время чтения: 5 минут</p>
<ul>
<li>
<img src="./assets/img/header-red.svg" alt="">
<span>22</span>
</li>
<li>
<img src="./assets/img/msg-green.svg" alt="">
<span>14</span>
</li>
<li class="logo">
<img src="./assets/img/user-logo.png" alt="">
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- Editorial 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>