-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (193 loc) · 12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cat Energy: Функциональное питание для котов</title>
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="./img/favicons/favicon.svg">
<!-- Визуализация разметки -->
<link rel="stylesheet" href="./css/style.min.css">
</head>
<body class="page__body">
<!-- INDEX - HEADER -->
<header class="page__header page-header">
<nav class="page-header__nav page-header__nav--index">
<div class="page-header__bar">
<a class="page-header__logo logo">
<picture>
<source media="(min-width: 1320px)" srcset="./img/logos/ico-cat-big.svg">
<source media="(min-width: 768px)" srcset="./img/logos/ico-cat-medium.svg">
<img class="logo__image" width="34" height="38" src="./img/logos/ico-cat-small.svg" alt="Cat Energy">
</picture>
<picture>
<source media="(min-width: 768px)" srcset="./img/logos/logo-name-tablet.svg">
<img class="logo__name logo__name--header" width="101" height="18" src="./img/logos/logo-name.svg" alt="" aria-hidden="true">
</picture>
</a>
<button class="page-header__toggler page-header__toggler--closed" type="button"><span class="visually-hidden">Открыть меню</span></button>
</div>
<ul class="page-header__menu site-menu site-menu--index site-menu--nojs">
<li class="site-menu__item"><a class="site-menu__link">Главная</a></li>
<li class="site-menu__item"><a class="site-menu__link" href="./catalog.html">Каталог продукции</a></li>
<li class="site-menu__item"><a class="site-menu__link" href="./form.html">Подбор программы</a></li>
</ul>
</nav>
</header>
<!-- INDEX - MAIN -->
<main class="page__main page-main">
<!-- Хедер в main с промо информацией -->
<header class="page-main__header promo">
<div class="promo__wrapper container">
<h1 class="promo__title page__title">Функциональное питание для котов</h1>
<p class="promo__lead page__lead">Занялся собой? Займись котом!</p>
<picture>
<!-- Секция контента в формате webp + адаптив -->
<source type="image/webp" media="(min-width: 1320px)" srcset="./img/index/index-promo-desktop.webp 1x, ./img/index/[email protected] 2x">
<source type="image/webp" media="(min-width: 768px)" srcset="./img/index/index-promo-tablet.webp 1x, ./img/index/[email protected] 2x">
<source type="image/webp" srcset="./img/index/index-promo-mobile.webp 1x, ./img/index/[email protected] 2x">
<!-- Секция контента в нативном формате + адаптив-->
<source media="(min-width: 1320px)" srcset="./img/index/index-promo-desktop.png 1x, ./img/index/[email protected] 2x">
<source media="(min-width: 768px)" srcset="./img/index/index-promo-tablet.png 1x, ./img/index/[email protected] 2x">
<!-- Фолбек -->
<img class="promo__image" width="280" height="270" src="./img/index/index-promo-mobile.png" srcset="./img/index/[email protected] 2x" alt="Упаковка с куриным кормом">
</picture>
<a class="promo__button button" href="./form.html">Подобрать программу</a>
</div>
</header>
<!-- Секция каталогов питания -->
<section class="page-main__catalogues catalogues">
<div class="catalogues__wrapper container">
<h2 class="visually-hidden">Каталоги питания</h2>
<!-- Каталог: Похудение-->
<article class="catalogues__item catalogues__item--thin">
<h3 class="catalogues__title page__title">Похудение</h3>
<p class="catalogues__text">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
<a class="catalogues__link" href="#">Каталог slim</a>
</article>
<!-- Каталог: Набор массы-->
<article class="catalogues__item catalogues__item--fat">
<h3 class="catalogues__title page__title">Набор массы</h3>
<p class="catalogues__text">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
<a class="catalogues__link" href="#">Каталог pro</a>
</article>
</div>
</section>
<!-- Секция принципа работы -->
<section class="page-main__functional functional">
<div class="functional__wrapper container">
<h2 class="functional__title page__title">Как это работает</h2>
<ol class="functional__list">
<li class="functional__item functional__item--nutrient">Функциональное питание содержит только полезные питательные вещества.</li>
<li class="functional__item functional__item--powder">Выпускается в виде порошка, который нужно лишь залить кипятком и готово.</li>
<li class="functional__item functional__item--diet">Замените один-два приема обычной еды на наше функциональное питание.</li>
<li class="functional__item functional__item--result">Уже через месяц наслаждайтесь изменениями к лучшему вашего питомца!</li>
</ol>
</div>
</section>
<!-- Секция примеров -->
<section class="page-main__example example">
<div class="example__wrapper container">
<!-- Блок с информацией -->
<div class="example__info-inner">
<h2 class="example__title page__title">Живой пример</h2>
<p class="example__text">Борис сбросил 5 кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
<dl class="example__list ">
<div class="example__item">
<dt class="example__term">Cнижение веса</dt>
<dd class="example__desc">5 кг</dd>
</div>
<div class="example__item">
<dt class="example__term">Затрачено времени</dt>
<dd class="example__desc">60 дней</dd>
</div>
</dl>
<dl class="example__total">
<dt class="example__total--term">Затраты на питание:</dt>
<dd class="example__total--desc">15 000 руб.</dd>
</dl>
</div>
<!-- Слайдер - фото котов до и после -->
<div class="example__images-inner">
<!-- Рекламные фото -->
<div class="example__images">
<picture>
<source media="(min-width: 768px)" srcset="./img/index/cat-before-tablet.png 1x, ./img/index/[email protected] 2x">
<img class="example__image example__image--before" width="280" height="232" src="./img/index/cat-before-mobile.png" srcset="./img/index/[email protected]" alt="Толстый кот до питания кормом">
</picture>
<picture>
<source media="(min-width: 768px)" srcset="./img/index/cat-after-tablet.png 1x, ./img/index/[email protected] 2x">
<img class="example__image example__image--after example__image--active" width="280" height="232" src="./img/cat-after-mobile.png" srcset="./img/index/[email protected]" alt="Худой кот после питания кормом">
</picture>
</div>
<!-- Переключатели фотографий -->
<div class="example__switcher switcher switcher--after">
<button class="switcher__button switcher__button--before"><span class="switcher__button--inner">Было</span></button>
<input class="switcher__range" type="range" value="50">
<button class="switcher__button switcher__button--after"><span class="switcher__button--inner">Стало</span></button>
</div>
</div>
</div>
</section>
</main>
<!-- INDEX - FOOTER -->
<footer class="page__footer page-footer">
<!-- Раздел с адресами и картой -->
<article class="page-footer__contacts contacts">
<h2 class="visually-hidden">Контакты</h2>
<div class="contacts__inner-address container">
<address class="contacts__address">
<p class="contacts__title">Приглашаем к сотрудничеству дилеров!</p>
<p class="contacts__text"><span>ул. Большая Конюшенная, д. 19/8</span> <span>Санкт-Петербург</span></p>
</address>
</div>
<div class="contacts__inner-map">
<iframe class="contacts__map contacts__map--iframe" src="https://yandex.ru/maps/2/saint-petersburg/house/bolshaya_konyushennaya_ulitsa_19_8/Z0kYdQVjSUYAQFtjfXVyeXpgZQ==/?ll=30.323036%2C59.938631&z=16" width="320" height="362" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</article>
<!-- Внутрення обертка с отступами для группы ссылок -->
<div class="page-footer__inner container">
<!-- Логотип со ссылкой на главную-->
<a class="page-footer__logo logo" href="#">
<img class="logo__name logo__name--footer" width="128" height="24" src="./img/logos/logo-name.svg" alt="Cat Energy">
</a>
<!-- Список соцсетей -->
<ul class="page-footer__social social">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="#">
<span class="visually-hidden">ВКонтакте</span>
<svg width="23" height="13">
<use xlink:href="./img/icons/sprite.svg#vkontakte"></use>
</svg>
</a>
</li>
<li class="social__item">
<a class="social__link social__link--instagram" href="#">
<span class="visually-hidden">Инстаграм</span>
<svg width="16" height="16">
<use xlink:href="./img/icons/sprite.svg#instagram"></use>
</svg>
</a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="#">
<span class="visually-hidden">Фейсбук</span>
<svg width="23" height="20">
<use xlink:href="./img/icons/sprite.svg#facebook"></use>
</svg>
</a>
</li>
</ul>
<!-- Ссылка на академию -->
<a class="page-footer__academy academy" href="https://htmlacademy.org/">
<span class="visually-hidden">Разработано в</span> HTML Academy
<svg class="academy__logo" width="27" height="34" role="img" aria-hidden="true">
<use xlink:href="./img/icons/sprite.svg#html-academy"></use>
</svg>
</a>
</div>
</footer>
<script src="./js/siteMenu.min.js"></script>
<script src="./js/slider.min.js"></script>
</body>
</html>