HTML
338 lines
23.8 KB
Ayurvedic Yoga & Pranayama — Asanas, Sun Salutations & Breathing Techniques
Ayurvedic yoga and pranayama guide — sun salutations, breathing techniques, and dosha-specific asanas for physical and mental well-being.
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="Ayurvedic yoga and pranayama guide — sun salutations, breathing techniques, and dosha-specific asanas for physical and mental well-being.">
<title>Ayurvedic Yoga & Pranayama — Asanas, Sun Salutations & Breathing Techniques</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=Cormorant+Garamond:wght@400;600;700&family=Nunito+Sans: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: #3a6b35;
--secondary-color: #8b7355;
--accent-color: #c9a96e;
--text-dark: #2c3e50;
--text-light: #6c757d;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #e9ecef;
}
body { font-family: 'Nunito Sans', sans-serif; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', 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: 'Cormorant Garamond', 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(58, 107, 53, 0.9), rgba(139, 115, 85, 0.85)), url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?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: 'Cormorant Garamond', 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: 'Nunito Sans', 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: #2d5228; }
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">Yoga & Pranayama</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">Practices</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>Ayurvedic Yoga & Pranayama</h1>
<p>Discover sun salutations, breathing techniques, and dosha-specific asanas that integrate the wisdom of Ayurveda with yoga for complete physical and mental well-being.</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-1544367567-0f2fcb009e0b?w=800" alt="Yoga and pranayama practice">
</div>
<div class="about-text">
<h3>Yoga and Ayurveda: Sister Sciences</h3>
<p>Yoga and Ayurveda are two inseparable sister sciences that originated from the same Vedic tradition. While Ayurveda focuses on healing the body and balancing the doshas, yoga provides the spiritual and physical practices that support this healing process.</p>
<p>In the Ayurvedic approach to yoga, asanas (postures) and pranayama (breathing techniques) are selected based on your dosha type. What works for a Vata person may aggravate a Pitta person. This personalized approach makes yoga more therapeutic and effective.</p>
<p>Pranayama — the science of breath control — directly influences prana (life force energy). Different breathing techniques can heat or cool the body, stimulate or calm the mind, making pranayama a powerful tool for dosha balancing.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Yoga & Pranayama Practices</h2>
<p>Therapeutic techniques tailored to balance each dosha type</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-sun"></i></div>
<h3>Sun Salutations (Surya Namaskar)</h3>
<p>A sequence of 12 postures that warms the body, builds strength, and improves circulation. Performed at sunrise facing east, it activates solar energy and balances all three doshas.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-wind"></i></div>
<h3>Nadi Shodhana</h3>
<p>Alternate nostril breathing that balances the left and right hemispheres of the brain. Calms the nervous system, reduces anxiety, and is excellent for balancing Vata dosha.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-fire"></i></div>
<h3>Kapalabhati</h3>
<p>Skull-shining breath — forceful exhalations that cleanse the respiratory system, energize the mind, and reduce Kapha congestion. Best practiced in the morning on an empty stomach.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-snowflake"></i></div>
<h3>Sheetali Pranayama</h3>
<p>Cooling breath through a curled tongue. Reduces body heat, calms anger, and pacifies Pitta dosha. Excellent during summer or when feeling overheated and irritable.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-leaf"></i></div>
<h3>Vata-Sothing Asanas</h3>
<p>Forward bends, gentle twists, and grounding poses like Child's Pose, Mountain Pose, and Tree Pose. Slow, gentle movements with long holds calm the Vata mind.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-mountain"></i></div>
<h3>Kapha-Stimulating Asanas</h3>
<p>Energetic backbends, inversions, and dynamic flows like Sun Salutations. Fast-paced sequences with short holds invigorate Kapha and combat lethargy.</p>
</div>
</div>
</div>
</section>
<section class="trust">
<div class="container">
<div class="section-header">
<h2>Our Experience</h2>
<p>Teaching therapeutic yoga and pranayama with an Ayurvedic approach</p>
</div>
<div class="trust-grid">
<div class="trust-item"><div class="trust-number">22+</div><div class="trust-label">Years Teaching</div></div>
<div class="trust-item"><div class="trust-number">15,000+</div><div class="trust-label">Students Trained</div></div>
<div class="trust-item"><div class="trust-number">12</div><div class="trust-label">Surya Namaskar Steps</div></div>
<div class="trust-item"><div class="trust-number">8</div><div class="trust-label">Pranayama Techniques</div></div>
</div>
</div>
</section>
<section id="knowledge" class="content-section">
<div class="container">
<div class="section-header">
<h2>Yoga Knowledge</h2>
<p>Explore the integration of Ayurveda and yoga for complete wellness</p>
</div>
<div class="content-grid">
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1599901860904-17e61ed63cbf?w=600" alt="Sun salutation sequence">
</div>
<div class="article-content">
<h3>The Complete Guide to Surya Namaskar (Sun Salutations)</h3>
<p>Surya Namaskar consists of 12 postures performed in a flowing sequence: Pranamasana (prayer pose), Hasta Padasana (hand to foot), Ashwa Sanchalanasana (equestrian), Dandasana (stick), Ashtanga Namaskara (eight parts), Bhujangasana (cobra), and more.</p>
<p>One complete round (both sides) takes about 3-4 minutes. Start with 3-5 rounds and build to 12. Practice at sunrise for maximum benefit. Surya Namaskar improves digestion, strengthens muscles, enhances flexibility, and boosts energy — a complete workout in itself.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>8 min read</span>
<span><i class="far fa-folder"></i>Asanas</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1518611012118-696072aa5790?w=600" alt="Pranayama breathing">
</div>
<div class="article-content">
<h3>Pranayama Techniques for Each Dosha Type</h3>
<p>Vata types benefit from Nadi Shodhana (alternate nostril breathing) and Bhramari (humming bee breath) — both calming and grounding. Practice slowly with gentle, deep breaths. Avoid rapid breathing techniques.</p>
<p>Pitta types should practice Sheetali (cooling breath) and Chandra Bhedana (moon-piercing breath) to reduce heat. Kapha types benefit from Kapalabhati (skull-shining breath) and Bhastrika (bellows breath) to stimulate energy and clear congestion. Always practice on an empty stomach, preferably in the morning.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>7 min read</span>
<span><i class="far fa-folder"></i>Pranayama</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=600" alt="Yoga for wellness">
</div>
<div class="article-content">
<h3>Building a Daily Yoga Routine with Ayurvedic Principles</h3>
<p>An Ayurvedic yoga routine begins with early rising (before sunrise if possible). Start with tongue scraping and warm water with lemon. Begin your practice with 5-10 minutes of pranayama, followed by Sun Salutations to warm the body.</p>
<p>Then practice dosha-specific asanas for 15-20 minutes. End with 10 minutes of meditation in Savasana (corpse pose). Adjust the intensity and duration based on the season — lighter in summer, more vigorous in winter. Consistency is more important than duration; even 20 minutes daily yields significant benefits.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>9 min read</span>
<span><i class="far fa-folder"></i>Routines</span>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Start Your Yoga Journey</h2>
<p>Connect with our experienced teachers for personalized yoga and pranayama guidance</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Contact Information</h3>
<p>Our certified yoga teachers can create a personalized practice tailored to your dosha, fitness level, and health goals.</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@yogapranayama.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>Yoga & Pranayama</h3><p>Integrating the wisdom of Ayurveda with yoga and breathwork for complete physical, mental, and spiritual well-being.</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">Practices</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="#">Surya Namaskar Guide</a></li><li><a href="#">Pranayama Techniques</a></li><li><a href="#">Daily Routine</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 Yoga & Pranayama 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>