-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (201 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charity Event Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/d86848cfe0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="full-width">
<nav class="navbar navbar-expand-md navbar-inverse top-navbar d-sm-none d-md-block bg-gray">
<div class="collapse navbar-collapse navbar-right justify-content-end mr-5 ml-5" id="myNavbar">
<ul class="navbar-nav">
<li class="mr-3 ml-3">
<a class="nav-item nav-link gray-clr social-icon" href="#"><i class="fa fa-facebook"
aria-hidden="true"></i></a>
</li>
<li class="mr-3 ml-3">
<a class="nav-item nav-link gray-clr social-icon" href="#"><i class="fa fa-twitter"
aria-hidden="true"></i></a>
</li>
<li class="mr-3 ml-3">
<a class="nav-item nav-link gray-clr social-icon" href="#">English</a>
</li>
<li class="mr-3 ml-3">
<a class="nav-item nav-link gray-clr social-icon" href="#">My Page</a>
</li>
<li class="mr-3 ml-3">
<a class="nav-item nav-link gray-clr social-icon" href="#">Logout</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-inverse">
<div class="container-fluid">
<a href="index.html" class="navbar-brand d-none d-md-block"><img class="main-logo" src="assets/images/logo.png"
alt="Main logo image"></a>
<div class="navbar-header ml-3 mr-3">
<button type="button" class="navbar-toggler" data-toggle="collapse"
data-target="#myNavbar1" aria-controls="myNavbar1" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
</div>
<div class="collapse navbar-collapse ml-5 mr-5 justify-content-end" id="myNavbar1">
<ul class="navbar-nav menu justify-content-sm-end">
<li class="nav-item mr-sm-5 ml-sm-5 mr-md-5 ml-md-5">
<a class="nav-link active darkgray-clr" href="index.html">Home</a>
</li>
<li class="nav-item mr-sm-5 ml-sm-5 mr-md-5 ml-md-5">
<a class="nav-link darkgray-clr" href="about.html">About</a>
</li>
<li class="nav-item mr-sm-5 ml-sm-5 mr-lg-5 ml-md-5">
<a class="nav-link darkgray-clr" href="tickets.html">Tickets</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-fluid">
<!-- Home page -->
<section class="home-page col-12 full-width">
<h1 class="orange-clr text-uppercase main-heading auto-margin text-center pt-5 col-sm-12">Let's come together for Musical Night...</h1>
<p class="bg-text auto-margin mt-5 text-center">Come together to help each other. A joyful evening with music, stories and much more..
</p>
<p class="venue text-center mt-5"><time class="date-font" datetime="2020-09-20">2020.09.20(Sunday)</time><br>@ National Art
Theatre, Bangalore</p>
</section>
<section class="main-program full-width">
<div>
<h2 class="text-center pt-5 white-clr">Main Program</h2>
<div class="underline mb-5"></div>
</div>
<div class="mp-grid auto-margin">
<div class="row justify-content-center">
<article class="mpgrid-bg col-md-2 col-lg-2 program justify-content-center text-center p-3 border mr-2">
<i class="fa fa-music date-font white-clr" aria-hidden="true"></i>
<h3 class="orange-clr p-md-2 p-lg-4 text-center">Music</h3>
<p class="white-clr">Listen to musicians from different part of the world.</p>
</article>
<article class="mpgrid-bg col-md-2 col-lg-2 program justify-content-center text-center p-3 border mr-2">
<i class="fa fa-heart date-font white-clr" aria-hidden="true"></i>
<h3 class="orange-clr p-md-2 p-lg-4 text-center">Art</h3>
<p class="white-clr">Variuos art collection from all over the world.</p>
</article>
<article class="mpgrid-bg col-md-2 col-lg-2 program justify-content-center text-center p-3 border mr-2">
<i class="fa fa-life-ring date-font white-clr" aria-hidden="true"></i>
<h3 class="orange-clr p-md-2 p-lg-4 text-center">Speaker</h3>
<p class="white-clr">Hear out the experiences and lessons from various known celebraties</p>
</article>
<article class="mpgrid-bg col-md-2 col-lg-2 program justify-content-center text-center p-3 border mr-2">
<i class="fa fa-gift date-font white-clr" aria-hidden="true"></i>
<h3 class="orange-clr p-md-2 p-lg-4 text-center">Support</h3>
<p class="white-clr">Lets support each other in any possible way.</p>
</article>
</div>
</div>
<p class="text-center p-5 text-uppercase"><a class="white-clr whole-program" href="#">See the whole program</a></p>
</section>
<section class="speakers">
<h3 class="text-center pt-3">Featured Artists</h3>
<div class="underline mb-5"></div>
<div class="grid speakers-row">
<div class="grid sp-row">
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>A R Rahman</h4>
<small class="orange-clr font-italic small-font">Musician</small>
<p class="artist-intro">A. R. Rahman, is an Indian composer, singer and music producer who works predominantly in Tamil and Hindi movies.</p>
</div>
</article>
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>Arijit Singh</h4>
<small class="orange-clr font-italic small-font">Singer</small>
<p class="artist-intro">Arijit Singh is an Indian playback singer. He sings predominantly in Hindi and Bengali but has also performed in various other Indian languages.</p>
</div>
</article>
</div>
<div class="grid sp-row">
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>Priya Kumar</h4>
<small class="orange-clr font-italic small-font">Speaker</small>
<p class="artist-intro">Priya Kumar is #1 Top Motivational Speaker & Inspirational Author in India, well known for Corporate Events</p>
</div>
</article>
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>Jonita Gandhi</h4>
<small class="orange-clr font-italic small-font">Singer</small>
<p class="artist-intro">An internet sensation and now an established Bollywood singer, Jonita Gandhi is one such singer who is a right mix of talent and beauty.</p>
</div>
</article>
</div>
<div class="grid sp-row">
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>Pritam</h4>
<small class="orange-clr font-italic small-font">Musician</small>
<p class="artist-intro">Pritam Chakraborty, better known by the mononym Pritam, is an Indian music director, composer, singer and record producer for Bollywood films.</p>
</div>
</article>
<article class="flex each-speaker">
<div class="speaker-img mr-2">
<img class="img-speaker" src="assets/images/speaker-img.jpg" alt="Speaker image">
</div>
<div class="speaker-text">
<h4>H C Verma</h4>
<small class="orange-clr font-italic small-font">Teacher</small>
<p class="artist-intro">Harish Chandra Verma is an Indian experimental physicist and a professor emeritus of the Indian Institute of Technology Kanpur since 1994. His field of research is nuclear physics.</p>
</div>
</article>
</div>
</div>
</section>
</main>
<footer class="bg-gray full-width">
<section class="footer-content">
<h5 class="footer1-text text-center pt-sm-5 pt-2 partner">Partners</h5>
<div class="underline mb-3"></div>
<ul class="flex justify-content-center">
<li class="list-style p-lg-5 p-md-3 p-sm-2 partner-list"><a class="footer1-text footer-icon date-font" href="#">Mozzila</a></li>
<li class="list-style p-lg-5 p-md-3 p-sm-2 partner-list"><a class="footer1-text footer-icon big-font" href="#">Google</a></li>
<li class="list-style p-lg-5 p-md-3 p-sm-2 partner-list"><a class="footer1-text footer-icon date-font" href="#">Edge</a></li>
<li class="list-style p-lg-5 p-md-3 p-sm-2 partner-list"><a class="footer1-text footer-icon big-font" href="#">Safari</a></li>
<li class="list-style p-lg-5 p-md-3 p-sm-2 partner-list"><a class="footer1-text footer-icon date-font" href="#">Opera</a></li>
</ul>
</section>
<section class="bg-white p-4">
<div class="flex footer-content">
<h4 class="footer-text footer1">LPH Concerts & Events Team</h4>
<p class="footer-text"><i class="fa fa-copyright footer-text black-clr " aria-hidden="true"></i> 2020 LPH Concerts & Events Team</p>
</div>
</section>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>