-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (179 loc) · 6.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Blood Bank Management System</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css"
/>
<link rel="stylesheet" href="homecss.css" />
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<!-- Navigation Bar -->
<nav class="bg-red-700 p-2 mt-0 w-full">
<div class="container mx-auto flex flex-wrap items-center">
<div
class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold"
>
<a
class="text-white no-underline hover:text-white hover:no-underline"
href="#"
>
<span class="text-2xl pl-2">Blood Bank Management System</span>
</a>
</div>
<div class="flex w-full md:w-1/2 justify-center md:justify-end">
<ul
class="list-reset flex justify-between flex-1 md:flex-none items-center"
>
<li class="flex-1 md:flex-none md:mr-3">
<a
class="inline-block py-2 px-4 text-white font-bold no-underline"
href="in.html"
>HOME</a
>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<a
class="inline-block text-white no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
href="AdminLogin.php"
>ADMIN</a
>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<a
class="inline-block text-white no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
href="in.html#learn"
>LEARN</a
>
</li>
<li class="flex-1 md:flex-none md:mr-3">
<a
class="inline-block text-white no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
href="contact.php"
>CONTACT</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="bg-red-700">
<div class="container mx-auto py-12 px-6 md:px-0">
<div class="p-2 md:flex md:items-center md:justify-between">
<div class="md:w-1/2">
<h2 class="text-4xl text-white font-bold leading-tight mb-4">
Donate Blood and Save Lives
</h2>
<p class="text-xl text-white mb-4">
We provide a safe and reliable blood supply to those who need it
most.
</p>
<button
class="bg-white text-red-700 font-bold py-2 px-6 rounded-full shadow-lg hover:bg-gray-100 hover:text-red-700">
<a href="donorLogin.php">
Donate Now </a>
</button>
</div>
</div>
</div>
</div>
<br />
<br />
<br />
<!-------------------------------------------------------------------------------->
<div class="parent">
<div class="SearchBlood" ><a href="search_blood.php"><p> Blood Availability Search</p></a></div>
<div class="SearchCamp"><p><a href="search_camp.php"> Blood Donation Camps Search</a></p></div>
<div class="DonerLogin" id="donate"><p><a href="donorLogin.php">Donor Registration/Login</a></p></div>
<div class="RegCamp"><p><a href="blood_camp.php">Register Voluntary Blood Camp</a></p></div>
</div>
<br /><br /><br />
<div class="learn" id="learn">
<h1 class="col">LEARN ABOUT DONATION</h1>
<p class="one">
Blood donation is the process of voluntarily giving blood, either whole
blood or specific components of blood, such as platelets or plasma, for
transfusion to another person. Blood donation is an essential aspect of
healthcare as it plays a vital role in saving millions of lives
worldwide.
The blood donation process typically involves several steps, including
registration, a medical screening, the actual donation process, and a
brief recovery period. The screening process ensures that the blood is
safe for transfusion and that the donor is healthy enough to donate.
After donation, the blood is tested for various infectious diseases
before it can be used for transfusion.
</p>
<br />
<table class="center">
<caption><b>Blood Type Compatibility Chart for Donors and Recipients</b></caption>
<thead>
<tr>
<th>Blood Type</th>
<th>Can Donate To</th>
<th>Can Receive From</th>
</tr>
</thead>
<tbody>
<tr>
<td>A+</td>
<td>A+, AB+</td>
<td>A+, A-, O+, O-</td>
</tr>
<tr>
<td>A-</td>
<td>A+, A-, AB+, AB-</td>
<td>A-, O-</td>
</tr>
<tr>
<td>B+</td>
<td>B+, AB+</td>
<td>B+, B-, O+, O-</td>
</tr>
<tr>
<td>B-</td>
<td>B+, B-, AB+, AB-</td>
<td>B-, O-</td>
</tr>
<tr>
<td>AB+</td>
<td>AB+</td>
<td>All Blood Types (AB+, AB-, A+, A-, B+, B-, O+, O-)</td>
</tr>
<tr>
<td>AB-</td>
<td>AB+, AB-</td>
<td>AB-, A-, B-, O-</td>
</tr>
<tr>
<td>O+</td>
<td>All Blood Types (O+, A+, B+, AB+)</td>
<td>O+, O-</td>
</tr>
<tr>
<td>O-</td>
<td>All Blood Types</td>
<td>O-</td>
</tr>
</tbody>
</table>
</div>
<footer>
<ul class="footer-nav">
<li class="footer-nav-item">
<a href="in.html" class="footer-nav-link">Home</a>
</li>
<li class="footer-nav-item">
<a href="contact.php" class="footer-nav-link">About Us</a>
</li>
<li class="footer-nav-item">
<a href="registration_or_login.php" class="footer-nav-link">Donate Blood</a>
</li>
</ul>
</footer>
</body>
</html>