author pages are ready

README.md

@@ -2,7 +2,35 @@
 
 ### **С точки зрения веб-разработки:**
 * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
-* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
+* соблюдаем Scope-ориентированный подход:
+    - каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим CSS-селектор для дочерних элементов, что ограничивает область ваших стилей только внутри секции/экрана, не влияя на другие части сайта.
+    
+    - пример:  <br>
+    
+    HTML:
+    ```
+    <section class="my-namespace">
+        <h1>Новый заголовок</h1>
+        <button class="my-button">Кнопка</button>
+    </section>
+    ```
+
+    CSS:
+
+    ```
+    .my-namespace h1 {
+        font-size: 24px;
+        color: #333;
+    }
+
+    .my-namespace .my-button {
+        background-color: #007BFF;
+        color: #fff;
+    }
+    ```
+
+
+* чтобы дополнительно структурировать CSS при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
     `block-name__elem-name--mod-name--mod-val`
     + имена записываются латиницей в нижнем регистре
     + для разделения слов в именах БЭМ-сущностей используется дефис (-)
@@ -12,8 +40,9 @@
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
 * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
 * **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки. 
-* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы   
+* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
-
+* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил.
+* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*)
 
 ### **С точки зрения SEO:**
 * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.

assets/css/gp-style-desktop.css

@@ -376,4 +376,168 @@
     background: var(--main_white);
     color: var(--main_black);
 }
-/* Sell form end */
+/* Sell form end */
+
+/* Breadcrumb */
+.breadcrumb {
+    padding: 108px 0 24px;
+}
+
+.breadcrumb .container {
+    color: var(--main_white);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 16px;
+}
+
+.breadcrumb a {
+    display: inline;
+}
+/* Breadcrumb end */
+
+/* Authors */
+.authors {
+    padding-bottom: 120px;
+}
+
+.authors h2 {
+    font-weight: bold;
+    font-size: 64px;
+    line-height: 120%;
+    color: white;
+    text-transform: uppercase;
+    margin-bottom: 36px;
+}
+
+.authors ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    gap: 24px;
+}
+
+.authors li {
+    background: #F5F5F5;
+    border-radius: 48px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: calc(100% / 3 - 16px);
+}
+
+.authors a {
+    padding: 52px 17px 57px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.authors .main-img {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    margin-bottom: 31px;
+}
+
+.authors .main-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.authors-name {
+    font-size: 24px;
+    font-weight: bold;
+    text-transform: uppercase;
+    line-height: 28px;
+    color: #121212;
+    margin-bottom: 5px;
+}
+
+.authors-type {
+    color: #121212;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
+    margin-bottom: 31px;
+}
+
+.authors p {
+    color: #666666;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+}
+/* Authors end */
+
+/* Author */
+.author {
+    padding-bottom: 36px;
+}
+
+.author-content {
+    display: flex;
+    align-items: center;
+    gap: 31px;
+    margin-bottom: 17.5px;
+}
+
+.author .main-img {
+    width: 278px;
+    height: 278px;
+    flex-shrink: 0;
+    border-radius: 48px;
+    overflow: hidden;
+}
+
+.author .main-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.author-name {
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 28px;
+    color: white;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+}
+
+.author-type {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
+    color: white;
+    margin-bottom: 5px;
+}
+
+.author-description {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 32px;
+    color: white;
+    margin-bottom: 45px;
+}
+
+.author p {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    color: white;
+}
+
+.author h2 {
+    font-size: 64px;
+    font-weight: bold;
+    line-height: 120%;
+    color: white;
+}
+/* Author end */

assets/css/gp-style-mobile.css

@@ -130,4 +130,83 @@
         align-items: flex-start;
         gap: 17px;
     }
+
+    .authors {
+        padding-bottom: 138px;
+    }
+
+    .authors h2 {
+        font-size: 32px;
+        line-height: 38px;
+        margin-bottom: 15px;
+    }
+
+    .authors li {
+        border-radius: 24px;
+        width: 100%;
+    }
+    
+    .authors a {
+        padding: 32px 17px 52px;
+    }
+
+    .authors .main-img {
+        width: 180px;
+        height: 180px;
+        margin-bottom: 20px;
+    }
+
+    .authors-name {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .authors-type {
+        font-size: 18px;
+        line-height: 24px;
+        margin-bottom: 20px;
+    }
+
+    .authors p {
+        font-size: 16px;
+        line-height: 20px;
+    }
+
+    .author {
+        padding-bottom: 15px;
+    }
+
+    .author-content {
+        margin-bottom: 23px;
+    }
+
+    .author .main-img {
+        width: 100%;
+    }
+
+    .author h2 {
+        font-size: 32px;
+        line-height: 38px;
+    }
+
+    .author-name {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .author-type {
+        font-size: 18px;
+        line-height: 24px;
+    }
+
+    .author-description {
+        font-size: 18px;
+        line-height: 24px;
+        margin-bottom: 24px;
+    }
+
+    .author p {
+        font-size: 16px;
+        line-height: 20px;
+    }
 }

assets/css/gp-style-tablet.css

@@ -122,4 +122,31 @@
         height: 120px;
     }
     /* Sell form end */
+
+    .authors h2 {
+        font-size: 48px;
+        margin-bottom: 24px;
+    }
+
+    .authors li {
+        border-radius: 32px;
+        width: calc(50% - 12px);
+    }
+
+    .authors .main-img {
+        margin-bottom: 24px;
+    }
+
+    .author {
+        padding-bottom: 24px;
+    }
+
+    .author h2 {
+        font-size: 48px;
+    }
+
+    .author-content {
+        flex-direction: column;
+        align-items: flex-start;
+    }
 }

