Compare commits
1 Commits
cosmopet-a
...
cosmopet-w
| Author | SHA1 | Date | |
|---|---|---|---|
|
2d5dcc7da8 |
35
README.md
35
README.md
@@ -2,35 +2,7 @@
|
|||||||
|
|
||||||
### **С точки зрения веб-разработки:**
|
### **С точки зрения веб-разработки:**
|
||||||
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
|
* верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
|
||||||
* соблюдаем Scope-ориентированный подход:
|
* при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
|
||||||
- каждую секцию/экран именуем **уникальным** классом-родителем, от которого строим 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`
|
`block-name__elem-name--mod-name--mod-val`
|
||||||
+ имена записываются латиницей в нижнем регистре
|
+ имена записываются латиницей в нижнем регистре
|
||||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
||||||
@@ -40,9 +12,8 @@
|
|||||||
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
* из конечного HTML-файла убрать все комментарии, если такие имеются
|
||||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
||||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки.
|
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки.
|
||||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
|
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы
|
||||||
* подключаем вначале normalize.min.css и reset.min.css, чтобы сбросить глобальные стили и устранить влияние наследуемых правил.
|
|
||||||
* шрифты и глобальные переменные выносим в отдельный файл (у нас это *gp-style-core.css*)
|
|
||||||
|
|
||||||
### **С точки зрения SEO:**
|
### **С точки зрения SEO:**
|
||||||
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
|
* все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
|
||||||
|
|||||||
@@ -376,168 +376,4 @@
|
|||||||
background: var(--main_white);
|
background: var(--main_white);
|
||||||
color: var(--main_black);
|
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 */
|
|
||||||
@@ -130,83 +130,4 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 17px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -122,31 +122,4 @@
|
|||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
/* Sell form end */
|
/* 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 429 KiB |
215
author.html
215
author.html
@@ -1,215 +0,0 @@
|
|||||||
<!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>
|
|
||||||
256
authors.html
256
authors.html
@@ -1,256 +0,0 @@
|
|||||||
<!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>
|
|
||||||
208
index.html
208
index.html
@@ -8,14 +8,16 @@
|
|||||||
<meta name="description" content="SEO Description">
|
<meta name="description" content="SEO Description">
|
||||||
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
|
<link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
|
||||||
|
|
||||||
<!-- Сбрасываем глобальные стили -->
|
<!-- Link Swiper's CSS -->
|
||||||
<link rel="stylesheet" href="/assets/css/normalize.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.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-core.css?v=1.0">
|
||||||
<link rel="stylesheet" href="/assets/css/gp-style-desktop.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 (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: 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">
|
<link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
|
||||||
|
|
||||||
@@ -52,21 +54,193 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<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&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 -->
|
||||||
|
|
||||||
<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
|
</div>
|
||||||
<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="/assets/js/gp-main.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||||
|
<script src="./assets/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user