HTML
596 lines
17.3 KB
Prakriti - Premium 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 - Premium 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@700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-green: #3A5F0B;
--accent-gold: #C19A6B;
--cream: #FFF8E1;
--text-dark: #2B2B2B;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--cream);
color: var(--text-dark);
line-height: 1.6;
}
/* Modern Navigation */
.navbar {
background: rgba(255, 255, 255, 0.95);
padding: 1.5rem 6%;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--primary-green);
display: flex;
align-items: center;
gap: 0.8rem;
}
.logo i {
color: var(--accent-gold);
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: var(--text-dark);
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%;
}
/* Enhanced Hero Slider */
.slider-container {
position: relative;
width: 100%;
height: 90vh;
margin-top: 76px;
overflow: hidden;
}
.slider {
display: flex;
width: 300%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide {
width: 100vw;
height: 100%;
flex-shrink: 0;
position: relative;
background-size: cover;
background-position: center;
}
.slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.slider-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 10;
max-width: 800px;
padding: 0 2rem;
}
.slider-content h1 {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
margin-bottom: 1.5rem;
line-height: 1.2;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}
.slider-content p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.2s forwards;
}
.btn {
background: linear-gradient(135deg, var(--accent-gold), var(--primary-green));
color: white;
padding: 1.2rem 2.5rem;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s 0.4s forwards;
}
.btn::after {
content: '→';
position: absolute;
right: -20px;
transition: right 0.3s ease;
}
.btn:hover::after {
right: 20px;
}
/* Slider Controls */
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
padding: 1.2rem;
font-size: 1.5rem;
cursor: pointer;
z-index: 20;
border-radius: 50%;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.prev:hover, .next:hover {
background: rgba(255, 255, 255, 0.3);
}
.prev { left: 2%; }
.next { right: 2%; }
.slider-dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 20;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: var(--accent-gold);
transform: scale(1.3);
}
/* Services Section */
.section {
padding: 6rem 6%;
text-align: center;
}
.section h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--primary-green);
margin-bottom: 3rem;
position: relative;
display: inline-block;
}
.section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--accent-gold);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
margin-top: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.service-card i {
font-size: 3.5rem;
color: var(--accent-gold);
margin-bottom: 1.5rem;
display: inline-block;
}
.service-card h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--primary-green);
}
.service-card p {
font-size: 1rem;
color: #666;
}
/* Contact Section */
.contact-form {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group.full-width {
grid-column: 1 / -1;
}
input, textarea {
width: 100%;
padding: 1rem;
border: 2px solid #eee;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
input:focus, textarea:focus {
border-color: var(--accent-gold);
outline: none;
box-shadow: 0 0 8px rgba(193, 154, 107, 0.2);
}
/* Footer */
footer {
background: var(--primary-green);
color: white;
padding: 4rem 6%;
margin-top: 4rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.footer-section h4 {
font-family: 'Playfair Display', serif;
margin-bottom: 1.5rem;
}
.footer-section p {
font-size: 0.95rem;
line-height: 1.8;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
color: white;
font-size: 1.4rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--accent-gold);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.slider-content h1 {
font-size: 2.5rem;
}
.slider-content p {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.contact-form {
grid-template-columns: 1fr;
padding: 2rem;
}
}
/* Mobile Menu */
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--primary-green);
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 76px;
left: -100%;
width: 100%;
height: calc(100vh - 76px);
background: white;
flex-direction: column;
padding: 2rem;
transition: left 0.3s ease;
}
.nav-links.active {
left: 0;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<i class="fas fa-spa"></i>
Prakriti
</div>
<button class="menu-toggle">
<i class="fas fa-bars"></i>
</button>
<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="#contact">Contact</a></li>
</ul>
</nav>
<!-- Hero Slider -->
<div class="slider-container">
<div class="slider">
<div class="slide active" style="background-image: url('https://images.pexels.com/photos/1153369/pexels-photo-1153369.jpeg')"></div>
<div class="slide" style="background-image: url('https://images.pexels.com/photos/320007/pexels-photo-320007.jpeg')"></div>
</div>
<div class="slider-content">
<h1>Ancient Wisdom for Modern Wellness</h1>
<p>Experience Authentic Ayurvedic Healing Tailored to Your Unique Dosha</p>
<button class="btn">Begin Your Journey</button>
</div>
<button class="prev" onclick="moveSlide(-1)">❮</button>
<button class="next" onclick="moveSlide(1)">❯</button>
<div class="slider-dots"></div>
</div>
<!-- Services Section -->
<section class="section" id="services">
<h2>Our Holistic Services</h2>
<div class="services-grid">
<div class="service-card">
<i class="fas fa-spa"></i>
<h3>Panchakarma Detox</h3>
<p>Complete purification and rejuvenation therapy using traditional 5-step process</p>
</div>
<div class="service-card">
<i class="fas fa-hand-holding-heart"></i>
<h3>Abhyanga Therapy</h3>
<p>Synchronized herbal oil massage for deep relaxation and tissue nourishment</p>
</div>
<div class="service-card">
<i class="fas fa-leaf"></i>
<h3>Dosha Balancing</h3>
<p>Personalized treatments based on your unique mind-body constitution</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section" id="contact">
<h2>Start Your Wellness Journey</h2>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="Full Name" required>
</div>
<div class="form-group">
<input type="email" placeholder="Email Address" required>
</div>
<div class="form-group full-width">
<textarea placeholder="Your Message" rows="5" required></textarea>
</div>
<div class="form-group full-width">
<button type="submit" class="btn">Send Message <i class="fas fa-paper-plane"></i></button>
</div>
</form>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h4>About Prakriti</h4>
<p>Founded in 2010, we combine ancient Ayurvedic wisdom with modern wellness practices to help you achieve optimal health.</p>
</div>
<div class="footer-section">
<h4>Contact</h4>
<p>123 Wellness Road<br>Rishikesh, India<br>+91 98765 43210<br>info@prakriti.com</p>
</div>
<div class="footer-section">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></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-whatsapp"></i></a>
</div>
</div>
</div>
</footer>
<script>
// Slider Logic
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const dotsContainer = document.querySelector('.slider-dots');
// Create dots
slides.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
if(index === 0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(index));
dotsContainer.appendChild(dot);
});
function updateSlider() {
document.querySelector('.slider').style.transform = `translateX(${-currentSlide * 100}vw)`;
document.querySelectorAll('.dot').forEach((dot, index) => {
dot.classList.toggle('active', index === currentSlide);
});
}
function moveSlide(n) {
currentSlide = (currentSlide + n + slides.length) % slides.length;
updateSlider();
}
function goToSlide(n) {
currentSlide = n;
updateSlider();
}
// Auto-advance
setInterval(() => moveSlide(1), 6000);
// Mobile Menu
const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
});
document.querySelectorAll('.service-card').forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(30px)';
observer.observe(card);
});
</script>
</body>
</html>