-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathitem.html
157 lines (142 loc) · 8.28 KB
/
item.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Набор для путешествий "Baxter of California"</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=cyrillic"
rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link href="css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body class="inner-page">
<header class="main-header">
<nav class="main-navigation container">
<a class="main-header-logo" href="index.html">
<img src="img/logo.svg" width="111" height="24" alt="Логотип барбершопа">
</a>
<ul class="site-navigation">
<li><a href="index.html#info-point">Информация</a></li>
<li><a href="index.html#news-point">Новости</a></li>
<li><a href="price.html">Прайс-лист</a></li>
<li class="site-navigation-current"><a href="catalog.html">Магазин</a></li>
<li><a href="index.html#contacts-point">Контакты</a></li>
</ul>
<ul class="user-navigation">
<li><a class="login-link" href="login.html">Вход</a></li>
</ul>
</nav>
</header>
<main class="container">
<h1 class="page-title">Набор для путешествий «Baxter of California»</h1>
<ul class="breadcrumbs">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Магазин</a></li>
<li><a href="#">Средства для ухода</a></li>
<li class="breadcrumbs-current">Набор для путешествий «Baxter of California»</li>
</ul>
<div class="catalog-columns">
<section class="product-photos">
<h2 class="visually-hidden">Изображения товара</h2>
<p class="product-photo-full">
<img src="img/product-big.jpg" width="460" height="498" alt="Фото всего набора">
</p>
<ul class="product-photo-preview">
<li><img src="img/product-small-1.jpg" width="140" height="149" alt="Фото в анфас"></li>
<li><img src="img/product-small-2.jpg" width="140" height="149" alt="Фото в профиль"></li>
<li><img src="img/product-small-3.jpg" width="140" height="149" alt="Фото отдельной части"></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>900 ₴</b>
<a class="button" href="#">Купить</a>
</p>
<h3>В набор входят:</h3>
<ul>
<li>Средство для умывания (50 мл)</li>
<li>Увлажняющий крем (50 мл)</li>
<li>Крем для бритья (50 мл)</li>
<li>Крем после бритья, шампунь (50 мл)</li>
<li>Удобная кожаная косметичка</li>
</ul>
</section>
</div>
</main>
<footer class="main-footer">
<div class="container">
<p class="footer-contacts">
Барбершоп контакты<br>
Адрес: г. Киев,<br>
Б. Шевченка, Д. 11/18<br>
Телефон: +38 (093) 088-24-55
</p>
<div class="footer-social">
<b>Давайте дружить!</b>
<ul>
<li>
<a class="social-button" href="https://www.linkedin.com/in/anton-maksymchak"><span class="visually-hidden">Linkedin</span>
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="25" viewBox="0 0 448 512">
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a class="social-button" href="https://www.facebook.com/Anton.Maksymchak"><span class="visually-hidden">Facebook</span>
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="22" viewBox="0 0 10.15 21.74">
<path d="M3.34 1.12A4.77 4.77 0 0 1 6.53 0h3.61v3.81H7.81a1.07 1.07 0 0 0-1.09.83v2.55h3.42c-.08 1.23-.24 2.45-.41 3.67h-3v10.87H2.21V10.86H0V7.21h2.19V3.66a3.83 3.83 0 0 1 1.15-2.54z" fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a class="social-button" href="https://github.com/maksymchak"><span class="visually-hidden">GitHub</span>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 448 512">
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" fill="#fff"></path>
</svg>
</a>
</li>
</ul>
</div>
<p class="footer-copyright">
<b>Разработано:</b>
<a class="button" href="https://www.linkedin.com/in/anton-maksymchak">Maksymchak</a>
</p>
</div>
</footer>
<section class="modal modal-login">
<h2>Личный кабинет</h2>
<p class="modal-description">Введите пожалуйста свой логин и пароль</p>
<form class="login-form" action="https://echo.htmlacademy.ru" method="post">
<p>
<label class="visually-hidden" for="user-login">Логин</label>
<input class="login-icon-user" id="user-login" type="text" name="login" placeholder="Логин">
</p>
<p>
<label class="visually-hidden" for="user-password">Пароль</label>
<input class="login-icon-password" id="user-password" type="password" name="password" placeholder="Пароль">
</p>
<p class="login-help">
<label class="login-checkbox">
<input type="checkbox" name="remember" class="visually-hidden">
<span class="checkbox-indicator"></span>
Запомните меня
</label>
<a class="restore" href="#">Я забыл пароль!</a>
</p>
<button class="button" type="submit">Войти</button>
</form>
<button class="modal-close" type="button">Закрыть</button>
</section>
<script src="js/popup.js"></script>
</body>
</html>