-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (200 loc) · 14.2 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
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
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nike Shoe | Product CARD UI Design</title>
<!-- CSS Link -->
<link rel="stylesheet" href="/assets/css/style.css">
<!-- Javascript Link -->
<script defer type="module" src="/assets/js/script.js"></script>
<!-- Website Icon -->
<!-- <link rel="icon" href="https://www.microsoft.com/favicon.ico?v2" sizes="16x16"> -->
<link rel="icon" href="/assets/img/Nike-Shoe.png" sizes="16x16">
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="h-screen overflow-hidden bg-gradient-to-bl from-theme-pink to-theme-blue flex items-center justify-center">
<!-- box-wrapper -> -top-10 -->
<div class="box-wrapper w-1/2 h-4/5 p-10 relative">
<div class="circle w-6 h-6 border border-gray-100 rounded-full absolute left-0 top-0 transform transition-all hover:scale-150 hover:w-32 hover:h-32 hover:border-4"></div>
<div class="square w-10 h-10 absolute right-0 top-0">
<div class="circle w-full h-full absolute left-0 top-0 rounded-full border-2 border-gray-100 transform transition-all hover:scale-y-125"></div>
<div class="circle w-6 h-6 absolute left-6 top-4 rounded-full border-4 border-gray-100 transform transition-all hover:scale-x-125"></div>
</div>
<div class="arrows w-10 h-10 absolute left-0 -bottom-5">
<div class="arrow w-5 h-5 absolute left-0 top-0 shadow-theme-1 transform transition-all hover:scale-125">
<img src="/assets/img/arrow-down-filled-triangle.png" alt="arrow">
</div>
<div class="arrow w-5 h-5 absolute left-6 top-4 shadow-theme-1 transform transition-all hover:scale-125">
<img src="/assets/img/arrow-down-filled-triangle.png" alt="arrow">
</div>
</div>
<div class="owner-name absolute w-full -bottom-14 left-0 flex justify-center">
<p class="uppercase text-white font-semibold text-xl tracking-morespacing transform transition-all hover:scale-90">
Ansh singh sonkhia
</p>
</div>
<div class="card w-full h-full rounded-2xl bg-gray-100 flex flex-wrap shadow-theme-1">
<!-- left-side -->
<div class="left-side w-1/2 bg-gradient-to-tr from-theme-pink to-theme-blue shadow-theme-2 rounded-2xl transform scale-105">
<!-- Nike Logo -->
<div class="logo w-12 text-white absolute left-6 top-0.5 hover:scale-125 transform transition-all">
<img class="fill-current drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)]" src="/assets/img/nike.png" alt="">
</div>
<!-- Big Number -->
<div class="big-number absolute -right-8 top-0 hover:scale-90 transform transition-all">
<span class="text-15xl font-bold leading-none tracking-tighter font-Outfit bg-gradient-to-tr from-theme-pink to-theme-blue text-transparent bg-clip-text drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)]">
32
</span>
</div>
<!-- Shoe -->
<div class="shoe absolute -bottom-6 left-4 group">
<img class="-rotate-[79deg] drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)] transform transition-all group-hover:rotate-[300deg] duration-1000 group-hover:scale-125" src="/assets/img/Nike-Shoe.png" alt="shoe">
<div class="plus w-8 h-8 rounded-full bg-theme-pink text-white absolute top-10 left-36 drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)] cursor-pointer hover:scale-110 transform transition-all">
<img class="px-1.5 py-1.5" src="/assets/img/plus.png" alt="Pink Plus">
</div>
<div class="plus-2 w-8 h-8 rounded-full bg-theme-blue text-white absolute bottom-14 right-60 drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)] cursor-pointer hover:scale-110 transform transition-all">
<img class="px-1.5 py-1.5" src="/assets/img/plus.png" alt="Blue Plus">
</div>
<!-- Multiplying Shadows of both plus icons -->
<div class="plus w-8 h-8 rounded-full bg-theme-pink text-white absolute top-10 left-36 drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)] cursor-pointer hover:scale-110">
<img class="px-1.5 py-1.5" src="/assets/img/plus.png" alt="Pink Plus">
</div>
<div class="plus-2 w-8 h-8 rounded-full bg-theme-blue text-white absolute bottom-14 right-60 drop-shadow-[3px_-2px_8px_rgba(40,4,64,1)] cursor-pointer hover:scale-110">
<img class="px-1.5 py-1.5" src="/assets/img/plus.png" alt="Blue Plus">
</div>
<!-- Multiplying Shadows -->
</div>
<div class="dots w-full absolute left-0 bottom-2.5 flex justify-center space-x-3">
<span class="w-3.5 h-3.5 bg-white rounded-full block cursor-pointer hover:bg-black group hover:scale-125 transform transition-all"></span>
<span class="w-3.5 h-3.5 bg-black rounded-full block cursor-pointer hover:bg-white hover:scale-125 transform transition-all"></span>
<span class="w-3.5 h-3.5 bg-black rounded-full block cursor-pointer hover:bg-white hover:scale-125 transform transition-all"></span>
</div>
</div>
<!-- right-side -->
<div class="right-side w-1/2 py-6 pr-6 pl-12">
<!-- Autograph -->
<div class="autograph flex justify-end">
<img class="w-32 hover:scale-x-125 transform transition-all" src="/assets/img/Modi-Autograph.png" alt="autograph">
</div>
<!-- Price -->
<div class="price-para mt-2.5">
<span class="price font-bold text-2xl text-gray-700 leading-none tracking-tighter">
₹ 11,895
</span>
<p class="description text-sm mt-1 text-gray-700 ">
First Choice for high-impact Training! The lightweight, packable design lets you keep them close, no matter where your next workout takes you.
</p>
</div>
<!-- filter -->
<div class="fliter mt-10">
<div class="inner flex flex-col space-y-2 text-base text-gray-600">
<div class="size">
<div class="flex">
<div class="w-1/3">
Size
</div>
<div class="w-2/3 flex space-x-4">
<label class="cursor-pointer hover:text-theme-pink transform hover:scale-125 transition-all hover:font-bold">
<span class="S">S</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer hover:text-sky-600 transform hover:scale-125 transition-all hover:font-bold">
<span class="M">M</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer hover:text-theme-blue-dark transform hover:scale-125 transition-all hover:font-bold">
<span class="L">L</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer hover:text-green-600 transform hover:scale-125 transition-all hover:font-bold">
<span class="XL">XL</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer hover:text-red-600 transform hover:scale-125 transition-all hover:font-bold">
<span class="XXL">XXL</span>
<input class="hidden" type="radio" name="size">
</label>
</div>
</div>
</div>
<!-- 2 -->
<div class="colour">
<div class="flex">
<div class="w-1/3">
Colour
</div>
<div class="w-2/3 flex space-x-5 items-center">
<label class="cursor-pointer transform hover:text-theme-pink hover:scale-125 transition-none hover:font-bold">
<span class="w-3 h-3 rounded-full ring ring-theme-pink flex items-center justify-center">
<span class="w-2 h-2 rounded-full bg-theme-pink block"></span>
</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer transform hover:text-sky-600 hover:scale-125 transition-none hover:font-bold">
<span class="w-3 h-3 rounded-full ring ring-sky-600 flex items-center justify-center">
<span class="w-2 h-2 rounded-full bg-sky-600 block"></span>
</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer transform hover:text-theme-blue-dark hover:scale-125 transition-none hover:font-bold">
<span class="w-3 h-3 rounded-full ring ring-theme-blue-dark flex items-center justify-center">
<span class="w-2 h-2 rounded-full bg-theme-blue-dark block"></span>
</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer transform hover:text-green-600 hover:scale-125 transition-none hover:font-bold">
<span class="w-3 h-3 rounded-full ring ring-green-600 flex items-center justify-center">
<span class="w-2 h-2 rounded-full bg-green-600 block"></span>
</span>
<input class="hidden" type="radio" name="size">
</label>
<label class="cursor-pointer transform hover:text-red-600 hover:scale-125 transition-none hover:font-bold">
<span class="w-3 h-3 rounded-full ring ring-red-600 flex items-center justify-center">
<span class="w-2 h-2 rounded-full bg-red-600 block"></span>
</span>
<input class="hidden" type="radio" name="size">
</label>
</div>
</div>
</div>
<!-- 3 -->
<div class="Quantity">
<div class="flex">
<div class="w-1/3">
Quantity
</div>
<div class="w-2/3 flex space-x-5 items-center ">
<div class="increment flex bg-gray-400 rounded-full">
<span class="rounded-full font-bold flex items-center justify-center w-4 px-3 cursor-pointer hover:text-white hover:bg-theme-blue hover:scale-150 transform transition-all">
-
</span>
<span class="flex bg-white px-3">
1
</span>
<span class="rounded-full font-bold flex w-4 items-center justify-center px-3 cursor-pointer hover:text-white hover:bg-theme-blue hover:scale-150 transform transition-all">
+
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Buy Now Button -->
<div class="buy-now mt-10 flex justify-center w-full">
<button class="relative group bg-theme-pink hover:bg-pink-600 text-white px-3 py-2 w-2/3 rounded-full uppercase transition-all transform hover:scale-90 flex justify-around items-center">
<span class="my-auto font-medium group-hover:font-semibold">Buy Now</span>
<span class="bg-theme-blue w-6 h-6 my-auto group-hover:font-semibold rounded-full group-hover:scale-125 transform transition-all">
<span class="leading-6.5 -tracking-normal">+</span>
</span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- video duration: 44:12 -->
<!-- video link: https://youtu.be/H0I8_cCUfV0 -->