Skip to content

Commit 8f3eef9

Browse files
nikolai-shabalinnikolai-shabalin
committed
Добавляет тестовые страницы
1 parent dbd122d commit 8f3eef9

2 files changed

Lines changed: 743 additions & 0 deletions

File tree

‎test/catalog.html‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
<!DOCTYPE html>
2+
<html class="page" lang="ru">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>HTML Academy: Девайс. Каталог</title>
7+
<link href="./css/normalize.min.css" rel="stylesheet">
8+
<link href="./css/style.min.css" rel="stylesheet">
9+
</head>
10+
<body class="catalog-page">
11+
<header class="header header--catalog-page">
12+
<div class="container">
13+
<nav class="header__nav nav">
14+
<a class="nav__logo logo" href="./index.html">
15+
<img src="./img/logo_device.svg" width="163" height="35" alt="логотип интернет-магазина Девайс">
16+
</a>
17+
18+
<form class="nav__search search" action="https://echo.htmlacademy.ru" method="get" id="header-search">
19+
<input class="search__input" name="header-search" type="search" placeholder="Поиск по сайту" aria-label="Поиск по сайту">
20+
<button class="search__button" type="submit">Найти</button>
21+
</form>
22+
23+
<ul class="nav__user user">
24+
<li class="user__item user__item--login">
25+
<a class="user__link user__link--login" href="">Валентин Петухов</a>
26+
</li>
27+
<li class="user__item">
28+
<a class="user__link user__link--logout" href="">Выйти</a>
29+
</li>
30+
</ul>
31+
32+
<ul class="nav__site-function site-function">
33+
<li class="site-function__item">
34+
<a class="site-function__link site-function__link--compare" href="">Сравнить</a>
35+
</li>
36+
<li class="site-function__item">
37+
<a class="site-function__link site-function__link--cart" href="">Корзина</a>
38+
</li>
39+
</ul>
40+
41+
<ul class="nav__menu menu">
42+
<li class="menu__item menu__item--catalog">
43+
<button class="menu__link menu__link--catalog" aria-haspopup="true">Каталог товаров</button>
44+
<div class="wrapper-catalog-menu">
45+
<ul class="catalog-menu">
46+
<li class="catalog-menu__item">
47+
<a class="catalog-menu__link" href="catalog.html" >Виртуальная реальность</a>
48+
<a class="catalog-menu__link" href="catalog.html" >Моноподы для селфи</a>
49+
<a class="catalog-menu__link" href="catalog.html" >Экшн-камеры</a>
50+
</li>
51+
<li class="catalog-menu__item">
52+
<a class="catalog-menu__link" href="catalog.html">Фитнес-браслеты</a>
53+
<a class="catalog-menu__link" href="catalog.html">Умные часы</a>
54+
</li>
55+
<li class="catalog-menu__item">
56+
<a class="catalog-menu__link" href="catalog.html">Квадрокоптер</a>
57+
</li>
58+
</ul>
59+
</div>
60+
</li>
61+
<li class="menu__item menu__item--delivery">
62+
<a class="menu__link" href="">Доставка</a>
63+
</li>
64+
<li class="menu__item menu__item--warranty">
65+
<a class="menu__link" href="">Гарантия</a>
66+
</li>
67+
<li class="menu__item menu__item--contacts">
68+
<a class="menu__link" href="">Контакты</a>
69+
</li>
70+
</ul>
71+
</nav>
72+
</div>
73+
</header>
74+
75+
<main class="catalog-main">
76+
<div class="container">
77+
<h1 class="catalog-main__title headline">Моноподы для селфи</h1>
78+
79+
<ul class="catalog-main__breadcrumbs breadcrumbs">
80+
<li class="breadcrumbs__item">
81+
<a class="breadcrumbs__link" href="index.html">Главная</a>
82+
</li>
83+
<li class="breadcrumbs__item">
84+
<a class="breadcrumbs__link" href="catalog.html">Каталог товаров</a>
85+
</li>
86+
<li class="breadcrumbs__item">
87+
<a class="breadcrumbs__link">Моноподы для селфи</a>
88+
</li>
89+
</ul>
90+
</div>
91+
92+
93+
<div class="wrapper-form-catalog">
94+
<section class="form">
95+
<div class="form__header">
96+
<h2 class="form__title headline">Фильтр:</h2>
97+
</div>
98+
99+
<form class="form__filter filter" id="form-filter" name="form-filter" action="https://echo.htmlacademy.ru" method="get">
100+
<span class="decor decor--fieldset"></span>
101+
<fieldset class="filter__fieldset">
102+
<legend class="filter__legend">Стоимость</legend>
103+
<div class="filter__range range">
104+
<div class="range__scale">
105+
<div class="range__bar"></div>
106+
<button class="range__button range__button--min" id="button-min-price" type="button" aria-label="установить минимальную цену от (управление стрелкой вправо-влево)"></button>
107+
<button class="range__button range__button--max" id="button-max-price" type="button" aria-label="установить максимальную цену до (управление стрелкой вправо-влево)"></button>
108+
</div>
109+
110+
<div class="wrapper-range-price">
111+
<label class="range__price range__price--min" id="min-price" aria-label="установить цену от (управление стрелкой вверх-вниз)">
112+
от
113+
<input name="min-price" type="number" value="0" step="100" min="0" max="5000">
114+
</label>
115+
116+
<label class="range__price range__price--max" id="max-price" aria-label="установить цену до (управление стрелкой вверх-вниз)">
117+
до
118+
<input name="max-price" type="number" value="5000" step="100" min="100" max="5000">
119+
</label>
120+
</div>
121+
</div>
122+
</fieldset>
123+
124+
<span class="decor decor--fieldset"></span>
125+
<fieldset class="filter__fieldset filter__fieldset--color" id="color">
126+
<legend class="filter__legend">Цвет</legend>
127+
<ul class="filter__list">
128+
<li class="filter__item">
129+
<input class="visually-hidden filter__checkbox" id="black" name="color" type="checkbox" value="black" checked>
130+
<label for="black">Чёрный</label>
131+
</li>
132+
<li class="filter__item">
133+
<input class="visually-hidden filter__checkbox" id="white" name="color" type="checkbox" value="white">
134+
<label for="white">Белый</label>
135+
</li>
136+
<li class="filter__item">
137+
<input class="visually-hidden filter__checkbox" id="blue" name="color" type="checkbox" value="blue" checked>
138+
<label for="blue">Синий</label>
139+
</li>
140+
<li class="filter__item">
141+
<input class="visually-hidden filter__checkbox" id="red" name="color" type="checkbox" value="red" checked>
142+
<label for="red">Красный</label>
143+
</li>
144+
<li class="filter__item">
145+
<input class="visually-hidden filter__checkbox" id="pink" name="color" type="checkbox" value="pink">
146+
<label for="pink">Розовый</label>
147+
</li>
148+
</ul>
149+
</fieldset>
150+
151+
<span class="decor decor--fieldset"></span>
152+
<fieldset class="filter__fieldset filter__fieldset--bluetooth" id="bluetooth">
153+
<legend class="filter__legend">Bluetooth</legend>
154+
<ul class="filter__list">
155+
<li class="filter__item">
156+
<input class="visually-hidden filter__radio" id="bluetooth-include" name="bluetooth" type="radio" value="include" checked>
157+
<label for="bluetooth-include" aria-label="функция нужна.">Есть</label>
158+
</li>
159+
<li class="filter__item">
160+
<input class="visually-hidden filter__radio" id="bluetooth-exclude" name="bluetooth" type="radio" value="exclude">
161+
<label for="bluetooth-exclude" aria-label="функция не нужна.">Нет</label>
162+
</li>
163+
</ul>
164+
</fieldset>
165+
166+
<button class="filter__submit more-btn button-submit" type="submit" form="form-filter" aria-label="Показать товары с выбранными характеристиками">Показать</button>
167+
</form>
168+
</section>
169+
170+
<section class="catalog">
171+
<div class="catalog__sorting sorting">
172+
<h2 class="sorting__title headline">Сортировка:</h2>
173+
174+
<ul class="sorting__list">
175+
<li class="sorting__item">
176+
<a class="sorting__link sorting__link--price sorting__link--current" aria-label="Сортировать по цене.">По цене</a>
177+
</li>
178+
<li class="sorting__item">
179+
<a class="sorting__link sorting__link--type" href="" aria-label="Сортировать по типу.">По типу</a>
180+
</li>
181+
<li class="sorting__item">
182+
<a class="sorting__link sorting__link--rating" href="" aria-label="Сортировать по популярности.">По популярности</a>
183+
</li>
184+
</ul>
185+
186+
<ul class="sorting__arrows">
187+
<li class="sorting__arrow">
188+
<a class="sorting__arrow-link sorting__arrow-link--up" href="" aria-label="Сортировка по возрастанию"></a>
189+
</li>
190+
<li class="sorting__arrow">
191+
<a class="sorting__arrow-link sorting__arrow-link--down sorting__arrow-link--active" href="" aria-label="Сортировка по убыванию"></a>
192+
</li>
193+
</ul>
194+
</div>
195+
196+
<div class="catalog__display">
197+
<ul class="catalog__products">
198+
<li class="product" tabindex="0">
199+
<div class="product__buttons-container">
200+
<a class="product__link product__link--move-to-cart more-btn button-link" href="">В корзину</a>
201+
<a class="product__link product__link--move-to-compare" href="">Добавить к сравнению</a>
202+
</div>
203+
<img class="product__image" src="./img/catalog_item-selfiestick-simple.jpg" width="360" height="380" alt="Селфи-палка простой конструкции">
204+
205+
<h3 class="product__title headline">
206+
<a class="product__link" href="">Любительская селфи-палка</a>
207+
</h3>
208+
<p class="product__price">1 100 руб.</p>
209+
</li>
210+
211+
<li class="product" tabindex="0">
212+
<div class="product__buttons-container">
213+
<a class="product__link product__link--move-to-cart more-btn button-link" href="">В корзину</a>
214+
<a class="product__link product__link--move-to-compare" href="">Добавить к сравнению</a>
215+
</div>
216+
<img class="product__image" src="./img/catalog_item-selfiestick-pro.jpg" width="360" height="380" alt="Селфи-палка с bluetooth">
217+
<h3 class="product__title headline">
218+
<a class="product__link" href="">Профессиональная <br> селфи-палка</a>
219+
</h3>
220+
<p class="product__price">1 500 руб.</p>
221+
</li>
222+
223+
<li class="product" tabindex="0">
224+
<div class="product__buttons-container">
225+
<a class="product__link product__link--move-to-cart more-btn button-link" href="">В корзину</a>
226+
<a class="product__link product__link--move-to-compare" href="">Добавить к сравнению</a>
227+
</div>
228+
<img class="product__image" src="./img/catalog_item-selfiestick-unsinkable.jpg" width="360" height="380" alt="Селфи-палка поплавок">
229+
<h3 class="product__title headline">
230+
<a class="product__link" href="">Непотопляемая <br> селфи-палка</a>
231+
</h3>
232+
<p class="product__price">1 500 руб.</p>
233+
</li>
234+
235+
<li class="product product--new" tabindex="0">
236+
<div class="product__buttons-container">
237+
<a class="product__link product__link--move-to-cart more-btn button-link" href="">В корзину</a>
238+
<a class="product__link product__link--move-to-compare" href="">Добавить к сравнению</a>
239+
</div>
240+
<img class="product__image" src="./img/catalog_item-selfiestick-followme.jpg" width="360" height="380" alt="Селфи-палка в виде руки">
241+
<h3 class="product__title headline">
242+
<a class="product__link" href="">Селфи-палка «Следуй за <br> мной»</a>
243+
</h3>
244+
<p class="product__price">1 900 руб.</p>
245+
</li>
246+
</ul>
247+
</div>
248+
249+
<div class="catalog__pagination">
250+
<ul class="pagination">
251+
<li class="pagination__item pagination__item--prev">
252+
<a class="pagination__link pagination__link--prev">Назад</a>
253+
</li>
254+
<li class="pagination__item">
255+
<a class="pagination__link pagination__link--current">1</a>
256+
</li>
257+
<li class="pagination__item">
258+
<a class="pagination__link" href="catalog.html">2</a>
259+
</li>
260+
<li class="pagination__item">
261+
<a class="pagination__link" href="catalog.html">3</a>
262+
</li>
263+
<li class="pagination__item pagination__item--next">
264+
<a class="pagination__link pagination__link--next" href="catalog.html">Вперед</a>
265+
</li>
266+
</ul>
267+
</div>
268+
</section>
269+
</div>
270+
271+
</main>
272+
273+
<footer class="footer">
274+
<div class="footer-container container">
275+
<a class="footer__logo logo logo--footer" href="index.html">
276+
<img src="img/logo_device-footer.svg" width="163" height="35" alt="логотип интернет-магазина Девайс">
277+
</a>
278+
279+
<ul class="footer__user user">
280+
<li class="user__item user__item--login">
281+
<a class="user__link user__link--login-yellow" href="">Валентин Петухов</a>
282+
</li>
283+
<li class="user__item">
284+
<a class="user__link" href="">Выйти</a>
285+
</li>
286+
</ul>
287+
288+
<ul class="footer__site-function site-function">
289+
<li class="site-function__item">
290+
<a class="site-function__link site-function__link--compare-yellow" href="">Сравнить</a>
291+
</li>
292+
<li class="site-function__item">
293+
<a class="site-function__link site-function__link--cart-yellow" href="">Корзина</a>
294+
</li>
295+
</ul>
296+
297+
<p class="footer__address">г. Москва, ул. Строителей, 15</p>
298+
299+
<ul class="footer__menu menu menu--footer">
300+
<li class="menu__item">
301+
<a class="menu__link" href="">Доставка</a>
302+
</li>
303+
<li class="menu__item">
304+
<a class="menu__link" href="">Гарантия</a>
305+
</li>
306+
<li class="menu__item">
307+
<a class="menu__link" href="">Контакты</a>
308+
</li>
309+
</ul>
310+
311+
<span class="footer__decor decor decor--footer"></span>
312+
313+
<a class="footer__telephone" href="tel:+74954959595" aria-label="номер телефона офиса +7(495)4959595">Тел.: +7 (495) 495-95-95</a>
314+
315+
<ul class="footer__social social">
316+
<li class="social__item">
317+
<a class="social__link social__link--fb" href="" aria-label="Facebook">
318+
<svg aria-hidden="true" focusable="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
319+
<path d="M32 16a16 16 0 10-19 16V21H9v-5h5v-4c0-4 2-6 6-6l3 1v4h-2c-2 0-2 1-2 2v3h4l-1 5h-3v11c7-1 13-8 13-16z" fill="#fff" fill-opacity=".6"/>
320+
</svg>
321+
</a>
322+
</li>
323+
<li class="social__item">
324+
<a class="social__link social__link--insta" href="" aria-label="Instagram">
325+
<svg aria-hidden="true" focusable="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
326+
<path d="M21 16a5 5 0 11-10 0v-1h-1v7h12v-7h-1v1zm-5 3a3 3 0 100-6 3 3 0 000 6zm4-6h2v-3h-2-1v2l1 1zM16 1a15 15 0 100 30 15 15 0 000-30zm8 21l-2 2H10l-2-2V10l2-2h12l2 2v12z" fill="#fff" fill-opacity=".6"/>
327+
</svg>
328+
</a>
329+
</li>
330+
<li class="social__item">
331+
<a class="social__link social__link--twit" href="" aria-label="Twitter">
332+
<svg aria-hidden="true" focusable="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
333+
<path d="M16 32l-6-1a16 16 0 01-9-9 16 16 0 01-1-6l1-6a16 16 0 019-9 16 16 0 016-1l6 1a16 16 0 019 9 16 16 0 011 6l-1 6a16 16 0 01-9 9 16 16 0 01-6 1zm9-24l-1 1h-1l-3-1c-2 0-3 1-3 3v2c-4 0-6-1-8-4l-1 2 2 3H9 8l1 2 2 2h-1-1l1 2h3l-2 2a6 6 0 01-2 0H8a16 16 0 00-1 0l2 1 4 1a10 10 0 007-3 13 13 0 002-2 13 13 0 002-4v-3l1-1 1-1-2 1 1-3z" fill="#fff" fill-opacity=".6"/>
334+
</svg>
335+
</a>
336+
</li>
337+
</ul>
338+
339+
<a class="footer__copyright" href="https://htmlacademy.ru/intensive/htmlcss" aria-label="HTML Academy">
340+
<span class="visually-hidden">HTML Academy</span>
341+
<img src="./img/logo_htmlacademy.svg" width="27" height="34" alt="логотип HTML Academy">
342+
</a>
343+
</div>
344+
</footer>
345+
</body>
346+
</html>

0 commit comments

Comments
 (0)