-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (163 loc) · 8.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media-queries.css">
</head>
<body>
<header>
<nav>
<div class="left-side">
<div class="logo">
<h2>naran ♥</h2>
</div>
<div class="nav-list">
<ul class="items">
<li><a href="#" class="nav-links">Home</a></li>
<li><a href="#about" class="nav-links">About Us</a></li>
<li><a href="#tools" class="nav-links">Tools</a></li>
<li><a href="#tips" class="nav-links">Tips</a></li>
</ul>
</div>
</div>
<div class="right-side">
<div class="btn">
<a href="#" class="btn-1">Log In</a>
<a href="#" class="btn-2">Sign Up</a>
</div>
</div>
</nav>
</header>
<section class="hero-section">
<div class="s-1-ls">
<h1>Healthy Living Simplified</h1>
<p> Take control of your goals . track calories breakdown ingridents . congratulation on taking a forward step to get in shape and feel great.</p>
<div class="btn-s">
<a href="#" class="btn-s-1">App Store</a>
<a href="#" class="btn-s-2">Google Play</a>
</div>
</div>
<div class="s-1-rs right-side-hero">
<img src="hero.png" alt="Error">
</div>
</section>
<section class="common-section" id="about">
<div class="l-s-2">
<figure>
<img src="section-2.png" alt="ERROR">
</figure>
</div>
<div class="r-s-2">
<h2>Your Daily Healthy App</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aperiam, ducimus facere debitis saepe quibusdam unde nulla reprehenderit culpa molestias!</p>
<div class="btn-s2">
<a href="#" class="btn-s2-1">Get Started</a>
<a href="#" class="btn-s2-2">How its work?</a>
</div>
</div>
</section>
<section class="third-section" id="tools">
<h2>The Tools For Your Goals </h2>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis dolor dignissimos temporibus similique! Blanditiis, sit.</p>
<div class="section-third-task">
<div class="task-1">
<img src="learn.png" alt="ERROR">
<h3>Learn And Improve</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quae dolorem obcaecati enim expedita accusantium.</p>
</div>
<div class="task-2">
<img src="https://static.vecteezy.com/system/resources/previews/003/759/921/original/alarm-clock-cartoon-isolated-free-vector.jpg" alt="ERROR">
<h3>Time Management</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quae dolorem obcaecati enim expedita accusantium.</p>
</div>
<div class="task-3">
<img src="motivation.png" alt="ERROR">
<h3>Stay Motivated</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quae dolorem obcaecati enim expedita accusantium.</p>
</div>
</div>
</section>
<section class="section-4" id="section-4">
<div class="l-s-4">
<h2>Create Your Own Fitness Journey</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aperiam, ducimus facere debitis saepe quibusdam unde nulla reprehenderit culpa molestias!</p>
<div class="btn-s4">
<a href="#" class="btn-s4-1">Get Started</a>
<a href="#" class="btn-s4-2">How its work?</a>
</div>
</div>
<div class="r-s-4">
<figure>
<div class="right">
<div >
<img class="yoga-1" src="https://i.pinimg.com/originals/2a/ed/36/2aed36923381338080e5703c4142d55a.png" alt="ERROR">
</div>
<div >
<img class="yoga-2" src="https://www.shutterstock.com/shutterstock/videos/1097383127/thumb/1.jpg?ip=x480" alt="ERROR">
</div>
<div >
<img class="middle-yoga" src="https://cdn6.f-cdn.com/contestentries/1562800/877154/5d56c04e362ba_thumb900.jpg" alt="ERROR">
</div>
<div >
<img class="yoga-3" src="https://www.yogaclassplan.com/wp-content/uploads/2021/06/27-boundangle.jpg" alt="ERROR">
</div>
</div>
</figure>
</div>
</section>
<section class="section-5" id="tips">
<div class="l-s-5">
<figure>
<img class="first" src="https://topflightapps.com/wp-content/uploads/2021/10/personalization-in-medical-app-UI-design-example.jpg " alt="ERROR">
<img class="second" src="https://i.pinimg.com/236x/90/65/ac/9065ac3b0d9af7e793cd7abf3e813db6.jpg " alt="ERROR">
</figure>
</div>
<div class="r-s-5">
<h2>We will take care of your fitness goals </h2>
<h3>1: Fitness starts with what you eat</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aperiam, ducimus facere debitis saepe quibusdam unde nulla reprehenderit culpa molestias!</p>
<h3>2: Track your daily habits with water</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aperiam, ducimus facere debitis saepe quibusdam unde nulla reprehenderit culpa molestias!</p>
<h3>3: Track your weight and waist </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aperiam, ducimus facere debitis saepe quibusdam unde nulla reprehenderit culpa molestias!</p>
</div>
</section>
<footer>
<div class="left-footer">
<h2>naran ♥</h2>
<p>©2023 All Rights Reserved</p>
</div>
<div class="right-footer">
<div class="products">
<h2>Products</h2>
<p>pricing</p>
<p>pricing</p>
</div>
<div class="abouts">
<h2>Abouts</h2>
<p>pricing</p>
<p>pricing</p>
</div>
<div class="blogs">
<h2>Blogs</h2>
<p> Blog 1</p>
<p> Blog 2</p>
</div>
<div class="touch">
<h2>Get In Touch</h2>
<p>Questions Or Feedback?<br> We'll love to help you </p>
</div>
</div>
</footer>
<div class="icon-bar">
<a href="https://www.facebook.com/" class="facebook" target="_sk" > click here to visit <img class="fab" src="facebook.png" alt="Error" ></img></a>
<a href="https://www.instagram.com/" class="instagram" target="_sk" > click here to visit <img class="fab" src="instagram.png" alt="Error" ></img></a>
<a href="https://telegram.org/" class="telegram" target="_sk" > click here to visit <img class="fab" src="telegram.png" alt="Error" ></img></a>
<a href="https://in.linkedin.com/" class="linkedin" target="_sk" > click here to visit <img class="fab" src="linkedin.png" alt="Error" ></img></a>
<a href="https://www.youtube.com/" class="youtube" target="_sk" > click here to visit <img class="fab" src="youtube.png" alt="Error" ></img></a>
</div>
</body>
</html>