-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
485 lines (434 loc) · 35.8 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diljit Dosanjh - Celebrity Landing Page</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" sizes="96x96" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="">
<div id="top">
<nav class="bg-gradient-to-r from-yellow-500 via-black to-black">
<div class="container mx-auto px-4 flex items-center justify-between h-16">
<!-- Logo Section -->
<a href="./index.html" class="flex items-center hover:opacity-80">
<img src="images/logo.png" alt="Diljit Dosanjh" class="rounded-full w-12 h-12 bg-gray-300">
<div class="ml-3">
<p class="text-yellow-400 text-lg font-semibold">Diljit Dosanjh</p>
<hr class="border-yellow-300 w-full my-1">
<p class="text-gray-100 text-xs">A Global Icon of Music and Cinema</p>
</div>
</a>
<!-- Desktop Navigation -->
<ul class="hidden lg:flex space-x-4">
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="bio.html">Bio</a></li>
<li><a class="nav-link" href="music.html">Music</a></li>
<li><a class="nav-link" href="videos.html">Videos</a></li>
<li><a class="nav-link" href="concerts.html">Concerts</a></li>
<li><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<!-- Mobile Menu Button -->
<button class="lg:hidden p-2 text-gray-400 rounded-md hover:bg-yellow-500 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M120 224h784v64H120zm0 272h784v64H120zm0 272h784v64H120z"/>
</svg>
</button>
</div>
<!-- Mobile Navigation -->
<div class="lg:hidden hidden" id="mobile-menu">
<ul class="px-4 py-2 space-y-2">
<li><a class="mobile-nav-link" href="index.html">Home</a></li>
<li><a class="mobile-nav-link" href="bio.html">Bio</a></li>
<li><a class="mobile-nav-link" href="music.html">Music</a></li>
<li><a class="mobile-nav-link" href="videos.html">Videos</a></li>
<li><a class="mobile-nav-link" href="concerts.html">Concerts</a></li>
<li><a class="mobile-nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
<!-- chat with us -->
<div class="fixed bottom-4 right-4 z-10">
<a href="#top">
<button
class="fixed bottom-5 left-5 z-50 bg-gray-800 text-white py-2 px-4 rounded-full shadow-md transition duration-1000 ease-in-out hover:bg-gray-600 focus:outline-none flex items-center justify-center"><svg
stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5" height="1em"
width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z">
</path>
</svg></button>
</a>
</div>
<!-- main background imagee -->
<div class="hero min-h-[75vh] flex items-center justify-center bg-blend-multiply" style="background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(./images/hero.jpg); background-size:cover;background-position:center">
<!-- -->
<div class="hero-text text-center max-w-3xl"
style="transform:translateY(20px)">
<h1 class="text-white text-5xl mt-32 md:text-4xl lg:text-6xl font-bold hover:text-yellow-400">Diljit Dosanjh</h1>
<p class="text-gray-300 max-w-lg mx-auto my-6 text-lg leading-relaxed hover:animate-pulse">A Global Icon of Music and Cinema</p>
<a href="contact.html" >
<button class="relative p-0.5 inline-flex items-center justify-center font-bold overflow-hidden group rounded-md cursor-pointer">
<span class="w-full h-full bg-gradient-to-br from-yellow-400 via-red-500 to-pink-600 group-hover:from-red-400 group-hover:via-pink-500 group-hover:to-yellow-300 absolute"></span>
<span class="relative px-6 py-3 transition-all ease-out bg-gray-900 rounded-md group-hover:bg-opacity-0 duration-400">
<span class="relative text-white">Join the Revolution</span></span></button></a>
</div>
</div>
</div>
<!-- about heading -->
<div class="relative text-center mt-8 mb-8 overflow-hidden">
<h1 class="text-3xl font-bold text-gray-900 tracking-wide leading-tight ml-10 mr-10">About Diljit Dosanjh
</h1>
<p class="md:max:flex ml-10 mr-10">A Global Icon of Music and Cinema</p>
</div>
<div class="relative">
<div class="absolute inset-0 overflow-hidden" style="background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(./images/about-2.jpg); background-size:cover;background-position:center">
<div class="absolute top-0 left-0 w-0 h-0 border-t-64 border-r-64 border-gray-800"></div>
</div>
<div
class="relative z-10 flex flex-col md:flex-row items-center justify-center mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
<div class="md:w-5/12 relative rounded-lg overflow-hidden w-full h-96 md:h-auto">
<img alt="Diljit Dosanjh" loading="lazy" width="500"
height="500" decoding="async" data-nimg="1"
class="w-full h-full rounded-lg shadow-lg object-cover hover:scale-105"
style="color:transparent" src="images/about.jpg">
</div>
<div class="md:w-7/12 mt-8 md:mt-0 md:ml-8 text-white" >
<h2 class="text-3xl font-bold">About Diljit Dosanjh</h2>
<span class="text-gray-400">A Global Icon of Music and Cinema</span>
<p class="text-base leading-relaxed mt-4">Diljit Dosanjh is a trailblazer who has redefined the Punjabi music and film industries. Known for his unique blend of traditional Punjabi sounds with contemporary pop, hip-hop, and electronic beats, Diljit has created chart-topping hits like "Proper Patola," "Laembadgini," and "Do You Know." His soulful voice and charismatic presence have earned him a massive global following.
<br><br>
Beyond music, Diljit has proven his versatility as an actor in critically acclaimed films like "Udta Punjab" and "Phillauri." Whether on stage or on screen, his ability to connect with audiences and break cultural boundaries has made him a true international star, bridging the gap between Eastern and Western entertainment.</p>
</div>
</div>
</div>
<!-- showcase heading -->
<div>
<div class="relative text-center mt-8 mb-8 overflow-hidden">
<h1 class="text-3xl font-bold text-gray-900 tracking-wide leading-tight ml-10 mr-10">Diljit Dosanjh Showcase</h1>
<p class="md:max:flex ml-10 mr-10">Explore Our Highlights</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 bg-gradient-to-r from-gray-800 to-gray-300 py-6 px-6 rounded-lg">
<!-- music -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg">
<img alt="Music"
loading="lazy"
width="500"
height="500"
decoding="async"
data-nimg="1"
class="w-full rounded-t-lg"
style="color:transparent"
src="images/music-production.jpg">
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Music</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 512 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z">
</path>
</svg>
<p class="font-semibold text-lg">Music</p>
<p class="text-sm mt-2">Step into the studio with Diljit Dosanjh and experience the magic of crafting soulful Punjabi melodies and vibrant beats that transcend boundaries and captivate hearts globally.</p>
<a href="music.html">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Music</span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
<!-- video -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg"><img alt="Music Video Creation"
loading="lazy" width="500" height="500" decoding="async" data-nimg="1"
class="w-full rounded-t-lg" style="color:transparent" src="images/video-production.jpg">
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Video</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 576 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z">
</path>
</svg>
<p class="font-semibold text-lg">Video</p>
<p class="text-sm mt-2">Feel the vibe! Collaborate with Diljit Dosanjh on an incredible video project and bring his charismatic energy and soulful music to life like never before.</p>
<a href="videos.html#vid">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Video </span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
<!-- movie -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg"><img alt="Event Collaborations"
loading="lazy" width="500" height="500" decoding="async" data-nimg="1"
class="w-full rounded-t-lg" style="color:transparent" src="images/movie.jpg">
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Movies</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 448 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z">
</path>
</svg>
<p class="font-semibold text-lg">Movies</p>
<p class="text-sm mt-2">Discover the star power of Diljit Dosanjh on the big screen! Explore his unforgettable performances and captivating roles that bring stories to life in every frame.</p>
<a href="videos.html#movies">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Movies</span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
<!-- events -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg"><img alt="Live Performances"
loading="lazy" width="500 px" height="500 px" decoding="async" data-nimg="1"
class="w-full rounded-t-lg" style="color:transparent" src="images/live-performance.jpg" >
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Events</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 352 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z">
</path>
</svg>
<p class="font-semibold text-lg">Events</p>
<p class="text-sm mt-2">Experience the magic live! Join Diljit Dosanjh at exclusive events where his electrifying performances and magnetic presence will leave you spellbound.</p>
<a href="concerts.html">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Events</span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
<!-- tour -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg"><img alt="Event Collaborations"
loading="lazy" width="500" height="500" decoding="async" data-nimg="1"
class="w-full rounded-t-lg" style="color:transparent" src="images/tour.jpg">
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Tours</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 448 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z">
</path>
</svg>
<p class="font-semibold text-lg">Tours</p>
<p class="text-sm mt-2">Get ready for an unforgettable journey! Join Diljit Dosanjh on his event tours and experience his electrifying performances, heartwarming music, and unmatched energy live in your city.</p>
<a href="concerts.html">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Tours</span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
<!-- merchandise -->
<div class="group relative overflow-hidden">
<div class="bg-gray-800 bg-opacity-70 text-white rounded-lg"><img alt="Exclusive Merchandise"
loading="lazy" width="500" height="500" decoding="async" data-nimg="1"
class="w-full rounded-t-lg" style="color:transparent" src="images/joinus.jpg">
<div class="title p-4 bg-gray-800 text-white absolute bottom-0 left-0 right-0">
<p class="font-semibold text-lg flex justify-center items-center">Join Us</p>
</div>
<div
class="bg-gray-800 bg-opacity-70 text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 p-4 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center rounded-lg">
<div class="text-center"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
viewBox="0 0 640 512" class="mb-2 text-4xl mx-auto animate-pulse" height="40"
width="40" xmlns="http://www.w3.org/2000/svg">
<path
d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z">
</path>
</svg>
<p class="font-semibold text-lg">Join Us</p>
<p class="text-sm mt-2">
Join us and be part of the official Diljit Dosanjh community—stay connected, celebrate, and share the vibes!</p> <a
href="contact.html">
<div class="flex items-center justify-center mt-4 hover:scale-105"><span
class="text-sm">Join Us</span><svg stroke="currentColor"
fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
class="ml-2 animate-pulse" height="18" width="18"
xmlns="http://www.w3.org/2000/svg">
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z">
</path>
</svg></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fixedd bottom -->
<div class="relative bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 text-white py-12 px-4 ">
<div class="absolute inset-0 overflow-hidden"><img alt="Diljit Dosanjh Concert Banner" loading="lazy"
decoding="async" data-nimg="fill" class="absolute inset-0 object-cover opacity-60"
style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;object-fit:cover;color:transparent"
src="images/concert.jpg"></div>
<div class="relative z-10 container mx-auto text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Experience the Magic of Live Concerts</h2>
<p class="text-lg mb-6">Join Diljit Dosanjh for electrifying performances and unforgettable moments.
Don’t miss out on the chance to be part of the excitement!</p><a href="concerts.html"><span
class="inline-block bg-yellow-500 text-black font-semibold py-3 px-6 rounded-lg hover:bg-yellow-400 transition duration-300 cursor-pointer">Explore
Concerts</span></a>
</div>
</div>
<footer class="relative w-full bg-gradient-to-r from-yellow-500 via-black to-black text-white pt-5">
<div class="mx-auto w-full max-w-7xl px-5">
<div class="grid grid-cols-1 md:grid-cols-2 justify-between gap-4">
<div class="grid grid-cols-1 w-full ">
<div class="flex flex-col items-start"><a class="hover:opacity-80" href="./index.html"><img
alt="Diljit Dosanjh Logo" loading="lazy" width="80" height="80" decoding="async"
data-nimg="1" class="rounded-full bg-gray-100" style="color:transparent"
src="images/logo.png">
<div>
<h3 class="text-lg font-bold text-gray-300">Diljit Dosanjh</h3>
<hr class="border-gray-400 shadow-lg rounded-full">
<p class="text-sm text-gray-300"><b>Contact:</b> [email protected]<br>Punjab da munda living the global dream!</p>
</div>
</a></div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<h4 class="text-gray-300 mb-3 text-sm font-bold rounded-md opacity-90">Music</h4>
<ul class="text-sm text-gray-300 rounded-md">
<li><a href="music.html">
<span class="block py-1.5 font-normal transition-colors hover:text-yellow-400 hover:opacity-80">Albums</span></a>
</li>
</ul>
</div>
<div>
<h4 class="text-gray-300 mb-3 text-sm font-bold rounded-md opacity-90">About</h4>
<ul class="text-sm text-gray-300 rounded-md">
<li><a href="bio.html"><span
class="block py-1.5 font-normal transition-colors hover:text-yellow-400 hover:opacity-80">About
Diljit Dosanjh</span></a></li>
<li><a href="concerts.html"><span
class="block py-1.5 font-normal transition-colors hover:text-yellow-400 hover:opacity-80">Tours</span></a>
</li>
</li>
</ul>
</div>
</div>
</div>
<div
class="mt-12 flex flex-col items-center justify-center border-t border-gray-600 py-4 md:flex-row md:justify-between space-y-4 md:space-y-0">
<p class="text-sm text-gray-400 font-normal text-center md:mb-0">© <!-- -->2024<!-- --> Diljit Dosanjh.<!-- --> <span class="inline-block sm:inline md:mb-0">Design & Developed by<!-- -->
<a href="https://github.com/mrsandy1965" rel="designer" target="blank"
class="font-bold hover:text-gray-300">Sandesh,</a>
<a href="https://github.com/techcodie" rel="designer" target="blank"
class="font-bold hover:text-gray-300">Ansh</a> &
<a href="https://github.com/White-Devil2839" rel="designer" target="blank"
class="font-bold hover:text-gray-300">Divyansh</a>
</span></p>
<div class="flex gap-4 text-gray-300 justify-center"><a href="facebook.com/DiljitDosanjh"
target="_blank" rel="noopener noreferrer" title="Follow on Facebook"
aria-label="Follow on Facebook" class="hover:text-white transition duration-300"><svg
stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512"
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z">
</path>
</svg></a><a href="https://www.instagram.com/diljitdosanjh/" target="_blank"
rel="noopener noreferrer" title="Follow on Instagram" aria-label="Follow on Instagram"
class="hover:text-white transition duration-300"><svg stroke="currentColor" fill="currentColor"
stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
</path>
</svg></a><a href="https://www.youtube.com/channel/UCZRdNleCgW-BGUJf-bbjzQg" target="_blank"
rel="noopener noreferrer" title="Subscribe on YouTube" aria-label="Subscribe on YouTube"
class="hover:text-white transition duration-300"><svg stroke="currentColor" fill="currentColor"
stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg></a><a href="https://open.spotify.com/artist/2FKWNmZWDBZR4dE5KX4plR" target="_blank"
rel="noopener noreferrer" title="Listen on Spotify" aria-label="Listen on Spotify"
class="hover:text-white transition duration-300"><svg stroke="currentColor" fill="currentColor"
stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z">
</path>
</svg></a><a href="https://x.com/diljitdosanjh" target="_blank" rel="noopener noreferrer"
title="Follow on X" aria-label="Follow on X"
class="hover:text-white transition duration-300">
<svg width="0.9em" height="0.9em" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" fill="white">
<path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"/>
</svg>
</a></div>
</div>
</div>
</footer>
</body>
</html>