-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcatalog.html
90 lines (88 loc) · 3.53 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>HTML Academy: Мишка</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<section class="main-header__top top-menu">
<a href="#" class="top-menu__logo"></a>
<a href="#" class="top-menu__catalog">Каталог товаров</a>
<a href="#" class="top-menu__order">Вязание на заказ</a>
<a href="#" class="top-menu__search">Поиск по сайту</a>
<a href="#" class="top-menu__cart">Корзина: пока пуста</a>
</section>
<section class="main-header__middle">
<h1 class="main-header__main-heading">
Каталог
</h1>
</section>
</header>
<main class="catalog">
<section class="catalog__items">
<div class="catalog__item">
<a href="#">
<img src="#" alt="Изображение зайчика">
<h4 class="catalog__item-heading">Зайчик-попрыгайчик</h4>
<p class="catalog__item-description">Рост 30 см, вес 200 г</p>
<div class="catalog__price">1 200 руб.</div>
</a>
</div>
<div class="catalog__item">
<a href="#">
<img src="#" alt="Изображение зайчика">
<h4 class="catalog__item-heading">Корзинка для белья</h4>
<p class="catalog__item-description">Диаметр 15 см, высота 10 см</p>
<div class="catalog__price">690 руб.</div>
</a>
</div>
<div class="catalog__item">
<a href="#">
<img src="#" alt="Изображение зайчика">
<h4 class="catalog__item-heading">Большая корзинка для игрушек</h4>
<p class="catalog__item-description">Диаметр 30 см, высота 30 см</p>
<div class="catalog__price">1 500 руб.</div>
</a>
</div>
</section>
<section class="catalog__video">
<h4 class="catalog__item-heading catalog__video-heading">Процесс производства</h4>
<img src="" alt="Видео">
<div class="catalog__video-description">По просьбам наших любимых фолловеров мы сняли для вас подробное видео о том, как появляются наши товары.
</div>
<a href="#" class="catalog__btn btn">Сделать заказ</a>
</section>
</main>
<footer class="main-footer">
<section class="main-footer__social">
<a href="#" class="main-footer__vk"><!--SVG--></a>
<a href="#" class="main-footer__fb"><!--SVG--></a>
<a href="#" class="main-footer__twitter"><!--SVG--></a>
</section>
<section class="main-footer__developer">
<a href="#" class="developer">
Разработано
<!--SVG-->
</a>
</section>
</footer>
<section class="modal">
<h2 class="modal__heading heading2">Добавить в корзину</h2>
<p class="modal__text">Выберите размер:</p>
<div class="modal__size">
<input type="radio" id="modal__radio1" name="modal__radio" checked>
<label for="modal__radio1">S</label>
<input type="radio" id="modal__radio2" name="modal__radio">
<label for="modal__radio2">М</label>
<input type="radio" id="modal__radio3" name="modal__radio">
<label for="modal__radio3">L</label>
</div>
<a href="#" class="modal__make-order">Добавить</a>
<button class="modal__close" type="button"></button>
</section>
<!--liveReload-->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>