Compare commits
2 Commits
cosmopet-w
...
942c9a0896
| Author | SHA1 | Date | |
|---|---|---|---|
|
942c9a0896 | ||
|
|
6f1ca3924c |
33
README.md
33
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`
|
||||
+ имена записываются латиницей в нижнем регистре
|
||||
+ для разделения слов в именах БЭМ-сущностей используется дефис (-)
|
||||
@@ -13,7 +41,8 @@
|
||||
* все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
|
||||
* **частая ошибка:** верстальщик берет изображения/видео из макета и не задает им адаптивную ширину/высоту, и на моменте сдачи верстки не заметно косяков, а вот когда мы переходим к натяжке и медиаматериалы начинают выводиться в шаблон динамически и уже разных форматов (ШИРИНАxВЫСОТА), тогда верстка начинает плыть. Чтоб такое избежать проверяйте на как себя ведет элемент при замене слишком большой/маленькой картинки.
|
||||
* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на 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.
|
||||
|
||||
@@ -377,3 +377,167 @@
|
||||
color: var(--main_black);
|
||||
}
|
||||
/* 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,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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
assets/img/author-1.png
Normal file
BIN
assets/img/author-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
assets/img/author-2.png
Normal file
BIN
assets/img/author-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
assets/img/author-3.png
Normal file
BIN
assets/img/author-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
assets/img/author-4.png
Normal file
BIN
assets/img/author-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
assets/img/author-5.png
Normal file
BIN
assets/img/author-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
assets/img/author-main-card.png
Normal file
BIN
assets/img/author-main-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
215
author.html
Normal file
215
author.html
Normal file
@@ -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>
|
||||
256
authors.html
Normal file
256
authors.html
Normal file
@@ -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>
|
||||
200
index.html
200
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="">
|
||||
<!-- Пример формы для отправки в Телеграмм (обработчик 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>
|
||||
</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 class="form__item">
|
||||
<input class="form__input" type="text" name="phone" required>
|
||||
<label class="form__label">Номер телефона</label>
|
||||
</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>
|
||||
<input class="form__input btn" type="submit" value="Отправить">
|
||||
</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>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
<script src="./assets/js/main.js"></script>
|
||||
<script src="/assets/js/gp-main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user