-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (193 loc) · 6.49 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
<!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" />
<title>BloodBuddy</title>
<link rel="stylesheet" href="./css/style.css" />
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="banner">
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="html/about.html">About Us</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/donate.html">Donate blood</a></li>
<li><a href="html/request.html">Request blood</a></li>
</ul>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- Login button -->
<a href="./html/login.html"
><button class="button-24" role="button">Login</button></a
>
<a href="./html/signup.html"
><button class="button-24" role="button">Signup</button></a
>
</div>
<div class="content">
<h1>BloodBuddy</h1>
<!-- <p>
“Blood Donation Is A Small Act Of Kindness That Does Great And Big
Wonders.”
</p> -->
<div>
<button
type="button"
onclick="location.href='html/donate.html'"
value="click here"
>
<span></span><a href="html/donate.html">DONATE BLOOD</a>
</button>
<div class="space"></div>
<button
type="button"
onclick="location.href='html/request.html'"
value="click here"
>
<span></span><a href="html/request.html">REQUEST BLOOD</a>
</button>
<div class="space"></div>
</div>
</div>
</div>
<br />
<div class="firstblock">
<div class="text">
<p>
Demand-supply gap with regard to blood needed for transfusion for
needy patients is wide with only 80 per cent of the requirement being
met and it is a bigger problem in rural areas which hardly have blood
banks.
</p>
<br />
<p>
<span>We're working hard to fix that.</span>
</p>
</div>
<div class="img-container">
<img src="./images/donate.jpg" class="donate" />
</div>
</div>
<div class="reasons-to-donate">
<h2>5 Reasons to donate blood</h2>
<ol>
<li>1/3 of us will need a blood transfusion in our lifetime.</li>
<li>
3 lives can be saved with the amount of blood donated in one sitting.
</li>
<li>Every 2 seconds someone in the world needs blood.</li>
<li>
62 countries got sufficient blood supplies from voluntary donations.
</li>
<li>
It takes 36 hours to naturally replace blood lost from the body.
</li>
</ol>
<h3>
“Donate Blood Because You Never Know How Helpful It Might Be To
Someone.”
</h3>
</div>
<div class="donated-blood">
<h2><span>How</span>Blood Donation Works?</h2>
<img src="./images/home02.png" alt="" />
<ol>
<li>A pint of blood is drawn from a donor.</li>
<li>Blood is collected and labeled in a sterile bag.</li>
<li>Blood is transported to a lab for testing and processing.</li>
<li>
Blood is processed and spun down into different components: plasma,
red blood cells and platelets.
</li>
<li>Blood is tested to ensure it is safe for transfusion.</li>
<li>Local hospitals place orders for blood based on specific needs.</li>
<li>
Blood products are stored and ready for transfusion. Platelets expire
in 5 days, red blood cells in 42 days, and plasma in 2 years.
</li>
<li>
Blood is transferred to patients. 1 blood donation has the potential
to save 3 lives.
</li>
</ol>
</div>
<!-- Footer section -->
<footer>
<div class="data">
<div class="slogan">
<span>“Blood Donation Costs You Nothing,</span> But It Can Mean The
World To Someone In Need.”
</div>
<div class="row">
<div class="left">
<h2><span>HELP SAVE A LIFE</span></h2>
<h2>GIVE THE GIFT OF BLOOD</h2>
<div class="empty-space"><br /><br /></div>
</div>
<div class="right">
<img src="./images/blood.png" alt="" />
</div>
</div>
</div>
<div class="details">
<div class="left">
<br />
<p>
BloodBuddy is a blood donation site. It is made with the vision to
help people in need. To help the patient’s family in finding the
blood.
</p>
</div>
<div class="middle">
<h2>Quick Links</h2>
<a href="about.html">About</a>
<a href="donate.html">Donate</a>
<a href="request.html">Request</a>
</div>
<div class="right">
<h2>Quick Links</h2>
<div class="phone">
<i class="fa-solid fa-phone"></i>
<a href="tel:08192-275123">08192-123456</a>
</div>
<div class="email">
<i class="fa-solid fa-envelope"></i>
<a href="mailto:contact@bloodbuddy.com">contact@bloodbuddy.com </a>
</div>
<div class="location">
<i class="fa-solid fa-location-dot"></i> <a
href="https://goo.gl/maps/pZhPUS9JcXmoAa9i8"
target="_blank"
rel="noopener noreferrer"
>Bengaluru,Karnataka,India
</a>
</div>
</div>
</div>
<hr style="width: 90%; margin: 10px" />
<div class="copyright" style="margin: 30px">
<!-- Add font awesome icons -->
<div>
<a href="https://www.facebook.com/" class="fa fa-facebook"></a>
<a href="https://twitter.com/" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/" class="fa fa-instagram"></a>
</div>
<p>Copyright & copy; 2022 | Kedar M H | All rights reserved</p>
</div>
</footer>
</body>
</html>