generated from simandebvu/readme-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (286 loc) · 15.8 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
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corona Away</title>
<link rel="shortcut icon" href="assets/img/favicons/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/img/favicons/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=M+PLUS+Rounded+1c:wght@300;400&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/edadb77036.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<div class="nav-wrapper w-100 px-2">
<nav class="row">
<div
class="col-sm-12 col-md-3 navbar pr-0 mr-0 d-flex justify-content-lg-start justify-content-center">
<a class="navbar-brand pr-0 mr-0 d-flex align-self-middle" href="../index.html">
<span class="material-icons text-white ">location_on</span>
</a>
<a class="nav-link pl-0" href="../index.html">
<h5 class="text-white mb-0">find-a-doc</h5>
</a>
</div>
<div class="col-sm-12 col-md-9 my-sm-2 my-lg-0 d-flex justify-content-md-end">
<ul class="d-flex nav-group mr-sm-2 mt-md-2 pt-1 justify-content-md-end align-items-lg-stretch">
<li class="nav-item my-2 col-sm-2 w-sm-25 my-sm-0">
<a class="d-md-flex align-items-middle px-3 text-white" href="pages/doctors.html">
<span class="material-icons nav-logo">search</span>
<span class="d-none d-lg-block"> DOCTORS</span></a>
</li>
<li class="nav-item my-2 col-sm-2 w-sm-25 my-sm-0">
<a class="d-md-flex align-items-middle px-3 text-white" href="#">
<span class="material-icons nav-logo">face</span>
<span class="d-none d-lg-block">ABOUT</span>
</a>
</li>
<li class="nav-item my-2 col-sm-2 w-sm-25 my-sm-0">
<a class="d-md-flex align-items-middle px-3 text-white" href="#">
<span class="material-icons nav-logo">rss_feed</span>
<span class="d-none d-lg-block">BLOG</span>
</a>
</li>
<li class="nav-item my-2 col-sm-2 w-sm-25 my-sm-0">
<a class="d-md-flex align-items-middle px-3 text-white" href="#">
<span class="material-icons nav-logo">menu_open</span>
<span class="d-none d-lg-block">MORE</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<section class="main-page-header mt-5">
<div class="mx-0">
<div class="pt-5">
<h1 class="text-center text-white">CORONA-AWAY: YOUR HEALTH IS OUR PRIORITY</h1>
</div>
</div>
<div class="row mt-3 mx-auto">
<div class="col">
<div class="mx-auto search-bar col-md-6 search-header py-3 mb-5">
<form>
<div class="form-group">
<p class="font-weight-bold text-dark mb-0">SEARCH BY AREA :</p>
<div class="input-group mb-3">
<input type="text" class="form-control" id="search">
<div class="input-group-append">
<button class="btn btn-search font-weight-bold" type="button">SEARCH</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row pt-0 mx-0 mb-5">
<div class="col mb-5 d-flex justify-content-center">
<a role="button" class="btn btn-how-it-works btn-lg mt-4 mx-3 text-dark font-weight-bold" href="#how-it-works">How it
works</a>
</div>
</div>
</section>
<section id="how-it-works">
<div class="mx-0 row pt-5 w-100">
<div class="col">
<h3 class="text-center">CORONA-AWAY works in four simple steps</h3>
</div>
</div>
</section>
<section class="how-it-works">
<div class=" mx-0 row pt-5 w-100">
<!-- Search -->
<div class="col-md-6 d-flex flex-column align-items-center px-0 px-lg-2">
<div class="search-icon">
<img
class="steps-icon" src="./assets/img/search-index.svg" alt="search-image">
</div>
<div class="search-text">
<h4 class="font-weight-bold">1-SEARCH</h4>
</div>
<div class="search-description">
<blockquote class="blockquote text-center">
<h6 class="mb-0 how-it-works-text">What do you need? Just type into the search bar above and you will get what you need. At the speed of the internet. Your health is our priority. We want you well now and forever :)
</h6>
</blockquote>
</div>
</div>
<!-- Locate -->
<div class="col-md-6 d-flex flex-column align-items-center px-0 px-lg-2">
<div class="search-icon">
<img
class="steps-icon" src="./assets/img/locate-index.svg" alt="locate-image">
</div>
<div class="search-text">
<h4 class="font-weight-bold">2-LOCATE</h4>
</div>
<div class="search-description">
<blockquote class="blockquote text-center">
<h6 class="mb-0 how-it-works-text">Not only will you get what you want and its description. You will get a location so that you dont have to worry about directions as well. We will add a nice map to it.
</h6>
</blockquote>
</div>
</div>
</div>
<div class="mx-0 row pt-5">
<!-- Apply-->
<div class="col-md-6 d-flex flex-column align-items-center px-0 px-lg-2">
<div class="search-icon">
<img
class="steps-icon" src="./assets/img/search-index.svg" alt="search-image">
</div>
<div class="search-text">
<h4 class="font-weight-bold">3-APPLY</h4>
</div>
<div class="search-description">
<blockquote class="blockquote text-center">
<h6 class="mb-0 how-it-works-text">Apply and you will be added onto the waiting list. Dont worry you wont even feel the wait. We have employed an asynchronous booking algorithm.</h6>
</blockquote>
</div>
</div>
<!-- Relax -->
<div class="col-md-6 d-flex flex-column align-items-center px-0 px-lg-2 w-100">
<div class="search-icon"> <img
class="steps-icon" src="./assets/img/relax-index.svg" alt="search-image">
</div>
<div class="search-text">
<h4 class="font-weight-bold">4-RELAX</h4>
</div>
<div class="search-description">
<blockquote class="blockquote text-center">
<h6 class="mb-0 how-it-works-text">Take a coffee break, relax and we will guarantee service by the time that cup is finished. If we delay- our costs are on us :)
</h6>
</blockquote>
</div>
</div>
</div>
</section>
<section class="quick-links">
<div class="row mx-0 quick-links-main mt-3 p-4 text-white">
<div class="link-info col-md-8">
<h4 class="font-weight-bold">Over 15000 institutions are registered with us.
</h4>
<h6>Hospitals, clinics or private- we have it all.</h6>
<button class="btn btn-light">Lorem</button>
</div>
<div class="link-picture col-md-4 d-flex justify-content-end px-lg-5">
<img src="https://via.placeholder.com/200x200.png?text=Info+Image" alt="link-image"
class="rounded-circle d-none d-md-block d-lg-block">
</div>
</div>
<div class="row mx-0 quick-links-secondary p-4 text-white">
<div class="link-info col-md-8">
<h4 class="font-weight-bold">No need for physical queues.
</h4>
<h6>Wait in line through our system. </h6>
<button class="btn btn-light">Lorem</button>
</div>
<div class="link-picture col-md-4 d-flex justify-content-end px-lg-5">
<img src="https://via.placeholder.com/200x200.png?text=Info+Image" alt="link-image"
class="rounded-circle d-none d-md-block d-lg-block">
</div>
</div>
<div class="row mx-0 quick-links-tertiary p-4 text-white">
<div class="link-info col-md-8">
<h4 class="font-weight-bold">We are everywhere
</h4>
<h6>Web, mobile, USSD - we are that accessible</h6>
</div>
<div class="link-picture col-md-4 d-flex justify-content-end px-lg-5">
<img src="https://via.placeholder.com/200x200.png?text=Info+Image" alt="link-image"
class="rounded d-none d-md-block d-lg-block">
</div>
</div>
</section>
<footer class=" mx-0 w-100">
<div class="footer-header">
<div class="d-lg-flex d-sm-block d-md-block justify-content-center mx-auto w-100 pt-4 px-5">
<ul class="d-flex text-white justify-content-around footer-links p-3 w-100 h-50">
<li><a class="text-white" href="#">HOME</a></li>
<li><a class="text-white" href="#">SEARCH</a></li>
<li><a class="text-white" href="#">ABOUT</a></li>
<li><a class="text-white" href="#">ADVERTISE</a></li>
</ul>
<span
class="footer-logo p-4 material-icons text-white align-self-start d-none d-lg-block">location_on</span>
<ul class="d-flex text-white justify-content-around footer-links p-3 w-100 h-50">
<li><a class="text-white" href="#">FACEBOOK</a></li>
<li><a class="text-white" href="#">TWITTER</a></li>
<li><a class="text-white" href="#">BLOG</a></li>
<li><a class="text-white" href="#">GOOGLE+</a></li>
</ul>
</div>
<div class="row d-flex justify-content-center pt-4 mx-0 text-white">
<div class="link-info col-md-4 d-flex justify-content-lg-center">
<div class="d-flex flex-column text-lg-center">
<h3>SUBSCRIBE</h3>
<div class="input-group mb-3">
<input type="text" class="form-control" id="subscribe">
<div class="input-group-append">
<button class="btn btn-send bg-dark text-white" type="button">SEND</button>
</div>
</div>
</div>
</div>
<div class="link-info col-md-4 d-flex justify-content-lg-center">
<div class="d-flex flex-column text-lg-center">
<h3>CONTACT</h3>
<p class="mb-0">Have a question or a submission?</p>
<p><a style="color: #d3574a;" href="mailto:simandebvu@icloud.com"> info@findadoc.com</a></p>
</div>
</div>
<div class="link-info col-md-4 px-3 d-flex justify-content-center">
<div class="d-flex flex-column text-lg-center">
<h3>ABOUT</h3>
<p>Find a doc was made with the motivation to assist you when where and exactly how you need
it. A realtime database giving you nothing but the best, recent and latest information
in our fight against COVID19 and any other virus that dares to not believe that as
humans, we are stronger together. <span><a href="#" style="color: #d3574a;">Learn
more..</a></span></p>
</div>
</div>
</div>
<nav class="navbar navbar-dark w-100 mb-0 p-0 py-3" style="background-color: #1f1f1f;">
<div class="col-md-4">
<div class="mr-auto text-white">
<div class="d-flex justify-content-around w-lg-50">
<span class="material-icons icons-footer"><a href="#"><i
class="fab fa-facebook"></i></a></span>
<span class="material-icons icons-footer"><a href="#"><i
class="fab fa-google-plus-g"></i></a></span>
<span class="material-icons icons-footer"><a href="#"><i
class="fab fa-twitter"></i></a></span>
<span class="material-icons icons-footer"><a href="#"><i
class="fab fa-instagram"></i></a></span>
</div>
</div>
</div>
<div class="col-md-8">
<div
class="mr-auto d-flex justify-content-lg-end justify-content-sm-center text-white mt-1 mt-md-2 text-center">
<p class="text-uppercase" style="color:#606060">© Shingirayi Innocent Mandebvu. All
rights reserved.</p>
</div>
</div>
</nav>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>