-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcatalog.html
259 lines (256 loc) · 15.6 KB
/
catalog.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic" rel="stylesheet">
<link href="css/normalize.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<title>Магазин Глэйси — это онлайн и офлайн магазин по продаже мороженого собственного производства на развес</title>
</head>
<body class="catalog-body">
<header class="main-header container">
<nav class="main-navigation">
<a href="index.html"><img src="img/Logo.svg" width="154" height="64" alt="Логотип магазина мороженого Глэйси"></a>
<ul class="site-navigation default">
<li class="active catalog-menu-item"><a href="#">Каталог</a>
<div class="catalog-menu">
<div class="new-items"><a href="#">Новинки</a></div>
<ul class="default">
<li class="on-page"><a>Сливочное</a></li>
<li><a href="#">Щербеты</a></li>
<li><a href="#">Фруктовый лед</a></li>
<li><a href="#">Мелорин</a></li>
</ul>
</div>
</li>
<li class="delivery"><a href="#">Доставка и оплата</a></li>
<li class="about "><a href="#">О Компании</a></li>
</ul>
</nav>
<h2 class="visually-hidden">Пользовательский раздел</h2>
<ul class="user-block default">
<li class="search-icon"><a href="#"><span class="visually-hidden">Поиск</span></a>
<div class="search-form">
<form action="https://echo.htmlacademy.ru" method="get">
<label for="search" class="visually-hidden">Поиск</label>
<input type="search" name="search" id="search" placeholder="Что ищем?">
</form>
</div>
</li>
<li><a class="enter-icon" href="#">Вход</a>
<div class="enter-form">
<h2 class="visually-hidden">Форма входа</h2>
<form action="https://echo.htmlacademy.ru" method="post">
<label for="email-enter" class="visually-hidden">Электронная почта</label>
<input type="email" name="email-enter" id="email-enter" placeholder="Электронная почта">
<label for="password" class="visually-hidden">Пароль</label>
<input type="password" name="password" id="password" placeholder="Пароль">
<button class="btn" type="submit">Войти</button>
</form>
<div class="registration-block">
<a href="#">Забыли пароль?</a>
<a href="#">Новая регистрация</a>
</div>
</div>
</li>
<li class="basket-full"><a href="#"><span class="visually-hidden">Корзина</span> 2 товара</a>
<div class="order">
<h2 class="visually-hidden">Товары в корзине</h2>
<table>
<tr>
<td class="delete"><button title="Удалить из корзины" type="button" class="delete-button"><span class="visually-hidden">Удалить
из корзины</span><span class="button-delet-img"></span></button> </td>
<td class="order-img"><img src="img/c-ic-basket-1.jpg" width="33" height="33" alt="Товар в корзине"></td>
<td class="order-description">Пломбир с апельсиновым джемом</td>
<td class="order-info">1,5 кг х <span class="order-price">200 руб</span></td>
<td class="full-price">300 руб.</td>
</tr>
<tr>
<td class="delete"><button title="Удалить из корзины" type="button" class="delete-button"><span class="visually-hidden">Удалить
из корзины</span><span class="button-delet-img"></span></button> </td>
<td class="order-img"><img src="img/c-ic-basket-2.jpg" width="33" height="33" alt="Товар в корзине"></td>
<td class="order-description">Клубничный пломбир с присыпкой из белого шоколада</td>
<td class="order-info">1,5 кг х <span class="order-price">300 руб</span></td>
<td class="full-price">450 руб.</td>
</tr>
</table>
<p class="default">Итого: 750 руб.</p>
<button class="btn" type="submit">Оформить заказ</button>
</div>
</li>
</ul>
<ul class="crumbs default">
<li><a href="index.html">Главная »</a></li>
<li><a href="#">Каталог » </a></li>
<li class="crumbs-active"><a>Сливочное</a></li>
</ul>
<p class="addres-phone default">С 10 до 20, ежедневно
<a class="phone" href="tel:+78124502525">8 812 450-25-25</a></p>
</header>
<main>
<h1 class="catalog-name default container">Сливочное мороженое</h1>
<section class="sort-form container">
<h2 class="visually-hidden">Сортировка мороженного</h2>
<form action="https://echo.htmlacademy.ru" method="get">
<fieldset class="select-block">
<legend class="label-select">Сортировка</legend>
<select class="sort-select opacity-fill" name="sort-type" id="sort-type">
<option>по популярности</option>
<option>сначала недорогие</option>
<option>сначала дорогие</option>
<option>по жирности</option>
</select>
</fieldset>
<fieldset class="range">
<legend class="label-range">Цена: 100 руб. – 500 руб.</legend>
<div class="range-block">
<div class="range-line">
<div class="range-fill">
<div class="range-from" tabindex="0"></div>
<div class="range-to" tabindex="0"></div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="label-fatness"> Жирность</legend>
<div class="fatness opacity-fill">
<input type=radio name="fatness" id="0" value="0%" class="visually-hidden">
<label for="0">0%</label>
<input type=radio checked name="fatness" id="10" value="до 10%" class="visually-hidden">
<label for="10">до 10%</label>
<input type=radio name="fatness" id="30" value="До 30%" class="visually-hidden">
<label for="30">до 30%</label>
<input type=radio name="fatness" id="max" value="выше 30%" class="visually-hidden" disabled>
<label for="max">выше 30%</label>
</div>
</fieldset>
<fieldset class="fillers-block">
<legend class="label-fillers">Наполнители:</legend>
<div class="fillers opacity-fill">
<input type="checkbox" checked name="chocolate" id="chocolate" class="visually-hidden">
<label for="chocolate">шоколадные</label>
<input type="checkbox" checked name="sugar" id="sugar" class="visually-hidden">
<label for="sugar">сахарные присыпки</label>
<input type="checkbox" name="fruits" id="fruits" class="visually-hidden">
<label for="fruits">фрукты</label>
<input type="checkbox" name="syrups" id="syrups" class="visually-hidden">
<label for="syrups">сиропы</label>
<input type="checkbox" name="jams" id="jams" class="visually-hidden" disabled>
<label for="jams">джемы</label>
</div>
</fieldset>
<button type="submit">Применить</button>
</form>
</section>
<section class="goods container">
<h2 class="visually-hidden">Сливочное мороженое в продаже</h2>
<ul class="items-list default">
<li><a href="#"><img src="img/c-ic-1.jpg" width="267" height="267" alt="Сливочное с апельсиновым джемом и цитрусовой стружкой">
<p class="hit-price default">310 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное с апельсиновым джемом и цитрусовой стружкой</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-2.jpg" width="267" height="267" alt="Сливочно-кофейное с кусочками шоколада">
<p class="hit-price default">380 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочно-кофейное с кусочками шоколада</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-3.jpg" width="267" height="267" alt="Сливочно-клубничное с присыпкой из белого шоколада">
<p class="hit-price default">355 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочно-клубничное с присыпкой из белого шоколада</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-4.jpg" width="267" height="267" alt="Сливочное крем-брюле с карамельной подливкой">
<p class="hit-price default">415 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное крем-брюле с карамельной подливкой</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-5.jpg" width="267" height="267" alt="Сливочное с брусничным джемом">
<p class="hit-price default">325 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное с брусничным джемом</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-6.jpg" width="267" height="267" alt="Сливочно-черничное с цельными ягодами черники">
<p class="hit-price default">410 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочно-черничное с цельными ягодами черники </p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-7.jpg" width="267" height="267" alt="Сливочно-лимонное с карамельной присыпкой">
<p class="hit-price default">375 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочно-лимонное с карамельной присыпкой</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-8.jpg" width="267" height="267" alt="Сливочное с шоколадной стружкой">
<p class="hit-price default">320 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное с шоколадной стружкой</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-9.jpg" width="267" height="267" alt="Сливочно-ванильное с кусочками шоколада">
<p class="hit-price default">440 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочно-ванильное с кусочками шоколада</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-10.jpg" width="267" height="267" alt="Сливочноe с ментоловым сиропом">
<p class="hit-price default">435 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочноe с ментоловым сиропом</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-11.jpg" width="267" height="267" alt="Сливочное с кусочками черного шоколада">
<p class="hit-price default">355 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное с кусочками черного шоколада</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
<li><a href="#"><img src="img/c-ic-12.jpg" width="267" height="267" alt="Сливочное с мятным сиропом">
<p class="hit-price default">420 ₽<span>/кг</span></p>
<p class="hit-description default">Сливочное с мятным сиропом</p>
</a>
<div class="item-hover"><a href="#" class="btn">Быстрый просмотр</a></div>
</li>
</ul>
</section>
<ul class="paginator default container">
<li class="previous-page"><a><span class="visually-hidden">Предыдущая страница</span></a></li>
<li class="paginator-active"><a><span class="visually-hidden">Страница</span>1</a></li>
<li><a href="#"><span class="visually-hidden">Страница</span>2</a></li>
<li><a href="#"><span class="visually-hidden">Страница</span>3</a></li>
<li><a href="#"><span class="visually-hidden">Страница</span>4</a></li>
<li><a href="#"><span class="visually-hidden">Страница</span>5</a></li>
<li class="next-page"><a href="#"><span class="visually-hidden">Следующая страница</span></a></li>
</ul>
</main>
<footer class="main-footer catalog-footer container">
<ul class="social default">
<li><a href="#"><span class="visually-hidden">Твиттер</span></a></li>
<li class="inst"><a href="#"><span class="visually-hidden">Инстаграм</span></a></li>
<li class="fb"><a href="#"><span class="visually-hidden">Фейсбук</span></a></li>
<li class="vk"><a href="#"><span class="visually-hidden">Вконтакте</span></a></li>
</ul>
<ul class="official default">
<li class="suppliers"><a href="#">Для поставщиков</a></li>
<li><a href="#">Наши документы</a></li>
<li><a href="#">О производстве</a></li>
<li><a href="#">Экологические стандарты</a></li>
</ul>
<section class="footer-copyright">
<div class="copyright-logo">
<a href="https://htmlacademy.ru/intensive/htmlcss"><img src="img/logo-htmlacademy-small.svg" width="120" height="39" alt="HTML Academy "></a>
<a href="https://htmlacademy.ru/intensive/htmlcss">
<p class="default">Сделано в <span>HTML Academy</span> © 2017</p>
</a>
</div>
</section>
</footer>
</body>
</html>