-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
263 lines (254 loc) · 13.3 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
<!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">
<meta name="theme-color" content="#1C7947">
<title>SGTWS | Home</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
</head>
<body>
<header id="navbar">
<nav>
<a href="#" class="nav-logo"><h1>Student Guardian Teacher Welfare Society</h1></a>
<div class="right-menu" id="right-menu">
<a href="about.html" class="menu-link">
<p>about us</p>
<div class="color-strip"></div>
</a>
<a href="#our-work" class="menu-link">
<p>our work</p>
<div class="color-strip"></div>
</a>
<a href="gallery.html" class="menu-link">
<p>gallery</p>
<div class="color-strip"></div>
</a>
<a href="" class="menu-btn donate">
<p>support us</p>
</a>
</div>
</nav>
</header>
<svg id="menu" onclick="toggleMenu()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 28" class="icon line" width="32" height="32"><path id="menu-stroke" class="menu-stroke" d="M9,18H21M3,12H21M3,6H15" style="stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></svg>
<section class="hero" id="hero">
<img src="img/herobg.jpg" class="hero-bg">
<div class="hero-container">
<div class="hero-content">
<h1 class="hero-title">Creating leaders of tomorrow</h1>
<p class="hero-desc">We are not just educating the weaker section of our society, we're creating leaders of tomorrow for a better world.</p>
</div>
</div>
<svg
width="468"
height="60"
viewBox="0 0 123.825 15.875"
version="1.1"
id="wave"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1">
<path
id="path2007"
style="fill:#1C7947;fill-opacity:1;stroke-width:0.335117;stroke-linecap:round"
d="m 123.825,8.3094178 c 0,0 -11.18655,-7.71474432 -19.16405,-7.56647432 C 95.912385,0.90554458 85.400749,7.0318741 75.437027,8.6125186 69.424426,9.5663576 63.246387,10.24603 57.197977,9.5547114 46.927632,8.380835 37.720339,1.3047629 27.387395,1.0077279 18.032997,0.73882257 0,7.182217 0,7.182217 v 8.694107 h 123.825 z" />
<path
id="rect948"
style="fill:#ffffff;stroke-width:0.335117;stroke-linecap:round"
d="m 0,7.182217 c 0,0 19.240601,-3.2150755 28.886404,-2.5753585 10.526204,0.6981058 18.003157,7.0359765 30.875715,6.9487455 13.145695,-0.08908 29.772955,-8.9449046 45.025331,-8.346239 6.56456,0.2576634 19.03755,5.1000528 19.03755,5.1000528 V 15.876324 H 0 Z" />
</g>
</svg>
</section>
<section class="services" id="our-work">
<div class="main-heading">
<h1>Our Works</h1>
<div class="main-heading-bar"></div>
</div>
<div class="service-wrapper">
<div class="service-card">
<img src="img/students.jpg" alt="Children Welfare" class="service-card--img">
<div class="service-card--content">
<h1 class="service-card--title">Children Welfare</h1>
<p class="service-card--desc">Our team is continuously working for children welfare to secure their future.</p>
<a href="#" class="service-card--btn">read more</a>
</div>
</div>
<div class="service-card">
<img src="img/woman.jpg" alt="Women Empowerment" class="service-card--img">
<div class="service-card--content">
<h1 class="service-card--title">Women Empowerment</h1>
<p class="service-card--desc">We are empowering women, they will empower other families and this whole world.</p>
<a href="#" class="service-card--btn">read more</a>
</div>
</div>
<div class="service-card">
<img src="img/environment.jpg" alt="Environment Welfare" class="service-card--img">
<div class="service-card--content">
<h1 class="service-card--title">Environment Welfare</h1>
<p class="service-card--desc">We believe in sustainable development. See what we're doing to promote it.</p>
<a href="#" class="service-card--btn">read more</a>
</div>
</div>
<div class="service-card">
<img src="img/addiction.jpg" alt="De-Addiction Activities" class="service-card--img">
<div class="service-card--content">
<h1 class="service-card--title">De-Addiction Activities</h1>
<p class="service-card--desc">We empathetically works with tobacco & alcohol addicts to cop-up with their addictions.</p>
<a href="#" class="service-card--btn">read more</a>
</div>
</div>
</div>
</section>
<section class="mission">
<div class="main-heading">
<h1>Our Mission</h1>
<div class="main-heading-bar"></div>
</div>
<img src="img/mission-group.png" class="mission-group--img">
<div class="mission-right">
<p>
This world is a family, and we all are a part of it.
Today when you're going to abroad to complete your MBA, an unprivileged child in India is asked to quit studying and help his father to earn a little bit more for his family.
When you're having a party at your home, a family is sleeping with hunger at their hut.
When WE, the society is enjoying energy drinks, fruit juices etc. in a gathering, the youth part of us is getting addicted to several harmful drugs/alcohol/chemical compounds/salts in order to avoid their depressed thoughts!!
When you're purchasing a wooden masterpiece to decorate your home, a tree is cut-down to create that artifact.
<br><br>
We can change this world and create it beautiful, sustainable and a happier place for everyone. But we have to begin this changing process from ourselves.
We are on a mission to bring this change, from papers & debates to reality.
<br><br>
<a href="#" class="mission-link">Click here to be a part of this revolution</a>
</p>
</div>
</section>
<section class="message-section">
<div class="main-heading white-heading">
<h1>President's Message</h1>
<div class="main-heading-bar white-heading-bar"></div>
</div>
<div class="message-container">
<div class="message-container--left">
<img src="img/president.jpg" alt="Pankaj Khatri" class="president-img">
<br><br>
<p>Pankaj Khatri</p>
<p>President, SGTWS</p>
</div>
<div class="message-container--right">
<p class="message-content">
We all are a family and this is what we believe in. All of our deeds should be devoted to the almighty.
No one should be deprived of betterment in any case. We are educating the weaker section of our society in order to create a brighter future for them.
The perfect blend of modern education and spirituality is the key to inculcate a sense of fraternity among all of us.
<br><br>
I invite you all to be a part of this revolution. A revolution for the welfare of everyone; our children, our brothers & sisters, our mother Earth and even our beloved animals.
</p>
</div>
</div>
</section>
<section class="home-gallery">
<div class="main-heading">
<h1>Our Gallery</h1>
<div class="main-heading-bar"></div>
</div>
<div class="home-gallery-wrapper">
<div id="macy-container">
<img src="img/1.jpg" class="home-gallery-img">
<img src="img/2.jpg" class="home-gallery-img">
<img src="img/3.jpg" class="home-gallery-img">
<img src="img/4.jpg" class="home-gallery-img">
<img src="img/5.jpg" class="home-gallery-img">
<img src="img/6.jpg" class="home-gallery-img">
<img src="img/7.jpg" class="home-gallery-img">
<img src="img/8.jpeg" class="home-gallery-img">
</div>
<div class="home-gallery-btn--div"><a href="gallery.html"><h3 class="home-gallery-btn">View Our Gallery</h3></a></div>
</div>
</section>
<section class="form-section">
<div class="main-heading">
<h1>Become A Member</h1>
<div class="main-heading-bar"></div>
</div>
<div class="form-container">
<div class="form-container--left">
<img src="img/1.jpg" alt="Join Us" class="form-img">
<br>
<p>
We have strength and passion to bring a positive change in everyone's life. <strong>But with you, we can make this happen quickly and efficiently.</strong><br>
We invite you to join us and be a part of this historic revolution. Together, we can bring smiles on millions of faces and secure a more beautiful & healthier future for our next generation.
Let's create this world a better place for everyone!
<br><br>
Fill this short form and we will contact you soon.
</p>
</div>
<div class="form-container--right">
<form action="" class="volunteer-form">
<div class="form-row">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-row">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone">
</div>
<div class="form-row">
<label for="age">Age</label>
<input type="number" name="age" id="age">
</div>
<div class="form-row">
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="volunteer-form--btn"><p>SEND!</p></button>
</form>
</div>
</div>
</section>
<!-- Footer Starts Here -->
<footer>
<div class="footer-row">
<div class="footer-column branding-column">
<div class="footer-branding">
<img src="img/sgtwslogo.png" alt="SGTWS" class="footer-logo">
<h2 class="brand-name logo-font">Student Guardian Teacher Welfare Society</h2>
</div>
<br>
<p class="footer-desc">
Near Sharda Factory, Damuadhunga,<br>
P.O. Kathgodam, Tehsil-Haldwani,<br>
Dist.-Nainital, Uttrakhand - 263126
</p>
</div>
<div class="footer-column">
<div class="footer-heading"><h3>Organisation</h3><h4 class="down-arrow">❮</h4></div>
<a href="#" class="footer-link">About Us</a>
<a href="#" class="footer-link"">Contact</a>
</div>
<div class="footer-column">
<div class="footer-heading"><h3>Social Services</h3><h4 class="down-arrow">❮</h4></div>
<a href="#" class="footer-link">Children Welfare</a>
<a href="#" class="footer-link">Women Empowerment</a>
<a href="#" class="footer-link">Environment Welfare</a>
<a href="#" class="footer-link">De-Addiction Activities</a>
</div>
<div class="footer-column">
<div class="footer-heading"><h3>Important</h3><h4 class="down-arrow">❮</h4></div>
<a href="#" class="footer-link">Terms & Conditions</a>
<a href="#" class="footer-link">Privacy Policy</a>
</div>
</div>
<br>
<br>
<div class="footer-row">
<div class="social">
<p>Our motto - Your support, everyone's development</p>
</div>
</div>
</footer>
<script src="js/navbar.js"></script>
<script src="js/index.js"></script>
</body>
</html>