HTML
338 lines
24 KB
Women's Wellness in Ayurveda — Menstrual, Pregnancy & Menopause Care
Women
Live Preview
Source Code
<!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="Women's wellness in Ayurveda — menstrual health, pregnancy care, menopause support, and hormonal balance through natural Ayurvedic practices.">
<title>Women's Wellness in Ayurveda — Menstrual, Pregnancy & Menopause Care</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary-color: #2d5f4f;
--secondary-color: #8b7355;
--accent-color: #c9a96e;
--text-dark: #2c3e50;
--text-light: #6c757d;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #e9ecef;
}
body { font-family: 'Inter', sans-serif; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.3; }
.navbar { position: sticky; top: 0; background: var(--bg-white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 1000; padding: 1rem 0; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
.nav-menu { display: flex; list-style: none; gap: 2rem; }
.nav-menu a { color: var(--text-dark); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s ease; }
.nav-menu a:hover { color: var(--primary-color); }
.mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; }
.hero { background: linear-gradient(135deg, rgba(45, 95, 79, 0.9), rgba(201, 169, 110, 0.85)), url('https://images.unsplash.com/photo-1512621776951-572b96cfd774?w=1600') center/cover; color: white; padding: 8rem 2rem 6rem; text-align: center; }
.hero-content { max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: 3rem; margin-bottom: 1.5rem; font-weight: 700; }
.hero p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; font-weight: 300; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1rem; }
.section-header p { font-size: 1.1rem; color: var(--text-light); max-width: 700px; margin: 0 auto; }
.about { background: var(--bg-white); }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-image { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text h3 { font-size: 2rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.about-text p { color: var(--text-light); margin-bottom: 1rem; line-height: 1.8; }
.services { background: var(--bg-light); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.service-card { background: var(--bg-white); padding: 2.5rem 2rem; border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.service-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.service-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-dark); }
.service-card p { color: var(--text-light); line-height: 1.7; }
.trust { background: var(--bg-white); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-top: 3rem; }
.trust-item { text-align: center; }
.trust-number { font-size: 3rem; font-weight: 700; color: var(--primary-color); font-family: 'Playfair Display', serif; margin-bottom: 0.5rem; }
.trust-label { font-size: 1.1rem; color: var(--text-light); font-weight: 500; }
.content-section { background: var(--bg-light); }
.content-grid { display: grid; gap: 3rem; }
.content-article { background: var(--bg-white); border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; gap: 2rem; border: 1px solid var(--border-color); }
.article-image { height: 100%; min-height: 250px; }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-content { padding: 2rem 2rem 2rem 0; }
.article-content h3 { font-size: 1.75rem; color: var(--primary-color); margin-bottom: 1rem; }
.article-content p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.article-meta { display: flex; gap: 1.5rem; font-size: 0.9rem; color: var(--text-light); margin-top: 1.5rem; }
.article-meta i { margin-right: 0.5rem; color: var(--accent-color); }
.contact { background: var(--bg-white); }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1000px; margin: 0 auto; }
.contact-info h3 { font-size: 1.75rem; color: var(--primary-color); margin-bottom: 1.5rem; }
.contact-info p { color: var(--text-light); margin-bottom: 2rem; line-height: 1.8; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-item { display: flex; align-items: start; gap: 1rem; }
.contact-item i { font-size: 1.25rem; color: var(--primary-color); margin-top: 0.25rem; }
.contact-item-content h4 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--text-dark); }
.contact-item-content p { margin: 0; color: var(--text-light); }
.contact-form { background: var(--bg-light); padding: 2.5rem; border-radius: 8px; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-dark); font-weight: 500; }
.form-group input, .form-group textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border-color); border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 1rem; transition: border-color 0.3s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); }
.form-group textarea { resize: vertical; min-height: 120px; }
.submit-btn { background: var(--primary-color); color: white; padding: 1rem 2.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 0.3s ease; width: 100%; }
.submit-btn:hover { background: #234a3d; }
footer { background: var(--text-dark); color: white; padding: 3rem 0 1.5rem; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 2rem; }
.footer-section h3 { font-size: 1.25rem; margin-bottom: 1.5rem; color: var(--accent-color); }
.footer-section p { color: rgba(255,255,255,0.7); line-height: 1.8; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--accent-color); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; text-align: center; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
@media (max-width: 768px) {
.mobile-toggle { display: block; }
.nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-white); flex-direction: column; padding: 1rem 2rem; box-shadow: 0 5px 10px rgba(0,0,0,0.1); display: none; }
.nav-menu.active { display: flex; }
.hero h1 { font-size: 2rem; }
.hero p { font-size: 1rem; }
.section-header h2 { font-size: 2rem; }
.about-content, .contact-wrapper { grid-template-columns: 1fr; gap: 2rem; }
.content-article { grid-template-columns: 1fr; }
.article-image { height: 250px; }
.article-content { padding: 2rem; }
section { padding: 3rem 0; }
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">Women's Wellness</a>
<button class="mobile-toggle" aria-label="Toggle menu"><i class="fas fa-bars"></i></button>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Wellness Areas</a></li>
<li><a href="#knowledge">Knowledge</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-content">
<h1>Women's Wellness in Ayurveda</h1>
<p>Holistic Ayurvedic care for every stage of a woman's life — menstrual health, pregnancy support, menopause management, and hormonal balance through natural, time-tested practices.</p>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1512621776951-572b96cfd774?w=800" alt="Women's wellness and Ayurveda">
</div>
<div class="about-text">
<h3>Ayurveda for Women's Health</h3>
<p>Ayurveda has always held women's health in special regard. The ancient texts describe in detail the unique physiological cycles women experience and provide comprehensive guidance for maintaining balance through each phase of life — from menarche through the reproductive years to menopause and beyond.</p>
<p>In Ayurveda, the female reproductive system is governed by Apana Vata, a downward-moving energy. When this energy is balanced, menstruation is regular and comfortable. When disturbed, it can cause cramps, irregularity, and emotional turbulence.</p>
<p>Ayurvedic women's wellness emphasizes prevention through proper diet, lifestyle, herbs, and self-care practices that support the body's natural rhythms rather than disrupting them with artificial interventions.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Areas of Women's Wellness</h2>
<p>Comprehensive Ayurvedic care for every stage of a woman's life</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-heart"></i></div>
<h3>Menstrual Health</h3>
<p>Ayurvedic management of PMS, cramps, irregular cycles, and heavy bleeding. Herbal support with ashoka, shatavari, and ginger. Dietary and lifestyle adjustments for each phase of the cycle.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-baby"></i></div>
<h3>Pregnancy Care</h3>
<p>Month-by-month Ayurvedic guidance for a healthy pregnancy. Proper nutrition, gentle yoga, herbal support, and preparatory practices for smooth delivery. Postpartum recovery protocols.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-fire"></i></div>
<h3>Menopause Support</h3>
<p>Natural management of hot flashes, mood swings, and bone health during menopause. Cooling herbs, phytoestrogen-rich foods, and lifestyle practices that ease the transition gracefully.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-balance-scale"></i></div>
<h3>Hormonal Balance</h3>
<p>Ayurvedic approach to PCOS, thyroid imbalances, and fertility. Shatavari, ashwagandha, and maca support endocrine health. Detox and dietary protocols restore natural hormonal harmony.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-leaf"></i></div>
<h3>Shatavari — Women's Herb</h3>
<p>Known as the "hundred husbands" herb, shatavari is the premier Ayurvedic tonic for female reproductive health. It nourishes the reproductive tissues, balances hormones, and supports lactation.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-spa"></i></div>
<h3>Self-Care Practices</h3>
<p>Abhyanga (oil massage), yoni steaming, and castor oil packs are traditional practices that support reproductive health. Regular self-care routines nurture the body and promote emotional well-being.</p>
</div>
</div>
</div>
</section>
<section class="trust">
<div class="container">
<div class="section-header">
<h2>Our Experience</h2>
<p>Dedicated to women's wellness through authentic Ayurvedic care</p>
</div>
<div class="trust-grid">
<div class="trust-item"><div class="trust-number">16+</div><div class="trust-label">Years of Practice</div></div>
<div class="trust-item"><div class="trust-number">6000+</div><div class="trust-label">Women Helped</div></div>
<div class="trust-item"><div class="trust-number">3</div><div class="trust-label">Life Stages Covered</div></div>
<div class="trust-item"><div class="trust-number">100%</div><div class="trust-label">Natural Approach</div></div>
</div>
</div>
</section>
<section id="knowledge" class="content-section">
<div class="container">
<div class="section-header">
<h2>Women's Health Knowledge</h2>
<p>Explore Ayurvedic wisdom for every phase of a woman's wellness journey</p>
</div>
<div class="content-grid">
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1512621776951-572b96cfd774?w=600" alt="Menstrual health">
</div>
<div class="article-content">
<h3>Ayurvedic Guide to Menstrual Health & Cycle Care</h3>
<p>In Ayurveda, menstruation is considered a natural cleansing process. During your period, slow down, rest, and avoid strenuous activity. Eat warm, nourishing foods and avoid cold, raw, and spicy foods that can aggravate Vata.</p>
<p>For cramps, try ginger tea with jaggery. For heavy bleeding, ashoka bark decoction helps. For PMS, brahmi and jatamansi calm the mind. Track your cycle and adjust your diet and lifestyle according to the dosha that predominates in each phase — Vata during the period, Pitta before ovulation, Kapha after ovulation.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>8 min read</span>
<span><i class="far fa-folder"></i>Menstrual</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=600" alt="Pregnancy care">
</div>
<div class="article-content">
<h3>Ayurvedic Pregnancy Care: Month-by-Month Guide</h3>
<p>Ayurveda provides detailed month-by-month guidance during pregnancy. In the first trimester, focus on stability — eat warm, easily digestible foods and avoid travel. Shatavari helps support implantation and prevents miscarriage.</p>
<p>In the second trimester, nourish the growing baby with healthy fats, calcium-rich foods, and iron. In the third trimester, prepare for delivery with perineal oil massage, gentle yoga, and rasayana herbs. Postpartum care (Sutika Paricharya) is equally important — warm oil massages, nourishing soups, and rest for 42 days restore the mother's strength and vitality.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>10 min read</span>
<span><i class="far fa-folder"></i>Pregnancy</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=600" alt="Menopause support">
</div>
<div class="article-content">
<h3>Navigating Menopause with Ayurveda: A Natural Approach</h3>
<p>Menopause is not a disease but a natural transition. Ayurveda views it as a shift from the Pitta phase of life to the Vata phase. The key is to pacify both Pitta (for hot flashes and irritability) and Vata (for dryness and anxiety).</p>
<p>Cooling herbs like shatavari, brahmi, and aloe vera gel help manage hot flashes. Phytoestrogen-rich foods like flaxseeds, soy, and fennel support hormonal balance. Weight-bearing exercise, calcium-rich foods, and ashwagandha maintain bone health. Meditation and pranayama reduce stress and emotional turbulence during this transformative time.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>9 min read</span>
<span><i class="far fa-folder"></i>Menopause</span>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Get Women's Wellness Guidance</h2>
<p>Connect with our Ayurvedic specialists for personalized women's health support</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Contact Information</h3>
<p>Our women's wellness specialists provide compassionate, personalized Ayurvedic care for every stage of your life journey.</p>
<div class="contact-details">
<div class="contact-item"><i class="fas fa-map-marker-alt"></i><div class="contact-item-content"><h4>Location</h4><p>123 Wellness Street<br>Health District, City 12345</p></div></div>
<div class="contact-item"><i class="fas fa-phone"></i><div class="contact-item-content"><h4>Phone</h4><p>+1 (555) 123-4567</p></div></div>
<div class="contact-item"><i class="fas fa-envelope"></i><div class="contact-item-content"><h4>Email</h4><p>info@womenswellness.com</p></div></div>
<div class="contact-item"><i class="fas fa-clock"></i><div class="contact-item-content"><h4>Hours</h4><p>Monday - Friday: 9:00 AM - 6:00 PM<br>Saturday: 10:00 AM - 4:00 PM</p></div></div>
</div>
</div>
<div class="contact-form">
<form id="enquiryForm">
<div class="form-group"><label for="name">Full Name</label><input type="text" id="name" name="name" required></div>
<div class="form-group"><label for="email">Email Address</label><input type="email" id="email" name="email" required></div>
<div class="form-group"><label for="phone">Phone Number</label><input type="tel" id="phone" name="phone"></div>
<div class="form-group"><label for="message">Your Message</label><textarea id="message" name="message" required></textarea></div>
<button type="submit" class="submit-btn">Send Enquiry</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section"><h3>Women's Wellness</h3><p>Supporting women through every life stage with authentic Ayurvedic care, natural remedies, and holistic wellness practices.</p></div>
<div class="footer-section"><h3>Quick Links</h3><ul class="footer-links"><li><a href="#about">About</a></li><li><a href="#services">Wellness Areas</a></li><li><a href="#knowledge">Knowledge Base</a></li><li><a href="#contact">Contact</a></li></ul></div>
<div class="footer-section"><h3>Resources</h3><ul class="footer-links"><li><a href="#">Menstrual Guide</a></li><li><a href="#">Pregnancy Care</a></li><li><a href="#">Menopause Support</a></li><li><a href="#">FAQ</a></li></ul></div>
<div class="footer-section"><h3>Legal</h3><ul class="footer-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Disclaimer</a></li><li><a href="#">Professional Standards</a></li></ul></div>
</div>
<div class="footer-bottom"><p>© 2026 Women's Wellness Center. All rights reserved. This website is for informational purposes only and does not constitute medical advice.</p></div>
</div>
</footer>
<script>
const mobileToggle = document.querySelector('.mobile-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.addEventListener('click', () => { navMenu.classList.toggle('active'); });
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); navMenu.classList.remove('active'); }
});
});
const form = document.getElementById('enquiryForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData);
console.log('Form submitted:', data);
alert('Thank you for your enquiry. We will get back to you within 24 hours.');
form.reset();
});
let lastScroll = 0;
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) { navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)'; }
else { navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)'; }
lastScroll = currentScroll;
});
</script>
</body>
</html>