generated from raja21068/yoga
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmonopause.html
138 lines (128 loc) · 4.31 KB
/
monopause.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Understanding Menopause</title>
<style>
/* Base Styles */
body {
font-family: 'Arial', sans-serif;
color: #333;
background: linear-gradient(to right, #F3E5F5, #E8EAF6);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 700px;
background-color: #ffffff;
padding: 30px;
margin: 20px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-align: center;
}
h1 {
color: #6A1B9A;
font-size: 2em;
margin-bottom: 20px;
font-weight: 700;
}
h2 {
color: #7E57C2;
font-size: 1.5em;
margin-top: 20px;
margin-bottom: 10px;
}
p {
color: #555;
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 20px;
}
ul {
list-style-type: disc;
padding-left: 1.2em;
color: #444;
line-height: 1.7;
text-align: left;
max-width: 650px;
margin: 0 auto;
}
.highlight {
font-weight: bold;
color: #6A1B9A;
}
/* Card Styles */
.card {
background-color: #F3E5F5;
padding: 15px;
margin: 15px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card-title {
color: #6A1B9A;
font-weight: bold;
font-size: 1.2em;
margin-bottom: 5px;
}
.card-content {
color: #333;
font-size: 1em;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
}
p, .card-content {
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Understanding Menopause</h1>
<p><span class="highlight">Menopause</span> marks the end of menstrual cycles, diagnosed after 12 months without a period. It usually occurs between ages 45 and 55, with the average onset around 51.</p>
<h2>Stages of Menopause</h2>
<!-- Perimenopause Card -->
<div class="card">
<div class="card-title">Perimenopause</div>
<div class="card-content">The transition phase leading up to menopause. It can last 4-10 years and includes symptoms like irregular periods and hot flashes as the body begins hormonal changes.</div>
</div>
<!-- Menopause Card -->
<div class="card">
<div class="card-title">Menopause</div>
<div class="card-content">The official end of menstrual cycles, confirmed after 12 consecutive months without a period. This marks the end of the body’s reproductive years.</div>
</div>
<!-- Postmenopause Card -->
<div class="card">
<div class="card-title">Postmenopause</div>
<div class="card-content">The period after menopause where symptoms gradually ease. However, lower estrogen levels can increase risks of certain health issues, like osteoporosis.</div>
</div>
<h2>Common Symptoms</h2>
<ul>
<li>Hot flashes</li>
<li>Night sweats</li>
<li>Mood swings</li>
<li>Sleep issues</li>
<li>Vaginal dryness</li>
</ul>
<h2>Early and Premature Menopause</h2>
<p><span class="highlight">Early Menopause</span> (ages 40-45) and <span class="highlight">Premature Menopause</span> (before 40) may result from genetics or medical factors. Lifestyle adjustments and treatments, like hormone therapy or natural supplements, can help manage symptoms.</p>
</div>
</body>
</html>