author.html

@@ -0,0 +1,215 @@
+<!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 -->
+
+                <!-- Authors block -->
+                <section class="author">
+                    <div class="container">
+                        <div class="author-content">
+                            <div class="main-img">
+                                <img src="./assets/img/author-main-card.png" alt="">
+                            </div>
+                            <div>
+                                <div class="author-name">АвТОР АВТОР 1</div>
+                                <div class="author-type">главный редактор</div>
+                                <div class="author-description">Эксперт компании Cosmopet</div>
+                                <p>статей: 10</p>
+                            </div>
+                        </div>
+                        <h2>ЗАГОЛОВОК 1 </h2>
+                    </div>
+                </section>
+                <!-- Authors block 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>

authors.html

@@ -0,0 +1,256 @@
+<!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 -->
+
+                <!-- Authors block -->
+                <section class="authors">
+                    <div class="container">
+                        <h2>Все авторы</h2>
+                        <ul>
+                            <li>
+                                <a href="./author.html">
+                                    <div class="main-img">
+                                        <img src="./assets/img/author-1.png" alt="">
+                                    </div>
+                                    <div class="authors-name">АвТОР АВТОР 1</div>
+                                    <div class="authors-type">главный редактор</div>
+                                    <p>статей: 10</p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="./author.html">
+                                    <div class="main-img">
+                                        <img src="./assets/img/author-2.png" alt="">
+                                    </div>
+                                    <div class="authors-name">АвТОР АВТОР 2</div>
+                                    <div class="authors-type">редактор</div>
+                                    <p>статей: 3</p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="./author.html">
+                                    <div class="main-img">
+                                        <img src="./assets/img/author-3.png" alt="">
+                                    </div>
+                                    <div class="authors-name">АвТОР АВТОР 3</div>
+                                    <div class="authors-type">технолог</div>
+                                    <p>статей: 2</p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="./author.html">
+                                    <div class="main-img">
+                                        <img src="./assets/img/author-4.png" alt="">
+                                    </div>
+                                    <div class="authors-name">АвТОР АВТОР 4</div>
+                                    <div class="authors-type">охранник</div>
+                                    <p>статей: 100</p>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="./author.html">
+                                    <div class="main-img">
+                                        <img src="./assets/img/author-5.png" alt="">
+                                    </div>
+                                    <div class="authors-name">АвТОР АВТОР 5</div>
+                                    <div class="authors-type">вольный хлебопашец</div>
+                                    <p>статей: 2</p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </section>
+                <!-- Authors block 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>

