HTML
1110 lines
32.9 KB
Nirvan | Ayurvedic Wellness Retreat
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>Nirvan | Ayurvedic Wellness Retreat</title>
<link
href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Sora:wght@300;400;500;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--olive: #5c6b4a;
--gold: #c4a35a;
--cream: #f8f6f1;
--charcoal: #1e1e1e;
--sand: #e5dfd4;
--white: #fff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Sora', sans-serif;
background: var(--cream);
color: var(--charcoal);
}
h1,
h2,
h3 {
font-family: 'Bodoni Moda', serif;
font-weight: 400;
}
/* Side Navigation */
.side-nav {
position: fixed;
left: 0;
top: 0;
width: 80px;
height: 100vh;
background: var(--charcoal);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 2rem 0;
z-index: 1000;
}
.side-logo {
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: 'Bodoni Moda', serif;
font-size: 1.2rem;
color: var(--white);
letter-spacing: 3px;
transform: rotate(180deg);
}
.side-links {
display: flex;
flex-direction: column;
gap: 2rem;
}
.side-links a {
color: rgba(255, 255, 255, 0.5);
font-size: 1.1rem;
transition: all 0.3s;
}
.side-links a:hover {
color: var(--gold);
}
.side-social {
display: flex;
flex-direction: column;
gap: 1rem;
}
.side-social a {
color: rgba(255, 255, 255, 0.4);
font-size: 0.9rem;
transition: color 0.3s;
}
.side-social a:hover {
color: var(--gold);
}
.main-content {
margin-left: 80px;
}
/* Hero - Full Screen Split */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.hero-left {
background: var(--olive);
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem;
color: var(--white);
position: relative;
overflow: hidden;
}
.hero-left::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}
.hero-tag {
font-size: 0.8rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 2rem;
}
.hero-left h1 {
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1.1;
margin-bottom: 2rem;
}
.hero-left p {
font-size: 1.1rem;
opacity: 0.85;
max-width: 450px;
line-height: 1.8;
margin-bottom: 3rem;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 1rem;
background: var(--gold);
color: var(--charcoal);
padding: 1.2rem 2.5rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s;
}
.hero-cta:hover {
gap: 1.5rem;
background: var(--white);
}
.hero-right {
background: url('https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=1200') center/cover;
position: relative;
}
.hero-right::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--olive) 0%, transparent 30%);
}
/* Marquee */
.marquee {
background: var(--charcoal);
padding: 1.5rem 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 5rem;
animation: marquee 30s linear infinite;
}
.marquee-item {
display: flex;
align-items: center;
gap: 1rem;
color: var(--white);
font-size: 0.9rem;
white-space: nowrap;
}
.marquee-item i {
color: var(--gold);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* About - Asymmetric */
.about {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
min-height: 100vh;
}
.about-image {
position: relative;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-image .overlay-text {
position: absolute;
bottom: 4rem;
left: -80px;
font-family: 'Bodoni Moda', serif;
font-size: 8rem;
color: var(--gold);
opacity: 0.3;
font-weight: 700;
}
.about-content {
background: var(--sand);
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem;
}
.section-num {
font-size: 0.8rem;
letter-spacing: 3px;
color: var(--olive);
margin-bottom: 1rem;
}
.about-content h2 {
font-size: 3rem;
margin-bottom: 2rem;
line-height: 1.2;
}
.about-content p {
font-size: 1.05rem;
line-height: 1.9;
color: #555;
margin-bottom: 2rem;
}
.about-list {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.about-list span {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--olive);
font-weight: 500;
}
/* Services - Masonry Grid */
.services {
padding: 8rem 5rem;
background: var(--cream);
}
.services-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 5rem;
}
.services-header h2 {
font-size: 3.5rem;
max-width: 500px;
line-height: 1.2;
}
.services-header p {
max-width: 350px;
font-size: 0.95rem;
color: #666;
line-height: 1.7;
}
.services-masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 350px);
gap: 2rem;
}
.service-item {
position: relative;
overflow: hidden;
cursor: pointer;
}
.service-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
}
.service-item:hover img {
transform: scale(1.1);
}
.service-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
z-index: 1;
}
.service-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
z-index: 2;
color: var(--white);
}
.service-info span {
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold);
}
.service-info h3 {
font-size: 1.6rem;
margin: 0.5rem 0;
}
.service-item:nth-child(1) {
grid-row: span 2;
}
.service-item:nth-child(4) {
grid-column: span 2;
}
/* Process - Horizontal Timeline */
.process {
background: var(--olive);
padding: 8rem 5rem;
color: var(--white);
overflow: hidden;
}
.process h2 {
font-size: 3rem;
text-align: center;
margin-bottom: 5rem;
}
.timeline {
display: flex;
gap: 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.2);
}
.timeline-item {
flex: 1;
text-align: center;
position: relative;
padding: 0 2rem;
}
.timeline-num {
width: 80px;
height: 80px;
background: var(--gold);
color: var(--charcoal);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bodoni Moda', serif;
font-size: 2rem;
margin: 0 auto 2rem;
position: relative;
z-index: 2;
}
.timeline-item h4 {
font-family: 'Bodoni Moda', serif;
font-size: 1.4rem;
margin-bottom: 1rem;
}
.timeline-item p {
font-size: 0.9rem;
opacity: 0.75;
line-height: 1.7;
}
/* Testimonial - Full Width */
.testimonial {
background: var(--charcoal);
padding: 8rem 5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.testimonial::before {
content: '"';
font-family: 'Bodoni Moda', serif;
font-size: 20rem;
color: rgba(255, 255, 255, 0.03);
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
}
.test-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.test-content p {
font-family: 'Bodoni Moda', serif;
font-size: 2.2rem;
color: var(--white);
line-height: 1.6;
margin-bottom: 3rem;
}
.test-author {
color: var(--gold);
font-size: 0.9rem;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Contact - Split */
.contact {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 80vh;
}
.contact-info {
background: var(--sand);
padding: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-info h2 {
font-size: 3rem;
margin-bottom: 2rem;
}
.contact-info>p {
color: #666;
margin-bottom: 3rem;
line-height: 1.8;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--olive);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.contact-item h5 {
font-family: 'Sora', sans-serif;
font-size: 0.85rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--olive);
margin-bottom: 0.3rem;
}
.contact-item p {
color: #555;
font-size: 0.95rem;
}
.contact-form {
background: var(--olive);
padding: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-form h3 {
font-size: 2rem;
color: var(--white);
margin-bottom: 3rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 1.2rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--white);
font-family: 'Sora', sans-serif;
font-size: 0.95rem;
transition: all 0.3s;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--gold);
background: rgba(255, 255, 255, 0.15);
}
.form-group textarea {
min-height: 120px;
resize: none;
}
.form-group select {
appearance: none;
cursor: pointer;
}
.form-group select option {
background: var(--charcoal);
color: var(--white);
}
.submit-btn {
background: var(--gold);
color: var(--charcoal);
border: none;
padding: 1.2rem 3rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 1rem;
}
.submit-btn:hover {
background: var(--white);
gap: 1.5rem;
}
/* Footer */
.footer {
background: var(--charcoal);
padding: 5rem;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 3rem;
margin-bottom: 3rem;
}
.footer-logo {
font-family: 'Bodoni Moda', serif;
font-size: 2.5rem;
color: var(--white);
}
.footer-links {
display: flex;
gap: 3rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--gold);
}
.footer-bottom {
display: flex;
justify-content: space-between;
color: rgba(255, 255, 255, 0.4);
font-size: 0.85rem;
}
/* Mobile Menu */
.mobile-nav {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--charcoal);
padding: 1.5rem 2rem;
z-index: 1000;
justify-content: space-between;
align-items: center;
}
.mobile-logo {
font-family: 'Bodoni Moda', serif;
font-size: 1.5rem;
color: var(--white);
}
.mobile-btn {
background: none;
border: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--charcoal);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
transform: translateX(100%);
transition: transform 0.4s;
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu a {
color: var(--white);
font-size: 1.5rem;
font-family: 'Bodoni Moda', serif;
}
/* Responsive */
@media (max-width: 1024px) {
.side-nav {
display: none;
}
.main-content {
margin-left: 0;
}
.mobile-nav {
display: flex;
}
.hero {
grid-template-columns: 1fr;
}
.hero-right {
min-height: 50vh;
}
.about {
grid-template-columns: 1fr;
}
.about-image .overlay-text {
display: none;
}
.services-masonry {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.service-item:nth-child(1) {
grid-row: auto;
}
.service-item:nth-child(4) {
grid-column: auto;
}
.timeline {
flex-direction: column;
gap: 3rem;
}
.timeline::before {
display: none;
}
.contact {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero-left {
padding: 4rem 2rem;
}
.services {
padding: 5rem 2rem;
}
.services-header {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.services-masonry {
grid-template-columns: 1fr;
}
.process {
padding: 5rem 2rem;
}
.testimonial {
padding: 5rem 2rem;
}
.test-content p {
font-size: 1.5rem;
}
.contact-info,
.contact-form {
padding: 4rem 2rem;
}
.form-row {
grid-template-columns: 1fr;
}
.footer {
padding: 3rem 2rem;
}
.footer-inner {
flex-direction: column;
gap: 2rem;
text-align: center;
}
.footer-links {
flex-wrap: wrap;
justify-content: center;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Side Navigation -->
<nav class="side-nav">
<span class="side-logo">NIRVAN</span>
<div class="side-links">
<a href="#about"><i class="fas fa-leaf"></i></a>
<a href="#services"><i class="fas fa-spa"></i></a>
<a href="#process"><i class="fas fa-road"></i></a>
<a href="#contact"><i class="fas fa-envelope"></i></a>
</div>
<div class="side-social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</div>
</nav>
<!-- Mobile Nav -->
<nav class="mobile-nav">
<span class="mobile-logo">NIRVAN</span>
<button class="mobile-btn" onclick="document.querySelector('.mobile-menu').classList.toggle('active')"><i
class="fas fa-bars"></i></button>
</nav>
<div class="mobile-menu">
<a href="#about" onclick="this.parentElement.classList.remove('active')">About</a>
<a href="#services" onclick="this.parentElement.classList.remove('active')">Services</a>
<a href="#process" onclick="this.parentElement.classList.remove('active')">Process</a>
<a href="#contact" onclick="this.parentElement.classList.remove('active')">Contact</a>
</div>
<main class="main-content">
<!-- Hero -->
<section class="hero">
<div class="hero-left">
<span class="hero-tag">Ayurvedic Wellness Sanctuary</span>
<h1>Reconnect With Your Inner Balance</h1>
<p>Step into a world where ancient wisdom meets modern tranquility. Experience transformative healing
through authentic Ayurvedic practices.</p>
<a href="#contact" class="hero-cta">Begin Your Journey <i class="fas fa-arrow-right"></i></a>
</div>
<div class="hero-right"></div>
</section>
<!-- Marquee -->
<div class="marquee">
<div class="marquee-track">
<span class="marquee-item"><i class="fas fa-check"></i> 100% Natural Therapies</span>
<span class="marquee-item"><i class="fas fa-check"></i> Certified Practitioners</span>
<span class="marquee-item"><i class="fas fa-check"></i> 25+ Years Experience</span>
<span class="marquee-item"><i class="fas fa-check"></i> Personalized Treatments</span>
<span class="marquee-item"><i class="fas fa-check"></i> Holistic Approach</span>
<span class="marquee-item"><i class="fas fa-check"></i> 100% Natural Therapies</span>
<span class="marquee-item"><i class="fas fa-check"></i> Certified Practitioners</span>
<span class="marquee-item"><i class="fas fa-check"></i> 25+ Years Experience</span>
<span class="marquee-item"><i class="fas fa-check"></i> Personalized Treatments</span>
<span class="marquee-item"><i class="fas fa-check"></i> Holistic Approach</span>
</div>
</div>
<!-- About -->
<section id="about" class="about">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=1000" alt="Ayurvedic therapy">
<span class="overlay-text">25</span>
</div>
<div class="about-content">
<span class="section-num">01 — ABOUT US</span>
<h2>Ancient Wisdom for Modern Wellness</h2>
<p>For over two decades, Nirvan has been a sanctuary for those seeking authentic Ayurvedic healing. Our
approach combines time-tested practices with personalized care, addressing the root causes of
imbalance rather than merely treating symptoms.</p>
<p>Every treatment is crafted around your unique constitution, ensuring a deeply personal journey toward
optimal health and inner peace.</p>
<div class="about-list">
<span><i class="fas fa-check"></i> Traditional Methods</span>
<span><i class="fas fa-check"></i> Organic Herbs</span>
<span><i class="fas fa-check"></i> Expert Practitioners</span>
<span><i class="fas fa-check"></i> Lasting Results</span>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="services">
<div class="services-header">
<h2>Curated Healing Experiences</h2>
<p>Discover our range of authentic therapies, each designed to restore balance and vitality to your
life.</p>
</div>
<div class="services-masonry">
<div class="service-item">
<img src="https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=800" alt="Panchakarma">
<div class="service-info">
<span>Detox Program</span>
<h3>Panchakarma</h3>
</div>
</div>
<div class="service-item">
<img src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=800" alt="Consultation">
<div class="service-info">
<span>Assessment</span>
<h3>Dosha Analysis</h3>
</div>
</div>
<div class="service-item">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800" alt="Massage">
<div class="service-info">
<span>Body Therapy</span>
<h3>Abhyanga</h3>
</div>
</div>
<div class="service-item">
<img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1200" alt="Yoga">
<div class="service-info">
<span>Mind & Body</span>
<h3>Yoga & Meditation</h3>
</div>
</div>
<div class="service-item">
<img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=800" alt="Nutrition">
<div class="service-info">
<span>Lifestyle</span>
<h3>Nutritional Guidance</h3>
</div>
</div>
</div>
</section>
<!-- Process -->
<section id="process" class="process">
<h2>Your Healing Journey</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-num">1</div>
<h4>Consultation</h4>
<p>Deep assessment of your constitution and health goals</p>
</div>
<div class="timeline-item">
<div class="timeline-num">2</div>
<h4>Custom Plan</h4>
<p>Personalized treatment protocol designed for you</p>
</div>
<div class="timeline-item">
<div class="timeline-num">3</div>
<h4>Treatment</h4>
<p>Authentic therapies by certified practitioners</p>
</div>
<div class="timeline-item">
<div class="timeline-num">4</div>
<h4>Integration</h4>
<p>Ongoing guidance for lasting transformation</p>
</div>
</div>
</section>
<!-- Testimonial -->
<section class="testimonial">
<div class="test-content">
<p>"Nirvan transformed not just my health, but my entire approach to life. The practitioners truly
understand the art of healing."</p>
<span class="test-author">— Kavitha Menon, Wellness Retreat Guest</span>
</div>
</section>
<!-- Contact -->
<section id="contact" class="contact">
<div class="contact-info">
<h2>Visit Our Sanctuary</h2>
<p>Begin your journey toward balance and renewal. Our team is ready to guide you every step of the way.
</p>
<div class="contact-details">
<div class="contact-item">
<div class="contact-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<h5>Location</h5>
<p>123 Wellness Path, Serene Valley<br>Kerala, India 695001</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fas fa-phone"></i></div>
<div>
<h5>Phone</h5>
<p>+91 98765 43210</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fas fa-envelope"></i></div>
<div>
<h5>Email</h5>
<p>retreat@nirvan.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon"><i class="fas fa-clock"></i></div>
<div>
<h5>Hours</h5>
<p>Daily: 7:00 AM – 8:00 PM</p>
</div>
</div>
</div>
</div>
<div class="contact-form">
<h3>Request a Consultation</h3>
<form>
<div class="form-row">
<div class="form-group"><input type="text" placeholder="Your Name" required></div>
<div class="form-group"><input type="email" placeholder="Email Address" required></div>
</div>
<div class="form-row">
<div class="form-group"><input type="tel" placeholder="Phone Number"></div>
<div class="form-group">
<select>
<option>Select Service</option>
<option>Panchakarma</option>
<option>Abhyanga</option>
<option>Consultation</option>
<option>Yoga Retreat</option>
</select>
</div>
</div>
<div class="form-group"><textarea placeholder="Tell us about your wellness goals..."></textarea>
</div>
<button type="submit" class="submit-btn">Send Request <i class="fas fa-arrow-right"></i></button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-inner">
<span class="footer-logo">NIRVAN</span>
<div class="footer-links">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#process">Process</a>
<a href="#contact">Contact</a>
<a href="#">Privacy</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Nirvan Ayurvedic Retreat. All rights reserved.</span>
<span>Crafted with intention</span>
</div>
</footer>
</main>
<script>
document.getElementById('contact')?.querySelector('form')?.addEventListener('submit', e => {
e.preventDefault();
alert('Thank you! We will contact you soon.');
e.target.reset();
});
</script>
</body>
</html>