forked from DineshK3012/MedCare-LandingPage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
364 lines (310 loc) · 14.7 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
<!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>Landing Page</title>
<!-- google font link -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/76448c9004.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- main section with form -->
<section class="main py-5">
<div class="main-part1">
<div>
<img src="imgs/logo.png" class="logo" alt="MedCare_LOGO">
<p class="text-white fw-semibold text-uppercase text-sm">Bangalore | Chennai | Hyderabad | Pune | +10
Cities
</p>
</div>
<p class="fs-1 text-white">Laser Treatment for Varicose Veins in your City</p>
<div class="featureDiv">
<div class="bg-white rounded-3 m-2 text-center text-sm">
<img src="imgs/painless.png" class="w-50 m-1" alt="">
<p class="blue-txt lh-1 mb-0 py-2 px-1 fw-semibold">Painless Procedure</p>
</div>
<div class="bg-white rounded-3 m-2 text-center text-sm">
<img src="imgs/no-cutting.png" class="w-50 m-1" alt="">
<p class="blue-txt lh-1 mb-0 py-2 px-1 fw-semibold">No Cuts or Stitches</p>
</div>
<div class="bg-white rounded-3 m-2 text-center text-sm">
<img src="imgs/discharge.png" class="w-50 mt-1" alt="">
<p class="blue-txt lh-1 mb-0 py-2 px-1 fw-semibold">Same-day Discharge</p>
</div>
<div class="bg-white rounded-3 m-2 text-center text-sm">
<img src="imgs/insurance.png" class="w-50 mt-1" alt="">
<p class="blue-txt lh-1 mb-0 py-2 px-1 fw-semibold">All Insurance Accepted</p>
</div>
<div class="bg-white rounded-3 m-2 text-center text-sm">
<img src="imgs/affordable.png" class="w-50 mt-1" alt="">
<p class="blue-txt lh-1 mb-0 py-2 px-1 fw-semibold">Affordable Care</p>
</div>
</div>
</div>
<div class="form-div">
<i class="fa-solid fa-circle-chevron-down"></i>
<h2 class="fs-2 text-uppercase fw-normal">Know More</h2>
<p>Cost Estimate | Top Doctors | Latest Treatment</p>
<form>
<label for="name">Name*</label>
<input type="text" placeholder="Enter your name">
<label for="phone">Phone Number*</label>
<input type="phone" placeholder="Enter you phone number">
<label for="city">City</label>
<select name="city" id="">
<option value="bangalore">Bangalore</option>
<option value="chennai">Chennai</option>
<option value="hyderabad">Hyderabad</option>
<option value="Pune">Pune</option>
<option value="">...</option>
</select>
<button class="button sec-bg" type="submit">Submit</button>
</form>
</div>
</section>
<!-- stats section -->
<section class="container-fluid px-0 py-3 mx-auto position-relative">
<div class="model-container">
<img src="imgs/model2.png" class="model" alt="">
<div class="divbot">
<div class="text-start mx-auto px-4">
<h1 class="fs-1 fw-bold pri-ft mb-0">Risk free consultation</h1>
<p class="fw-bold mb-0">Money back guarantee | Free cancellation</p>
</div>
</div>
<div class="text-start mx-auto">
<div class="py-3 px-4">
<p class="text-sm mb-0">Get access to the latest, painless LASER treatment for Varicose Veins</p>
<p class="text-sm fw-bold">No Hospital Stay. No Cuts. No Stitches.</p>
</div>
</div>
</div>
<div class="stats-sec other-bg d-flex flex-wrap justify-content-center py-3">
<div class="stats-item">
<img src="imgs/icon8.png" alt="">
<div>
<p class="blue-txt fs-5 mb-0 fw-bold">30,000+</p>
<p class="blue-txt fs-6 my-0 fw-normal lh-1">Happy customers across India</p>
</div>
</div>
<div class="stats-item">
<img src="imgs/icon9.png" alt="">
<div>
<p class="blue-txt fs-5 mb-0 fw-bold">5,000+</p>
<p class="blue-txt fs-6 my-0 fw-normal lh-1">Surgeries successfully completed</p>
</div>
</div>
<div class="stats-item">
<img src="imgs/icon10.png" alt="">
<div>
<p class="blue-txt fs-5 mb-0 fw-bold">Rs. 12 Cr+</p>
<p class="blue-txt fs-6 my-0 fw-normal lh-1">Saved on surgery costs with Medfin</p>
</div>
</div>
<div class="stats-item">
<img src="imgs/icon11.png" alt="">
<div>
<p class="blue-txt fs-5 mb-0 fw-bold">50+</p>
<p class="blue-txt fs-6 my-0 fw-normal lh-1">Expert Medfin Surgeons</p>
</div>
</div>
</div>
</section>
<!-- advantages section -->
<section class="advantage container-fluid py-5 text-center">
<h5 class="fs-3 fw-normal blue-txt">Advantages of LASER treament for Varicose Veins</h5>
<p class="fs-6 text-sm">Get rid of varicose with the latest LASER treament</p>
<table class="table w-50 mx-auto my-5">
<thead>
<tr class="border-top">
<th></th>
<td class="text-uppercase pri-ft">LASER treatement</td>
<td>Traditonal Varicose Surgery</td>
</tr>
</thead>
<tbody>
<tr>
<th>Mininally Invasive</th>
<td><i class="fa-solid fa-check text-success"></i></td>
<td><i class="fa-solid fa-xmark text-danger"></i></td>
</tr>
<tr>
<th>Cuts or stiches</th>
<td><i class="fa-solid fa-xmark text-danger"></i></td>
<td><i class="fa-solid fa-check text-success"></i></td>
</tr>
<tr>
<th>Same-day discharge</th>
<td><i class="fa-solid fa-check text-success"></i></td>
<td><i class="fa-solid fa-xmark text-danger"></i></td>
</tr>
<tr>
<th>Post Surgical Pain</th>
<td class="pri-ft">Minimal</td>
<td>High</td>
</tr>
<tr>
<th>Recovery</th>
<td class="pri-ft">Few days</td>
<td>Few weeks</td>
</tr>
<tr>
<th>Blood Loss</th>
<td class="pri-ft">No Blood Loss</td>
<td>High Chances</td>
</tr>
</tbody>
</table>
<div class="btns py-3">
<button class="button sec-bg">Get a cost estimate</button>
<button class="button blue-btn pri-bg">Call us on 7026200200</button>
</div>
<div class="pt-5 pb-0">
<p class="mb-0 sec-ft fw-semibold">Get Access to the best</p>
<p class="fs-1 lh-1 sec-ft fw-semibold">Experienced Varicose Veins <br>
Specialists Near you!
</p>
<p class="sec-ft fw-semibold">At just Rs. 299/-</p>
</div>
</section>
<!-- medfin section -->
<section class="medfin container-fluid other-bg py-5 d-flex justify-content-center flex-wrap">
<div>
<h1 class="fs-0 fw-bold sec-ft text-start mt-2 mb-3">What can Medfin <br> help you with?</h1>
<button class="button sec-bg ms-0 my-1">Request a call back</button>
</div>
<div class="border pri-bg mx-5 arrow-div">
<img src="imgs/icon7.png" class="arrow" alt="">
</div>
<div>
<ul>
<li class="fw-semibold text-primary my-1">Best Varicose Doctors Near You</li>
<li class="fw-semibold text-primary my-1">Free Cost Estimate for LASER Treatement</li>
<li class="fw-semibold text-primary my-2">Find out if your insurance covers your treatment</li>
<li class="fw-semibold text-primary my-1">Best Varicose Doctors Near You</li>
<li class="fw-semibold text-primary my-1">Get 0% interest EMI</li>
<li class="fw-semibold text-primary my-1">More Information about the latest laser treatment for Vericose
Veins
</li>
</ul>
</div>
</section>
<!-- faq section -->
<section class="faq container-fluid py-5 text-center">
<h2 class="fs-4 blue-txt py-3">Frequently Asked Questions about Varicose Veins</h2>
<div class="ques">
<div class="que" onclick="onHover(this)">
What are the treatment options for Varicose Veins?
<p class="ans">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non esse quibusdam quasi possimus vero
reprehenderit unde porro optio natus voluptas. Molestiae repellendus, dolore ducimus perferendis
facere
hic dolores qui commodi.
</p>
</div>
<p class="que" onclick="onHover(this)">
What happens if Varicose Veins are left untreated
</p>
<p class="que" onclick="onHover(this)">
What are the advantages of LASER treatement for Varicose Veins?
</p>
<p class="que" onclick="onHover(this)">
What can I expect after LASER treatment for Vaicose Veins?
</p>
</div>
</section>
<!-- why you should choose -->
<section class="whsc other-bg py-5 text-center">
<h2 class="fs-4 pri-ft">Why you should choose Us</h2>
<div class="container-fluid d-flex flex-wrap justify-content-around align-items-baseline w-50 py-4">
<div class="m-4 w-25">
<img src="imgs/icon1.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Experienced</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Doctors</p>
</div>
<div class="m-4 w-25">
<img src="imgs/icon2.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Guaranteed best</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Prices</p>
</div>
<div class="m-4 w-25">
<img src="imgs/icon3.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Personal</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Assistant</p>
</div>
<div class="m-4 w-25">
<img src="imgs/icon4.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Interest-Free EMI</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Facility</p>
</div>
<div class="m-4 w-25">
<img src="imgs/icon5.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Insurance</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Assistance</p>
</div>
<div class="m-4 w-25">
<img src="imgs/icon6.png" class="img-fluid icon-size" alt="icons">
<p class="fs-6 fw-bold mb-0 text-uppercase">Hassle-Free</p>
<p class="fs-6 fw-normal mb-0 text-uppercase">Experience</p>
</div>
</div>
<button class="button sec-bg">Talk to an expert</button>
</section>
<!-- EMI section -->
<section class="container-fluid emi">
<div>
<p class="fs-2 pri-ft">
<b>Interest-free EMI available</b>
for Varicose Veins treatment
</p>
<ul class="my-4 ps-0 pri-ft">
<li class="fs-6 d-flex align-items-center mb-3">
<i class="fa-solid fa-check text-success"></i>
<p class="mb-0 mx-3">Get well first, pay later</p>
</li>
<li class="fs-6 d-flex align-items-center mb-3">
<i class="fa-solid fa-check text-success"></i>
<p class="mb-0 mx-3">Get well first, pay later</p>
</li>
</ul>
<div class="btns">
<button class="button sec-bg">Know More</button>
<button class="button blue-btn pri-bg">Call us on 7026200200</button>
</div>
</div>
<div class="image">
<img src="imgs/calender.png" alt="">
</div>
</section>
<!-- contact section -->
<section class="container-fluid py-5 text-center other-bg contact">
<p class="fs-4 fw-semibold blue-txt w-50 mx-auto">
High quality, Minimally Invasive LASER Treatment for Varicose Veins At The Best Price Only At
<span>Medfin</span>
</p>
<div class="btns">
<button class="button sec-bg">Know More</button>
<button class="button blue-btn pri-bg">Call us on 7026200200</button>
</div>
</section>
<!-- footer section -->
<footer>
Copyright 2021
</footer>
<script src="index.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>