Hugging Face's logo

Spaces:
Okwutecloud
/
undefined
Running

App Files Community
Okwutecloud commited on
Commit
e0e33ad
·
verified ·
1 Parent(s): 781b02f

I would you to create a UI/UX design of formula one everything about it

Browse files
Files changed (2) hide show
  1. formula1.html +427 -0
  2. index.html +5 -4
formula1.html ADDED
@@ -0,0 +1,427 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>F1 World - Everything Formula 1</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ f1red: '#E10600',
16
+ dark: '#15151E',
17
+ light: '#F4F4F4'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .hero-section {
25
+ background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/sport/1200x630/1');
26
+ background-size: cover;
27
+ background-position: center;
28
+ }
29
+ .news-card:hover {
30
+ transform: translateY(-5px);
31
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
32
+ }
33
+ .driver-card:hover {
34
+ transform: scale(1.03);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-dark text-light">
39
+ <!-- Navigation -->
40
+ <nav class="bg-black py-4 border-b border-gray-800 sticky top-0 z-50">
41
+ <div class="container mx-auto px-4 flex justify-between items-center">
42
+ <div class="flex items-center space-x-8">
43
+ <a href="#" class="text-2xl font-bold text-f1red">F1<span class="text-white">WORLD</span></a>
44
+ <div class="hidden md:flex space-x-6">
45
+ <a href="#" class="hover:text-f1red">News</a>
46
+ <a href="#" class="hover:text-f1red">Schedule</a>
47
+ <a href="#" class="hover:text-f1red">Drivers</a>
48
+ <a href="#" class="hover:text-f1red">Teams</a>
49
+ <a href="#" class="hover:text-f1red">Standings</a>
50
+ </div>
51
+ </div>
52
+ <div class="flex items-center space-x-4">
53
+ <button class="bg-f1red hover:bg-red-800 text-white px-4 py-2 rounded-md hidden md:block">
54
+ Subscribe
55
+ </button>
56
+ <button class="md:hidden">
57
+ <i data-feather="menu" class="text-white"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Hero Section -->
64
+ <section class="hero-section text-white py-24">
65
+ <div class="container mx-auto px-4 text-center">
66
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">F1 2023 SEASON</h1>
67
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Experience the thrill of Formula 1 racing with live updates, exclusive content, and in-depth analysis</p>
68
+ <div class="flex justify-center space-x-4">
69
+ <a href="#" class="bg-f1red hover:bg-red-800 text-white font-bold py-3 px-8 rounded-md">Latest News</a>
70
+ <a href="#" class="bg-transparent hover:bg-gray-800 text-white font-bold py-3 px-8 border border-white rounded-md">Watch Highlights</a>
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <!-- Next Race Banner -->
76
+ <section class="bg-f1red py-4">
77
+ <div class="container mx-auto px-4">
78
+ <div class="flex flex-col md:flex-row items-center justify-between">
79
+ <div class="text-center md:text-left mb-2 md:mb-0">
80
+ <h3 class="font-bold">NEXT RACE: MONACO GRAND PRIX</h3>
81
+ <p class="text-sm">May 28, 2023 - Circuit de Monaco</p>
82
+ </div>
83
+ <div class="flex items-center space-x-4">
84
+ <div class="text-center">
85
+ <div class="text-2xl font-bold">28</div>
86
+ <div class="text-xs">MAY</div>
87
+ </div>
88
+ <div class="hidden md:block border-l border-white h-12"></div>
89
+ <div class="hidden md:flex items-center space-x-2">
90
+ <i data-feather="clock" class="w-4 h-4"></i>
91
+ <span>Race: 15:00 Local Time</span>
92
+ </div>
93
+ <a href="#" class="bg-black hover:bg-gray-900 text-white px-4 py-2 rounded text-sm">View Schedule</a>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Latest News -->
100
+ <section class="py-12 bg-dark">
101
+ <div class="container mx-auto px-4">
102
+ <h2 class="text-2xl font-bold mb-8 border-b border-gray-800 pb-2">Latest News</h2>
103
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
104
+ <!-- News Card 1 -->
105
+ <div class="news-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300">
106
+ <img src="http://static.photos/sport/640x360/2" alt="News" class="w-full h-48 object-cover">
107
+ <div class="p-4">
108
+ <span class="text-f1red text-sm">Race Report</span>
109
+ <h3 class="font-bold text-lg my-2">Verstappen dominates Spanish GP</h3>
110
+ <p class="text-gray-400 text-sm mb-4">Max Verstappen extended his championship lead with a commanding victory...</p>
111
+ <div class="flex justify-between items-center text-sm">
112
+ <span class="text-gray-500">2 hours ago</span>
113
+ <a href="#" class="text-f1red hover:underline">Read More</a>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- News Card 2 -->
119
+ <div class="news-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300">
120
+ <img src="http://static.photos/sport/640x360/3" alt="News" class="w-full h-48 object-cover">
121
+ <div class="p-4">
122
+ <span class="text-f1red text-sm">Team News</span>
123
+ <h3 class="font-bold text-lg my-2">Ferrari announces major upgrades</h3>
124
+ <p class="text-gray-400 text-sm mb-4">Scuderia Ferrari has brought significant upgrades to Monaco in bid to close gap...</p>
125
+ <div class="flex justify-between items-center text-sm">
126
+ <span class="text-gray-500">5 hours ago</span>
127
+ <a href="#" class="text-f1red hover:underline">Read More</a>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- News Card 3 -->
133
+ <div class="news-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300">
134
+ <img src="http://static.photos/sport/640x360/4" alt="News" class="w-full h-48 object-cover">
135
+ <div class="p-4">
136
+ <span class="text-f1red text-sm">Driver Market</span>
137
+ <h3 class="font-bold text-lg my-2">Ricciardo in talks with multiple teams</h3>
138
+ <p class="text-gray-400 text-sm mb-4">Daniel Ricciardo reveals he's been approached by several teams for 2024...</p>
139
+ <div class="flex justify-between items-center text-sm">
140
+ <span class="text-gray-500">1 day ago</span>
141
+ <a href="#" class="text-f1red hover:underline">Read More</a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ <div class="text-center mt-8">
147
+ <a href="#" class="inline-block border border-f1red text-f1red hover:bg-f1red hover:text-white px-6 py-2 rounded-md">View All News</a>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Championship Standings -->
153
+ <section class="py-12 bg-black">
154
+ <div class="container mx-auto px-4">
155
+ <h2 class="text-2xl font-bold mb-8 border-b border-gray-800 pb-2">Championship Standings</h2>
156
+
157
+ <!-- Drivers Standings -->
158
+ <div class="mb-12">
159
+ <div class="flex justify-between items-center mb-4">
160
+ <h3 class="text-xl font-bold">Drivers' Championship</h3>
161
+ <a href="#" class="text-f1red hover:underline text-sm">Full Standings</a>
162
+ </div>
163
+ <div class="overflow-x-auto">
164
+ <table class="w-full">
165
+ <thead>
166
+ <tr class="text-left border-b border-gray-800">
167
+ <th class="pb-2">Pos</th>
168
+ <th class="pb-2">Driver</th>
169
+ <th class="pb-2">Team</th>
170
+ <th class="pb-2 text-right">Points</th>
171
+ </tr>
172
+ </thead>
173
+ <tbody>
174
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
175
+ <td class="py-3">1</td>
176
+ <td class="py-3 flex items-center">
177
+ <img src="http://static.photos/people/40x40/1" alt="Driver" class="w-8 h-8 rounded-full mr-2">
178
+ <span>Max Verstappen</span>
179
+ </td>
180
+ <td class="py-3">
181
+ <span class="text-red-500">Red Bull Racing</span>
182
+ </td>
183
+ <td class="py-3 text-right">144</td>
184
+ </tr>
185
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
186
+ <td class="py-3">2</td>
187
+ <td class="py-3 flex items-center">
188
+ <img src="http://static.photos/people/40x40/2" alt="Driver" class="w-8 h-8 rounded-full mr-2">
189
+ <span>Sergio Perez</span>
190
+ </td>
191
+ <td class="py-3">
192
+ <span class="text-red-500">Red Bull Racing</span>
193
+ </td>
194
+ <td class="py-3 text-right">129</td>
195
+ </tr>
196
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
197
+ <td class="py-3">3</td>
198
+ <td class="py-3 flex items-center">
199
+ <img src="http://static.photos/people/40x40/3" alt="Driver" class="w-8 h-8 rounded-full mr-2">
200
+ <span>Fernando Alonso</span>
201
+ </td>
202
+ <td class="py-3">
203
+ <span class="text-green-500">Aston Martin</span>
204
+ </td>
205
+ <td class="py-3 text-right">99</td>
206
+ </tr>
207
+ </tbody>
208
+ </table>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Constructors Standings -->
213
+ <div>
214
+ <div class="flex justify-between items-center mb-4">
215
+ <h3 class="text-xl font-bold">Constructors' Championship</h3>
216
+ <a href="#" class="text-f1red hover:underline text-sm">Full Standings</a>
217
+ </div>
218
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
219
+ <div class="bg-gray-900 p-4 rounded-lg border-l-4 border-red-500">
220
+ <div class="flex justify-between items-start">
221
+ <div>
222
+ <h4 class="font-bold">1. Red Bull Racing</h4>
223
+ <p class="text-gray-400 text-sm">Honda RBPT</p>
224
+ </div>
225
+ <span class="text-xl font-bold">273</span>
226
+ </div>
227
+ </div>
228
+ <div class="bg-gray-900 p-4 rounded-lg border-l-4 border-silver-500">
229
+ <div class="flex justify-between items-start">
230
+ <div>
231
+ <h4 class="font-bold">2. Aston Martin</h4>
232
+ <p class="text-gray-400 text-sm">Mercedes</p>
233
+ </div>
234
+ <span class="text-xl font-bold">154</span>
235
+ </div>
236
+ </div>
237
+ <div class="bg-gray-900 p-4 rounded-lg border-l-4 border-red-500">
238
+ <div class="flex justify-between items-start">
239
+ <div>
240
+ <h4 class="font-bold">3. Ferrari</h4>
241
+ <p class="text-gray-400 text-sm">Ferrari</p>
242
+ </div>
243
+ <span class="text-xl font-bold">122</span>
244
+ </div>
245
+ </div>
246
+ <div class="bg-gray-900 p-4 rounded-lg border-l-4 border-blue-500">
247
+ <div class="flex justify-between items-start">
248
+ <div>
249
+ <h4 class="font-bold">4. Mercedes</h4>
250
+ <p class="text-gray-400 text-sm">Mercedes</p>
251
+ </div>
252
+ <span class="text-xl font-bold">119</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+
260
+ <!-- Featured Drivers -->
261
+ <section class="py-12 bg-dark">
262
+ <div class="container mx-auto px-4">
263
+ <h2 class="text-2xl font-bold mb-8 border-b border-gray-800 pb-2">Featured Drivers</h2>
264
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
265
+ <!-- Driver 1 -->
266
+ <div class="driver-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300 relative group">
267
+ <img src="http://static.photos/people/320x240/1" alt="Driver" class="w-full h-64 object-cover">
268
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-90"></div>
269
+ <div class="absolute bottom-0 left-0 p-4 w-full">
270
+ <h3 class="font-bold text-xl">Max Verstappen</h3>
271
+ <p class="text-f1red">Red Bull Racing</p>
272
+ <div class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
273
+ <div class="flex items-center text-sm">
274
+ <span class="mr-2">Wins: 5</span>
275
+ <span>Podiums: 7</span>
276
+ </div>
277
+ <a href="#" class="inline-block mt-2 text-white hover:underline text-sm">View Profile</a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Driver 2 -->
283
+ <div class="driver-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300 relative group">
284
+ <img src="http://static.photos/people/320x240/2" alt="Driver" class="w-full h-64 object-cover">
285
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-90"></div>
286
+ <div class="absolute bottom-0 left-0 p-4 w-full">
287
+ <h3 class="font-bold text-xl">Lewis Hamilton</h3>
288
+ <p class="text-blue-400">Mercedes</p>
289
+ <div class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
290
+ <div class="flex items-center text-sm">
291
+ <span class="mr-2">Wins: 0</span>
292
+ <span>Podiums: 3</span>
293
+ </div>
294
+ <a href="#" class="inline-block mt-2 text-white hover:underline text-sm">View Profile</a>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Driver 3 -->
300
+ <div class="driver-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300 relative group">
301
+ <img src="http://static.photos/people/320x240/3" alt="Driver" class="w-full h-64 object-cover">
302
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-90"></div>
303
+ <div class="absolute bottom-0 left-0 p-4 w-full">
304
+ <h3 class="font-bold text-xl">Fernando Alonso</h3>
305
+ <p class="text-green-500">Aston Martin</p>
306
+ <div class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
307
+ <div class="flex items-center text-sm">
308
+ <span class="mr-2">Wins: 0</span>
309
+ <span>Podiums: 5</span>
310
+ </div>
311
+ <a href="#" class="inline-block mt-2 text-white hover:underline text-sm">View Profile</a>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Driver 4 -->
317
+ <div class="driver-card bg-gray-900 rounded-lg overflow-hidden transition-transform duration-300 relative group">
318
+ <img src="http://static.photos/people/320x240/4" alt="Driver" class="w-full h-64 object-cover">
319
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-90"></div>
320
+ <div class="absolute bottom-0 left-0 p-4 w-full">
321
+ <h3 class="font-bold text-xl">Charles Leclerc</h3>
322
+ <p class="text-red-500">Ferrari</p>
323
+ <div class="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
324
+ <div class="flex items-center text-sm">
325
+ <span class="mr-2">Wins: 0</span>
326
+ <span>Podiums: 2</span>
327
+ </div>
328
+ <a href="#" class="inline-block mt-2 text-white hover:underline text-sm">View Profile</a>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Upcoming Races -->
337
+ <section class="py-12 bg-black">
338
+ <div class="container mx-auto px-4">
339
+ <h2 class="text-2xl font-bold mb-8 border-b border-gray-800 pb-2">Upcoming Races</h2>
340
+ <div class="overflow-x-auto">
341
+ <table class="w-full">
342
+ <thead>
343
+ <tr class="text-left border-b border-gray-800">
344
+ <th class="pb-2">Round</th>
345
+ <th class="pb-2">Grand Prix</th>
346
+ <th class="pb-2">Circuit</th>
347
+ <th class="pb-2">Date</th>
348
+ <th class="pb-2">Local Time</th>
349
+ </tr>
350
+ </thead>
351
+ <tbody>
352
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
353
+ <td class="py-3">7</td>
354
+ <td class="py-3">Monaco</td>
355
+ <td class="py-3">Circuit de Monaco</td>
356
+ <td class="py-3">May 28</td>
357
+ <td class="py-3">15:00</td>
358
+ </tr>
359
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
360
+ <td class="py-3">8</td>
361
+ <td class="py-3">Spain</td>
362
+ <td class="py-3">Circuit de Barcelona-Catalunya</td>
363
+ <td class="py-3">June 4</td>
364
+ <td class="py-3">15:00</td>
365
+ </tr>
366
+ <tr class="border-b border-gray-800 hover:bg-gray-900">
367
+ <td class="py-3">9</td>
368
+ <td class="py-3">Canada</td>
369
+ <td class="py-3">Circuit Gilles Villeneuve</td>
370
+ <td class="py-3">June 18</td>
371
+ <td class="py-3">14:00</td>
372
+ </tr>
373
+ </tbody>
374
+ </table>
375
+ </div>
376
+ <div class="text-center mt-8">
377
+ <a href="#" class="inline-block border border-f1red text-f1red hover:bg-f1red hover:text-white px-6 py-2 rounded-md">Full Calendar</a>
378
+ </div>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Footer -->
383
+ <footer class="bg-black py-8 border-t border-gray-800">
384
+ <div class="container mx-auto px-4">
385
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
386
+ <div>
387
+ <h3 class="text-lg font-bold mb-4">F1 World</h3>
388
+ <p class="text-gray-400 text-sm">Your ultimate destination for everything Formula 1 - news, standings, schedules, and more.</p>
389
+ </div>
390
+ <div>
391
+ <h3 class="text-lg font-bold mb-4">Sections</h3>
392
+ <ul class="space-y-2">
393
+ <li><a href="#" class="text-gray-400 hover:text-f1red">News</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-f1red">Schedule</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-f1red">Drivers</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-f1red">Teams</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <h3 class="text-lg font-bold mb-4">Follow Us</h3>
401
+ <div class="flex space-x-4">
402
+ <a href="#" class="text-gray-400 hover:text-f1red"><i data-feather="facebook"></i></a>
403
+ <a href="#" class="text-gray-400 hover:text-f1red"><i data-feather="twitter"></i></a>
404
+ <a href="#" class="text-gray-400 hover:text-f1red"><i data-feather="instagram"></i></a>
405
+ <a href="#" class="text-gray-400 hover:text-f1red"><i data-feather="youtube"></i></a>
406
+ </div>
407
+ </div>
408
+ <div>
409
+ <h3 class="text-lg font-bold mb-4">Subscribe</h3>
410
+ <p class="text-gray-400 text-sm mb-2">Get the latest F1 news delivered to your inbox</p>
411
+ <div class="flex">
412
+ <input type="email" placeholder="Your email" class="bg-gray-900 text-white px-4 py-2 rounded-l-md focus:outline-none w-full">
413
+ <button class="bg-f1red hover:bg-red-800 text-white px-4 py-2 rounded-r-md">Subscribe</button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ <div class="pt-6 border-t border-gray-800 text-center text-sm text-gray-500">
418
+ <p>© 2023 F1 World. Not affiliated with Formula 1 companies. All content for educational purposes only.</p>
419
+ </div>
420
+ </div>
421
+ </footer>
422
+
423
+ <script>
424
+ feather.replace();
425
+ </script>
426
+ </body>
427
+ </html>
index.html CHANGED
@@ -99,10 +99,11 @@
99
  <a href="#" class="text-sm font-medium hover:text-primary">Sporting Goods</a>
100
  <a href="#" class="text-sm font-medium hover:text-primary">Baby Products</a>
101
  <a href="#" class="text-sm font-medium hover:text-primary">Automobile</a>
102
- <a href="#" class="text-sm font-medium hover:text-primary">Books & Media</a>
103
- <a href="#" class="text-sm font-medium hover:text-primary">Jewelry</a>
104
- <a href="#" class="text-sm font-medium hover:text-primary">Toys & Games</a>
105
- <a href="#" class="text-sm font-medium hover:text-primary">Pet Supplies</a>
 
106
  </div>
107
  </div>
108
  </nav>
 
99
  <a href="#" class="text-sm font-medium hover:text-primary">Sporting Goods</a>
100
  <a href="#" class="text-sm font-medium hover:text-primary">Baby Products</a>
101
  <a href="#" class="text-sm font-medium hover:text-primary">Automobile</a>
102
+ <a href="#" class="text-sm font-medium hover:text-primary">Books & Media</a>
103
+ <a href="#" class="text-sm font-medium hover:text-primary">Jewelry</a>
104
+ <a href="#" class="text-sm font-medium hover:text-primary">Toys & Games</a>
105
+ <a href="#" class="text-sm font-medium hover:text-primary">Pet Supplies</a>
106
+ <a href="formula1.html" class="text-sm font-medium hover:text-primary">Sports</a>
107
  </div>
108
  </div>
109
  </nav>