HTML
890 lines
30 KB
Prakriti - Authentic Ayurvedic Wellness Center
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>Prakriti - Authentic Ayurvedic Wellness Center</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2c5f2d;
--secondary: #ff9800;
--light: #f8f8f8;
--dark: #1a1a1a;
--text: #333333;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text);
background-color: var(--light);
line-height: 1.6;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
/* Navigation */
.navbar {
background-color: var(--primary);
padding: 1rem 2rem;
position: fixed;
width: 100%;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.logo {
color: var(--white);
font-size: 1.8rem;
font-weight: bold;
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: var(--white);
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
.nav-links a:hover {
color: var(--secondary);
}
.nav-links a:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--secondary);
transition: width 0.3s;
}
.nav-links a:hover:after {
width: 100%;
}
.menu-toggle {
display: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Slider */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
margin-top: 60px;
}
.slider {
display: flex;
width: 300%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 100vw;
height: 100%;
flex-shrink: 0;
position: relative;
}
.slide:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
.slide-1 {
background: url('https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
}
.slide-2 {
background: url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
}
.slide-3 {
background: url('https://images.unsplash.com/photo-1585435557343-3b092031a831?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
}
.slider-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--white);
z-index: 10;
width: 90%;
max-width: 800px;
}
.slider-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.slider-content p {
font-size: clamp(1rem, 2vw, 1.3rem);
margin-bottom: 2rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.btn {
background-color: var(--secondary);
color: var(--white);
padding: 1rem 2.5rem;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
.btn:hover {
background-color: #e68a00;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
color: var(--white);
border: none;
padding: 1rem;
font-size: 1.5rem;
cursor: pointer;
z-index: 20;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
.prev:hover, .next:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.prev { left: 20px; }
.next { right: 20px; }
/* Sections */
.section {
padding: 6rem 2rem;
text-align: center;
}
.section-title {
color: var(--primary);
margin-bottom: 3rem;
font-size: 2.5rem;
position: relative;
display: inline-block;
}
.section-title:after {
content: '';
position: absolute;
width: 50%;
height: 3px;
bottom: -10px;
left: 25%;
background-color: var(--secondary);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Services */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: var(--white);
padding: 2.5rem 2rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s;
border-bottom: 4px solid transparent;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
border-bottom-color: var(--secondary);
}
.service-icon {
font-size: 3.5rem;
color: var(--secondary);
margin-bottom: 1.5rem;
}
.service-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
/* About Section */
.about-section {
background-color: var(--white);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
text-align: left;
}
.about-image {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.about-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s;
}
.about-image:hover img {
transform: scale(1.05);
}
.about-text h2 {
text-align: left;
margin-bottom: 1.5rem;
}
.about-text p {
margin-bottom: 1.5rem;
}
/* Contact Form */
.contact-form {
max-width: 600px;
margin: 0 auto;
background: var(--white);
padding: 3rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
text-align: left;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--primary);
}
input, textarea, select {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
transition: border-color 0.3s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--secondary);
}
textarea {
min-height: 150px;
resize: vertical;
}
/* Testimonials */
.testimonials {
background-color: var(--primary);
color: var(--white);
}
.testimonials .section-title {
color: var(--white);
}
.testimonials .section-title:after {
background-color: var(--secondary);
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.testimonial-card {
background: rgba(255,255,255,0.1);
padding: 2rem;
border-radius: 10px;
position: relative;
}
.testimonial-card:before {
content: '"';
position: absolute;
top: 10px;
left: 20px;
font-size: 5rem;
color: rgba(255,255,255,0.1);
font-family: serif;
line-height: 1;
}
.testimonial-text {
margin-bottom: 1.5rem;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
}
.author-image {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 1rem;
}
.author-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h4 {
margin-bottom: 0.2rem;
font-size: 1.1rem;
}
.author-info p {
font-size: 0.9rem;
opacity: 0.8;
}
/* Footer */
footer {
background-color: var(--dark);
color: var(--white);
padding: 4rem 2rem 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
.footer-column h3 {
color: var(--secondary);
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: var(--white);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--secondary);
}
.contact-info {
margin-bottom: 1.5rem;
}
.contact-info p {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.contact-info i {
margin-right: 1rem;
color: var(--secondary);
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
transition: all 0.3s;
}
.social-links a:hover {
background-color: var(--secondary);
transform: translateY(-3px);
}
.copyright {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.9rem;
opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 992px) {
.about-content {
grid-template-columns: 1fr;
}
.about-image {
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background-color: var(--primary);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
transition: left 0.3s;
}
.nav-links.active {
left: 0;
}
.slider-content {
width: 95%;
}
.section {
padding: 4rem 1rem;
}
}
@media (max-width: 576px) {
.slider-content h1 {
font-size: 2.2rem;
}
.btn {
padding: 0.8rem 1.8rem;
}
.contact-form {
padding: 2rem 1.5rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="logo">
<img src="https://via.placeholder.com/40x40" alt="Prakriti Logo">
Prakriti Ayurveda
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Hero Slider -->
<div class="slider-container" id="home">
<div class="slider">
<div class="slide slide-1"></div>
<div class="slide slide-2"></div>
<div class="slide slide-3"></div>
</div>
<div class="slider-content">
<h1>Ancient Wisdom for Modern Wellness</h1>
<p>Experience authentic Ayurvedic treatments tailored to your unique constitution for complete harmony of body, mind and spirit.</p>
<button class="btn">Book a Consultation</button>
</div>
<button class="prev" onclick="moveSlide(-1)">❮</button>
<button class="next" onclick="moveSlide(1)">❯</button>
</div>
<!-- About Section -->
<section class="section about-section" id="about">
<div class="container">
<h2 class="section-title">About Prakriti Ayurveda</h2>
<div class="about-content">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Ayurvedic Practitioner">
</div>
<div class="about-text">
<h2>5000 Years of Healing Tradition</h2>
<p>At Prakriti Ayurveda, we honor the ancient wisdom of Ayurveda while adapting it to modern lifestyles. Our center is dedicated to providing authentic Ayurvedic treatments that address the root cause of health issues rather than just symptoms.</p>
<p>Founded in 2010 by Dr. Ananya Sharma, a third-generation Ayurvedic practitioner, our center has helped thousands regain balance and vitality through personalized treatments, herbal remedies, and lifestyle guidance.</p>
<p>Our team of certified Ayurvedic doctors and therapists undergo rigorous training to ensure the highest standards of care and authenticity in all our treatments.</p>
<button class="btn">Learn More</button>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="section" id="services">
<div class="container">
<h2 class="section-title">Our Ayurvedic Services</h2>
<p class="section-subtitle">Personalized treatments based on your unique dosha constitution</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-spa"></i>
</div>
<h3>Panchakarma Detox</h3>
<p>Our signature 5-step purification process for deep cleansing and rejuvenation, customized to your body type and health needs.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hand-holding-heart"></i>
</div>
<h3>Abhyanga Massage</h3>
<p>Warm herbal oil therapy performed by two therapists simultaneously for profound relaxation and healing.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-leaf"></i>
</div>
<h3>Diet Consultation</h3>
<p>Personalized nutrition plans based on your dosha balance, seasonal changes, and health conditions.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-mortar-pestle"></i>
</div>
<h3>Herbal Remedies</h3>
<p>Custom-formulated herbal preparations using organic ingredients for specific health concerns.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-yin-yang"></i>
</div>
<h3>Yoga Therapy</h3>
<p>Personalized yoga sequences and breathing techniques to balance your doshas and improve vitality.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-heartbeat"></i>
</div>
<h3>Pulse Diagnosis</h3>
<p>Ancient diagnostic technique to assess your body's imbalances and recommend appropriate treatments.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="section testimonials" id="testimonials">
<div class="container">
<h2 class="section-title">Client Experiences</h2>
<p class="section-subtitle">What our clients say about their healing journey</p>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="testimonial-text">
<p>After just three weeks of Panchakarma therapy, my chronic digestive issues that I'd struggled with for years completely resolved. The care and expertise at Prakriti is unmatched.</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson">
</div>
<div class="author-info">
<h4>Sarah Johnson</h4>
<p>Panchakarma Client</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
<p>The Abhyanga massage was transformative. I've never experienced such deep relaxation combined with therapeutic benefits. My joint pain has significantly reduced after just a few sessions.</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
</div>
<div class="author-info">
<h4>Michael Chen</h4>
<p>Massage Therapy Client</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
<p>The dietary changes recommended by the Ayurvedic doctor made a dramatic difference in my energy levels and overall wellbeing. I've lost weight naturally without dieting and feel better than I have in decades.</p>
</div>
<div class="testimonial-author">
<div class="author-image">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel">
</div>
<div class="author-info">
<h4>Priya Patel</h4>
<p>Nutrition Client</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section" id="contact">
<div class="container">
<h2 class="section-title">Begin Your Wellness Journey</h2>
<p class="section-subtitle">Schedule a consultation with our Ayurvedic practitioners</p>
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" placeholder="Your Phone">
</div>
<div class="form-group">
<label for="service">Service Interested In</label>
<select id="service">
<option value="">Select a service</option>
<option value="consultation">Initial Consultation</option>
<option value="panchakarma">Panchakarma Therapy</option>
<option value="massage">Ayurvedic Massage</option>
<option value="diet">Diet Consultation</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" placeholder="Tell us about your health concerns and goals"></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>Prakriti Ayurveda</h3>
<p>Providing authentic Ayurvedic treatments since 2010. Our mission is to bring balance and wellness through ancient healing wisdom.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Our Services</h3>
<ul class="footer-links">
<li><a href="#">Panchakarma Therapy</a></li>
<li><a href="#">Ayurvedic Massage</a></li>
<li><a href="#">Diet Consultation</a></li>
<li><a href="#">Herbal Remedies</a></li>
<li><a href="#">Yoga Therapy</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact Us</h3>
<div class="contact-info">
<p><i class="fas fa-map-marker-alt"></i> 123 Wellness Way, Rishikesh, Uttarakhand 249201</p>
<p><i class="fas fa-phone"></i> +91 98765 43210</p>
<p><i class="fas fa-envelope"></i> info@prakritiayurveda.com</p>
<p><i class="fas fa-clock"></i> Mon-Sat: 8:00 AM - 6:00 PM</p>
</div>
</div>
</div>
<div class="copyright">
<p>© 2025 Prakriti Ayurveda Wellness Center. All Rights Reserved.</p>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close mobile menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 70,
behavior: 'smooth'
});
}
});
});
// Hero Slider
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
function showSlide(index) {
if (index >= totalSlides) currentSlide = 0;
else if (index < 0) currentSlide = totalSlides - 1;
else currentSlide = index;
const slider = document.querySelector('.slider');
slider.style.transform = `translateX(${-currentSlide * 100}vw)`;
}
function moveSlide(direction) {
showSlide(currentSlide + direction);
}
// Auto slide every 5 seconds
setInterval(() => moveSlide(1), 5000);
// Initialize first slide
showSlide(0);
</script>
</body>
</html>