-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
330 lines (311 loc) · 14.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#EDEA3E" />
<!-- TODO: Add OG tags -->
<!-- Reference: https://gethead.info/ -->
<!-- TODO: Create Favicon -->
<!-- <link rel="icon" href="assets/brand/favicon.ico"> -->
<title>Vivaann Welfare Association</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="style.css" rel="stylesheet">
<!-- Additional Fonts -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto" rel="stylesheet"> -->
</head>
<body>
<div id="wrapper" class="container-fluid">
<!-- Navigation section -->
<nav class="navbar navbar-expand-xl fixed-top">
<a class="navbar-brand" href="#Intro">Vivaann Welfare Association</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#PrimaryMenu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="PrimaryMenu" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#Intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About-Us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Our-Causes">Our Campaigns</a>
</li>
<!-- <li class="nav-item"> <a class="nav-link" href="#Recent-Events">Recent Events</a> </li> -->
<li class="nav-item">
<a class="nav-link" href="#Support-Us">Support Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Get-In-Touch">Get In Touch</a>
</li>
</ul>
</div>
</nav>
<!-- Intro section -->
<div id="Intro" class="container-fluid">
<img src="assets/brand/logo.png" alt="Vivaann Welfare Association">
<h1>Help Make A Difference</h1>
</div>
<!-- About Us section -->
<div id="About-Us" class="container slide">
<div class="row">
<div class="col-md-4 offset-md-1">
<h5>About Us</h5>
<h2>Help Make A Difference</h2>
<p>Vivaann Welfare Association (or simply called Vivaann) is a student-run NGO based in Visakhapatnam, India directly benefitting over hundreds of children every year, through weekly live welfare projects on education, healthcare, livelihood and cleanliness.</p>
<!-- Taken from https://www.smilefoundationindia.org/volunteer.html temporarily -->
<a class="btn btn-primary" href="#Our-Causes">Our Causes</a>
</div>
<div class="col-md-6">
<img src="assets/gallery/posts06.jpg" alt="06" class="img-fluid">
</div>
</div>
</div>
<!-- Our Causes (Programs) section -->
<div id="Our-Causes" class="container slide">
<div class="row">
<div class="col-md-10 offset-md-1">
<h5>Our Campaigns</h5>
<h2>An act of kindness however small, is never wasted</h2>
<p>The vision of a better tomorrow for all, helps us not only learn the basic ethics of life but also constantly reminds us of our responsibilities as humans towards the society. Working towards the growth and the happiness of those in need around us, made contentment follow suit.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-1">
<h2>Pragati</h2>
<p>Pragati is an event conducted in various schools. The process of teaching and learning is continuous and with no boundaries. And the same is taught to children in various interactive sessions where they are motivated to ask, helped to understand amd inspired to grow.</p>
<a class="btn btn-secondary" href="https://www.facebook.com/vivaannwelfareassociation/photos/a.1931317476931111/1931316533597872/" target="_blank">Learn More</a>
</div>
<div class="col-md-6">
<img src="assets/gallery/posts02.jpg" alt="02" class="img-fluid">
</div>
<div class="col-md-6 offset-md-1">
<img src="assets/gallery/posts08.jpg" alt="08" class="img-fluid">
</div>
<div class="col-md-4">
<h2>Siksha</h2>
<p>Siksha is an event that deals with the collection of old newspapers, waste papers, magazines for recycling; because ultimately a cleaner environment is a greener environment.</p>
<a class="btn btn-secondary" href="https://www.facebook.com/vivaannwelfareassociation/photos/a.1931317476931111/1931317300264462/" target="_blank">Learn More</a>
</div>
<div class="col-md-3">
<h2>Annapurna</h2>
<p>Realising that about 700 million of the world population go to bed with an empty stomach each night, we started a campaign, Annapurna. It includes the collection of pulses and grains for the needy.</p>
</div>
<div class="col-md-6">
<img src="assets/gallery/posts01.jpg" alt="Annapurna & Vastradaan" class="img-fluid">
</div>
<div class="col-md-3">
<h2>Vastradaan</h2>
<p>Helping people protect themselves against the harsh weather conditions, Vastradaan is an event focusing on collection of clothes for those in need.</p>
<a class="btn btn-secondary" href="https://www.facebook.com/vivaannwelfareassociation/photos/a.1931317476931111/1931316446931214/" target="_blank">Learn More</a>
</div>
<div class="col-md-6 offset-md-1">
<img src="assets/gallery/posts04.jpg" alt="Tripti" class="img-fluid">
</div>
<div class="col-md-4">
<h2>Tripti</h2>
<p>This is the event where every member gets emotionally attached to the kids of sunflower special school. We played carroms, danced together. We offered them biscuits, chocolates and food for the day. We believe that every member should be part of this event at least once in his Vivaann period.</p>
<a class="btn btn-secondary" href="https://www.facebook.com/vivaannwelfareassociation/photos/a.1931317476931111/1931316726931186/" target="_blank">Learn More</a>
</div>
<div class="col-md-4 offset-md-1">
<h2>Chitrakala</h2>
<p>Chitrakala, an art competition which helps kids unleash the artist within.</p>
<a class="btn btn-secondary" href="https://www.facebook.com/vivaannwelfareassociation/photos/a.1931317476931111/1931317070264485/" target="_blank">Learn More</a>
</div>
<div class="col-md-6">
<img src="assets/gallery/posts07.jpg" alt="Chitrakala" class="img-fluid">
</div>
</div>
</div>
<!--
<div id="Recent-Events" class="container slide">
<div class="row">
<div class="col-md-4 offset-md-1 offset-lg-0">
<h5>Recent Events</h5>
</div>
</div>
<div class="row">
<div class="col col-md-10 offset-md-1 col-lg-6 offset-lg-0">
<h2>Sample Title</h2>
<div class="e-date">2nd Oct, 2018 · MVP Colony, Visakhapatnam</div>
<div class="e-blurb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel facilis praesentium deserunt consequuntur porro, inventore perspiciatis adipisci necessitatibus excepturi officia placeat dolore eveniet nobis doloribus illo doloremque molestiae aspernatur minus!</div>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
<div class="col col-md-10 offset-md-1 col-lg-6 offset-lg-0">
<h2>Sample Title</h2>
<span class="e-date">2nd October, 2018 · MVP Colony, Visakhapatnam</span>
<div class="e-blurb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel facilis praesentium deserunt consequuntur porro, inventore perspiciatis adipisci necessitatibus excepturi officia placeat dolore eveniet nobis doloribus illo doloremque molestiae aspernatur minus!</div>
<a href="#" class="btn btn-secondary">Learn More</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="#" class="btn btn-primary older-events">Older Events</a>
</div>
</div>
</div>
-->
<div id="Support-Us" class="container slide">
<div class="row">
<div class="col-md-4">
<h5>Support Us</h5>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Help us achieve our goal, bit by bit</h1>
</div>
</div>
<div id="tri-actions" class="row">
<div class="col-md-6">
<h2>Volunteer</h2>
<p>Volunteers are the backbone of every organization – they not only carry the organization's ideals within them, but also spread the message far and beyond. We encourage volunteers to be an active part of our organization and share our vision and purpose.</p>
<!-- Taken from https://www.smilefoundationindia.org/volunteer.html temporarily -->
<a href="http://bit.ly/vivaann2019" class="btn btn-secondary">Join Us 🤝</a>
</div>
<div class="col-md-6">
<h2>💝 Donate</h2>
<p>Your support enables us to help people who need it the most. It is because of generous donors that we have been able to pull it so far. We need your continued support to enable us to continue with our work with the same vigour and passion.</p>
<a href="#Get-In-Touch" class="btn btn-secondary">Everything counts!</a>
</div>
<!-- <div class="col-md-4">
<h2>Sponsor</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum aspernatur dolorem quis molestias adipisci quae ducimus praesentium. Corrupti, porro excepturi, animi consequatur qui iure, possimus earum vero vitae illum dolore.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div> -->
</div>
</div>
<div id="Get-In-Touch" class="container slide">
<div class="row">
<div class="col-md-4">
<h5>Get In Touch</h5>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Found something interesting? Let's talk!</h1>
<br>
<h2>We're on <a href="https://www.facebook.com/vivaannwelfareassociation/" id="s-fb" target="_blank">Facebook</a>, <a href="https://www.instagram.com/vivaannwelfare" id="s-ig" target="_blank">Instagram</a> & <a href="https://www.youtube.com/channel/UCe5LcTDnhIHbHI7buIVSBmQ" id="s-yt" target="_blank">YouTube</a>🔥</h2>
<br>
<h6>For volunteering, donations or sponsoring message us on Facebook or contact the team directly.</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h5>Meet the Team</h5>
</div>
</div>
<div id="team-cards" class="row">
<div class="col-md-4">
<img src="assets/team/president-manasa-reddy.jpg" class="img-fluid" alt="President Manasa Reddy">
<h3>Manasa Reddy</h3>
<h4>President</h4>
<a href="tel:+919100585816" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
<div class="col-md-4">
<img src="assets/team/vice-president-kashyap-harsha.jpeg" class="img-fluid" alt="Vice-President Kashyap Harsha">
<h3>Kashyap Harsha</h3>
<h4>Vice-President</h4>
<a href="tel:+917995881465" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
<div class="col-md-4">
<img src="assets/team/secretary-vamsi-krishna.JPG" class="img-fluid" alt="Secretary Vamsi Krishna">
<h3>Vamsi Krishna</h3>
<h4>Secretary</h4>
<a href="tel:+917842318041" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
<div class="col-md-4">
<img src="assets/team/joint-secretary-lava-kumar.JPG" class="img-fluid" alt="Joint-Secretary K Lava Kumar">
<h3>K Lava Kumar</h3>
<h4>Joint-Secretary</h4>
<a href="tel:+918790452264" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
<div class="col-md-4">
<img src="assets/team/treasurer-sukrit-reddy.jpg" class="img-fluid" alt="Treasurer Sukrit Reddy">
<h3>Sukrit Reddy</h3>
<h4>Treasurer</h4>
<a href="tel:+919959193944" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
<div class="col-md-4">
<img src="assets/team/joint-treasurer-anjun-reddy.jpg" class="img-fluid" alt="Joint-Treasurer Anjun Reddy">
<h3>Anjun Reddy</h3>
<h4>Joint-Treasurer</h4>
<a href="tel:+918099157777" class="btn btn-secondary">Call/WhatsApp</a>
<a href="mailto:[email protected]" class="btn btn-secondary">Email</a>
</div>
</div>
</div>
<div id="Footer" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-center text-lg-left">© Vivaann Welfare Association · <a href="https://www.github.com/vivaann/vivaann.github.io" target="_blank">GitHub repo</a></p>
</div>
<div class="col-md-6">
<p class="text-center text-lg-right">Made with️ ❤️ in Vizag.</p>
<p class="text-center text-lg-right">Designed & Maintained by <a href="https://linkedin.com/in/AjitZero" target="_blank">Ajit Panigrahi</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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>
<script>
$(function () {
var navbar = $(".navbar")
var topMenu = $("#PrimaryMenu"),
topMenuHeight = topMenu.outerHeight() + 15,
menuItems = topMenu.find("li a"),
scrollItems = menuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
$(window).on("scroll", function () {
// resize logo on scroll >= 100
if ($(this).scrollTop() >= 50) {
navbar.css({
'margin-top': '0'
});
} else {
navbar.css({
'margin-top': '-500px'
});
}
// update `.active` for current menu area
var fromTop = $(this).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function () {
if ($(this).offset().top < fromTop) {
return this;
}
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']")
.parent().addClass("active");
});
// Close navbar on click
$('.nav-link').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
});
</script>
</body>
</html>