HTML
900 lines
31.8 KB
Ayurvedic Wellness Center - Natural Health & Traditional Medicine
Discover authentic Ayurvedic wellness solutions and holistic health guidance from experienced practitioners.
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="Discover authentic Ayurvedic wellness solutions and holistic health guidance from experienced practitioners.">
<title>Ayurvedic Wellness Center - Natural Health & Traditional Medicine</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;
}
/* Navigation */
.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 Section */
.hero {
background: linear-gradient(135deg, rgba(45, 95, 79, 0.9), rgba(139, 115, 85, 0.85)),
url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?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 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Section Styles */
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 Section */
.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 Section */
.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 Section */
.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 */
.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 Section */
.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 */
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;
}
/* Responsive Design */
@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>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">Ayurvedic 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">Services</a></li>
<li><a href="#knowledge">Knowledge</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Traditional Wisdom for Modern Wellness</h1>
<p>Experience the ancient science of Ayurveda through personalized consultations and holistic health guidance from certified practitioners.</p>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800" alt="Ayurvedic herbs and ingredients">
</div>
<div class="about-text">
<h3>Authentic Ayurvedic Practice</h3>
<p>Our center is dedicated to preserving and sharing the timeless wisdom of Ayurveda, one of the world's oldest holistic healing systems. With roots dating back thousands of years, Ayurveda offers a comprehensive approach to health and wellness.</p>
<p>We believe in treating the whole person—mind, body, and spirit—rather than just addressing symptoms. Our approach combines traditional Ayurvedic principles with modern understanding to provide personalized wellness guidance.</p>
<p>Every individual is unique, and so is their path to wellness. Our experienced practitioners take time to understand your constitution, lifestyle, and health goals to create customized recommendations that align with Ayurvedic principles.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Our Services</h2>
<p>Comprehensive Ayurvedic wellness services tailored to your individual needs</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-user-md"></i>
</div>
<h3>Personal Consultation</h3>
<p>One-on-one sessions with experienced Ayurvedic practitioners to assess your unique constitution and create personalized wellness plans.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-leaf"></i>
</div>
<h3>Herbal Guidance</h3>
<p>Learn about traditional herbs and natural supplements that support your wellness journey based on Ayurvedic principles.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Dietary Recommendations</h3>
<p>Receive personalized nutrition guidance based on your dosha type and seasonal considerations for optimal health.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-spa"></i>
</div>
<h3>Lifestyle Coaching</h3>
<p>Discover daily routines and practices that align with Ayurvedic wisdom to promote balance and vitality.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-om"></i>
</div>
<h3>Mindfulness Practices</h3>
<p>Explore meditation, breathing exercises, and yoga practices that complement your Ayurvedic wellness journey.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-calendar-check"></i>
</div>
<h3>Seasonal Programs</h3>
<p>Participate in seasonal wellness programs designed to help you adapt to changing environmental conditions.</p>
</div>
</div>
</div>
</section>
<!-- Trust Section -->
<section class="trust">
<div class="container">
<div class="section-header">
<h2>Our Experience</h2>
<p>Dedicated to authentic Ayurvedic practice and client wellness</p>
</div>
<div class="trust-grid">
<div class="trust-item">
<div class="trust-number">15+</div>
<div class="trust-label">Years of Practice</div>
</div>
<div class="trust-item">
<div class="trust-number">3000+</div>
<div class="trust-label">Consultations Completed</div>
</div>
<div class="trust-item">
<div class="trust-number">100%</div>
<div class="trust-label">Natural Approach</div>
</div>
<div class="trust-item">
<div class="trust-number">5</div>
<div class="trust-label">Certified Practitioners</div>
</div>
</div>
</div>
</section>
<!-- Content Section -->
<section id="knowledge" class="content-section">
<div class="container">
<div class="section-header">
<h2>Wellness Knowledge</h2>
<p>Explore insights from the ancient science of Ayurveda</p>
</div>
<div class="content-grid">
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=600" alt="Understanding doshas">
</div>
<div class="article-content">
<h3>Understanding Your Dosha</h3>
<p>In Ayurveda, the concept of doshas—Vata, Pitta, and Kapha—forms the foundation of personalized wellness. Each person has a unique combination of these three energies, which influences their physical characteristics, mental tendencies, and health patterns.</p>
<p>Understanding your dominant dosha helps in making informed choices about diet, lifestyle, and daily routines that support your natural constitution and promote balance.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>5 min read</span>
<span><i class="far fa-folder"></i>Fundamentals</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=600" alt="Ayurvedic nutrition">
</div>
<div class="article-content">
<h3>The Ayurvedic Approach to Nutrition</h3>
<p>Ayurvedic nutrition goes beyond calories and macronutrients. It considers the qualities of food, how they're prepared, and when they're consumed. The principle of "agni" or digestive fire is central to understanding how we process and benefit from our meals.</p>
<p>Seasonal eating, food combinations, and mindful consumption are key aspects of Ayurvedic dietary wisdom that can transform your relationship with food and enhance overall wellness.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>7 min read</span>
<span><i class="far fa-folder"></i>Nutrition</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1545389336-cf090694435e?w=600" alt="Daily routines">
</div>
<div class="article-content">
<h3>Dinacharya: The Power of Daily Routine</h3>
<p>Dinacharya, or daily routine, is a cornerstone of Ayurvedic practice. By aligning our activities with natural rhythms, we support our body's innate healing abilities and maintain balance throughout the day.</p>
<p>Simple practices like waking with the sun, tongue scraping, oil pulling, and mindful meal times can have profound effects on physical health, mental clarity, and emotional well-being when practiced consistently.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>6 min read</span>
<span><i class="far fa-folder"></i>Lifestyle</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Get In Touch</h2>
<p>We're here to answer your questions and guide you on your wellness journey</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Contact Information</h3>
<p>Have questions about Ayurveda or our services? We welcome your inquiries and look forward to connecting with you.</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@ayurvedicwellness.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 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Ayurvedic Wellness</h3>
<p>Dedicated to sharing the timeless wisdom of Ayurveda and supporting individuals on their journey to holistic health and wellness.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</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="#">Ayurvedic Principles</a></li>
<li><a href="#">Wellness Blog</a></li>
<li><a href="#">Seasonal Guides</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 Ayurvedic Wellness Center. All rights reserved. This website is for informational purposes only and does not constitute medical advice.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileToggle = document.querySelector('.mobile-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
// Smooth scrolling for navigation links
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'
});
// Close mobile menu if open
navMenu.classList.remove('active');
}
});
});
// Form submission handler
const form = document.getElementById('enquiryForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
// Get form data
const formData = new FormData(form);
const data = Object.fromEntries(formData);
// In a real implementation, you would send this to a server
console.log('Form submitted:', data);
// Show success message
alert('Thank you for your enquiry. We will get back to you within 24 hours.');
// Reset form
form.reset();
});
// Add scroll effect to navbar
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>