-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (157 loc) · 6.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trafalgar</title>
<link rel="stylesheet" href="assets/styles/main.css" />
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="index.html"><span class="letter">T</span>Trafalgar</a>
</div>
<nav>
<label for="toggle"><img src="assets/icons/menu.webp" alt="Menu icon" /></label>
<input type="checkbox" id="toggle" />
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#services">Find a doctor</a></li>
<li><a href="#apps">Apps</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero" id="home">
<div class="container d-flex">
<div class="info">
<h1>
Virtual healthcare <br />
for you
</h1>
<p class="section-description">Trafalgar provides progressive, and affordable healthcare, accessible on mobile and online for everyone</p>
<a href="#" class="section-btn">Consult today</a>
</div>
<div class="image">
<img src="assets/images/hero.webp" alt="Hero" />
</div>
</div>
</section>
<section class="services" id="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<p class="section-description">
We provide to you the best choiches for you. Adjust it to your health needs and make sure your undergo treatment <br />
with our highly qualified doctors you can consult with us which type of service is suitable for your health
</p>
<div class="card-list d-flex">
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/icons/search.webp" alt="Search" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
</div>
<a href="#" class="section-btn">Learn more</a>
</div>
</section>
<section class="leading">
<div class="container d-flex">
<div class="image">
<img src="assets/images/design-2.webp" alt="healthcare" />
</div>
<div class="info">
<h2 class="section-title">Leading healthcare providers</h2>
<p class="section-description">
Trafalgar provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it’s not just work. We take pride in the solutions we deliver
</p>
<a href="#" class="section-btn">Learn more</a>
</div>
</div>
</section>
<section class="apps" id="apps">
<div class="container d-flex">
<div class="info">
<h2 class="section-title">
Download our <br />
mobile apps
</h2>
<p class="section-description">
Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely
</p>
<a href="#" class="section-btn" download>Download</a>
</div>
<div class="image">
<img src="assets/images/design-2.webp" alt="healthcare" />
</div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h2 class="section-title">What our customer are saying</h2>
<div class="testimonial-info d-flex">
<div class="user d-flex">
<img src="assets/images/avatar.webp" alt="Avatar" />
<div class="user-info">
<h3>Edward Newgate</h3>
<p>Founder Circle</p>
</div>
</div>
<q> Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely </q>
</div>
</div>
</section>
<section class="articles">
<div class="container">
<h2 class="section-title">Check out our latest article</h2>
<div class="card-list d-flex">
<div class="card">
<img src="assets/images/article-1.webp" alt="Article" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/images/article-2.webp" alt="Article" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
<div class="card">
<img src="assets/images/article-1.webp" alt="Article" />
<h3>Search a doctor</h3>
<p class="section-description">Choose your doctor from thousands of specialist, general, and trusted hospitals</p>
</div>
</div>
<a href="#" class="section-btn">Learn more</a>
</div>
</section>
</main>
</body>
</html>