-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
376 lines (374 loc) · 15.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
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blood Buddies | Blood Donation Campaign Multi-Concept Activism </title>
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section>
<!--header code starts -->
<div class="container-fluid d-none d-lg-block">
<div class="row bg-danger text-white">
<div class="col-lg-6 col-sm-12 text-center">
<p>
<i class="fa fa-building-o" aria-hidden="true"></i>
<span><strong>Contact</strong>: East shibjoin, syhelt, 3100</span>
<i class="fa fa-phone" aria-hidden="true"></i>
<span><strong>Call Us</strong>: +880-1891-82709</span>
</p>
</div>
<div class="col-lg-6 text-center mt-2">
<a href="https://google.com" class="text-light"><i class="fa fa-facebook"></i></a>
<a href="#" class="text-light ml-3"><i class="fa fa-twitter"></i></a>
<a href="#" class="text-light ml-3"><i class="fa fa-linkedin"></i></a>
<a href="#" class="text-light ml-3"><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
<div></div>
<div class="sticky-top mt-sm-5 mt-lg-0">
<nav class="navbar navbar-expand-sm bg-light h3 navbar-light">
<div class="navbar-brand col-4 text-center">
<a href="#" class="text-dark text-uppercase font-weight-bold h4" style="text-decoration: none;"><span
class="text-danger h4 font-weight-bold">Blood</span> Buddies </a>
</div>
<button class="navbar-toggler" data-toggle="collapse" data-target="#myNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-8 text-center collapse navbar-collapse" id="myNav">
<ul class="navbar-nav">
<li class="nav-item ml-5">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link text-dark" href="#">Compaign</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link text-dark" href="#">Pages</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link text-dark" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="demo" class="carousel slide mt-sm-5 mt-lg-0" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner h5">
<div class="carousel-item active">
<img src="img/home_1_slider_1.jpg" alt="Los Angeles" width="100%">
<div class="carousel-caption">
<p class="text-left text-justify">Donate Blood, save life!</p>
<p class="text-left text-justify">Your Blood<br>Can Bring Smile<br>In Other person face</p>
<div class="float-left">
<button class=" d-lg-block d-none btn bg-danger text-light font-weight-bold text-uppercase">Donate Now</button>
<button class="d-lg-block d-none btn bg-secondary text-light font-weight-bold">CALL: 411-009-872-333</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="img/home_1_slider_2.jpg" alt="slider1" width="100%">
<div class="carousel-caption">
<p class="text-left text-justify">Donate Blood, save life!</p>
<p class="text-left text-justify">Your Blood<br>Can Bring Smile<br>In Other person face</p>
<div class="float-left">
<button class="d-lg-block d-none btn bg-danger text-light font-weight-bold text-uppercase">Donate Now</button>
<button class=" d-lg-block d-none btn bg-secondary text-light font-weight-bold">CALL: 411-009-872-333</button>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<section class="container about">
<div class="row">
<div class="bg-light col-lg-6 col-sm-12 my-5 px-5">
<h1 class="display2">Who we are?</h1>
<ul class="list-unstyled">
<li>Blood buddues is public donation center with blood donation memebers in the changing helath care
system.</li>
<li>
<ul>
<li>Specialist blood donors and clinical supervison</li>
<li>increasing communicaton with our members</li>
<li>High quality assesments</li>
<li>Examine critically to ensure alignment</li>
<li>The extra case of multi-dicicplinary team</li>
</ul>
</li>
</ul>
</div>
<div class="col-lg-6 col-sm-12"><img class="img-fluid" src="img/about_feat_bg.jpg"></div>
</div>
</section>
<div class="container-fluid">
<div class="row" style="background-image: url('img/testimony_feat_bg.jpg'); background-size: 100% 100%; height:700px;background-repeat: no-repeat;">
<div class="mx-auto text-center text-light " style="margin-top: 150px">
<h5 class="">Awesome Words From members</h5>
<h1 class="display-4 font-weight-bold">JOIN WITH US SAVE LIFE</h1>
</div>
</div>
</div>
<div class="container" style="margin-top: -25%">
<section class="row my-5">
<div class="bg-light col-lg-6 col-sm-12 py-5">
<h1 class="text-danger">Recipient Opinion</h1>
<p class="my-5">I wish i could tell you my donor how greatful i am for your selfless act. You gave me new life. We
may be coworkers or schoolmates or just two in same community. I'm very greatful to you.</p>
<div><img class="rounded-circle" src="img/user_3.jpg"></div>
<h5>LOGON MONSON</h5>
<p>CTO, Fulcrum Design</p>
</div>
<div class="col-lg-6 col-sm-12 img-fluid"><img src="img/testimony_feat_img.jpg" width="100%"></div>
</section>
</div>
<!-- our compagians starts -->
<div class="container">
<section class="row" style="margin: 14% 0px">
<div class="col-lg-5 col-sm-12">
<h1>OUR CAMPAIGNS</h1>
<P>All over world we have arranged total sixty thousands donation campaign and visit thousands of other
venues various occasions.</P>
<button class="btn bg-danger text-light font-weight-bold">LOAD ALL CAMPAIGNS</button>
</div>
<div class="col-lg-3 col-sm-6">
<img class="img-fluid"src="img/event_3.jpg" height="100%" width="400px">
</div>
<div class="col-lg-4 col-sm-6 bg-light m">
<p>11 March, 2018</p>
<h3>Free Group Checking</h3>
<p>Lorem ipsum dolor sit amet turadipi scing elit lobort issim consecte lodign pharetra. Lobort qssim
tronsecte diagnosis sharetrx mauris gone do.</p>
<p>10.00 - 3.00           California, USA </p>
</div>
</section>
</div>
<div class="container-fluid">
<div class="row col-12">
<img class="img-fluid" src="img/appointment_female_bg.jpg">
</div>
</div>
<div class="container">
<section class="row">
<div class="col-lg-6 col-sm-12 col-lg-mt-5">
<ul class="list-unstyled">
<li class="my-4"><p>Good To Know</p></li>
<li class="my-3"><h1>Helpful Information</h1></li>
<li class="my-3"><ul>
<li class="my-2">Maintain healthy iron level by eating iron rich foods</li>
<li class="my-2">Drink an extra 16 oz. of water prior to your donation</li>
<li class="my-2">Avoid alcohol consumption before your blood donation</li>
<li class="my-2">Remember to bring the donor card or national ID/Pssport</li>
<li class="my-2">Finally, Try to get a good night sound sleep after donation</li>
</ul></li>
</div>
<div class="col-lg-6 col-sm-12 bg-light" style="margin-top: -15%;">
<form>
<div class="h-25 bg-dark text-light font-weight-bold text-uppercase text-center p-3 my-4" >
<h3>Request Appointment</h3>
</div>
<div class="form-group form-inline">
<input type="text" name="username" class="form-control col-lg-5 mx-auto border-0" placeholder="Name">
<input type="email" name="emailid" class="form-control col-lg-5 mx-auto border-0" placeholder="Email">
</div>
<div class="form-group form-inline">
<input type="phone" name="username" class="form-control col-lg-5 mx-auto border-0" placeholder="Phone">
<select name="cars" class="custom-select col-lg-5 mx-auto border-0" placeholder="Donation Center">
<option>Donation Center</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="form-group form-inline">
<input type="text" name="date" class="form-control col-lg-5 mx-auto border-0" placeholder="Date">
<input type="text" name="time" class="form-control col-lg-5 mx-auto border-0" placeholder="Time">
</div>
<div class="form-group">
<textarea class="form-control col-lg-11 mx-auto border-0" rows="5" placeholder="Your Message..."></textarea>
</div>
<div class="text-center">
<button class="btn bg-danger text-light font-weight-bold border-0">GET APPOINTMENT</button>
</div>
</form>
</div>
</section>
</div>
<div class="container">
<section class="row text-center my-5 font-weight-bold">
<div class="bg-light p-4 mx-lg-5 m-sm-y-5 col-sm-5 col-lg-2">2578<br>Success Smile</div>
<div class="bg-light p-4 mx-lg-5 m-sm-y-5 col-sm-5 col-lg-2">3235<br>Happy Donors</div>
<div class="bg-light p-4 mx-lg-5 m-sm-y-5 col-sm-5 col-lg-2" >3568<br>Happy Recipient</div>
<div class="bg-light p-4 ml-lg-5 m-sm-y-5 col-sm-5 col-lg-2">1364<br>Total Awards</div>
</section>
</div>
<!-- our volunteer -->
<section style="background-image: url('img/team_feat_bg.jpg');height: 900px; padding-top: 300px">
<div class="text-center container">
<h5 class="text-light">OUT VOLUNTEERS</h5>
<h1 class="text-light">The volunteers who give their time and talents help to fulfil our mission</h1>
</div>
</section>
<div class="container">
<section class="row text-center">
<div class="bg-light">
<img src="img/team_9.jpg">
<h4>ALEXANDER GARY</h4>
<p>CO-FOUNDER</p>
<P>
</P>
</div>
<div class="bg-light">
<img src="img/team_6.jpg">
<h4>MELISSA MUNOZ</h4>
<p>FOUNDER</p>
<p>
</p>
</div>
<div class="bg-light">
<img src="img/team_7.jpg">
<h4>JOHN ABRAHAM</h4>
<p>MANAGER</p>
<p>
</p>
</div>
</section>
</div>
<div class="container">
<section class="row">
<div class="text-center mx-auto my-5">
<button class="btn bg-danger">BECOME A VOLUNTEER</button>
</div>
</section>
</div>
<div class="container">
<section class="row">
<div class="mx-auto text-center">
<h2>CAMPAIGN GALLERY</h2>
<p class="text-danger">|</p>
<p>Our prestigeous voluntary work on campaign by the team</p>
</div>
</section>
</div>
<div class="container">
<div class="row">
<img class="ml-3 mt-3" src="img/gallery_1.jpg" height="350px" width="350px">
<img class="ml-3 mt-3" src="img/gallery_2.jpg" height="350px" width="350px">
<img class="ml-3 mt-3" src="img/gallery_3.jpg" height="350px" width="350px">
</div>
<div class="row mt-3">
<img class="ml-3 mt-3" src="img/gallery_4.jpg" height="350px" width="350px">
<img class="ml-3 mt-3" src="img/gallery_5.jpg" height="350px" width="350px">
<img class="ml-3 mt-3" src="img/gallery_6.jpg" height="350px" width="350px">
</div>
</div>
<section class="container mt-3">
<div class="row">
<h2 class="col-8 text-center m-auto">Become A part of Great Work Today</h2>
<p class="col-10 text-center m-auto">You can give blood at any can give blood at any can give blood at
any can give blood at any can give blood at any can give blood at any can give blood at any </p>
</div>
<button style="margin-left: 40% " class="btn bg-danger text-center mt-4">JOIN WITH US</button>
</section>
<footer class="container-fluid bg-dark text-light mt-5">
<div class="p-4">
<section class="row">
<div class="col-lg-3 col-lg-2 mt-4 h4"><a href="#" class="text-light text-uppercase ml-4 mt-4"
style="text-decoration: none;"><span class="text-danger">Blood</span> Buddies </a>
</div>
<div class="col-lg-9 col-sm-10">
<p>we are world largest and trustful blood donation center. orld largest and trustful blood
donation center orld largest and trustful blood donation center orld largest and trustful
blood donation center orld largest and trustful blood donation center orld largest and
trustful blood donation center orld largest and trustful blood donation center</p>
</div>
</section>
<hr class="col-10 m-auto" style="border-top: 1px solid white;">
<section class="row mt-4">
<div class="col-lg-4 col-sm-12">
<h5 class="mx-2">CONTACT US</h5>
<ul class="list-unstyled">
<li class="mx-2 my-2">
<i class="fa fa-envelope text-danger mx-2"></i>
support@donationcom
<p class="mx-4">  helpme@donation.com</p>
</li>
<li class="mx-2 my-2">
<i class="fa fa-location-arrow text-danger mx-2"></i>
Road-2,3/A East Shibgonj
<p class="mx-4"> Sylhet-3100, Bangaldesh</p>
</li>
<li class="mx-2 my-2">
<i class="fa fa-phone text-danger mx-2"></i>
Office: (+880) 0823 560 433
<p class="mx-4">  Cell: (+880) 0723 161 343</p>
</li>
</ul>
</div>
<div class="col-lg-4 col-sm-12">
<h5>SUPPORT LINKS</h5>
<div class="d-flex">
<div>
<ul class="list-unstyled">
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
</ul>
</div>
<div class="ml-5">
<ul class="list-unstyled">
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
<li class="my-2"><i class="fa fa-caret-right text-danger mx-2"></i>Thalassemia</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<h5>SUBSCRIBE US</h5>
<p>Signup for regular newsletter and stay up to date with our latest news</p>
<div>
<input type="text" name=""
class="form-control bg-dark text-secondary border border-secondary"
placeholder="Enter Your Email">
</div>
<div>
<button class="btn bg-danger text-center mt-3">Subscribe Now</button>
</div>
</div>
</section>
</div>
</footer>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>