-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
267 lines (255 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<link rel="shortcut icon" href="/favicon.ico" type="images/medical.png">
<!-- Font awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>HOSPITAL DIRECTORY IN NIGERIA</title>
</head>
<body>
<header>
<nav class="d-flex flex-column align-items-center flex-md-row justify-content-md-between px-md-5 py-1">
<a class="logo" href="./index.html">
<span class="text-white"><img class="nav-logo" src="images/new-medical.png" alt="hospital-logo"> MEDICALS</span>
</a>
<ul class="d-flex">
<li class="px-4 pt-md-2">
<a href="#" class="text-white">
<i class="fas fa-search"></i>
<small class="d-none d-lg-inline">HOSPITALS</small>
</a>
</li>
<li class="px-4 pt-md-2">
<a href="#" class="text-white">
<i class="fas fa-rss"></i>
<small class="d-none d-lg-inline">ABOUT</small>
</a>
</li>
<li class="px-4 pt-md-2">
<a href="#" class="text-white">
<i class="fas fa-user"></i>
<small class="d-none d-lg-inline">BLOG</small>
</a>
</li>
<li class="px-4 pt-md-2">
<a href="#" class="text-white">
<i class="fas fa-bars"></i>
<small class="d-none d-lg-inline">MORE</small>
</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron jumbotron-fluid">
<div class="container pt-5">
<h1 class="text-uppercase font-weight-bold guide text-center text-light pb-2">
medicals... your sureway to hospitals in nigeria.</h1>
<div class="form-group search py-3 px-2 rounded px-md-5 pt-md-4 pb-md-5">
<label for="search" class="search-label text-uppercase">Search by keyword</label>
<div class="input-group">
<input id="search" type="text" class="form-control rounded-right"/>
<div class="input-group-append d-none d-md-block">
<a href="./search.html" class="btn first-search text-white">SEARCH</a>
</div>
</div>
<a href="./search.html" class="w-100 my-2 d-md-none btn text-white first-search">SEARCH</a>
</div>
<button class="btn my-2 mx-auto btn-explore">
How it works
</button>
</div>
</div>
<section class="container mb-5">
<h2 class="text-uppercase font-weight-bold guide text-center danger-color">steps on how to use this application</h2>
<div class="row">
<div class="col-12 col-lg-6">
<div class="my-2 text-center size-2">
<i class="fas fa-search"></i>
</div>
<div class="text-center my-2">
<h6 class="size-1 text-uppercase font-weight-bold text-center pot">1-search</h6>
</div>
<p class="text-center px-lg-5 text-muted pot">
It's quite simple and straight forward, all you need to do is
enter a keyword in the seach input and hit the search button
afterward.
</p>
</div>
<div class="col-12 col-lg-6">
<div class="my-2 text-center size-2">
<i class="fas fa-location-arrow"></i>
</div>
<div class="text-center my-2">
<h6 class="size-1 text-uppercase font-weight-bold text-center pot">2-locate</h6>
</div>
<p class="text-center px-lg-5 text-muted pot">
Get to see where the hospital is located and the direction in Nigeria that match your search keyword(s).
</p>.
</div>
<div class="col-12 col-lg-6">
<div class="my-2 text-center size-2">
<i class="fa fa-book"></i>
</div>
<div class="text-center my-2 size-1">
<h6 class="size-1 text-uppercase font-weight-bold text-center pot">3-book appointment</h6>
</div>
<p class="pot px-lg-5 text-muted text-center">
Feel free to click the details button on each of the search result
shown to know more about the different hospitals.
</p>
</div>
<div class="col-12 col-lg-6">
<div class="my-2 text-center size-2">
<i class="fa fa-thermometer-full" aria-hidden="true"></i>
</div>
<div class="text-center my-2">
<h6 class="size-1 text-uppercase font-weight-bold text-center pot">4-get treated</h6>
</div>
<p class="text-center px-lg-5 text-muted text-center pot">
Visit the hospital and get treated. Get well soon.
</p>
</div>
</div>
</section>
<section class="container-fluid">
<div class="row hospital py-3 px-1 py-md-2 px-md-4 px-lg-5">
<div class="col-md-6 pt-md-5 cent2 ">
<h6 class=" text-white cent2">Over 5000 hospitals listed in our application</h6>
<small class="d-block text-white mb-2 my-lg-3 cent2">Find a hospital by searching through our directory.</small>
<button class="bg-white btn mt-2 text-danger cent">Find a hospital</button>
</div>
<div class="col-md-6 d-flex justify-content-center justify-content-md-end">
<img src="./images/surgery.jpg" alt="Doctors performing surgery" class="rounded-circle"/>
</div>
</div>
<div class="row clinic px-md-4 py-3 px-1 px-lg-5 py-md-2">
<div class="col-md-6 pt-md-5 cent2">
<h6 class=" text-white text-md-left cent3">You don't have to tour the country to find a hospital</h6>
<small class="d-block text-white mb-2 my-lg-3 cent3">Get there by clicking at the search button.</small>
<button class="bg-white btn mt-2 text-muted cent1">Find a hospital near you</button>
</div>
<div class="col-md-6 d-flex justify-content-center justify-content-md-end">
<img src="./images/equipment.jpg" alt="Hospital equipment" class="rounded-circle"/>
</div>
</div>
<div class="row doctor px-md-4 py-3 px-1 px-lg-5 py-md-2">
<div class="col-md-6 pt-md-5 cent2">
<h6 class=" text-white text-md-left cent2">The health sector in Nigeria is improving </h6>
<small class="d-block text-white mb-2 my-lg-3 cent2">There are lots of qualified medical personnels in Nigeria.</small>
</div>
<div class="col-md-6 d-flex justify-content-center justify-content-md-end">
<img src="./images/doctor.jpg" alt="Doctor" class="rounded-top"/>
</div>
</div>
</section>
</main>
<footer>
<div class=" d-md-block black-color">
<div class="container">
<div class="pt-4 line ft-top-1">
<ul class="p-2 border-top border-bottom border-dark line">
<li class=" line">
<a class="text-white" href="#">HOME</a>
</li>
<li class="line">
<a class="text-white" href="#">SEARCH</a>
</li>
<li class="line">
<a class="text-white" href="#">ABOUT US</a>
</li>
<li class="line">
<a class="text-white" href="#">ADVERTISE</a>
</li>
</ul>
<img class="footer-logo ft-1-img" src="./images/new-medical.png" alt="new-medical logo"/>
<ul class="d-flex py-1 border-top border-bottom border-dark line">
<li class=" line">
<a class="pl-md-2 px-md-2 text-white" href="#">FACEBOOK</a>
</li>
<li class="line">
<a class="text-white" href="#">TWITTER</a>
</li>
<li class="line">
<a class="text-white" href="#">BLOG</a>
</li>
<li class="line">
<a class="text-white" href="#">GOOGLE+</a>
</li>
</ul>
</div>
<div class="row">
<div class="d-md-block col-md-4">
<h6 class="text-white text-center text-uppercase my-3">Subscribe</h6>
<div class="input-group">
<input type="text" class="form-control rounded-right bg-dark border-0"/>
<div class="input-group-append d-md-block">
<button class="btn btn-secondary">Search</button>
</div>
</div>
</div>
<div class="d-md-block col-md-4">
<h6 class="text-white text-center text-uppercase my-3">Contact</h6>
<p class="text-muted text-center small-font">Have a question or suggestion for improvement? <br />
<span class="danger-color">kalu.agukalu@gmail.com</span>
</p>
</div>
<div class="d-md-block col-md-4">
<h6 class="text-white text-center text-uppercase my-3">about</h6>
<p class="text-muted text-center small-font">I'm a Biotechnologies working very hard to become a full stack software developer that will compete favourably in the global market.
</p>
</div>
</div>
</div>
</div>
<div class="px-2 px-md-5 d-flex justify-content-between bg-dark pt-3 ft-mb-2">
<ul class="d-flex">
<li class="pr-1">
<a class="text-muted" href="#"><i class="fab fa-facebook-square"></i></a>
</li>
<li class="px-1 px-md-2">
<a href="#" class="text-muted"><i class="fab fa-twitter"></i></a>
</li>
<li class="px-1 px-md-2">
<a href="#" class="text-muted"><i class="fab fa-youtube"></i></a>
</li>
<li class="px-1 px-md-2">
<a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
</li>
<li class="px-1 px-md-2">
<a href="#" class="text-muted"><i class="fas fa-rss"></i></a>
</li>
<li class="px-1 px-md-2">
<a href="#" class="text-muted"><i class="fas fa-envelope"></i></a>
</li>
</ul>
<p class="pl-1 d-md-inline text-muted cent2">
©2020 Microverse HTML/CSS Capstone Project built by Kalu
</p>
</div>
</footer>
</body>
</html>