-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
439 lines (409 loc) · 26.4 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
<!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>CONCERT</title>
<link rel ="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
</head>
<body>
<audio autoplay>
<source src="I Will Be There For You.mp3" type="audio/mpeg">
</audio>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">CONCERT</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#performers">PERFORMERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
<a class="btn signin btn-primary p-2 my-lg-0 my-2" href="#register" onclick="" type="button">BOOK NOW!</a>
</div>
<div class="content">
</div>
</nav>
<section id="home">
<pre><h1> LIVE IN CHENNAI</h1></pre>
</section>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 my-2">
<img src="yuvan.png" height="1000" >
</div>
<div class="col-lg-6 col-md-6 col-12 p-1g-5 p-2 my-5">
<br>
<h1>About Event</h1>
<pre> <p>Any mood, any occasion
He said “I’ll be there for you” and he did!
Aren't we all grateful for the countless hours spent
on listening to his music therapy?
Yuvan Shankar Raja, The biggest South Indian music
director will be performing his concert in Chennai
after 11 long awaited years.
</p>
</pre>
<br>
<h1>Why should you attend?</h1>
<p>U1, the young maestro himself will be performing live at the home grpund after 11 years. Celebrities & stars studded night with hours of music and memories to take back for ages. One of the best concerts you will witness with extravagance in light, setup, music and cherish.</p>
<p>Save the date 'Sep 10'</p>
</div>
</div>
</div>
</section>
<section id="performers">
<div class="container m-5">
<h1 class="text-center my-5">Performers</h1>
<div class="row">
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "hariharan.jpeg" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">SINGER</h5>
<a href="#hariharan" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">HARIHARAN</a>
<div id="hariharan" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">HARIHARAN</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Hariharan is an Indian playback, bhajan and ghazal singer who predominantly sings in Tamil and Hindi languages. He has also sung over 15,000 notable songs in 10 regional languages including Telugu, Malayalam, Kannada, Marathi, Sinhala and Bhojpuri.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "andrea.jpeg" class="card-img-top" width="400" height="270">
<div class="card-body text-center">
<h5 class="card-title">SINGER</h5>
<a href="#andrea" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">ANDREA JEREMIAH</a>
<div id="andrea" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">ANDREA JEREMIAH</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Andrea Maria Jeremiah is an Indian actress, playback singer, and musician works predominantly in Tamil and Malayalam language films. She began her career as a playback singer, and has subsequently appeared in films as supporting to lead role.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "vijay.jpeg" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">SINGER</h5>
<a href="#vijay" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">VIJAY YESUDAS</a>
<div id="vijay" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">VIJAY YESUDAS</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Vijay Yesudas is an Indian playback singer and actor. He has sung over 1000 film songs. Vijay works predominantly in the South Indian film industry, mostly in Malayalam, Telugu and Tamil and also in Kannada, and Hindi. He is the son of acclaimed singer K. J. Yesudas</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "drums.jpeg" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">DRUMS</h5>
<a href="#siva" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">SIVAMANI</a>
<div id="siva" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">DRUMS SIVAMANI</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Sivamani, commonly known by his stage name Drums Sivamani, is an Indian percussionist. He plays many instruments including drums, octoban, darbuka, udukai, ghatam and kanjira. He performed drumming during the IPL Championships in 2008 and 2010.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "sid.png" class="card-img-top" width="400" height="270">
<div class="card-body text-center">
<h5 class="card-title">SINGER</h5>
<a href="#sid" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">SID SRIRAM</a>
<div id="sid" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">SID SRIRAM</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Sidharth Sriram is an Indian-American Carnatic musician, music producer, playback singer, and songwriter. He is an R&B songwriter and has been working in the Tamil, Telugu, Kannada and Malayalam music industry. He regularly collaborates with his sister Pallavi Sriram, a Bharatanatyam dancer, and music directors.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="card">
<img src = "shreya.jpeg" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">SINGER</h5>
<a href="#sh" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">SHREYA GHOSHAL</a>
<div id="sh" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">SHREYA GHOSHAL</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Shreya Ghoshal is an Indian singer and television personality. One of the highest-paid and most well-established playback singers of Indian cinema, she has received four National Film Awards, four Kerala State Film Awards, two Tamil Nadu State Film Awards, seven Filmfare Awards and ten Filmfare Awards South.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="register">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card card-registration card-registration-2" style="border-radius: 15px;">
<div class="card-body p-0">
<div class="row g-0">
<div class="col-lg-8">
<div class="p-5">
<div class="d-flex justify-content-between align-items-center mb-5">
<h1 class="fw-bold mb-0 text-black">SELECT YOUR CATEGORY</h1>
<h6 class="mb-0 text-muted">3 items</h6>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://cdn.shopify.com/s/files/1/1002/7150/products/New-Mockups---no-hanger---TShirt-01_58703b73-1e34-4016-9462-dbfcea1308da.jpg?v=1628512533"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">SILVER</h6>
<h6 class="text-black mb-0">Customised T-shirt, Yuvan signed Poster, Limited Snacks</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">₹ 3400</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://cdn.shopify.com/s/files/1/1002/7150/products/POS-131_2_1024x1024.jpg?v=1623657244"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">GENERAL FANPIT</h6>
<h6 class="text-black mb-0">Customised T-shirt, Yuvan signed Poster, Limited Snacks</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">₹ 4,900</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
<div class="row mb-4 d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img
src="https://www.meesakar.in/image/cache/catalog/meesakar/YUVAN/EYU_PG-700x933.jpg"
class="img-fluid rounded-3" alt="Cotton T-shirt">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<h6 class="text-muted">GOLD</h6>
<h6 class="text-black mb-0">Customised T-shirt, Yuvan signed Poster, Customised pop socket, Unlimited Snacks</h6>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="1" type="number"
class="form-control form-control-sm" />
<button class="btn btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h6 class="mb-0">₹ 9,900</h6>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-muted"><i class="fas fa-times"></i></a>
</div>
</div>
<hr class="my-4">
</div>
</div>
<div class="col-lg-4 bg-grey">
<div class="p-5">
<h3 class="fw-bold mb-5 mt-2 pt-1">U & I - Yuvan Shankar Raja Live in Concert</h3>
<hr class="my-4">
<div class="d-flex justify-content-between mb-4">
<h5 class="text-uppercase">Tickets</h5>
<h5>₹</h5>
</div>
<h5 class="text-uppercase mb-3">Sat, 10 Sep, 2022</h5>
<h5 class="text-uppercase mb-3">0:6:00 PM</h5>
<h5 class="text-uppercase mb-3">Venue</h5>
<h5 class="text-uppercase mb-3">Jawaharlal Nehru Indoor Stadium: Chennai</h5>
<hr class="my-4">
<div class="d-flex justify-content-between mb-5">
<h5 class="text-uppercase">Total price</h5>
<h5>₹</h5>
</div>
<a href="#book" class="btn btn-dark btn-block signin btn-lg btn-primary" data-bs-toggle="modal">BOOK</a>
<div id="book" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">CONGRATS!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>You're officially a drug addict</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container box">
<div class="row">
<h1 class="text-center my-5">CONTACT US</h1>
<div class="col-10 offset-1 col-lg-8 offset-lg-2 div-wrapper d-flex justify-content-center align-items-center">
<form class="mb-3">
<input type="text" class="form-control" placeholder="Enter your name">
<input type="text" class="form-control" placeholder="Enter your mail id">
<textarea class="form-control" placeholder="Enter your query"></textarea>
<a href="#send" class="btn signin btn-lg btn-primary" data-bs-toggle="modal">SEND MESSAGE</a>
<div id="send" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">WOHOO</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>MESSAGE SENT!!</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer>Copyrights @sonymusicindia</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>