-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (142 loc) · 6.57 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>HealthiHer</title>
<link rel="stylesheet" href="styles.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="https:fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="nav">
<div class="logo">
<h4>HealthiHer.</h4>
</div>
<div class="links">
<a href="#landing" class="mainlink"> About</a>
<a href="#about">Why take care</a>
<a href="#infoSection">Activities</a>
<a href="#banner">App</a>
</div>
</div>
<!--Landing Page-->
<section id=landing>
<div class="landing">
<div class="landingText" data-aos="fade-up" data-aos-duration="1000">
<h1>Your Health<span style="color:#e0501b;"> Matters</span> </h1>
<h3><b>HealthiHer</b> is a women-centric health website providing awareness about women healthcare. Many health ailments that women face can be prevented by looking after their health. Know about activities for well being, try meditation using our app and much more!</h3>
<div class="btn">
<a href= "#about"> Learn More</a>
</div>
</div>
<div class="landingImage" data-aos="fade-down" data-aos-duration="2000">
<img src="HealthiHer/img/landingimg.png" alt="">
</div>
</div>
</section>
<section id="about">
<div class="about">
<div class="aboutText" data-aos="fade-left" data-aos-duration="1000">
<h1>Why is it Important that <br> <span style="color:#2f8be0;font-size:3vw">You take care?</span></h1>
<img src="HealthiHer/img/impimg.jpeg" alt="">
</div>
<div class="aboutList" data-aos="fade-left" data-aos-duration="1000">
<ol>
<li>
<span>01</span>
<p>According to a recent report by the WHO (World Health Organization), 1 in 12 women are at the risk of developing cancer at some or the other point in their life.</p>
</li>
<li>
<span>02</span>
<p>The heart ailments are also a matter of concern for women not only in India but also globally. </p>
</li>
<li>
<span>03</span>
<p>In case a woman has a low RBC (Red Blood Cells) count, low haemoglobin levels; she is definitely anaemic. A woman might look healthy even if she is anaemic.</p>
</li>
<li>
<span>04</span>
<p>Along with the illnesses mentioned above; currently today's woman also is prone to the issues of mental health. Women are now also at the risk of depression, anxiety, insomnia, etc.</p>
</li>
</ol>
</div>
</div>
</section>
<!-- INFO SECTION -->
<section id="infoSection">
<div class="infoSection">
<div class="infoHeader" data-aos="fade-up" data-aos-duration="1000">
<h1>Things you could do to <br> <span style="color:#e0501b">Stay Healthy.</span> </h1>
</div>
<div class="infoCards">
<div class="card one" data-aos="fade-up" data-aos-duration="1000">
<img src="HealthiHer/img/phyimg.png" class="cardoneImg" alt="" data-aos="fade-up" data-aos-duration="1100">
<div class="cardbgone"></div>
<div class="cardContent">
<h2>Physical Health</h2>
<ul>
<li>Brisk Walking</li>
<li>Outdoor Sports</li>
<li>Simple exercises</li>
</ul>
</div>
</div>
<div class="card two" data-aos="fade-up" data-aos-duration="1300">
<img src="HealthiHer/img/mentalimg.png" class="cardtwoImg" alt="" data-aos="fade-up" data-aos-duration="1200">
<div class="cardbgtwo"></div>
<div class="cardContent">
<h2>Mental Health</h2>
<ul>
<li>Practice Mindfulness</li>
<li>Journal to record your thoughts</li>
<li>Talk to therapist/counselor</li>
</ul>
</div>
</div>
<div class="card three" data-aos="fade-up" data-aos-duration="1600">
<img src="HealthiHer/img/mentrualimg.png" class="cardthreeImg" alt="" data-aos="fade-up" data-aos-duration="1300">
<div class="cardbgone"></div>
<div class="cardContent">
<h2>Menstrual Health</h2>
<ul>
<li>Eat healthy</li>
<li>Take food rich in iron</li>
<li>Maintain hygiene</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="banner">
<div class="banner">
<div class="bannerText" data-aos="fade-right" data-aos-duration="1000">
<h1>How can you look after your Health?<br> <span style="font-size:1.6vw;font-weight:normal" class="bannerInnerText">
The work of daily life makes it difficult for women to look after their health. Don't let your health take a back seat in your life! Enjoy a <b>meditation session</b> on our <b> meditation app.</b><br>
<a class="js-scroll-trigger" href="app.html"> Get Started here! →</a>
</span> </h1>
</div>
<div class="bannerImg" data-aos="fade-up" data-aos-duration="1000">
<img src="HealthiHer/img/appimg.png" alt="">
</div>
</div>
</section>
<div class="footer">
<h2>HealthCare.</h2>
<div class="footerlinks">
<a href="#landing" class="mainlink"> About</a>
<a href="#about">Why take care</a>
<a href="#infoSection">Activities</a>
<a href="#banner">App</a>
</div>
</div>
</div>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>