-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconcerts.html
257 lines (210 loc) · 16.6 KB
/
concerts.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
<!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>
<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 Concerts</h1>
<p class="md:max:flex ml-10 mr-10">Join the Excitement of Live Music</p>
</div>
<div class="container mx-auto py-8 px-4 bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 text-white">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div
class="group relative bg-white text-black p-8 rounded-lg shadow-lg transition-transform transform hover:-translate-y-3 hover:shadow-2xl duration-300 ease-in-out">
<h2 class="text-2xl font-bold mb-4">Live Concerts</h2>
<p class="mb-4">Experience the electrifying performances by Diljit Dosanjh. Join us for live concerts that will leave you mesmerized.</p><a target="_blank" href="https://www.viagogo.com/in/Concert-Tickets/International-Traditions/Diljit-Dosanjh-Tickets"
class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white font-bold rounded-lg shadow-md hover:bg-purple-800 transition-all duration-200">Learn More</a>
</div>
<div
class="group relative bg-white text-black p-8 rounded-lg shadow-lg transition-transform transform hover:-translate-y-3 hover:shadow-2xl duration-300 ease-in-out">
<h2 class="text-2xl font-bold mb-4">VIP Experiences</h2>
<p class="mb-4">Elevate your concert experience with VIP packages. Enjoy premium seating, meet-and-greet
sessions, and more.</p><a href="https://www.seatunique.com/music-tickets/pop/diljit-dosanjh-tickets" target="_blank" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white font-bold rounded-lg shadow-md hover:bg-purple-800 transition-all duration-200">Learn
More</a>
</div>
</div>
</div>
<div class="container mx-auto py-12 px-4">
<div class="relative bg-black text-white p-8 rounded-lg shadow-2xl flex flex-col md:flex-row items-center">
<div
class="absolute inset-0 bg-gradient-to-br from-yellow-600 via-red-500 to-pink-500 opacity-10 pointer-events-none">
</div>
<div class="w-full md:w-1/2 h-64 md:h-auto overflow-hidden rounded-lg mb-6 md:mb-0 md:mr-8"><img
alt="Diljit Dosanjh Concert" loading="lazy" width="600" height="600" decoding="async"
data-nimg="1"
class="w-full h-full object-cover rounded-lg shadow-lg hover:opacity-80 transition-opacity duration-300 ease-in-out"
style="color:transparent" src="images/concert.jpg"></div>
<div class="w-full md:w-1/2">
<p class="text-lg font-bold mb-4 text-center md:text-left">Want to be part of the action?</p>
<p class="text-gray-300 mb-4 text-center md:text-left">Reach out to us with your details and get
involved in the magic of live concerts with Diljit Dosanjh.</p><a href="contact.html"
class="block mx-auto md:mx-0 px-6 py-3 bg-gradient-to-r from-pink-500 to-purple-500 hover:from-purple-500 hover:to-red-500 text-white font-bold rounded-lg shadow-lg transition-all duration-300 z-10">Contact
Us</a>
</div>
</div>
</div>
<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>