HTML
364 lines
23.8 KB
Ayurvedic Skin Care — Natural Routines & Herbal Face Masks Guide
Ayurvedic skin care guide — natural skincare routines, herbal face masks, and dosha-based skin types for radiant, healthy skin.
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 skin care guide — natural skincare routines, herbal face masks, and dosha-based skin types for radiant, healthy skin.">
<title>Ayurvedic Skin Care — Natural Routines & Herbal Face Masks Guide</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-1556228720-195a672e8a03?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">Ayurvedic Skin Care</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">Skin Types</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 Skin Care & Natural Beauty</h1>
<p>Discover dosha-based skincare routines, herbal face masks, and natural remedies for radiant, healthy skin — rooted in 5,000 years of Ayurvedic wisdom.</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-1556228720-195a672e8a03?w=800" alt="Natural Ayurvedic skincare ingredients">
</div>
<div class="about-text">
<h3>Ayurveda for Radiant Skin</h3>
<p>In Ayurveda, skin health is a reflection of internal balance. The condition of your skin reveals the state of your doshas, digestion, and overall well-being. Rather than treating skin problems topically, Ayurveda addresses the root causes from within.</p>
<p>Each dosha type has distinct skin characteristics and needs. Vata skin tends to be dry and thin, Pitta skin is sensitive and prone to rashes, while Kapha skin is oily and prone to congestion. Understanding your skin type is the first step to an effective natural skincare routine.</p>
<p>Ayurvedic skincare emphasizes natural ingredients like turmeric, sandalwood, rose water, neem, and aloe vera — herbs that have been used for centuries to cleanse, nourish, and protect the skin without harsh chemicals.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Skin Types by Dosha</h2>
<p>Understanding your dosha-based skin type for personalized care</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon"><i class="fas fa-wind"></i></div>
<h3>Vata Skin</h3>
<p>Dry, thin, and delicate. Prone to premature aging and wrinkles. Needs warm oil massages, hydrating herbs like ashwagandha, and healthy fats in the diet. Use sesame or almond oil for moisturizing.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-fire"></i></div>
<h3>Pitta Skin</h3>
<p>Fair, warm, and sensitive. Prone to rashes, acne, and sunburn. Needs cooling herbs like aloe vera, rose water, and coconut oil. Avoid hot spicy foods and excessive sun exposure.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-mountain"></i></div>
<h3>Kapha Skin</h3>
<p>Oily, thick, and prone to enlarged pores. Needs light, stimulating treatments with neem, turmeric, and honey. Regular exfoliation with herbal scrubs helps prevent congestion.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-leaf"></i></div>
<h3>Combination Skin</h3>
<p>When multiple doshas are prominent, skin may show mixed characteristics. Requires a balanced approach addressing both dry and oily areas with seasonally adjusted routines.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-spa"></i></div>
<h3>Herbal Face Masks</h3>
<p>Ubtan — traditional Ayurvedic face masks — combine chickpea flour, turmeric, sandalwood, and rose water to cleanse, exfoliate, and nourish all skin types naturally.</p>
</div>
<div class="service-card">
<div class="service-icon"><i class="fas fa-heart"></i></div>
<h3>Inner Beauty</h3>
<p>True skin health starts from within. Proper digestion, hydration, sleep, and stress management are essential pillars of the Ayurvedic approach to radiant skin.</p>
</div>
</div>
</div>
</section>
<section class="trust">
<div class="container">
<div class="section-header">
<h2>Our Experience</h2>
<p>Dedicated to natural, dosha-based skincare solutions</p>
</div>
<div class="trust-grid">
<div class="trust-item"><div class="trust-number">12+</div><div class="trust-label">Years of Practice</div></div>
<div class="trust-item"><div class="trust-number">5000+</div><div class="trust-label">Clients Treated</div></div>
<div class="trust-item"><div class="trust-number">100%</div><div class="trust-label">Natural Ingredients</div></div>
<div class="trust-item"><div class="trust-number">50+</div><div class="trust-label">Herbal Formulations</div></div>
</div>
</div>
</section>
<section id="knowledge" class="content-section">
<div class="container">
<div class="section-header">
<h2>Skin Care Knowledge</h2>
<p>Explore Ayurvedic remedies, routines, and herbal formulations for healthy skin</p>
</div>
<div class="content-grid">
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1612817288484-6f9160057280?w=600" alt="Ayurvedic face mask">
</div>
<div class="article-content">
<h3>The Ultimate Ayurvedic Ubtan Recipe Guide</h3>
<p>Ubtan is a traditional Ayurvedic herbal mask used for centuries to cleanse and beautify skin. The base recipe combines chickpea flour (besan) with turmeric, sandalwood powder, and rose water to create a paste that gently exfoliates while nourishing the skin.</p>
<p>For Vata skin, add milk cream and a few drops of sesame oil. For Pitta skin, use coconut water and aloe vera gel. For Kapha skin, add honey and neem powder. Apply for 15 minutes, then wash off with lukewarm water for a natural glow.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>6 min read</span>
<span><i class="far fa-folder"></i>Recipes</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1570194065650-d99fb4bedf0a?w=600" alt="Daily skincare routine">
</div>
<div class="article-content">
<h3>Daily Ayurvedic Skincare Routine (Dinacharya)</h3>
<p>A consistent daily routine is the foundation of Ayurvedic skincare. Begin each morning with tongue scraping, oil pulling with sesame or coconut oil, and a warm water rinse. This removes overnight toxins and prepares the skin for the day.</p>
<p>Follow with a gentle herbal cleanser, then apply dosha-appropriate oil for facial massage (abhyanga). Evening care should include removal of impurities, a light herbal toner, and a nourishing night treatment. Weekly exfoliation with ubtan keeps skin fresh and vibrant.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>7 min read</span>
<span><i class="far fa-folder"></i>Routines</span>
</div>
</div>
</article>
<article class="content-article">
<div class="article-image">
<img src="https://images.unsplash.com/photo-1607305227461-9c98c0816c0f?w=600" alt="Herbal skin remedies">
</div>
<div class="article-content">
<h3>Top 10 Ayurvedic Herbs for Glowing Skin</h3>
<p>Turmeric (anti-inflammatory and brightening), neem (antibacterial for acne), sandalwood (cooling and soothing), rose (toning and hydrating), aloe vera (healing and moisturizing), and manjistha (blood purifying) are among the most powerful Ayurvedic skin herbs.</p>
<p>Brahmi calms stressed skin, ashwagandha fights aging, triphala detoxifies, and saffron adds a natural radiance. Each herb can be used individually or combined in face masks, toners, and oils for comprehensive skin care.</p>
<div class="article-meta">
<span><i class="far fa-clock"></i>8 min read</span>
<span><i class="far fa-folder"></i>Herbs</span>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Get Skin Care Guidance</h2>
<p>Consult with our Ayurvedic skincare specialists for a personalized routine</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Contact Information</h3>
<p>Our Ayurvedic skincare experts can help you identify your dosha-based skin type and create a natural, effective skincare routine tailored to your needs.</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@ayurvedicskincare.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>Ayurvedic Skin Care</h3><p>Bringing natural, dosha-based skincare wisdom to modern beauty routines for healthy, radiant skin.</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">Skin Types</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="#">Ubtan Recipes</a></li><li><a href="#">Daily Routine</a></li><li><a href="#">Herb Guide</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 Skin Care 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>