-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcatalog-item.html
134 lines (134 loc) · 8.49 KB
/
catalog-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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.min.css">
<title>Карточка товара</title>
</head>
<body class="item-page">
<header class="main-header">
<div class="main-navigation-wrapper">
<div class="container">
<nav class="main-navigation">
<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="info.html">Информация</a></li>
<li><a href="news.html">Новости</a></li>
<li><a href="price.html">Прайс-лист</a></li>
<li class="site-navigation-current"><a href="catalog.html">Магазин</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
<ul class="user-navigation">
<li class="login-link1">
<a class="login-link" href="login.html">Вход</a>
</li>
</ul>
</nav>
</div>
</div>
</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-description">
<h2 class="visually-hidden">Описание товара</h2>
<div class="product-info">
<p class="product-availability">Есть в наличии</p>
<p class="product-article">Артикул: dexter-ae</p>
</div>
<p class="product-text">Travel Kit – необходимый аксессуар во время любого путешествия. В аккуратной кожаной сумке находится все, что нужно для бритья и ухода за кожей во время рабочей поездки или отдыха: средство для умывания, увлажняющий крем, крем для бритья, крем после бритья, шампунь. Набор также может стать отличным подарком.</p>
<p class="product-price">
<b>2 900 ₽</b>
<a href="#" class="button">Купить</a>
</p>
<h3>В набор входят:</h3>
<ul class="product-set-list">
<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>
Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br>
<a href="map.html" class="button map-button">Как нас найти?</a><br>
Телефон: <a href="tel:+7 (495) 666-02-66">+7 (495) 666-02-66</a>
</p>
<div class="footer-social">
<b>Давайте дружить!</b>
<ul>
<li><a href="#" class="social-button"><span class="visually-hidden">Вконтакте</span><svg xmlns="http://www.w3.org/2000/svg" width="27" height="15" viewbox="0 0 26.14 14.91">
<path d="M26 13.47l-.09-.17a13.55 13.55 0 0 0-2.6-3q-.87-.83-1.1-1.12A1 1 0 0 1 22 8a10.27 10.27 0 0 1 1.22-1.78l.88-1.16q2.35-3.13 2-4L26 .94a.8.8 0 0 0-.4-.22 2.14 2.14 0 0 0-.87 0h-3.92a.51.51 0 0 0-.27 0h-.3a.6.6 0 0 0-.15.14.93.93 0 0 0-.14.24 22.22 22.22 0 0 1-1.46 3.06q-.5.84-.93 1.46a7 7 0 0 1-.71.91 4.94 4.94 0 0 1-.52.47q-.23.18-.35.15l-.23-.05a.9.9 0 0 1-.31-.33 1.49 1.49 0 0 1-.16-.53V1.6a3.14 3.14 0 0 0 0-.62 2.12 2.12 0 0 0-.14-.44.73.73 0 0 0-.28-.33 1.57 1.57 0 0 0-.46-.18A9 9 0 0 0 12.57 0a8.93 8.93 0 0 0-3.25.33 1.83 1.83 0 0 0-.52.41q-.25.3-.07.33a1.67 1.67 0 0 1 1.16.59l.08.16a2.6 2.6 0 0 1 .19.63 6.32 6.32 0 0 1 .12 1 10.59 10.59 0 0 1 0 1.7q-.07.71-.13 1.1a2.21 2.21 0 0 1-.18.64 2.69 2.69 0 0 1-.16.3l-.07.07a1 1 0 0 1-.37.07.86.86 0 0 1-.46-.19 3.27 3.27 0 0 1-.56-.52 7 7 0 0 1-.66-.93q-.37-.6-.76-1.42l-.22-.39q-.2-.38-.56-1.11t-.62-1.43A.9.9 0 0 0 5.2.9h-.07a.93.93 0 0 0-.22-.16A1.44 1.44 0 0 0 4.6.65L.87.68A1 1 0 0 0 .1.94L0 1a.44.44 0 0 0 0 .22 1.08 1.08 0 0 0 .08.37Q.9 3.53 1.86 5.31t1.66 2.87Q4.23 9.27 5 10.24t1 1.24l.37.41.34.33a8.06 8.06 0 0 0 1 .78 16.34 16.34 0 0 0 1.4.9 7.6 7.6 0 0 0 1.79.72 6.19 6.19 0 0 0 2 .22h1.57a1.08 1.08 0 0 0 .72-.3l.05-.07a.9.9 0 0 0 .1-.25 1.38 1.38 0 0 0 0-.37 4.48 4.48 0 0 1 .09-1.05 2.77 2.77 0 0 1 .23-.71 1.74 1.74 0 0 1 .29-.4 1.19 1.19 0 0 1 .23-.2h.11a.86.86 0 0 1 .77.21 4.52 4.52 0 0 1 .83.79q.39.47.93 1.05a6.41 6.41 0 0 0 1 .87l.27.16a3.31 3.31 0 0 0 .71.3 1.53 1.53 0 0 0 .76.07l3.48-.05a1.58 1.58 0 0 0 .8-.17.68.68 0 0 0 .34-.37 1.06 1.06 0 0 0 0-.46 1.71 1.71 0 0 0-.1-.36z"
fill="#fff" /></svg></a></li>
<li><a href="#" class="social-button"><span class="visually-hidden">Фейсбук</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" /></svg>
</a></li>
<li><a href="#" class="social-button"><span class="visually-hidden">Инстаграм</span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20">
<path d="M18 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm-8 6a4 4 0 1 1-4 4 4 4 0 0 1 4-4zM2.5 18a.47.47 0 0 1-.5-.5V9h2.1a3.4 3.4 0 0 0-.1 1 6 6 0 1 0 12 0 3.4 3.4 0 0 0-.1-1H18v8.5a.47.47 0 0 1-.5.5zM18 4.5a.47.47 0 0 1-.5.5h-2a.47.47 0 0 1-.5-.5v-2a.47.47 0 0 1 .5-.5h2a.47.47 0 0 1 .5.5z"
fill="#fff" /></svg>
</a></li>
</ul>
</div>
<p class="footer-copyright">
<b>Разработано:</b>
<a href="http://htmlacademy.ru" target="_blank" class="button">HTML Academy</a>
</p>
</div>
</footer>
<section class="modal modal-login">
<h2>Личный кабинет</h2>
<p>Введите свой логин и пароль.</p>
<form class="login-form" action="https://echo.htmlacademy.ru" method="post">
<p>
<label class="visually-hidden" for="user-login">Логин</label>
<input required="" id="user-login" class="login-icon-user" type="text" name="login" placeholder="Логин"></input>
</p>
<p>
<label class="visually-hidden" for="user-password">Пароль</label>
<input required="" id="user-password" class="login-icon-password" type="password" name="password" placeholder="Пароль"></input>
</p>
<p class="login-password-info">
<label class="login-checkbox">
<input type="checkbox" name="remember" class="visually-hidden">
<span class="checkbox-indicator"></span>
Запомните меня
</label>
<a href="#" class="restore">Я забыл пароль!</a>
</p>
<button class="button" type="submit">Войти</button>
</form>
<button class="modal-close" type="button">Закрыть</button>
</section>
<script type="text/javascript" src="js/script.min.js"></script>
</body>
</html>