-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (148 loc) · 6.96 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce product page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="relative js-header">
<nav class="nav flex-row relative">
<img class="nav__menu-button js-menu-button pointer" src="./images/icon-menu.svg" alt="open menu button"
tabindex="0">
<img class="nav__logo" src="./images/logo.svg" alt="sneakers">
<ul class="nav__list flex-row" style="--gap: 1.875em" role="list">
<li><a href="#">collections</a></li>
<li><a href="#">men</a></li>
<li><a href="#">women</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
<div class="cart-icon push-right relative pointer" tabindex="0">
<span class="cart-icon__amount br-2 text-neutral-100">0</span>
<img class="cart-icon__icon" src="./images/icon-cart--black.svg" alt="your cart">
</div>
<img class="nav__profile-image br-full pointer" src="./images/image-avatar.png" alt="your profile image"
tabindex="0">
<div class="cart br-2 remove">
<p class="cart__title padding-22 font-bold text-neutral-700">Cart</p>
<hr>
<div class="cart__content padding-22 padding-bottom-32">
<p class="empty-msg text-center remove">Your cart is empty!</p>
<ul class="cart__items" role="list">
</ul>
<button class="button cart__button" data-type="primary" aria-label="Checkout">Checkout</button>
</div>
</div>
</nav>
<!-- side nav-->
<div class="side-container">
<div class="side-nav js-side-nav bg-neutral-100" style="--top-space: 2.25rem;">
<button class="icon-btn" data-type="close" type="button" aria-label="Close"></button>
<ul class="grid-flow" style="--gap: 1.375rem; margin-top: 3rem;" role="list">
<li>
<a class="font-bold uppercase text-neutral-700" href="#">collections</a>
</li>
<li>
<a class="font-bold uppercase text-neutral-700" href="#">men</a>
</li>
<li>
<a class="font-bold uppercase text-neutral-700" href="#">women</a>
</li>
<li>
<a class="font-bold uppercase text-neutral-700" href="#">about</a>
</li>
<li>
<a class="font-bold uppercase text-neutral-700" href="#">contact</a>
</li>
</ul>
</div>
<div class="overlay js-overlay bg-neutral-800"></div>
</div>
</header>
<main id="0" class="main-section grid-flow grid--2up space-bottom" style="--bottom-space: 5rem;">
<section class="img-section grid-flow">
<div class="relative">
<img class="img-section__large-img" data-number="1" src="./images/image-product-1.jpg" alt="product image">
<button class="img-section__icon-btn icon-btn" data-type="left-arrow">
</button>
<button class="img-section__icon-btn icon-btn" data-type="right-arrow">
</button>
</div>
<div class="thumbnails grid-flow remove">
<div data-type="active" data-number="1">
<img src="./images/image-product-1-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="2">
<img src="./images/image-product-2-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="3">
<img src="./images/image-product-3-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="4">
<img src="./images/image-product-4-thumbnail.jpg" alt="product thumbnail">
</div>
</div>
</section>
<section class="context-section">
<p class="context-section__company uppercase text-primary-400 font-bold ls-1 font-size-300">Sneaker Company</p>
<h2 class="context-section__name">Fall Limited Edition Sneakers
</h2>
<p class="context-section__description text-neutral-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Est velit,
illum, laboriosam nesciunt eius cumque consequuntur ullam distinctio unde excepturi libero. Sit laudantium a
quidem voluptate molestias, repellendus ullam culpa?</p>
<div class="context-section__price-container flex-row">
<span class="flex-row align-center" style="--gap: 1rem;">
<span class="context-section__discounted-price font-28-44 font-bold text-neutral-700">$125.00</span>
<span class="chip context-section__chip bg-primary-100 br-2 text-primary-400">50%</span>
</span>
<span class="context-section__original-price font-bold line-through ls-1">$250.00</span>
</div>
<div class="grid-flow" style="--gap: 1rem;">
<div class="button bg-neutral-200 text-neutral-700" data-type="number"
aria-label="increase or decrease the amount" data-min="1" data-max="5" data-number="1">
<img class="pointer" data-type="minus" src="./images/icon-minus.svg" alt="minus" tabindex="0">
<span>1</span>
<img class="pointer" src="./images/icon-plus.svg" data-type="plus" alt="plus" tabindex="0">
</div>
<button class="button purchase-button flex-row flex-center" data-type="primary">
<span class="purchase-text">Purchase</span>
</button>
</div>
</section>
<div class="lightbox-gallery js-lightbox remove">
<div class="overlay lightbox__overlay bg-neutral-800"></div>
<section class="img-section lightbox-gallery__content grid-flow">
<button class="icon-btn lightbox-gallery__icon-btn" data-type="close" type="button" aria-label="Close"></button>
<div class="relative">
<img class="img-section__large-img" data-number="1" src="./images/image-product-1.jpg" alt="product image">
<button class="img-section__icon-btn icon-btn" data-type="left-arrow">
</button>
<button class="img-section__icon-btn icon-btn" data-type="right-arrow">
</button>
</div>
<div class="thumbnails js-thumbnails grid-flow padding-inline-48 remove">
<div data-type="active" data-number="1">
<img src="./images/image-product-1-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="2">
<img src="./images/image-product-2-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="3">
<img src="./images/image-product-3-thumbnail.jpg" alt="product thumbnail">
</div>
<div data-number="4">
<img src="./images/image-product-4-thumbnail.jpg" alt="product thumbnail">
</div>
</div>
</section>
</div>
</main>
<script src="./app.js"></script>
</body>
</html>