-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
401 lines (385 loc) · 27.2 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
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=1280">
<!-- link to google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<!-- linkto tailwindcss -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- link to phosphor icons -->
<link rel="stylesheet" href="regular.css">
<link rel="stylesheet" href="bold.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
<!-- link to favicon -->
<link rel="shortcut icon" type="image/x-icon" href="logo.png">
<!-- title of the page -->
<title>TeleMedi</title>
</head>
<body>
<header class="fixed top-0 left-0 w-full items-center justify-between bg-[--] py-3.5 z-[1000]">
<div id="title" class="w-fit items-center gap-1.5">
<img src="/logo.png" alt="Medicex logo" class="w-9">
<h3 class="text-4xl text-[--l] font-extrabold mono">TeleMedi</h3>
</div>
<nav class="w-fit items-center justify-center gap-5">
<a href="#" class="text-lg">Home</a>
<a href="#doctors" class="text-lg">Doctors</a>
<a href="#treatment" class="text-lg">Treatment</a>
<a href="#appointments" class="text-lg">Appointments</a>
<a href="#blogs" class="text-lg">Articles</a>
</nav>
<div class="items-center justify-end gap-3.5">
<button class="text-[--d] px-7 py-3 rounded-lg bg-[--f] hover:opacity-75">Login</button>
<button class="text-[--w] px-7 py-3 rounded-lg bg-[--b] hover:opacity-75">Sign Up</button>
</div>
</header>
<section id="hero" class="relative w-full aspect-[16/9] flex-col items-center justify-center gap-7">
<img src="/beds.jpg" alt="doctor in surgery room" class="absolute w-full object-center object-cover aspect-[16/9] top-0 left-0 brightness-[61%] contrast-[120%]">
<div class="w-3/4 flex-col items-center justify-center gap-2.5 z-10">
<h1 class="text-[--f] text-6xl text-center font-extrabold capitalize z-10">make appointments easy and fast</h1>
<p class="text-[--w] font-medium text-xl">Telemedicine services available to bridge gaps between doctors and patients.</p>
</div>
<div class="w-3/5 items-center justify-center gap-5 z-10">
<label for="search" class="text-[--w] text-lg font-medium bg-[--b] rounded-lg px-7 py-3">Search:</label>
<input type="search" id="search" list="searchList" name="search" class="w-full py-3 px-9 rounded-lg bg-[--w] text-lg text-[--t] placeholder:text-[--t] placeholder:opacity-50" placeholder="Search for doctors and their respective specialities">
<datalist id="searchList" class="opacity-0">
<!-- Options will be populated dynamically from the JSON file -->
</datalist>
</div>
</section>
<section id="doctors" class="flex-col items-center gap-12">
<div class="w-full flex-col items-center gap-7">
<div class="w-full items-end justify-between">
<h3 class="text-4xl text-[--d] font-bold capitalize">select a doctor by specialty</h3>
<button class="text-[--b] text-xl font-medium flex items-center justify-end gap-2">See All <i class="ph ph-circles-four text-3xl"></i></button>
</div>
<div class="w-full grid grid-cols-4 gap-3.5">
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/cardiologist.png" alt="doctorb" class="w-12">
<img src="/cardiologistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Cardiologists</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctors who deal with heart related issues</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/pediatrician.png" alt="doctorb" class="w-12">
<img src="/pediatricianw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Pediatricians</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctors who deal with children related issues</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/otolaryngologist.png" alt="doctorb" class="w-12">
<img src="/otolaryngologistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Otolaryngologists</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctors who treat ears, nose and the throat.</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/opthalmologist.png" alt="doctorb" class="w-12">
<img src="/opthalmologistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Opthalmologists</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">These are doctors who treat eyes and vision</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/dermatologist.png" alt="doctorb" class="w-12">
<img src="/dermatologistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Dermatologist</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctor who deals with skin, hair and nails</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/nephrologist.png" alt="doctorb" class="w-12">
<img src="/nephrologistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Nephrologist</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctor who deals with kidney related issues</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/psychiatrist.png" alt="doctorb" class="w-12">
<img src="/psychiatristw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Psychiatrist</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctor who deals with mental health issues</p>
</div>
<div class="specialist w-full flex-col justify-between aspect-[4/2.5] p-5 rounded-2xl bg-[--f]">
<div class="w-full flex-col gap-0.5">
<img src="/dentist.png" alt="doctorb" class="w-12">
<img src="/dentistw.png" alt="doctorw" class="w-12 invisible hidden">
<h4 class="text-2xl text-[--b] font-bold">Dentist</h4>
</div>
<p class="text-base text-[--t] leading-[1.1] font-medium">Doctor who deals with oral health issues</p>
</div>
</div>
</div>
<div class="w-full flex-col items-center gap-7">
<div class="w-full items-end justify-between">
<h3 class="text-4xl text-[--d] font-bold capitalize">select medical procedure</h3>
<button class="text-[--b] text-xl font-medium flex items-center justify-end gap-2">See All <i class="ph ph-circles-four text-3xl"></i></button>
</div>
<div class="w-full grid grid-cols-3 gap-3.5">
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">taking samples</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">This involves collecting samples from the affected area, which could include blood, tissue, urine, or other relevant materials depending on the condition being treated.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">diagnostic testing</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">Diagnostic tests like blood tests, imaging scans (e.g. X-rays, CT scans), or biopsies may be conducted to analyze the samples & determine the nature & extent of the condition.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">medication therapy</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">Medications like antibiotics, antivirals, antifungals, pain relievers, or other drugs may be prescribed to manage symptoms, fight infections, or treat underlying causes.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">Surgical Intervention</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">Where medication or other non-invasive treatments are ineffective, surgery may be necessary to remove tumors, repair damaged tissues, correct structural abnormalities, or address other medical issues.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">Immunotherapy</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">Immunotherapy works by boosting the body's immune system to help fight cancer or other diseases. It can be used to treat certain types of cancer and autoimmune disorders.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
<div class="procedure w-full flex-col justify-between aspect-video p-5 rounded-2xl bg-[--f]">
<h4 class="text-3xl text-[--b] font-bold capitalize">Psychological Support</h4>
<p class="text-base text-[--t] leading-[1.1] font-medium">Counseling, support groups, and other mental health services may be provided to help patients cope with the emotional and psychological aspects of their condition & treatment process.</p>
<button class="text-[--b] text-lg font-semibold flex items-center justify-start gap-3">Learn More<i class="ph ph-arrow-right text-3xl"></i></button>
</div>
</div>
</div>
</section>
<section id="treatment" class="flex-col items-center justify-center gap-9">
<div class="w-3/5 flex-col items-center justify-center gap-1.5">
<h3 class="text-4xl text-[--d] text-center font-bold capitalize">frequently asked questions</h3>
<p class="text-[--t] text-lg text-center font-medium">Here are some of the frequently asked questions regarding healthcare.</p>
</div>
<div class="w-full grid grid-cols-2 gap-11">
<div class="w-full grid grid-flow-row gap-7">
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq1" name="accordion" class="hidden" checked>
<label for="faq1" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">What is telemedicine & TeleMedi? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">Telemedicine involves providing medical care and consultations remotely using telecommunications technology. TeleMedi allows patients to consult with healthcare providers via video conferencing, phone calls, or secure messaging platforms.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq2" name="accordion" class="hidden">
<label for="faq2" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">What appointments are suitable for telemedicine? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">Telemedicine appointments are suitable for a wide range of non-emergency medical concerns, including routine check-ups, follow-up visits, medication management, mental health consultations, and minor illnesses or injuries.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq3" name="accordion" class="hidden">
<label for="faq3" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">How do I schedule a telemedicine appointment? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">You can schedule a telemedicine appointment by contacting our office during business hours. Our staff will assist you in scheduling a convenient time for your virtual consultation.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq4" name="accordion" class="hidden">
<label for="faq4" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">What technology do I need for telemedicine? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">To participate in a telemedicine appointment, you will need a smartphone, tablet, or computer with a webcam and microphone. You will also need a stable internet connection to ensure clear communication during the appointment.</p>
</div>
</div>
</div>
<div class="w-full grid grid-flow-row gap-7">
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq5" name="accordion" class="hidden">
<label for="faq5" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">how to deal with technical issues in a telemedicine appointment? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">If you experience technical difficulties during your telemedicine appointment, please contact our office immediately for assistance. Our staff will work to resolve any technical issues and ensure a smooth and successful consultation.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq6" name="accordion" class="hidden">
<label for="faq6" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">Can prescriptions be issued during a telemedicine appointment? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">Yes, healthcare providers can issue prescriptions during telemedicine appointments for certain medications, when appropriate and medically necessary. Prescription refill requests can also be processed during telemedicine appointments.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq7" name="accordion" class="hidden">
<label for="faq7" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">how about physical examination or diagnostic tests? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">In some cases, a physical examination or diagnostic tests may be necessary to fully evaluate your medical condition. If needed, your healthcare provider will discuss options for in-person evaluation or laboratory testing.</p>
</div>
</div>
<div class="w-full flex-col gap-5 border-b border-[--l]">
<input type="radio" id="faq8" name="accordion" class="hidden">
<label for="faq8" class="text-2xl text-[--b] font-bold py-3 px-7 cursor-pointer w-full flex justify-between label capitalize">can i access medical records during telemedicine? <i class="ph-fill ph-question text-3xl"></i></label>
<div class="hidden max-h-0 px-14 pb-5 arcontent">
<p class="text-[--t]">Yes, medical records from telemedicine appointments are securely stored in our electronic health records system. You can access your telemedicine visit summaries and medical records through our patient portal for your reference and follow-up care.</p>
</div>
</div>
</div>
</div>
</section>
<section id="appointments" class="w-full aspect-video grid grid-cols-2 gap-14">
<div class="w-full aspect-square bg-[url('/doctor.jpg')] bg-center bg-cover rounded-xl"></div>
<div class="w-full aspect-square flex-col justify-between py-7 pr-3">
<h2 class="text-[--d] text-6xl font-bold capitalize">make an <br>appointment</h2>
<p class="text-xl text-[--t] font-semibold">Enter your contact details in the form below and schedule an appointment with one of our specialists.</p>
<form action="" method="get" accept-charset="utf-8" class="w-full flex-wrap gap-5 px-9 pl-3.5">
<input id="name" type="text" class="block text-[--t] text-lg font-medium px-7 py-3 outline outline-2 outline-[--t] placeholder:text-[--t] placeholder:opacity-65 rounded w-full capitalize" placeholder="Enter your name" required>
<input id="email" type="email" class="block text-[--t] text-lg font-medium px-7 py-3 outline outline-2 outline-[--t] placeholder:text-[--t] placeholder:opacity-65 rounded w-full" placeholder="Enter your email" required>
<div class="w-full items-center justify-between gap-5">
<input id="phone" type="tel" class="block text-[--t] text-lg font-medium px-7 py-3 outline outline-2 outline-[--t] placeholder:text-[--t] placeholder:opacity-65 rounded w-full" placeholder="Phone Number" required>
<select id="app" type="text" class="block text-[--t] text-lg bg-[--w] font-medium px-7 py-3 outline outline-2 outline-[--t] rounded" required>
<option value="select app" disabled selected>Choose Mobile App</option>
<option value="Doxy.me">Doxy.me</option>
<option value="Zoom">Zoom</option>
<option value="Microsoft Teams">Microsoft Teams</option>
</select>
</div>
<div class="w-full items-center justify-between gap-5">
<input id="diagnosis" type="text" class="block text-[--t] text-lg font-medium px-7 py-3 outline outline-2 outline-[--t] placeholder:text-[--t] placeholder:opacity-65 rounded w-full capitalize" placeholder="Body Part/ Problem" required>
<button type="submit" class="w-fit text-[--w] text-lg py-3 px-9 rounded font-medium bg-[--b] outline outline-2 outline-[--b] capitalize">submit details</button>
</div>
</form>
</div>
</section>
<section id="blogs" class="flex-col items-center gap-9">
<div class="w-full items-end justify-between">
<h3 class="text-4xl text-[--d] font-bold capitalize">recommend articles for you</h3>
<button class="text-[--b] text-xl font-medium flex items-center justify-end gap-2">See All <i class="ph ph-circles-four text-3xl"></i></button>
</div>
<div class="w-full grid grid-cols-2 grid-rows-3 gap-9">
<article class="w-full items-center gap-5">
<img src="/blood.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">healthcare | 24th Jan 2024</span>
<h5 class="text-[--d] text-2xl font-bold">The Importance of Preventive Care: How Regular Check-ups Can Save Lives</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
<article class="w-full items-center gap-5">
<img src="/machine.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">Medical Engineering | 11th October 2023</span>
<h5 class="text-[--d] text-2xl font-bold">Innovations in Healthcare: Exploring the Latest Technologies in Our Hospital</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
<article class="w-full items-center gap-5">
<img src="/hero.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">Doctors & Nurses | 03rd March 2021</span>
<h5 class="text-[--d] text-2xl font-bold">A Day in the Life of a Nurse: Behind the Scenes at Our Hospital</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
<article class="w-full items-center gap-5">
<img src="/microscope.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">medical Research | 17th July 2022</span>
<h5 class="text-[--d] text-2xl font-bold">The Future of Healthcare: Trends and Predictions for the Next Decade</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
<article class="w-full items-center gap-5">
<img src="/waiting.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">Treatments | 27th November 2020</span>
<h5 class="text-[--d] text-2xl font-bold">Patient Success Stories: Inspiring Tales of Healing and Recovery</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
<article class="w-full items-center gap-5">
<img src="/home.jpg" alt="article telemedicine image" class="h-52 aspect-square object-cover object-center rounded-2xl">
<div class="w-full h-full flex-col justify-between py-1.5">
<span class="text-[--t] font-medium capitalize">Telemedicine | 09th February 2021</span>
<h5 class="text-[--d] text-2xl font-bold">Embracing Telemedicine: Revolutionizing Healthcare Delivery</h5>
<button class="text-[--b] text-lg font-medium flex items-center gap-2">Read More<i class="ph ph-arrow-right text-2xl"></i></button>
</div>
</article>
</div>
</section>
<footer class="w-full justify-between bg-[--d]">
<div class="w-1/3 flex-col justify-between gap-9">
<div id="title" class="w-fit items-center gap-1.5">
<img src="/logo.png" alt="Medicex logo" class="w-9">
<h3 class="text-3xl text-[--w] font-extrabold">TeleMedi</h3>
</div>
<p class="text-[--f] opacity-75">Revolutionizing Healthcare with Remote Services. Your Partner for Virtual Consultations. Empowering Patients Worldwide.</p>
<div class="w-fit items-center justify-start gap-5 follow">
<a href="https://instagram.com/TeleMedi" class="text-[--l] text-4xl flex items-center justify-center">
<i class="ph ph-instagram-logo"></i>
</a>
<a href="https://t.me/TeleMedi" class="text-[--l] text-4xl flex items-center justify-center">
<i class="ph ph-telegram-logo"></i>
</a>
<a href="https://twitter.com/TeleMedi" class="text-[--l] text-4xl flex items-center justify-center">
<i class="ph ph-twitter-logo"></i>
</a>
</div>
</div>
<div class="w-fit justify-end gap-9">
<div class="w-fit flex-col gap-3.5">
<h6 class="text-[--w] text-2xl font-bold">Company</h6>
<ul class="flex-col pl-2.5 gap-0.5">
<li class="text-[--f] capitalize">
<a href="#">about us</a>
</li>
<li class="text-[--f] capitalize">
<a href="#">consultation</a>
</li>
<li class="text-[--f] capitalize">
<a href="#">our services</a>
</li>
<li class="text-[--f] capitalize">
<a href="#">privacy policy</a>
</li>
</ul>
</div>
<div class="w-fit flex-col gap-3.5">
<h6 class="text-[--w] text-2xl font-bold">Articles</h6>
<ul class="flex-col pl-2.5 gap-0.5">
<li class="text-[--f] capitalize">
<a href="#">trending</a>
</li>
<li class="text-[--f] capitalize">
<a href="#">newest</a>
</li>
</ul>
</div>
<div class="w-fit flex-col gap-3.5">
<h6 class="text-[--w] text-2xl font-bold">Support</h6>
<ul class="flex-col pl-2.5 gap-0.5">
<li class="text-[--f] capitalize">
<a href="#">contact us</a>
</li>
<li class="text-[--f] capitalize">
<a href="#">forums</a>
</li>
<li class="text-[--f] capitalize">
<a href="https://www.flaticon.com/free-icons/mri" target="_blank">Sponsor</a>
</li>
</ul>
</div>
</div>
</footer>
<!--
<a href="https://www.flaticon.com/free-icons/mri" title="mri icons">Mri icons created by B.Genesis - Flaticon</a>
-->
<!-- my javascript code-->
<script src="main.js"></script>
</body>
</html>