-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproduct.html
More file actions
255 lines (211 loc) · 11.8 KB
/
product.html
File metadata and controls
255 lines (211 loc) · 11.8 KB
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<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">
<title>Product</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container header__wrap">
<div class="header__left">
<a href="index.html" class="header__logo">
<img src="img/logo.svg" alt="">
</a>
<img src="img/search.svg" alt="search">
</div>
<div class="header__right">
<nav><img class="header__item" src="img/menu.svg" alt="menu"></nav>
<a href="#">
<img class="header__item" src="img/profile.svg" alt="profile">
</a>
<div class="shop">
<a href="cart.html">
<img class="header__shop" src="img/shop.svg" alt="shop">
<span class="count">5</span>
</a>
</div>
</div>
</div>
</header>
<main class="product__main">
<header class="header__menu">
<div class="container header__wrap">
<div class="header__menu__left">
<h2 class="decor">NEW ARRIVALS </h2>
</div>
<ul class="breadcrumbs">
<li class="breadcrumbs-item">
<a class="breadcrumbs-link" href="index.html">HOME</a>
</li>
<li class="breadcrumbs-item">
<a class="breadcrumbs-link" href="#">MEN</a>
</li>
<li class="breadcrumbs-item">
<span class="breadcrumbs-link current">NEW ARRIVALS</span>
</li>
</ul>
</div>
</header>
<section class="slider">
<img class="slider__img" src="./img/product.png" alt="slide">
<button class="slider-btn slider-btn-left">
<svg class="vector" width="13" height="23" viewBox="0 0 13 23" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.6998 3.7499L4.9498 11.4999L12.6998 19.2499L11.1498 22.3499L0.299805 11.4999L11.1498 0.649902L12.6998 3.7499Z" />
</svg>
</button>
<button class="slider-btn slider-btn-right">
<svg class="vector" width="13" height="23" viewBox="0 0 13 23" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.299805 19.2499L8.0498 11.4999L0.299805 3.7499L1.8498 0.649902L12.6998 11.4999L1.8498 22.3499L0.299805 19.2499Z" />
</svg>
</button>
</section>
<section class="about__product">
<div class="wrap about-wrap">
<section class="product">
<h3>WOMEN COLLECTION </h3>
<h2>MOSCHINO CHEAP AND CHIC</h2>
<p>Compellingly actualize fully researched processes before proactive outsourcing.
Progressively
syndicate collaborative architectures before cutting-edge services. Completely visualize
parallel
core competencies rather than exceptional portals.</p>
<p class="price">$561</p>
</section>
<section class="filtres">
<div class="container filtres__wrap">
<div class="filter">
<details class="filter__center__category">
<summary> CHOOSE COLOR <img src="./img/Vector.png" alt="filter" class="filter__img">
</summary>
</details>
<details class="filter__center__category">
<summary>CHOOSE SIZE<img src="./img/Vector.png" alt="filter" class="filter__img">
</summary>
</details>
<details class="filter__center__category">
<summary>QUANTITY<img src="./img/Vector.png" alt="filter" class="filter__img"></summary>
</details>
</div>
</div>
</section>
<button class="btn">
<svg class="btn__icon__shop" width="32" height="29" viewBox="0 0 32 29"
xmlns="http://www.w3.org/2000/svg">
<path
d="M26.2009 29C25.5532 28.9738 24.9415 28.6948 24.4972 28.2227C24.0529 27.7506 23.8114 27.1232 23.8245 26.475C23.8376 25.8269 24.1043 25.2097 24.5673 24.7559C25.0303 24.3022 25.6527 24.048 26.301 24.048C26.9493 24.048 27.5717 24.3022 28.0347 24.7559C28.4977 25.2097 28.7644 25.8269 28.7775 26.475C28.7906 27.1232 28.549 27.7506 28.1047 28.2227C27.6604 28.6948 27.0488 28.9738 26.401 29H26.2009ZM6.75293 26.32C6.75293 25.79 6.91011 25.2718 7.20459 24.8311C7.49907 24.3904 7.91764 24.0469 8.40735 23.844C8.89705 23.6412 9.43594 23.5881 9.95581 23.6915C10.4757 23.7949 10.9532 24.0502 11.328 24.425C11.7028 24.7998 11.9581 25.2773 12.0615 25.7972C12.1649 26.317 12.1118 26.8559 11.9089 27.3456C11.7061 27.8353 11.3626 28.2539 10.9219 28.5483C10.4812 28.8428 9.96304 29 9.43298 29C9.08087 29.0003 8.73212 28.9311 8.40674 28.7966C8.08136 28.662 7.78569 28.4646 7.53662 28.2158C7.28755 27.9669 7.09001 27.6713 6.9552 27.3461C6.82039 27.0208 6.75098 26.6721 6.75098 26.32H6.75293ZM10.553 20.686C10.2935 20.6868 10.0409 20.6024 9.83411 20.4457C9.62727 20.2891 9.47758 20.0689 9.40796 19.819L4.57495 2.36401H1.18201C0.868521 2.36401 0.567859 2.23947 0.346191 2.01781C0.124523 1.79614 0 1.49549 0 1.18201C0 0.868519 0.124523 0.567873 0.346191 0.346205C0.567859 0.124537 0.868521 5.81268e-06 1.18201 5.81268e-06H5.46301C5.7225 -0.00080736 5.97504 0.0837201 6.18176 0.240568C6.38848 0.397416 6.53784 0.617884 6.60693 0.868006L11.4399 18.323H24.6179L29.001 8.27501H14.401C14.2428 8.27961 14.0854 8.25242 13.9379 8.19507C13.7904 8.13771 13.6559 8.05134 13.5424 7.94108C13.4288 7.83082 13.3386 7.69891 13.277 7.55315C13.2154 7.40739 13.1836 7.25075 13.1836 7.0925C13.1836 6.93426 13.2154 6.77762 13.277 6.63186C13.3386 6.4861 13.4288 6.35419 13.5424 6.24393C13.6559 6.13367 13.7904 6.0473 13.9379 5.98994C14.0854 5.93259 14.2428 5.90541 14.401 5.91001H30.814C31.0097 5.90996 31.2022 5.95866 31.3744 6.05172C31.5465 6.14478 31.6928 6.27926 31.7999 6.44301C31.9078 6.60729 31.9734 6.79569 31.9908 6.99145C32.0083 7.18721 31.9771 7.38424 31.9 7.565L26.495 19.977C26.4026 20.1876 26.251 20.3668 26.0585 20.4927C25.866 20.6186 25.641 20.6858 25.411 20.686H10.553Z" />
</svg> Add to Cart
</button>
</div>
</section>
<div class="container cards__wrap">
<figure class="cards__box">
<img src="./img/man_catalog_4.jpg" alt="cards" class="cards__img">
<div class="cards__box__shadow">
<a href="cart.html">
<button class="btn">
<img src="./img/shop.svg" alt="icon" class="btn__icon"> Add to Cart </button>
</a>
</div>
<figcaption class="cards__text">
<a href="#" class="cards__name">
<h3> ELLERY X M'O CAPSULE</h3>
</a>
<p class="cards__content">
Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym
Ellery teams up with Moda Operandi.
</p>
<span class="cards__price">
$52.00
</span>
</figcaption>
</figure>
<figure class="cards__box">
<video width="360" height="420" controls="controls" poster="./img/poster.jpg" autoplay muted>
<source src="./img/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Тег video не поддерживается вашим браузером.
</video>
<figcaption class="cards__text">
<a href="#" class="cards__name">
<h3> ELLERY X M'O CAPSULE</h3>
</a>
<p class="cards__content">
Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym
Ellery teams up with Moda Operandi.
</p>
<span class="cards__price">
$52.00
</span>
</figcaption>
</figure>
<figure class="cards__box">
<img src="./img/cards_6.jpg" alt="cards" class="cards__img">
<div class="cards__box__shadow">
<a href="cart.html">
<button class="btn">
<img src="./img/shop.svg" alt="icon" class="btn__icon"> Add to Cart </button>
</a>
</div>
<figcaption class="cards__text">
<a href="product.html" class="cards__name">
<h3> ELLERY X M'O CAPSULE</h3>
</a>
<p class="cards__content">
Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym
Ellery teams up with Moda Operandi.
</p>
<span class="cards__price">
$52.00
</span>
</figcaption>
</figure>
</div>
</main>
<footer class="footer">
<section class="footer__subscribe">
<div class="footer__subscribe__container">
<article class="feedback">
<img src="./img/lady__footer.png" alt="avatar" class="avatar">
<blockquote>
“Vestibulum quis porttitor dui! Quisque viverra nunc mi, <i>a
pulvinar purus condimentum</i>“
</blockquote>
</article>
<article class="subsribe__form">
<h3>SUBSCRIBE</h3>
<p>FOR OUR NEWLETTER AND PROMOTION</p>
</h3>
<form action="#">
<input class="subscribe-field" type="email" placeholder="Enter Your Email" required>
<input class="subscribe-btn" type="submit" value="Subscribe">
</form>
</article>
</div>
</section>
<section class="container footer__contacts">
<div class="brand">
<p> © 2021 Brand All Rights Reserved.</p>
</div>
<div class="network">
<span>
<a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
</span>
<span>
<a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</span>
<span>
<a href="https://www.pinterest.ru/" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</span>
<span>
<a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</span>
</div>
</section>
</footer>
</body>
</html>