-
Notifications
You must be signed in to change notification settings - Fork 2
/
product.html
167 lines (157 loc) · 7.97 KB
/
product.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Набор для путешествий «Baxter of California» | Barbershop</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="main-header">
<nav class="main-navigation">
<ul class="main-navigation__menu-list">
<li class="main-navigation__item">
<a class="main-navigation__link" href="index.html" title="Перейти на главную страницу компании Barbershop">
<img class="logo" src="img/logo-small.svg" alt="Логотип компании Barbershop" width="111" height="24"></a>
</li>
<li class="main-navigation__item">
<a class="main-navigation__link" href="info.html">Информация</a>
</li>
<li class="main-navigation__item">
<a class="main-navigation__link" href="news.html">Новости</a>
</li>
<li class="main-navigation__item">
<a class="main-navigation__link" href="price.hml">Прайс-лист</a>
</li>
<li class="main-navigation__item">
<a class="main-navigation__link main-navigation__item--active" href="shop.html">Магазин</a>
</li>
<li class="main-navigation__item">
<a class="main-navigation__link" href="contacts.html">Контакты</a>
</li>
</ul>
<ul class="main-navigation__user-list">
<li class="main-navigaation__user-item">
<a class="main-navigation__user-link" href="#modal_login" title="Войти в личный кабинет">Вход</a>
</li>
</ul>
</nav>
</header>
<main class="product">
<h1 class="product__title">Набор для путешествий «Baxter of California»</h1>
<ul class="breadcrumbs">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="index.html">Главная</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="shop.html">Магазин</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="shop.html#care-catalog">Средства ухода</a>
</li>
<li class="breadcrumbs__item">
Набор для путешествий «Baxter of California»
</li>
</ul>
<section class="product__photo">
<h2 class="visually-hidden">Изображения товара</h2>
<p class="slider__full"><img class="slider__full-img" src="img/product/full.jpg"
alt="Фото всего набора" width="460" height="498"></p>
<ul class="slider__previews">
<li class="slider__preview">
<img class="slider__img" src="img/product/small-1.jpg" alt="Фото в анфас" width="140" height="149">
</li>
<li class="slider__preview">
<img class="slider__img" src="img/product/small-2.jpg" alt="Фото в профиль" width="140"
height="149">
</li>
<li class="slider__preview">
<img class="slider__img" src="img/product/small-3.jpg" alt="Фото отдельной части" width="140"
height="149">
</li>
</ul>
</section>
<section class="product__info">
<h2 class="visually-hidden">Описание товара</h2>
<p class="product__availability">Есть в наличии</p>
<p class="product__article">Артикул: dexter-ae</p>
<p class="product__text">Travel Kit – необходимый аксессуар во время любого путешествия. В аккуратной кожаной сумке
находится все, что нужно для бритья и ухода за кожей во время рабочей поездки или отдыха: средство для умывания,
увлажняющий крем, крем для бритья, крем после бритья, шампунь. Набор также может стать отличным подарком.</p>
<p class="product__price"><b>2 900 ₽</b> <a class="product__button" href="#"
title="Положить товар в корзину">Купить</a></p>
<h3>В набор входят:</h3>
<ul>
<li>Средство для умывания (50 мл)</li>
<li>Увлажняющий крем (50 мл)</li>
<li>Крем для бритья (50 мл)</li>
<li>Крем после бритья, шампунь (50 мл)</li>
<li>Удобная кожаная косметичка</li>
</ul>
</section>
</main>
<footer class="main-footer">
<div class="main-footer__wrap">
<div class="main-footer__column">
<div class="contacts">
<p class="contacts__text">Адрес: г. Санкт-Петербург, ул. Б. Конюшенская, д. 19/8</p>
<p class="contacts__text">
<a class="contacts__link" href="#map" title="Перейти к карте">Как нас найти?</a>
</p>
<p class="contacts__text">
Телефон: <a class="contacts__link contacts__link--phone" href="tel:+74956660266"
title="Позвоните нам!">+7 (495) 666-02-66</a>
</p>
</div>
</div>
<div class="main-footer__column">
<div class="socials">
<b class="socials__title">Давайте дружить!</b>
<ul class="socials__list">
<li class="socials__item">
<a class="socials__link socials__link--vk" href="//vk.com" target="_blank" rel="nofollow">Вконтакте</a>
</li>
<li class="socials__item">
<a class="socials__link socials__link--fb" href="//fb.com" target="_blank" rel="nofollow">Facebook</a>
</li>
<li class="socials__item">
<a class="socials__link socials__link--inst" href="//instagram.com" target="_blank"
rel="nofollow">Instagram</a>
</li>
</ul>
</div>
</div>
<div class="main-footer__column">
<div class="designed">
<b class="designed__title">Разработано:</b>
<a class="designed__link" href="//htmlacademy.ru/intensive/htmlcss"
title="Разработано в htmlacademy.ru" target="_blank" rel="nofollow">HTML Academy</a>
</div>
</div>
</div>
</footer>
<section class="login" id="modal_login">
<h2 class="title">Личный кабинет</h2>
<p>Введите, пожалуйста, свой логин и пароль</p>
<form class="login__form" action="#" method="post">
<label class="login__form-title" for="login">Логин</label>
<input class="login__form-field" id="login" name="login" type="text" placeholder="Логин">
<label class="login__form-title" for="password">Пароль</label>
<input class="login__form-field" id="password" name="password" type="password" placeholder="Пароль">
<label class="login__form-title" for="remember_me">Запомните меня</label>
<input class="login__form-field" id="remember_me" name="remember_me" type="checkbox" checked>
<a class="login__form-link" href="#">Я забыл пароль!</a>
<button class="button" type="submit">Войти</button>
</form>
<button class="button-close" type="button">Закрыть</button>
</section>
<section class="map" id="map">
<h2 class="visually-hidden">Как к нам проехать</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1998.59894241241!2d30.32089461620896!3d59.93879686904772!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696310fca5ba729%3A0xea9c53d4493c879f!2z0JHQvtC70YzRiNCw0Y8g0JrQvtC90Y7RiNC10L3QvdCw0Y8g0YPQuy4sIDE5LCDQodCw0L3QutGCLdCf0LXRgtC10YDQsdGD0YDQsywgMTkxMTg2!5e0!3m2!1sru!2sru!4v1543435710920"
width="766" height="560" frameborder="0" style="border:0" allowfullscreen></iframe>
<button class="button-close" type="button">Закрыть</button>
</section>
<script src="js/main.js"></script>
</body>
</html>