forked from 2000utkarsh/HHK-FrontEnd
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbase.html
298 lines (262 loc) · 15.2 KB
/
base.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet'
href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css'>
<link rel="stylesheet" href="fonts/font-awesome.min.css">
<link rel="stylesheet" href="fonts/ionicons.min.css">
<!-- Latest compiled and minified CSS -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<!--SCRIPT TAGS -->
<script src="https://use.fontawesome.com/f12e4a6b3c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<title>Har Hath Kalam</title>
<link rel="stylesheet" href="css/base_style.css">
</head>
<body>
<!-- NAVBAR STARTS -->
<nav class="navbar navbar-expand-lg sticky-top navbar-light">
<img src="images/logo.png" class="d-inline-block align-top" id="logo" alt="HHK">
<a class="navbar-brand" href="#">Har Hath Kalam India Association</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-get btn orange btn waves-effect waves-dark" href="#">GET INVOLVED</a>
</li>
</ul>
</div>
</nav>
<!-- CAROUSEL STARTS-->
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"><img class="w-100 d-block" src="images/sample_1.jpg" alt="Slide Image"
style="height:550px;"></div>
<div class="carousel-item"><img class="w-100 d-block" src="images/sample_2.png" alt="Slide Image"
style="height:550px;"></div>
<div class="carousel-item"><img class="w-100 d-block" src="images/sample_3.png" alt="Slide Image"
style="height:550px;"></div>
</div>
<div><a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev"><span
class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a><a
class="carousel-control-next" href="#carousel-1" role="button" data-slide="next"><span
class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
<!-- EVENTS UPDATE-->
<h1 class="upcoming_event">Upcoming Event</h1>
<div>
<div class="container safar-image">
<div class="row">
<div class="col-md-12">
<div class="card shadow-sm p-3 mb-5 bg-white rounded" id="event"><img
class="card-img-top w-100 d-block" src="images/safar.jpg">
<div class="card-body">
<h4 class="text-center card-title">Safar : Bheeksha Se Shiksha Tak<br></h4>
<p class="text-center card-text">An awareness event aimed at spreading the message :
"instead of giving alms to chid beggars take them towards the path of education " among
common people will be held at Patiala bus stand on 26th October, 4-6 pm. The event
includes putting flexes at bus stand, one on one interaction and volunteer going inside
buses along with children to aware people<br></p>
<div id="eventLink"><a href="#">SEE ALL EVENTS</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DYNAMIC COUNTER -->
<div class="counter_main">
<div class="counter_main_container">
<div class="row counter_main_row">
<div class="col-md-4 first_column" id="first">
<p class="counter counter_event">50</p>
<p class="counter_event_text">Events Organised</p>
</div>
<div class="col second_column" id="second">
<p class="counter counter_people">150,000+</p>
<p class="counter_people_text">People Reached</p>
</div>
<div class="col third_column" id="third">
<p class="counter counter_volunteers">100</p>
<p class="counter_volunteers_text">Volunteers</p>
</div>
</div>
</div>
</div>
<!-- ACHIEVEMENTS SECTION -->
<h1 class="achievements_heading" style="margin-top:20px;"><strong>Achievements</strong></h1>
<div class="container">
<div class="row achievement_images_row">
<div class="col-lg-4 col-md-4">
<div class="achievement_images_div">
<img src="images/about_us.png"
class="img-thumbnail img-fluid card-img-top w-100 d-block achievements_image_1">
<div class="achievements_images_text">
<h4 class="text-center achievements_image_1_heading"><strong>110+ Child Beggars to
School</strong><br></h4>
<p class="text-center card-text">Kids who once used to beg on street or sell balloons are now
going to school and living their childhood. This has resulted in 80% reduction in child
beggars in Patiala<br></p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="achievement_images_div">
<img src="images/background_1.jpg"
class="img-thumbnail img-fluid card-img-top w-100 d-block achievements_image_2">
<div class="achievements_images_text">
<h4 class="text-center achievements_image_2_heading"><strong>110+ Child Beggars to
School</strong><br></h4>
<p class="text-center card-text">Kids who once used to beg on street or sell balloons are now
going
to school and living their childhood. This has resulted in 80% reduction in child beggars in
Patiala<br></p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="achievement_images_div">
<img src="images/background_2.jpg"
class="img-thumbnail img-fluid card-img-top w-100 d-block achievements_image_3">
<div class="achievements_images_text">
<h4 class="text-center achievements_image_2_heading"><strong>110+ Child Beggars to
School</strong><br></h4>
<p class="text-center card-text">Kids who once used to beg on street or sell balloons are now
going
to school and living their childhood. This has resulted in 80% reduction in child beggars in
Patiala<br></p>
</div>
</div>
</div>
</div>
</div>
<!-- TESTMONIALS -->
<div class="testimonials_main">
<div class="container testimonials_container">
<h1 class="text-center testimonials_main_heading"><strong>Testimonials</strong></h1>
<div class="row">
<div class="col-sm-8 m-auto">
<div id="slider3" class="carousel slide mb-5" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider3" data-slide-to="0"></li>
<li class="active" data-target="#slider3" data-slide-to="1"></li>
<li class="active" data-target="#slider3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400"
alt="Second Slide">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, tenetur vitae.
Impedit error, nisi harum sunt laudantium quidem corrupti. Accusamus amet delectus
ab facilis sequi! Culpa quas velit enim placeat veritatis nemo asperiores a.
Pariatur ducimus omnis, harum alias accusantium similique perferendis quae ipsa?
Deleniti atque asperiores iste debitis facilis!F</p>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400"
alt="Second Slide">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, possimus
asperiores? Quia veritatis voluptatibus illum debitis architecto animi eveniet
tempore nobis nihil quo suscipit voluptatem exercitationem, impedit fugiat dolor.
Qui consequuntur animi aliquam, eligendi, dolorum voluptates pariatur dolorem quia
laboriosam veniam corporis nobis voluptas eveniet mollitia molestiae enim
consectetur unde, accusamus similique dignissimos alias doloribus soluta dicta
sequi! Ea, ut.</p>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400"
alt="Third Slide">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum officia officiis
dicta, eaque animi perspiciatis accusamus explicabo nihil esse sapiente? Temporibus,
quas, voluptatibus, impedit sit quaerat odio tempora nulla architecto ut veritatis
possimus! Impedit rerum magnam, reprehenderit aliquid debitis saepe repellendus
dicta unde rem, at velit, corrupti quidem exercitationem fugiat nostrum ut culpa
aspernatur doloremque aperiam? Ratione iure aperiam explicabo.</p>
</div>
<!-- CONTROLS -->
<a href="#slider3" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider3" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTACT US SECTION-->
<div class="row">
<div class="col-lg-12 contact_us_div">
<div class="row">
<div class="col-lg-8">
<strong class="contact_us">Contact Us<br></strong>
<i class="fa fa-home contact_address" aria-hidden="true"></i><span>#354, Street No. 3, Guru Nanak
Nagar,
Patiala<br></span>
<i class="fa fa-envelope-open-o"
aria-hidden="true"></i><span>[email protected]<br></span>
<i class="fa fa-phone-square" aria-hidden="true"></i><span>+91-84378-33465<br></span>
<div class="social_links">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</div>
</div>
<div class="col-lg-3 footer_text">
<p>"Umeed hai hum kuch kar dikhaenge , har ugti kiran ke saath naye sapne sajaengeAaj
nahi toh kal HAR HATH KALAM zaroor thamaenge.."</p>
<a href="#"><strong>Download App</strong></a>
<img src="playStore.png" class="playStore_icon">
</div>
<div class="col-lg-1"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 copyright_div">
<span class="copyright_text">© 2019 Copyright Har Hath Kalam</span>
</div>
</div>
<script src="js/base.js"></script>
</body>
</html>