-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (181 loc) · 8.25 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/icons/favicon.png">
<!-- CSS -->
<link rel="stylesheet" href="src/style.css">
<title>Frontend Mentor | E-commerce product page</title>
</head>
<body class="">
<!-- NAVBAR -->
<header class="mb-20 max-tablet:mb-0">
<div class="navbar">
<div class="flex gap-4">
<!-- BURGER MENU -->
<img class="hamburger-icon w-4 h-4 mt-1 content-center hidden max-tablet:block"
src="assets/images/icons/icon-menu.svg" alt="Hamburger menu icon">
<div class="hamburger-menu">
<img class="close-icon mb-12" src="assets/images/icons/icon-close.svg" alt="Close icon">
<nav>
<ul>
<li class="hamburger-links">Collections</li>
<li class="hamburger-links">Men</li>
<li class="hamburger-links">Women</li>
<li class="hamburger-links">About</li>
<li class="hamburger-links">Contact</li>
</ul>
</nav>
</div>
<!-- ----------- -->
<img class="cursor-pointer w-logo" src="assets/images/logo.svg" alt="Sneakers logo">
</div>
<div class="mx-10 h-2/4 max-tablet:hidden">
<nav>
<ul class="flex gap-8 max-desktop:gap-5">
<li class="link"><a href="#">Collections</a></li>
<li class="link"><a href="#">Men</a></li>
<li class="link"><a href="#">Women</a></li>
<li class="link"><a href="#">About</a></li>
<li class="link"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="flex justify-end">
<div class="cart-indicator"></div>
<img class="cart-icon" src="assets/images/icons/icon-cart-inactive copy.svg" alt="Cart icon">
<img class="avatar" src="assets/images/image-avatar.png" alt="User avatar">
</div>
</div>
<!-- NAV BORDER -->
<div class="border mx-48 opacity-[0.09] max-tablet:hidden"></div>
<!-- CART -->
<div class="cart-container">
<div class="flex h-16 rounded-t-xl">
<p class="font-bold self-center ml-5">Cart</p>
</div>
<div class="border opacity-[0.09]"></div>
<!-- EMPTY -->
<div class="empty-cart">
<p class="font-bold text-darkGrayishBlue text-base">Your cart is empty</p>
</div>
<!-- FILLED -->
<div class="filled-cart">
<div class="flex justify-evenly pb-5 max-tablet:justify-between max-tablet:mx-7">
<img class="w-16 rounded-md" src="assets/images/sneakers/image-product-1-thumbnail.jpg"
alt="Cart sneaker image">
<div class="text-darkGrayishBlue font-medium self-center">
<p>Fall limited edition sneakers</p>
<p>125.00 x
<span class="sneakers-number-cart"></span>
<span class="total-sneakers font-bold text-black"></span>
</p>
</div>
<img class="trash-icon h-5 w-4 self-center cursor-pointer" src="assets/images/icons/icon-delete.svg"
alt="Trash icon">
</div>
<div class="checkout-button">
<a class="font-bold text-white" href="#">Checkout</a>
</div>
</div>
</div>
</header>
<main class="main-container">
<!-- BIG SNEAKER IMAGES -->
<section class="flex flex-col">
<div id="sneaker" class="bigSneaker-container">
<a href="assets/images/sneakers/image-product-1.jpg" data-pswp-width="600" data-pswp-height="600"
target="_blank" onclick="return false;">
<button class="mobileLightboxButtons previousLightboxBtn left-[4%]">
<img src="assets/images/icons/icon-previous.svg" alt="Previous icon"></button>
<img class="bigSneaker-img active" src="assets/images/sneakers/image-product-1.jpg" alt="Sneaker first image">
<img class="bigSneaker-img inactive" src="assets/images/sneakers/image-product-2.jpg"
alt="Sneaker second image">
<img class="bigSneaker-img inactive" src="assets/images/sneakers/image-product-3.jpg"
alt="Sneaker third image">
<img class="bigSneaker-img inactive" src="assets/images/sneakers/image-product-4.jpg"
alt="Sneaker fourth image">
<button class="mobileLightboxButtons nextLightboxBtn right-[4%]">
<img src="assets/images/icons/icon-next.svg" alt="Next icon"></button>
</a>
</div>
<!-- THUMBNAILS -->
<div id="sneakers" class="flex gap-7 max-bigDesktop:justify-center">
<div class="thumbnail-container">
<a href="assets/images/sneakers/image-product-1.jpg" data-pswp-width="600" data-pswp-height="600"
target="_blank">
<img class="rounded-lg hover:opacity-40" src="assets/images/sneakers/image-product-1-thumbnail.jpg"
alt="Sneaker first image">
</a>
</div>
<div class="thumbnail-container">
<a href="assets/images/sneakers/image-product-2.jpg" data-pswp-width="600" data-pswp-height="600"
target="_blank" data-pswp-width="1669" data-pswp-height="2500" target="_blank">
<img class="rounded-lg hover:opacity-40" src="assets/images/sneakers/image-product-2-thumbnail.jpg"
alt="Sneaker second image">
</a>
</div>
<div class="thumbnail-container">
<a href="assets/images/sneakers/image-product-3.jpg" data-pswp-width="600" data-pswp-height="600"
target="_blank">
<img class="rounded-lg hover:opacity-40" src="assets/images/sneakers/image-product-3-thumbnail.jpg"
alt="Sneaker third image">
</a>
</div>
<div class="thumbnail-container">
<a href="assets/images/sneakers/image-product-4.jpg" data-pswp-width="600" data-pswp-height="600"
target="_blank">
<img class="rounded-lg hover:opacity-40" src="assets/images/sneakers/image-product-4-thumbnail.jpg"
alt="Sneaker fourth image">
</a>
</div>
</div>
</section>
<!-- INFO CONTAINER -->
<section class="info-container">
<h1 class="mb-4 uppercase text-xs text-orange font-semibold tracking-widest">Sneaker Company</h1>
<h2 class="sneakers-title">Fall Limited Edition <br> Sneakers</h2>
<p class="text-darkGrayishBlue mb-6">
These low-profile sneakers are your perfect casual wear companion. Featuring a
durable rubber outer sole, they’ll withstand everything the weather can offer.
</p>
<div class="mb-8 max-tablet:flex max-tablet:justify-between">
<div class="flex gap-4">
<p class="font-bold text-3xl mb-1 max-desktop:text-2xl">$125.00</p>
<p class="fifty-percent">50%</p>
</div>
<p class="twoHundredAndFiftyDollars">$250.00</p>
</div>
<div class="flex gap-4 max-tablet:flex-col">
<div class="mathButtons-container">
<button class="cursor-pointer">
<i class="math-icon fa-sharp fa-solid fa-minus"></i>
</button>
<p class="font-bold self-center"><span class="sneakers-number">0</span></p>
<button class="cursor-pointer">
<i class="math-icon fa-sharp fa-solid fa-plus"></i>
</button>
</div>
<div>
<a class="addToCart-button">
<img class="self-center w-5 h-5 mr-4 cursor-pointer" src="assets/images/icons/icon-add-cart.svg"
alt="Cart icon">
<span class="self-center text-white font-semibold">Add to cart</span>
</a>
</div>
</div>
</section>
</main>
<footer class="fixed left-0 bottom-0 w-full text-center max-tablet:text-xs">
Challenge by <a class="text-orange underline font-bold" href="https://www.frontendmentor.io?ref=challenge"
target="_blank">Frontend Mentor</a>.
Coded by <a class="text-orange underline font-bold" href="https://github.com/KendiHashimoto" target="_blank">Kendi
Hashimoto</a>.
</footer>
<!-- SCRIPTS -->
<script type="module" src="src/main.js"></script>
<script type="module" src="src/photoswipe.js"></script>
<script src="https://kit.fontawesome.com/2196e33625.js" crossorigin="anonymous"></script>
</body>
</html>