index.html

@@ -8,16 +8,14 @@
         <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/normalize.min.css">
-
+        <link rel="stylesheet" href="/assets/css/reset.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">
     
@@ -54,193 +52,21 @@
     </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>
-
-                <!-- Where home -->
-                <section class="where-home">
-                    <div class="container">
-                        <h1>Where to Buy</h1>
-                        <p>Looking for Cosmopet products in stores? You can find our premium pet treats in select pet shops and retail stores across the UAE.</p>
-                    </div>
-                </section>
-                <!-- Where home end -->
-
-                <!-- Find us -->
-                <section class="find-us">
-                    <div class="container">
-                        <h2>📍 Find us at:</h2>
-                        <ul>
-                            <li>
-                                <h3>Roots Supermarket</h3>
-                                <p>Waves Grande, Retail unit 1-2 Shobha Hartland, Dubai DU United Arab Emirates</p>
-                            </li>
-                            <li>
-                                <h3>Pawdy Neighbors</h3>
-                                <p>Souk Al Manzil - Old Town Downtown, Dubai, United Arab Emirates</p>
-                            </li>
-                            <li>
-                                <h3>The Pet Co</h3>
-                                <p>Tower A, Shop 01, Prime Business Centre, JVC, Dubai, UAE</p>
-                            </li>
-                            <li>
-                                <h3>Ivy Secret Garden</h3>
-                                <p>Al Wasl Warehouse Complex, Unit 14 - 26th St <br>- Al Quoz Industrial Area 4 - Dubai</p>
-                            </li>
-                        </ul>
-                    </div>
-                </section>
-                <!-- Find us end -->
-
-                <!-- Location -->
-                <section class="location">
-                    <div class="container">
-                        <h2>✨ More locations coming soon!</h2>
-                        <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A10fa33c2e75b13012cd46cf715023f789e20c75b0805e24c3264f65ada592d40&amp;source=constructor" width="1280" height="720" frameborder="0"></iframe>
-                    </div>
-                </section>
-                <!-- Location end -->
-
-                <!-- Sell form -->
-                <section class="sell-form">
-                    <div class="container sell-form__container">
-                        <h2>Want to sell Cosmopet in your store?</h2>
-                        <p>Join our growing network of retailers! Fill out the contact form below, and we’ll get in touch to discuss the details.</p>
-                        <form action="">
-                            <input type="text" placeholder="Your Name" class="form-inp">
-                            <input type="tel" name="" placeholder="Your Phone" class="form-inp" id="">
-                            <input type="email" name="" placeholder="E-mail" class="form-inp" id="">
-                            <textarea name="" placeholder="Message" class="form-textarea" id=""></textarea>
-                            <button type="submit">SUBMIT</button>
-                        </form>
-                    </div>
-                </section>
-                <!-- Sell form 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>
+        <!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
+        <form class="form" method="post" action="/send-telegram.php">
+            <div class="form__item">
+                <input class="form__input" type="text" name="name" required>
+                <label class="form__label">Ваше имя</label>
+            </div>
+            <div class="form__item">
+                <input class="form__input" type="text" name="phone" required>
+                <label class="form__label">Номер телефона</label>
+            </div>
+            <input class="form__input btn" type="submit" value="Отправить">
+        </form>
 
-        <!-- Swiper JS -->
+
-        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+        <script src="/assets/js/gp-main.js"></script>
-        <script src="./assets/js/main.js"></script>
     </body>
 </html>