-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
310 lines (237 loc) · 11.7 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Food Fairy</title>
<link rel="icon" href="img/favicon.ico?">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<section class="colored-section" id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Food Fairy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#testimonials">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Cont">Contributions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- Features -->
<!-- Carousel -->
<section class="colored-section" id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">If You Can't Finish It Share It With A Person.</h2>
<img class="testimonial-image" src="img/image1.jpg" alt="dog-profile">
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Today's Waste Is Tomorrow's Shortage.</h2>
<img class="testimonial-image" src="img/image2.jpg" alt="lady-profile">
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Be A Part Of This Change.</h2>
<img class="testimonial-image" src="img/image3.jpg" alt="lady-profile">
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<section class="Contribution" id="Cont">
<div class="row">
<div class="col-md-6">
<div class="container">
<h1 class="yo">Make a Contribution</h1>
</div>
</div>
<div class="col-md-6">
<div class="container-button">
<a href="contribution.html" class="btn btn-danger btn-lg" target="_blank" rel="noopener noreferrer">CONTRIBUTE</a>
</div>
</div>
</section>
<!-- about us -->
<section class="white-section" id="aboutus">
<h2 class="hone">About Us</h2>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Global Food Crisis. The world is entering a new era of global food crisis where rising food prices,
poverty, starvation and food survival will become the new normal. Most worry, others speculate.
The worst part is that more than 75% of wasted food is untouched and very much healthy for consumption.
.After decades of steady decline, world hunger has slowly been on the rise since 2015. An estimated 821
million people in the world suffered from hunger in 2018.
If nothing changes, the immense challenge of achieving the Zero Hunger Target by 2030 will not be achieved.
At the same time, overweight and obesity continue to increase in all regions of the world,
according to The State of Food Security and Nutrition in the World 2019.
It's not the unwillingness of people to share that causes food to get wasted but it's the gap between the
people who need food and the people who want to share it.
So here's where Food Fairy comes into the picture. We make use of the technology at our disposal, so that
its no longer a hassle for people to do a good deed.
All you need to do search the nearest active organization around you and after giving us all the required
information your package will get picked. Hassle Free Right!!! .Our aim is to create a community where we
care for each other and work for each others betterment.
What are you waiting for go make your contribution.
</p>
</div>
<div class="col-md-6">
<p>Food Never Eaten in India</p>
<div class="progress">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>
<p>Food gone out of date</p>
<div class="progress">
<div class="progress-bar" style="width: 63%;">63%</div>
</div>
<p>Purchase more than enough food for consumption </p>
<div class="progress">
<div class="progress-bar" style="width: 23%;">23%</div>
</div>
<p>Population Undernourished In India</p>
<div class="progress">
<div class="progress-bar" style="width: 14%;">14%</div>
</div>
<iframe class="Frame" title='Earth running out of food'
src='https://www.theworldcounts.com/embed/challenges/112?background_color=white&color=black&font_family=%22Helvetica+Neue%22%2C+Arial%2C+sans-serif&font_size=14'
style='border: none' height='100' width='300'></iframe>
<iframe class="Frame" title='Tons of food lost or wasted'
src='https://www.theworldcounts.com/embed/challenges/101?background_color=white&color=black&font_family=%22Helvetica+Neue%22%2C+Arial%2C+sans-serif&font_size=14'
style='border: none' height='100' width='300'></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="colored-section" id="cta">
<div class="container-fluid">
<div class="containerhww">
<h1 class="htwo"> How We Work</h1>
<div class="row services">
<div class="col-md-3 text-center">
<div class="icon">
<i class="fa fa-cogs"></i>
</div>
<h3>Network</h3>
<p class="para">We all want to help reduce food waste but we don't know what to do and who to contact to
make use of that untouched food.Here's where Food Fairy comes into the picture. </p>
</div>
<div class="col-md-3 text-center">
<div class="icon">
<i class="fa fa-desktop"></i>
</div>
<h3> Step 1</h3>
<p class="para">Let's say you have a event or gathering at your home and after the event there is a bunch of
good, edible food left. You want this food to reach the underprivileged part of our society but it seems
like an hassle after a long gathering. Here's how we can make this simple. All you have to do is visit
this website. Look for the nearest active organization around you. </p>
</div>
<div class="col-md-3 text-center">
<div class="icon">
<i class="fa fa-handshake-o"></i>
</div>
<h3>Step 2</h3>
<p class="para">So now you have found the nearest active non-for profit organization around you, just one
more step and your work is done. Just click on the pickup button and enter the type and quantity of food
along with a picture. Now just sit back because now we will make sure that someone from the selected
organization reaches your location in 40 mins to pickup your food. </p>
</div>
<div class="col-md-3 text-center">
<div class="icon">
<i class="fa fa-child"></i>
</div>
<h3>Almost Done</h3>
<p class="para">40 mins have passed and one of our voluteers have contacted you and they have successfully
picked the package. YAY, you just made a difference in the life of a person. Feels good, right!!!!.</p>
</div>
</div>
</div>
</div>
</section>
<!-------Team members----->
<section id="team">
<h1 class="contactme">Contact Us</h1>
<h3 class="bb">Get in Touch with us, Check out our Social Profiles.</h3>
<div class="containerimg">
<div class="row">
<div class="col-md-3 profile-pic text-centre">
<div class="img-box">
<img class="us" src="img/icon (1).png" class="img-responsive">
<h2 class="nameus">Aastha</h2>
<h4><a href="https://github.com/AasthaCodex">GitHub </a></h>
<h4><a href="">Linkedln </a></h4>
</div>
</div>
<div class="col-md-3 profile-pic text-center">
<div class="img-box">
<img class="us" src="img/icon (3).png" class="img-responsive">
<h2 class="nameus">Priyasha</h2>
<h4><a href="https://www.instagram.com/priyasha_2002/">Instagram </a></h4>
<h4><a href="https://www.linkedin.com/in/akhouri-priyasha-9401011b8">Linkedln </a></h>
</div>
</div>
<div class="col-md-3 profile-pic text-center">
<div class="img-box">
<img class="us" src="img/icon (2).png" class="img-responsive">
<h2 class="nameus">Khadija</h2>
<h4><a href="https://www.instagram.com/khadija04._/">Instagram </a></h4>
<h4><a href="https://linkedin.com/in/khadija-korasawala-7b0943201"></a>Linkedln </h>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer-section" id="footer">
<div class="container-fluid">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fas fa-envelope"></i>
<p class="footertext">© Copyright 2020 Vipers</p>
</div>
</footer>
</body>
</html>