-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
216 lines (195 loc) · 9.97 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
<!DOCTYPE HTML>
<html>
<head>
<title>The Blood Heroes</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- add icon link -->
<link rel = "icon" href ="./images/TBHLogo.png" type = "image/x-icon">
<!-- add go.analytics tag -->
<meta name="google-site-verification" content="xoTKcTWza_Dg6G8NaaKQ2ZBwmNO9s_Kj8UL3wRW6OJQ" />
</head>
<body class="is-preload landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="index.html">The Blood Heroes</a></h1>
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="coreTeam/contactUs/contactUs.html">ContactUs</a></li>
<li>
<a href="#">JoinUs</a>
<ul>
<li><a href="https://forms.gle/8KenYjre5xMdLLdk8" target="_blank">As Volunteer</a></li>
<!-- <li><a href="https://forms.gle/8KenYjre5xMdLLdk8" target="_blank">As Volunteer</a></li> -->
</ul>
</li>
<li><a href="#" class="button primary">Donate</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h2>Donate Blood, Save Lives</h2>
<h3>Every Pint Matters!</h3>
<p>Join us in the struggle for a healthier tomorrow for everyone<p>
</header>
<span class="image"><img src="./images/TBHLogo1.png" alt="" /></span>
</div>
<a href="#one" class="goto-next scrolly">Next</a>
</section>
<!-- One -->
<section id="one" class="spotlight style1 bottom">
<span class="image fit main"><img src="./images/1stanniversary01.jpg" alt="" /></span>
<div class="content">
<div class="container">
<div class="row">
<div class="col-4 col-6-medium">
<header>
<h3>Our Blood Heroes Always Prepared:</h3>
<ul>
<h4>To serve Humanity.</h4>
<h4>To Donate Blood In Emergency.</h4>
<h4>To Provide Hope to Thalassemia Patients.</h4>
</ul>
</header>
</div>
<div class="col-4 col-6-medium">
<h3>Providing blood to thalassemia patients and other patients in need.</h3>
<h3>Serving 100+ patients daily.</h3>
</div>
</div>
</div>
</div>
<a href="#two" class="goto-next scrolly">Next</a>
</section>
<!-- Two -->
<section id="two" class="spotlight style2 right">
<span class="image fit main"><img src="./images/peshawarbloodcamp.jpg" alt="" /></span>
<div class="content">
<header>
<br><br>
<h2>Project Bleed Green</h2>
</header>
<br>
<p>TBH is a student-based nationwide blood society whose main goal is voluntarily providing blood to the needy, promoting voluntary blood donations, and spreading awareness about blood-related issues.
Recently, TBH carried out a successful project by the name Bleed Green Project. Two blood grouping and three blood donation camps were pitched. The Blood Heroes carried out two awareness walks, three registration drives, and visited seven different thalassemia centers to encourage the thalassemia kids.
Be part of the noble cause, and revive the withered flowers.</p>
<ul class="actions">
</ul>
</div>
<a href="#three" class="goto-next scrolly">Next</a>
</section>
<!-- Three -->
<section id="three" class="spotlight style3 left">
<span class="image fit main bottom"><img src="./images/lrhthalassemiaward.jpg" alt="" /></span>
<div class="content">
<header>
<br><br><br><br><br>
<h2>Thalassemia Ward Beautification</h2>
</header>
</div>
<a href="#four" class="goto-next scrolly">Next</a>
</section>
<!-- Four -->
<section id="four" class="spotlight style3 right">
<span class="image fit main bottom"><img src="./images/internationalthalassemiadayHomepage.jpg" alt="" /></span>
<div class="content">
<header>
<br>
<h2>International Thalassemia Day</h2>
</header>
<p>Spreading awareness about thalassemia among the masses is one of TBH's goals.
Team The Blood Heroes organized an awareness event in collaboration with PPA KP and LR Pediatric in accordance with “International Thalassemia Day 22.”
The main aim of the event was to spread thalassemia awareness among the masses.
It was an immense pleasure seeing over 100 participants on ground while 1900+ people joined us through Facebook Live.
TBH appreciated the efforts of volunteers working on this cause and raised thalassemia awareness through the event.
A huge thank you to everyone who supported us! </p>
</div>
<a href="#five" class="goto-next scrolly">Next</a>
</section>
<!-- Five -->
<section id="five" class="wrapper style1 special fade-up">
<div class="container">
<header class="major">
<h2>Core Team</h2>
<p>We are grateful for their passion and dedication!</p>
</header>
<div class="box alt">
<div class="row gtr-uniform">
<section class="col-4 col-6-medium col-12-xsmall">
<span class="image"><img src="./images/coreteam/gulalaiarshad.jpg" alt="" /></span>
<h4>Gulalai Arshad</h4>
<h3>Founder & Director</h3>
<p>Have you ever heard of 'a dream come true'? This is rare right and only few people can achieve... <a href="coreTeam/gulalaiProfile/gulalaiProfile.html">read more!</a> </p>
<hr>
</section>
<section class="col-4 col-6-medium col-12-xsmall">
<span class="image"><img src="./images/coreteam/shakeelbadshah.jpg" alt="" /></span>
<h4>Syed Shakeel Badshah</h4>
<h3>Co-Founder</h3>
<p>Helping each other is a way to overcome grief that we may experience, and it can empower us in... <a href="coreTeam/shakeelProfile/shakeelProfile.html">read more!</a> </p>
<hr>
</section>
<section class="col-4 col-6-medium col-12-xsmall">
<span class="image"><img src="./images/coreteam/sumayyahsaqib.jpg" alt="" /></span>
<h4>Sumayyah Saqib</h4>
<h3>Deputy Director</h3>
<p>"-and whoever saves a life, it will be as if they saved all of humanity" 5:32. This verse from the... <a href="coreTeam/sumayyahProfile/sumayyahProfile.html">read more!</a> </p>
<hr>
</section>
<!-- New Secretary General anounced, will add after I get the details -->
<!-- <section class="col-4 col-6-medium col-12-xsmall">
<span class="image"><img src="./images/coreteam/ashrafali.png" alt="" /></span>
<h4>Ashraf Ali</h4>
<h3>General Secretary</h3>
<p>I joined this wonderful team named 'The Blood Heroes' as a Twitter handler and Records Te... <a href="coreTeam/ashrafProfile/ashrafProfile.html">read more!</a> </p>
<hr>
</section> -->
<section class="col-4 col-6-medium col-12-xsmall">
<span class="image"><img src="./images/coreteam/anaskhan.png" alt="" /></span>
<h4>Anas Khan</h4>
<h3>Media Head</h3>
<p>It gives me an immense pleasure to have made it to this higher platform. Aim drives you.... <a href="coreTeam/anasProfile/anasProfile.html">read more!</a> </p>
<hr>
</section>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<h5>Social Media Links</h5>
<p></p>
<ul class="icons">
<li><a href="https://twitter.com/thebloodheroes?s=08" class="icon brands alt fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/TheBloodHeroesPakistan/" class="icon brands alt fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li>
<li><a href="https://www.linkedin.com/company/the-blood-heroes-campaign/" class="icon brands alt fa-linkedin-in" target="_blank"><span class="label">LinkedIn</span></a></li>
<li><a href="https://instagram.com/thebloodheroes?utm_medium=copy_link" class="icon brands alt fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/Hilal1782/TheBloodHeroes" class="icon brands alt fa-github" target="_blank"><span class="label">GitHub</span></a></li>
<li><a href="" class="icon solid alt fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<h3><li>Made with <svg viewBox="0 0 2000 2000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" style="height: 0.78rem;"><path d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26T145 952.5 77 855 23.5 734 0 596q0-220 127-344t351-124q62 0 126.5 21.5t120 58T820 276t76 68q36-36 76-68t95.5-68.5 120-58T1314 128q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z" fill="#e25555"></path></svg> by <a href="#">A4U</a> and <a href="https://www.linkedin.com/in/hilal-ahmad-a70a6b229/">Hilal</a></li></h3>
<!-- <h3><li>Powered by <a href="">A4U</a> and <a href="">Hilal</a></a></li></h3> -->
<li>© TheBloodHeroes. All rights reserved.</li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>