-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
388 lines (352 loc) · 19.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
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
<!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" />
<!-- fevicon -->
<link rel="icon" href="star.png" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Home-Helping Hands</title>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Niconne&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Fredericka+the+Great&family=Monoton&family=Niconne&family=Rye&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css" />
<!-- scroll effect links -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header font">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="slack"><i class="bi bi-slack"></i></span> <span class="hh">H</span><span class="hh"></span><span class="el">ELPING </span><span class="hh">H</span><span class="el">ANDS</span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1"><i class="bi bi-house-door-fill"></i>Home</a></li>
<li><a href="#section2"><i class="bi bi-file-person-fill"></i>About us</a></li>
<li><a href="#section3"><i class="bi bi-check2"></i>Our Initiatives</a></li>
<li><a href="#section4"><i class="bi bi-bookmarks"></i>Our Mission</a></li>
<li><a href="#section5"><i class="bi bi-clipboard-data"></i>Registration Form</a></li>
<li><a href="view.php">Donators list</a></li>
</ul>
</div>
</div>
</nav>
<section id="section1">
<header>
<marquee><i class="bi bi-quote"></i>You Have The Power To bring happiness.<i
class="bi bi-emoji-smile-fill"></i><i class="bi bi-quote"></i></marquee><br><br>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2 class="text-center"><span><P class="head"><i class="bi bi-soundwave">CHANGE THE LIFE,CHANGE THE WORLD</i><i class="bi bi-soundwave"></i></P></span><span class="s1">The best Way To FindYourself is <br>to lose Yourself in
the service of Others</span><br>
<br>
<a href="#section5"><button class="btn btn-danger btn-lg">Share Some Love</button>
</h2></a>
</div>
<div class="col-sm-6">
<div class="thumbnail">
<img src="happy face.jpg" class="fimg"alt="happy faces" height="350px" weight="90px">
<figcaption>Our lives begin to end the day we become silent about things that matter
</figcaption>
</div>
</div>
</div>
</div>
<div class="arrow">
<a href="#next">
<h1><i class="bi bi-chevron-double-down"></i></h1>
</a>
</div>
</header>
</section>
<section id="section2">
<header>
<div class="container">
<h3>About Us</h3>
<div>
<hr>
</div>
<div class="row co">
<div class="col-sm-6">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel"
data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<a href="post/1.jpg" class="fancybox color"
data-fancybox="gallery3105">
<img src="post/1.jpg" alt="WEDDING">
</a>
</div>
<div class="item">
<a href="post/2.jpg" class="fancybox color"
data-fancybox="gallery3105">
<img src="post/2.jpg" alt="CANDID">
</a>
</div>
<div class="item">
<a href="post/3.jpg" class="fancybox color"
data-fancybox="gallery3105">
<img src="post/3.jpg" alt="COLLAGE">
</a>
</div>
<div class="item">
<a href="post/4.jpg" class="fancybox color"
data-fancybox="gallery3105">
<img src="post/4.jpg" alt="COLLAGE">
</a>
</div>
<div class="item">
<a href="post/5.jpg" class="fancybox color"
data-fancybox="gallery3105">
<img src="post/5.jpg" alt="COLLAGE">
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6" data-aos="fade-up">
<p id="next">There are very diverse techniques for NGOs to attract members. The key aspect is to
use the content, an appropriate message to make your NGO's cause be known and attract new
members, collaborators, donors or volunteers.
You need to consider that your goal is to encourage your audience to support your
organization through a message that reaches them in the most personal way possible.
Regarding funding sources, they are also diverse, but they can be divided into six groups
partners, donors, companies, grants, event organization and merchandising sales.</p>
<a href="ngodetails.html"><button class="btn btn-danger btn-lg">View More</button></a>
</div>
</div>
</div>
</header>
</section>
<section id="section3">
<header>
<div class="container">
<h3>Our Initiatives</h3>
<div>
<hr>
</div>
<div class="row co"data-aos="fade-up">
<h5 class="ini">Whether you decide to make a one-off donation or set up a monthly gift, you can
change a life forever today. Often, one meal at the right time will be enough to make a
difference between life and death. </h5>
<div class="col-sm-6 alert-info alert">
<p class="cause text-center">
<img src="cause/1.jpg" alt="" height="100px"><br>
Child<br>rights.
</p>
</div>
<div class="col-sm-6 alert-success alert">
<p class="cause text-center">
<img src="cause/2.jpg" alt="" height="100px"><br>
Health and <br>Nutrition.
</p>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 alert-warning alert t1">
<p class="cause text-center">
<img src="cause/3.jpg" alt="" height="100px"><br>
Care for <br>elderly people.
</p>
</div>
<div class="col-sm-4 alert-success alert">
<p class="cause text-center">
<img src="cause/4.png" alt="" HEIGHT="100px"><br>
Health For<br>All.
</p>
</div>
<div class="col-sm-4 alert-info alert t1">
<p class="cause text-center">
<img src="cause/5.png" alt="" height="100px"><br>
Literacy and <br>Education.
</p>
</div>
</div>
</div>
</header>
</section>
<section id="section4">
<header>
<div class="container">
<h3>Our Mission</h3>
<div>
<hr>
</div>
<div class="row co1">
<div class="col-sm-3 bg-primary p rols">
<p><span class="mission">Protection</span><br>Providing relief to victims of disaster and
assisting the poor</p>
</div>
<div class="col-sm-3 bg-danger i rols">
<p><span class="mission">Prevention</span><br>reducing people's vulnerability through income
diversification and saving</p>
</div>
<div class="col-sm-3 bg-primary y rols">
<p><span class="mission">Promotion</span><br>Increasing People Chances and Opportunities</p>
</div>
<div class="col-sm-3 bg-danger u rols">
<p><span class="mission">Transformation</span><br>redressing Social political and economic
exclusion or oppression</p>
</div>
</div>
<!-- <div class="row">
<div class="col-sm-3 bg-primary">
<p>"Give a Man A Fish"</p>
</div>
<div class="col-sm-3 bg-primary">
<p>"Teach A man To Fish"</P>
</div>
<div class="col-sm-3 bg-primary">
<p>"organise a Fisherman's Co-Op"</p>
</div>
<div class="col-sm-3 bg-primary">
<p>"Protect Fishin And Fishing Rights"</p>
</div>
</div> -->
<br>
<br>
<!-- <div data-aos="fade-in" data-aos-duration="4000"> -->
<div class="jumbotron"data-aos="fade-right">
<h5 class="m1">Your donation will be immediately put to use</h5>
<h5 class="m2">As soon as you complete your donation, your gift will start its journey. First your money
will be turned into food, and then sent to one of the over 80 countries where people are most
vulnerable. Every single day, WFP has 5,600 trucks, 30 ships and nearly 100 planes ready to deliver
the food you send. Because you can't go there and hand out the food yourself, we do it for you.
Please send food to save a life today and join the fight against hunger.</h5>
</div>
</div>
</div>
</header>
</section>
<section id="section5">
<header>
<div class="container">
<h3>Registration Form</h3>
<div>
<hr>
</div>
<h4 class="down"><i>Please Before donating fill this form<i></h4>
<form action="insert.php"method="post">
<div class="panel panel-default col-sm-6"data-aos="zoom-in">
<div class="panel-body">
<div class="col-sm-12">
<div class="form-group">
<label for="FName">First Name</label><br>
<input type="text" class="input-lg" name="fname" id="fname"
placeholder="please Enter Your First Name"required>
<label for="LName">Last Name</label><br>
<input type="text" class="input-lg" name="lname" id="fname"
placeholder="please Enter Your Last Name"required>
</div>
<div class="form-group">
<label for="email">Email</label><br>
<input type="email" class="input-lg" name="email" id="email"
placeholder="Please Enter Your Valid Email"required>
</div>
<div class="form-group">
<label for="Phone">Phone Number</label><br>
<input type="tel" class="input-lg" name="phone" id="Phone"
placeholder="Please Enter Your 10 Digit Valid Number"pattern="[7-9]{1}[0-9]{9}" maxlength="10"required>
</div>
<div class="form-group">
<label for="Address">Address</label><br>
<input type="text" class="input-lg" name="add" id="add"
placeholder="Enter Your Address"required>
</div>
<div class="form-group">
<label for="city">City</label><br>
<input type="text" class="input-lg" id="city" name="city"
placeholder="Enter Your City">
</div>
<div class="form-group">
<label for="amt">Donation Amount:</label><br>
<input type="text" class="input-lg" id="amt" name="amt"
placeholder="Enter your amount "required>
</div>
<div class="form-group">
<a href="payment.html"><button type="submit"class="btn btn-lg btn-success btn-block">Submit Information</button></a>
<!-- <input type="button"name="submit"class="btn btn-lg btn-success">Submit Information -->
</div>
</div>
</div>
</div>
<div class="col-sm-6 bottomimg">
<div class="thumbnail">
<img src="helping hands.jpg" alt=""><br>
</div>
<div class="thumbnail">
<img src="helping hands2.jpg" alt="">
</div>
</div>
</form>
</div>
</header>
</section>
<section id="section9"data-aos="fade-down">
<header>
<div class="container">
<i class="bi bi-twitter"></i>
<i class="bi bi-whatsapp"></i>
<i class="bi bi-instagram"></i>
</div>
</header>
</section>
<section id="section6">
<header>
<nav class="navbar navbar-inverse foot">
<div class="container">
<a class="navbar-brand" href="payment1.php"><b>Created By Minal Patil For Ansrcoach Project | All Rights Reserved!© 2022</b></a>
</div>
</nav>
</header>
</section>
</body>
<script>
AOS.init({
duration:1200,
});
</script>
</html>