HTML
560 lines
16.1 KB
Nirvana Ayurveda - Premium Wellness Solutions
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">
<title>Nirvana Ayurveda - Premium Wellness Solutions</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--primary-green: #3A5F0B;
--accent-gold: #C19A6B;
--cream: #FFF8E1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--cream);
color: #333;
}
/* Modern Navigation */
.navbar {
background: rgba(255, 255, 255, 0.95);
padding: 1.5rem 8%;
backdrop-filter: blur(10px);
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
z-index: 1000;
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--primary-green);
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: var(--primary-green);
text-decoration: none;
font-weight: 600;
position: relative;
padding: 0.5rem 0;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Hero Section with Parallax */
.hero {
height: 100vh;
background: linear-gradient(rgba(58, 95, 11, 0.2), rgba(58, 95, 11, 0.2)),
url('https://images.unsplash.com/photo-1583574925926-eee6fe0c9f70?auto=format&fit=crop&w=1920&q=80');
background-attachment: fixed;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 80px;
}
.hero-content {
max-width: 800px;
padding: 2rem;
color: white;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
margin-bottom: 1.5rem;
text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
/* Feature Cards */
.features {
padding: 6rem 8%;
background: white;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.feature-card {
padding: 2.5rem;
border-radius: 16px;
background: var(--cream);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(58, 95, 11, 0.08);
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
width: 80px;
height: 80px;
background: var(--primary-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 1.8rem;
}
/* Treatment Showcase */
.treatments {
padding: 6rem 8%;
background: url('https://images.unsplash.com/photo-1616422285623-7ff64044e244?auto=format&fit=crop&w=1920&q=80') fixed;
background-size: cover;
position: relative;
}
.treatment-overlay {
background: rgba(255, 248, 225, 0.92);
padding: 4rem;
border-radius: 24px;
}
.treatment-card {
display: flex;
gap: 2rem;
align-items: center;
padding: 2rem;
background: white;
border-radius: 16px;
margin: 2rem 0;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
/* Contact Section */
.contact {
padding: 6rem 8%;
background: linear-gradient(to right, var(--primary-green) 50%, white 50%);
}
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
background: white;
border-radius: 24px;
box-shadow: 0 12px 48px rgba(0,0,0,0.1);
overflow: hidden;
}
.contact-info {
background: var(--primary-green);
padding: 4rem;
color: white;
}
.contact-form {
padding: 4rem;
}
/* Modern Form Styling */
.form-group {
margin-bottom: 1.5rem;
}
input, textarea {
width: 100%;
padding: 1rem;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
input:focus, textarea:focus {
border-color: var(--accent-gold);
outline: none;
}
.submit-btn {
background: linear-gradient(to right, var(--primary-green), var(--accent-gold));
color: white;
padding: 1rem 2.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
}
.submit-btn::after {
content: '➞';
position: absolute;
right: -20px;
transition: right 0.3s ease;
}
.submit-btn:hover::after {
right: 20px;
}
/* Footer */
footer {
background: var(--primary-green);
color: white;
padding: 4rem 8%;
}
/* Animations */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.floating-icon {
animation: float 3s ease-in-out infinite;
}
/* Responsive Design */
@media (max-width: 1024px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
.contact-container {
grid-template-columns: 1fr;
}
}
/* Footer Section */
.footer {
background: #2c3e50; /* Dark theme for footer */
color: #ffffff;
padding: 40px 0;
text-align: center;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 1200px;
margin: auto;
}
.footer h3 {
font-size: 20px;
margin-bottom: 15px;
color: #f1c40f; /* Golden Ayurveda Theme */
}
.footer p,
.footer ul {
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.footer ul {
list-style: none;
}
.footer ul li {
margin: 8px 0;
}
.footer ul li a {
color: #ffffff;
text-decoration: none;
transition: 0.3s;
}
.footer ul li a:hover {
color: #f1c40f; /* Highlight color */
}
.footer-contact p {
display: flex;
align-items: center;
justify-content: center;
}
.footer-contact i {
margin-right: 8px;
color: #f1c40f;
}
/* Footer Bottom */
.footer-bottom {
margin-top: 20px;
padding: 15px 0;
background: #1a252f;
font-size: 14px;
}
</style>
</head>
<body>
<!-- Loading Screen -->
<div class="loader">
<div class="dharma-chakra floating-icon"></div>
</div>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-content">
<div class="logo">
<i class="fas fa-spa"></i>
Nirvana Ayurveda
</div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#treatments">Treatments</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Ancient Wisdom, Modern Wellness</h1>
<p class="lead">Experience Authentic Ayurvedic Healing Tailored to Your Dosha</p>
<button class="submit-btn">Begin Your Journey</button>
</div>
</section>
<!-- Features Section -->
<!-- Features Section -->
<section class="features">
<h2 class="section-title">Why Choose Ayurveda?</h2>
<div class="features-grid">
<!-- Natural Solutions -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-leaf"></i>
</div>
<h3>100% Natural Solutions</h3>
<p>Herbal formulations prepared using ancient recipes for a holistic approach to well-being.</p>
</div>
<!-- Holistic Healing -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-spa"></i>
</div>
<h3>Holistic Healing</h3>
<p>Focuses on balancing mind, body, and soul for overall health and long-term wellness.</p>
</div>
<!-- No Side Effects -->
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-heart"></i>
</div>
<h3>Safe & Side Effect-Free</h3>
<p>Made from pure herbal extracts without harmful chemicals or additives.</p>
</div>
</div>
</section>
<!-- Treatments Section -->
<!-- Signature Treatments Section -->
<section class="treatments">
<div class="treatment-overlay">
<h2>Signature Treatments</h2>
<div class="treatment-card">
<div class="treatment-icon">
<i class="fas fa-hand-holding-water"></i>
</div>
<div class="treatment-info">
<h3>Shirodhara Therapy</h3>
<p>Continuous flow of warm herbal oil on the forehead to calm the nervous system and promote deep relaxation.</p>
</div>
</div>
<div class="treatment-card">
<div class="treatment-icon">
<i class="fas fa-spa"></i>
</div>
<div class="treatment-info">
<h3>Abhyanga Massage</h3>
<p>A full-body warm oil massage to improve circulation, detoxify the body, and relieve stress.</p>
</div>
</div>
<div class="treatment-card">
<div class="treatment-icon">
<i class="fas fa-leaf"></i>
</div>
<div class="treatment-info">
<h3>Panchakarma Detox</h3>
<p>A five-step cleansing therapy to remove toxins, restore balance, and enhance overall health.</p>
</div>
</div>
<div class="treatment-card">
<div class="treatment-icon">
<i class="fas fa-bath"></i>
</div>
<div class="treatment-info">
<h3>Udvartana Herbal Scrub</h3>
<p>An Ayurvedic dry massage using herbal powders to exfoliate skin, reduce cellulite, and enhance metabolism.</p>
</div>
</div>
<div class="treatment-card">
<div class="treatment-icon">
<i class="fas fa-hot-tub"></i>
</div>
<div class="treatment-info">
<h3>Swedana Steam Therapy</h3>
<p>A therapeutic herbal steam bath to promote sweating, remove toxins, and relieve muscle tension.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact">
<div class="contact-container">
<div class="contact-info">
<h2>Connect With Our Vaidyas</h2>
<p>Have questions about Ayurvedic treatments? Fill out the form below, and our experts will get in touch with you.</p>
<p><i class="fas fa-phone-alt"></i> +91 98765 43210</p>
<p><i class="fas fa-envelope"></i> support@ayurveda.com</p>
<p><i class="fas fa-map-marker-alt"></i> Ayurveda Wellness Center, India</p>
</div>
<form class="contact-form">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="4" placeholder="How can we help you?" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="footer-container">
<div class="footer-about">
<h3>About Ayurveda</h3>
<p>Experience the ancient wisdom of Ayurveda with natural healing treatments and remedies.</p>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Treatments</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>Contact Us</h3>
<p><i class="fas fa-phone-alt"></i> +91 98765 43210</p>
<p><i class="fas fa-envelope"></i> support@ayurveda.com</p>
<p><i class="fas fa-map-marker-alt"></i> Ayurveda Wellness Center, India</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Ayurveda Wellness. All rights reserved.</p>
</div>
</footer>
<script>
// Simple Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
});
document.querySelectorAll('.feature-card').forEach((card) => {
observer.observe(card);
});
</script>
</body>
</html>