-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog.html
231 lines (212 loc) · 8.96 KB
/
blog.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Explore our blog for insights on health, nutrition, and wellness.">
<meta name="keywords" content="health, nutrition, PCOS, diabetes, wellness,Recipes">
<title>Blogs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Contact Header -->
<div class="contact-header">
<a href="index.html">Home</a>
<a href="achievements.html">Achievements</a>
<a href="blog.html">Blog</a>
<a href="appointment.html">Appointment</a>
<div class="dropdown">
<a href="#" class="dropdown-btn">Services</a>
<div class="dropdown-content">
<a href="hypertension-diet.html">Hypertension Diet</a>
<a href="diabetes-diet.html">Diabetes Diet</a>
<a href="pcos-diet.html">PCOS Diet</a>
<a href="thyroid-management.html">Thyroid Management</a>
<a href="cancer-treatment-programs.html">Cancer Treatment Programs</a>
<a href="cholesterol-diet.html">Cholesterol Diet</a>
<a href="weight-loss-program.html">Weight Loss Program</a>
</div>
</div>
<a href="sucessstory.html">Success Stories</a>
<a href="testimonial.html">Testimonials</a>
<a href="membership.html">Plans and prices</a>
<a href="contactus.html">Contact us</a>
</div>
<h1><center>Blogs</center></h1>
<!-- Blog Section -->
<div class="blog-container">
<!-- Blog Card 1 -->
<div class="blog-card">
<img src="icons/pcos-1.webp" alt="PCOS" />
<h2>PCOS</h2>
<p>Polycystic Ovary Syndrome (PCOS) is a hormonal disorder common among women of reproductive age..</p>
<a href="blogs/pcos.html" class="read-more">Read More</a>
</div>
<!-- Blog Card 2 -->
<div class="blog-card">
<img src="icons/healthy-heart.jpeg" alt="Top 10 Foods for a Healthy Heart" />
<h2>Top 10 Foods for a Healthy Heart</h2>
<p>A healthy diet is key to maintaining a strong heart. In this article, we'll explore the top 10 foods that promote cardiovascular health...</p>
<a href="blogs/healthyheart.html" class="read-more">Read More</a>
</div>
<!-- Blog Card 3 -->
<div class="blog-card">
<img src="../icons/type2_diabetes.jpg" alt="Finding the Best Type 2 Diabetes Treatment: A Comprehensive Guide" />
<h2>Finding the Best Type 2 Diabetes Treatment: A Comprehensive Guide</h2>
<p>Diabetes management involves a combination of medication, diet, and exercise...</p>
<a href="blogs/DIABETES.HTML" class="read-more">Read More</a>
</div>
<!-- 4 -->
<div class="blog-card">
<img src="../icons/immunitybosster.jpg" alt="immunity booster" />
<h2>*Nutrients That Build Immunity - Part 1*</h2>
<p>
Good nutrition is a key player in boosting your immune ...
</p>
<a href="blogs/immunitybooster.html" class="read-more">Read More</a>
</div>
<!-- 5 -->
<div class="blog-card">
<img src="../icons/immunitybosster.jpg" alt="immunity booster" />
<h2>*Nutrients That Build Immunity - Part 2*</h2>
<p>
A well-functioning immune system ...
</p>
<a href="blogs/immunitybooster2.html" class="read-more">Read More</a>
</div>
<!-- 6 -->
<div class="blog-card">
<img src="icons/immunitybosster2.jpg" alt="immunity booster" />
<h2> Best Immune-Boosting Foods: Foods for Immunity and How to Strengthen Your Immune System</h2>
<p>
Food which build up immunity...
</p>
<button class="read-more" data-id="6">Read More</button>
</div>
<!-- 7 -->
<div class="blog-card">
<img src="icons/whitebrown.jpeg" alt="White vs. Brown Sugar: Which Is Better for Your Health?" />
<h2>White vs. Brown Sugar: Which Is Better for Your Health?
</h2>
<p>We've often been led to believe that brown is healthier than white..</p>
<button class="read-more" data-id="7">Read More</button>
</div>
<!-- 8 -->
<div class="blog-card">
</h2>
<img src="icons/mensturalcycle.png" alt="" />
<h2>The 4 Phases of Your Menstrual Cycle, Decoded: A Comprehensive and Practical Guide
</h2>
<p>As a gyne dietitian with over a decade of experience working with women ...</p>
<button class="read-more" data-id="8">Read More</button>
</div>
<!-- 9 -->
<div class="blog-card">
</h2>
<img src="icons/PMS.jpeg" alt="How to Ease PMS: Practical Tips for Managing Premenstrual Syndrome" />
<h2>How to Ease PMS: Practical Tips for Managing Premenstrual Syndrome
</h2>
<p>Premenstrual syndrome (PMS) affects many women during the luteal phase of their menstrual cycle, leading to symptoms...</p>
<button class="read-more" data-id="9">Read More</button>
</div>
<!-- 10 -->
<div class="blog-card">
<h2>French Toast Recipe</h2>
<img src="icons/Frenchtoast1.jpg" alt="Recipe" />
<p>French toast has always been the delicacy...</p>
<a href="blogs/frenchtoast.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>ONE BEER VS TWO BEER</h2>
<img src="icons/BEER.JPEG" alt="Recipe" />
<p>THE DEBATE BETWEEN CHOOSING ONE BEAR OR TWO...</p>
<a href="blogs/beer.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>Slim Down & Soothe: Chia Avocado Smoothie</h2>
<img src="icons/chia.hpeg.jpg" alt="Recipe" />
<p>why this Smoothie?..</p>
<a href="blogs/chiaavacado.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>Sugar reading keep on changing</h2>
<img src="icons/sugar.jpg" alt="Recipe" />
<p>sugar reading keeps..</p>
<a href="blogs/sugar.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>Understanding Stress and Effective Stress Busters</h2>
<img src="icons/stress.jpg" alt="Recipe" />
<p>stress and Effective..</p>
<a href="blogs/stress.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>Raisins vs. Black Currants vs. Dates: Which is Better for Health? </h2>
<img src="icons/raisingdates.jpg" alt="Recipe" />
<p>both being equally tasty..</p>
<a href="blogs/raisin.html" class="read-more">Read More</a>
</div>
<div class="blog-card">
<h2>Nature’s Bounty: Discover Powerful Natural Solutions for Managing Diabetes! 🍃
</h2>
<img src="icons/control-diabetes.webp" alt="Recipe" />
<p>natures bounty..</p>
<a href="blogs/fibres.html" class="read-more">Read More</a>
</div>
<!-- Blog Modal -->
<div id="blogModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="blog-content"></div>
</div>
</div>
<script>
// Get modal element and close button
const modal = document.getElementById('blogModal');
const closeModal = document.querySelector('.close');
// Function to open the modal and display blog content
function openModal(blogId) {
fetch(`blogs/${blogId}.json`)
.then(response => response.json())
.then(data => {
let blogHtml = `<h1>${data.title}</h1>`;
blogHtml += `<img src="${data.image}" alt="${data.title}" style="width: 100%; height: auto;">`;
blogHtml += data.content.map(item => {
if (item.type === 'heading') {
return `<h2>${item.text}</h2>`;
} else if (item.type === 'paragraph') {
return `<p>${item.text}</p>`;
} else if (item.type === 'list') {
return `<ul>${item.items.map(i => `<li>${i}</li>`).join('')}</ul>`;
}
}).join('');
document.getElementById('blog-content').innerHTML = blogHtml;
modal.style.display = "block";
document.body.style.overflow = 'hidden'; // Disable scroll when modal is open
})
.catch(error => {
console.error('Error fetching blog data:', error);
});
}
// Close the modal when the user clicks on <span> (x)
closeModal.onclick = function() {
modal.style.display = "none";
document.body.style.overflow = 'auto'; // Enable scroll when modal is closed
}
// Close the modal when the user clicks outside the modal content
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.body.style.overflow = 'auto'; // Enable scroll when modal is closed
}
}
// Add event listener to "Read More" buttons
document.querySelectorAll('.read-more').forEach(button => {
button.addEventListener('click', function() {
const blogId = this.getAttribute('data-id');
openModal(blogId);
});
});
</script>
</body>
</html>