-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
346 lines (337 loc) · 17 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
<!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>Ilera: Home</title>
<link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
<!-- Import Vendor CSS -->
<link rel="stylesheet" href="./assets/vendor/bootstrap-5.0/css/bootstrap.css">
<link rel="stylesheet" href="./assets/vendor/fontawesome-5.15.2/css/all.css">
<!-- Import Main CSS -->
<link rel="stylesheet" href="./assets/css/main.css">
</head>
<body class="d-flex flex-column h-100">
<header class="d-flex text-white bg-primary flex-column flex-md-row align-items-center p-3 px-md-4 shadow">
<div class="my-0 me-md-auto fw-normal"><a href="index.html"><img src="./assets/img/ilera-logo-white.svg"
alt="Ilera-logo" class="logo"></a>
</div>
<nav class="my-2 my-md-0 me-md-3 mt-3 mt-md-0">
<ul class="nav">
<li class="nav-item ms-4">
<a href="search.html" class="d-flex align-items-center text-white px-2 px-md-0">
<i class="fas fa-search fa-fw d-block"></i>
<span class="nav-link active px-2 d-none d-md-block">Hospitals</span>
</a>
</li>
<li class="nav-item ms-4">
<a href="#" class="d-flex align-items-center text-white px-2 px-md-0">
<i class="fas fa-building fa-fw d-block"></i>
<span class="nav-link px-2 d-none d-md-block">About</span>
</a>
</li>
<li class="nav-item ms-4">
<a href="#" class="d-flex align-items-center text-white px-2 px-md-0">
<i class="fas fa-blog fa-fw d-block"></i>
<span class="nav-link px-2 d-none d-md-block">Blog</span>
</a>
</li>
<li class="nav-item ms-4">
<a href="#" class="d-flex align-items-center text-white px-2 px-md-0">
<i class="fas fa-bars fa-fw d-block"></i>
<span class="nav-link px-2 d-none d-md-block">More</span>
</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12 hero">
<section class="hero-content px-4 p-md-0">
<h1 class="text-white text-center d-block fw-bolder mb-3">Ilera Your Gateway to Hospitals in Nigeria.</h1>
<div class=" mb-4 bg-white-translucent p-4 p-md-5 rounded rounded-3 w-100">
<form action="search.html">
<div class="form-group">
<label for="searchHospitals" id="search-hospitals-label" class="fw-bold fs-6 mb-2">Search For Nearby
Hospital</label>
<div class="input-group">
<input type="text" class="form-control" name="search-hospitals" id="searchHospitals"
aria-describedby="search-hospitals-label" placeholder="Enter Location" required>
<button class="btn btn-primary fw-bold px-5 text-white" type="submit">Search</button>
</div>
</div>
</form>
</div>
<button type="button" class="btn btn-secondary bg-white btn-sm px-4 align-self-center fw-bold border-0">How
it
Works</button>
</section>
</div>
</div>
<div class="row">
<div class="col-12 px-0">
<section class="page-section">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h3 class="text-dark fw-bold mb-4 section-title">Ilera Works in 4 Simple Steps</h3>
<div class="d-grid how-it-works">
<article class="w-75 m-auto">
<div class="image w-100">
<div class="full-image-container position-relative pb-50p">
<img src="./assets/img/search.svg" alt="search" class="img-fluid absolute-centered"
width="80">
</div>
</div>
<h5 class="fw-bold">1. Search</h5>
<p>It's simple. On the Ilera homepage, enter the location you would like to find a hospital in or
enter the name of the hospital if you already know it. Alternatively, you can click on the
search
link on the header to see te full list of hospital in all locations</p>
</article>
<article class="w-75 m-auto">
<div class="image w-100">
<div class="full-image-container position-relative pb-50p">
<img src="./assets/img/find.svg" alt="find" class="img-fluid absolute-centered" width="80">
</div>
</div>
<h5 class="fw-bold">2. Locate</h5>
<p>Get to see where the hospital in located and the hospital star rating by clicking the hospital
profile. It's even more exciting. You can get the directions from anywhere you are.</p>
</article>
<article class="w-75 m-auto">
<div class="image w-100">
<div class="full-image-container position-relative pb-50p">
<img src="./assets/img/sign-up.svg" alt="register" class="img-fluid absolute-centered"
width="80">
</div>
</div>
<h5 class="fw-bold">3. Register</h5>
<p>Register in any hospital of your choice. Click on the register button to get the registration
form. We also follow up on the registration to make sure it goes through in time.</p>
</article>
<article class="w-75 m-auto">
<div class="image w-100">
<div class="full-image-container position-relative pb-50p">
<img src="./assets/img/schedule.svg" alt="schedule" class="img-fluid absolute-centered"
width="80">
</div>
</div>
<h5 class="fw-bold">4. Schedule</h5>
<p>As soon as your registration is approved by the hospital, you can begin booking appointments.
You can also set reminders on the inbuilt calendar system at intervals you like.</p>
</article>
</div>
</div>
</div>
</div>
</section>
<section class="page-section bg-primary text-white">
<div class="container">
<div class="row d-flex flex-column-reverse flex-md-row align-items-center justify-content-center">
<div
class="col-12 col-md-8 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3 class="fw-bold mb-4 section-title left-title text-center text-md-start after-white">Over 100,000
hospitals
registered with us.</h3>
<p class="w-75 py-2">Choose from the wide range of hospitals from every state and LGA in the country.
Get the best
quality of healthcare.</p>
<button class="btn btn-secondary align-self-md-start align-self-center bg-white border-0 text-red"
type="button">Get
Started</button>
</div>
<div class="col-12 col-md-4 d-flex justify-content-center mb-4 mb-md-0">
<div class="image w-75">
<div class="full-image-container position-relative pb-100p rounded-circle overflow-hidden">
<img src="./assets/img/red-direction-pointer.jpg" alt="map" class="absolute-centered h-100">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="page-section bg-light-grey text-white">
<div class="container">
<div class="row d-flex flex-column-reverse flex-md-row align-items-center justify-content-center">
<div
class="col-12 col-md-8 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3 class="fw-bold mb-4 section-title left-title text-center text-md-start after-white">No more than 3
minutes to
find a hospital near you.
</h3>
<p class="w-75 py-2">The smooth process makes it fast and easy to find the right hospital for you.
Just input you location or input the name of the hospital you're looking for.</p>
<button
class="btn btn-secondary align-self-md-start align-self-center bg-white border-0 text-light-grey"
type="button">Get
Started</button>
</div>
<div class="col-12 col-md-4 d-flex justify-content-center mb-4 mb-md-0">
<div class="image w-75">
<div class="full-image-container position-relative pb-100p rounded-circle overflow-hidden">
<img src="./assets/img/time.jpg" alt="map" class="absolute-centered h-100">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="page-section bg-fade-blue text-white">
<div class="container">
<div class="row d-flex flex-column-reverse flex-md-row align-items-center justify-content-center">
<div
class="col-12 col-md-8 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3 class="fw-bold mb-4 section-title left-title text-center text-md-start after-white">Anytime,
anywhere, anyway
</h3>
<p class="w-75 py-2">All you need is a connection to the internet and a browser. You're good to go! No
hassle! No stress!
</p>
<button class="btn btn-secondary text-white align-self-md-start align-self-center d-none"
type="button">Get
Started</button>
</div>
<div class="col-12 col-md-4 d-flex justify-content-center mb-4 mb-md-0">
<div class="image w-75">
<div class="full-image-container position-relative pb-100p rounded-circle overflow-hidden">
<img src="./assets/img/phone.jpg" alt="map" class="absolute-centered h-100">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto">
<div class="container-fluid bg-black">
<div class="row">
<div class="col-12">
<div class="container">
<div
class="row position-relative text-center pt-4 pb-3 text-uppercase fs-small d-flex align-items-center no-wrap">
<div class="col-12">
<div class="d-lg-none d-block px-0 w-15 m-auto mb-2 mb-lg-0">
<a href="index.html">
<div class="image w-100 border rounded-circle light-border">
<div class="full-image-container position-relative pb-100p">
<img src="./assets/img/ilera-icon-white.svg" alt="register"
class="img-fluid absolute-centered w-50">
</div>
</div>
</a>
</div>
</div>
<div class="col-lg col-md-6 px-0">
<div class="nav border-top border-bottom border-1 light-border mb-2 mb-md-0">
<div class="nav-item col-3">
<a class="nav-link text-white" href="index.html">Home</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="search.html">Search</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">About Us</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">Advertise</a>
</div>
</div>
</div>
<div class="col-lg-1 d-lg-block d-none px-0">
<a href="index.html">
<div class="image w-100 border rounded-circle light-border">
<div class="full-image-container position-relative pb-100p">
<img src="./assets/img/ilera-icon-white.svg" alt="register"
class="img-fluid absolute-centered w-50">
</div>
</div>
</a>
</div>
<div class="col-lg col-md-6 px-0">
<div class="nav border-top border-bottom border-1 light-border">
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">Facebook</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">Twitter</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">Blog</a>
</div>
<div class="nav-item col-3">
<a class="nav-link text-white" href="#">Google</a>
</div>
</div>
</div>
</div>
<div class="row text-center text-white py-4">
<div class="col-md-4 col-12 mb-3 mb-md-0">
<h5 class="fw-bold mt-4 mb-5 text-uppercase">Subscribe</h5>
<form action="#">
<div class="form-group">
<div class="input-group flex-lg-row flex-md-column flex-row">
<input type="text" class="form-control rounded-0 w-lg-1 w-md-100 w-1" name="subscribe"
id="subscribe-input" placeholder="Enter Email">
<button class="btn btn-secondary bg-grey text-white border-0 fw-bold px-4 rounded-0"
type="submit">Subscribe</button>
</div>
</div>
</form>
</div>
<div class="col-md-4 col-12 mb-3 mb-md-0">
<h5 class="fw-bold mt-4 mb-5 text-uppercase">Contact</h5>
<p>Have a question for Ilera?
<span class="d-block"><a href="mailto:[email protected]"
class="text-secondary">[email protected]</a></span>
</p>
</div>
<div class="col-md-4 col-12 mb-3 mb-md-0">
<h5 class="fw-bold mt-4 mb-5 text-uppercase">About</h5>
<p>Ilera Search is a make believe directory for hospitals in Nigeria.<span class="d-inline-block"><a
href="#" class="text-secondary"> Learn more.</a></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-12">
<div class="container">
<div class="row py-3">
<div class="col-12 col-sm-4">
<ul class="d-flex list-unstyled px-0 m-0 justify-content-center justify-content-sm-start">
<li class="me-3"><a href="#" class="text-muted"><i class="fab fa-facebook fa-fw"></i></a></li>
<li class="me-3"><a href="#" class="text-muted"><i class="fab fa-twitter fa-fw"></i></a></li>
<li class="me-3"><a href="#" class="text-muted"><i class="fas fa-rss fa-fw"></i></a></li>
<li class="me-3"><a href="#" class="text-muted"><i class="fab fa-google-plus fa-fw"></i></a></li>
<li class="me-3"><a href="#" class="text-muted"><i class="fab fa-instagram fa-fw"></i></a></li>
</ul>
</div>
<div
class="col-12 col-sm-8 text-muted fs-small d-flex align-items-center justify-content-center justify-content-sm-end mt-2 mt-sm-0">
<span class="mx-3">
Copyright Ilera 2021 ©
</span>
<span>
Made with <i class="fas fa-heart fa-fw"></i> in Lagos.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="./assets/vendor/bootstrap-5.0/js/bootstrap.bundle.js"></script>
<script src="./assets/vendor/fontawesome-5.15.2/js/all.js"></script>
</body>
</html>