-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (217 loc) · 10.7 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
<!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>Document</title>
<script src="https://cdn.tailwindcss.com" defer></script>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="head-bar justify-between px-6 py-1 hidden lg:flex">
<div>
<img style="height: 30px;" class="px-2" src="assets/jordan-2.svg" alt="">
</div>
<div>
<p>Find a Store | Help | Join Us | Sign In </p>
</div>
</div>
<div class="header px-6">
<img style="height: 50px;" src="assets/nike-4-logo-svgrepo-com.svg" alt="logo" id="logo">
<div class="header-buttons">
<!-- New & Featured Dropdown -->
<div class="dropdown" data-dropdown>
<button class="link underline-btn" data-dropdown-button>New & Featured</button>
<div class="dropdown-menu information-flex">
<div>
<div class="dropdown-heading">New Arrivals</div>
<div class="dropdown-links">
<a href="#" class="link">Men's Shoes</a>
<a href="#" class="link">Women's Shoes</a>
<a href="#" class="link">Kids' Shoes</a>
<a href="#" class="link">New Apparel</a>
</div>
</div>
<div>
<div class="dropdown-heading">Featured Collections</div>
<div class="dropdown-links">
<a href="#" class="link">Nike Air Max</a>
<a href="#" class="link">Nike Dri-FIT</a>
<a href="#" class="link">Nike React</a>
<a href="#" class="link">Nike Tech Pack</a>
</div>
</div>
<div>
<div class="dropdown-heading">Seasonal Picks</div>
<div class="dropdown-links">
<a href="#" class="link">Fall Collection</a>
<a href="#" class="link">Winter Gear</a>
<a href="#" class="link">Summer Essentials</a>
</div>
</div>
</div>
</div>
<!-- Men Dropdown -->
<div class="dropdown" data-dropdown>
<button class="link underline-btn" data-dropdown-button>Men</button>
<div class="dropdown-menu information-flex">
<div>
<div class="dropdown-heading">Men's Footwear</div>
<div class="dropdown-links">
<a href="#" class="link">Running Shoes</a>
<a href="#" class="link">Basketball Shoes</a>
<a href="#" class="link">Lifestyle Shoes</a>
<a href="#" class="link">Training Shoes</a>
</div>
</div>
<div>
<div class="dropdown-heading">Men's Apparel</div>
<div class="dropdown-links">
<a href="#" class="link">T-Shirts</a>
<a href="#" class="link">Jackets</a>
<a href="#" class="link">Hoodies</a>
<a href="#" class="link">Shorts</a>
<a href="#" class="link">Tracksuits</a>
</div>
</div>
<div>
<div class="dropdown-heading">Men's Accessories</div>
<div class="dropdown-links">
<a href="#" class="link">Hats</a>
<a href="#" class="link">Bags</a>
<a href="#" class="link">Socks</a>
<a href="#" class="link">Gloves</a>
</div>
</div>
</div>
</div>
<!-- Women Dropdown -->
<div class="dropdown" data-dropdown>
<button class="link underline-btn" data-dropdown-button>Women</button>
<div class="dropdown-menu information-flex">
<div>
<div class="dropdown-heading">Women's Footwear</div>
<div class="dropdown-links">
<a href="#" class="link">Running Shoes</a>
<a href="#" class="link">Training Shoes</a>
<a href="#" class="link">Lifestyle Shoes</a>
<a href="#" class="link">Sandals</a>
</div>
</div>
<div>
<div class="dropdown-heading">Women's Apparel</div>
<div class="dropdown-links">
<a href="#" class="link">Sports Bras</a>
<a href="#" class="link">Leggings</a>
<a href="#" class="link">Jackets</a>
<a href="#" class="link">T-Shirts</a>
<a href="#" class="link">Dresses</a>
</div>
</div>
<div>
<div class="dropdown-heading">Women's Accessories</div>
<div class="dropdown-links">
<a href="#" class="link">Bags</a>
<a href="#" class="link">Hats</a>
<a href="#" class="link">Scarves</a>
<a href="#" class="link">Gloves</a>
</div>
</div>
</div>
</div>
<!-- Kids Dropdown -->
<div class="dropdown" data-dropdown>
<button class="link underline-btn" data-dropdown-button>Kids</button>
<div class="dropdown-menu information-flex">
<div>
<div class="dropdown-heading">Kids' Footwear</div>
<div class="dropdown-links">
<a href="#" class="link">Running Shoes</a>
<a href="#" class="link">Casual Shoes</a>
<a href="#" class="link">Sports Shoes</a>
<a href="#" class="link">Sandals</a>
</div>
</div>
<div>
<div class="dropdown-heading">Kids' Apparel</div>
<div class="dropdown-links">
<a href="#" class="link">T-Shirts</a>
<a href="#" class="link">Hoodies</a>
<a href="#" class="link">Shorts</a>
<a href="#" class="link">Tracksuits</a>
</div>
</div>
<div>
<div class="dropdown-heading">Kids' Accessories</div>
<div class="dropdown-links">
<a href="#" class="link">Backpacks</a>
<a href="#" class="link">Hats</a>
<a href="#" class="link">Socks</a>
</div>
</div>
</div>
</div>
<!-- Sale Dropdown -->
<div class="dropdown" data-dropdown>
<button class="link underline-btn" data-dropdown-button>Sale</button>
<div class="dropdown-menu information-flex">
<div>
<div class="dropdown-heading">Footwear Sale</div>
<div class="dropdown-links">
<a href="#" class="link">Men's Shoes</a>
<a href="#" class="link">Women's Shoes</a>
<a href="#" class="link">Kids' Shoes</a>
</div>
</div>
<div>
<div class="dropdown-heading">Apparel Sale</div>
<div class="dropdown-links">
<a href="#" class="link">Jackets</a>
<a href="#" class="link">T-Shirts</a>
<a href="#" class="link">Shorts</a>
</div>
</div>
<div>
<div class="dropdown-heading">Accessories Sale</div>
<div class="dropdown-links">
<a href="#" class="link">Bags</a>
<a href="#" class="link">Hats</a>
<a href="#" class="link">Socks</a>
</div>
</div>
</div>
</div>
<!-- Additional Links -->
<a href="#" class="link underline-btn">Customise</a>
<a href="#" class="link underline-btn">SNKRS</a>
</div>
</div>
<!-- <video src="https://assets .codepen.io/39255/output_960.mp4" playsinline="true" webkit-playsinline="true" preload="auto"
muted="muted" class="video-background"></video> -->
<video src="./assets/bg_output_960.mp4" playsinline="true" webkit-playsinline="true" preload="auto" muted="muted" style="object-fit: cover;"
class="video-background "></video>
<!-- This is the container for video which is equal to 5 vh = 5 pages -->
<!-- So here you can add image with height of 1 vh or 1/2 vh -->
<div id="container" class="relative">
<!-- <div class="h-[400vh]"></div> -->
</div>
<div class="bg-white h-[200vh] mt-[-100vh] z-10 text-white">
<div class="max-w-3xl mx-auto text-center bg-gray-900 py-10">
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white">
Nike <span class="text-yellow-500">Just Do It.</span>
</h2>
</div>
<div class="max-w-3xl mx-auto py-8">
<h3 class="text-4xl md:text-6xl lg:text-7xl font-bold ">
Store
</h3>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<!-- Smooth scrolling using lenis -->
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
</body>
</html>