Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nature Café - Pune | Peace & Satisfaction</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&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 {
--primary: #1A3022;
--secondary: #355E3B;
--accent: #C5A059;
--light: #F7F5F0;
--cream: #EFECE6;
--dark: #121A14;
--text-main: #2C352E;
--transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--light);
color: var(--text-main);
overflow-x: hidden;
}
h1, h2, h3, .logo {
font-family: 'Playfair Display', serif;
}
/* --- PREMIUM HEADER --- */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(247, 245, 240, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(197, 160, 89, 0.2);
transition: var(--transition);
}
.nav-container {
max-width: 1300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 5%;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.5px;
}
.logo i {
color: var(--accent);
animation: pulse-glow 3s infinite ease-in-out;
}
.nav-links {
display: flex;
list-style: none;
gap: 35px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-main);
font-weight: 500;
font-size: 0.95rem;
position: relative;
transition: var(--transition);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--accent);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-links a:hover {
color: var(--accent);
}
.reserve-btn {
background-color: var(--primary);
color: var(--light);
padding: 12px 26px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: var(--transition);
box-shadow: 0 4px 20px rgba(26, 48, 34, 0.15);
border: 1px solid rgba(197, 160, 89, 0.3);
}
.reserve-btn:hover {
background-color: var(--accent);
color: var(--dark);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(197, 160, 89, 0.3);
}
.hamburger {
display: none;
cursor: pointer;
font-size: 1.5rem;
color: var(--primary);
}
/* --- HERO SECTION WITH LANDING CHARACTER --- */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, rgba(18, 26, 20, 0.8), rgba(26, 48, 34, 0.7)), url('http://googleusercontent.com/generated_image_content/0') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 5% 60px 5%;
position: relative;
overflow: hidden;
}
.hero-grid {
max-width: 1200px;
width: 100%;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
align-items: center;
gap: 50px;
}
.hero-content {
animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1);
color: var(--light);
}
.hero-badge {
display: inline-block;
background: rgba(197, 160, 89, 0.2);
color: var(--accent);
padding: 8px 16px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 20px;
border: 1px solid rgba(197, 160, 89, 0.4);
letter-spacing: 1px;
text-transform: uppercase;
}
.hero h1 {
font-size: 4rem;
line-height: 1.1;
margin-bottom: 20px;
font-weight: 700;
}
.hero h1 span {
color: var(--accent);
font-style: italic;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 35px;
font-weight: 300;
color: #d1d8d2;
line-height: 1.6;
}
.hero-btns {
display: flex;
gap: 15px;
}
.btn-gold {
background-color: var(--accent);
color: var(--dark);
padding: 14px 32px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
box-shadow: 0 5px 20px rgba(197, 160, 89, 0.3);
}
.btn-gold:hover {
background-color: #d4af37;
transform: translateY(-3px);
}
.btn-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--light);
padding: 14px 32px;
border-radius: 50px;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
/* Animated Landing Character & Floating Card Mockup */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.landing-character-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
border: 1px solid rgba(197, 160, 89, 0.3);
border-radius: 30px;
padding: 30px;
text-align: center;
width: 100%;
max-width: 380px;
box-shadow: 0 25px 50px rgba(0,0,0,0.4);
animation: characterLand 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
opacity: 0;
transform: translateY(-100px) scale(0.8);
}
.character-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px auto;
border: 3px solid var(--accent);
object-fit: cover;
box-shadow: 0 0 25px rgba(197, 160, 89, 0.4);
}
.landing-character-card h3 {
color: var(--light);
font-size: 1.5rem;
margin-bottom: 8px;
}
.landing-character-card p {
color: #ccc;
font-size: 0.95rem;
margin-bottom: 20px;
}
.live-status {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(46, 125, 50, 0.3);
color: #81c784;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.live-status span {
width: 8px;
height: 8px;
background: #4caf50;
border-radius: 50%;
animation: pulse 2s infinite;
}
/* --- ABOUT SECTION --- */
.about {
padding: 120px 5%;
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 70px;
align-items: center;
}
.about-img-wrapper {
position: relative;
}
.about-img-wrapper img {
width: 100%;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.experience-badge {
position: absolute;
bottom: -30px;
right: -30px;
background: var(--primary);
color: var(--light);
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
border: 1px solid rgba(197, 160, 89, 0.3);
text-align: center;
}
.experience-badge h4 {
font-size: 2.2rem;
color: var(--accent);
font-family: 'Playfair Display', serif;
}
.about-text-box h2 {
font-size: 3rem;
color: var(--primary);
margin-bottom: 20px;
line-height: 1.2;
}
.about-text-box .quote-box {
font-size: 1.25rem;
color: var(--secondary);
font-style: italic;
margin-bottom: 20px;
font-weight: 600;
font-family: 'Playfair Display', serif;
}
.about-text-box p {
color: #555;
line-height: 1.8;
margin-bottom: 35px;
font-size: 1.05rem;
}
/* --- MENU SECTION --- */
.menu-section {
background-color: var(--cream);
padding: 120px 5%;
position: relative;
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 70px auto;
}
.section-header span {
color: var(--accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.85rem;
display: block;
margin-bottom: 10px;
}
.section-header h2 {
font-size: 3rem;
color: var(--primary);
margin-bottom: 15px;
}
.menu-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
gap: 30px;
}
.menu-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
background: var(--light);
border-radius: 20px;
transition: var(--transition);
border: 1px solid rgba(0,0,0,0.04);
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
position: relative;
overflow: hidden;
}
.menu-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--accent);
transition: var(--transition);
}
.menu-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(26, 48, 34, 0.08);
background: #ffffff;
}
.menu-details h3 {
font-size: 1.35rem;
color: var(--primary);
margin-bottom: 6px;
}
.menu-details p {
font-size: 0.95rem;
color: #666;
}
.menu-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
font-family: 'Playfair Display', serif;
}
/* --- GALLERY SECTION --- */
.gallery-section {
padding: 120px 5%;
max-width: 1300px;
margin: 0 auto;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.gallery-item {
border-radius: 20px;
overflow: hidden;
height: 320px;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover img {
transform: scale(1.08);
}
/* --- REVIEWS SECTION --- */
.reviews-section {
background-color: var(--primary);
color: var(--light);
padding: 100px 5%;
text-align: center;
}
.reviews-container {
max-width: 800px;
margin: 0 auto;
}
.stars {
color: var(--accent);
font-size: 1.2rem;
margin-bottom: 20px;
letter-spacing: 3px;
}
.review-text {
font-size: 1.5rem;
font-family: 'Playfair Display', serif;
font-style: italic;
line-height: 1.6;
margin-bottom: 30px;
color: #f1f5f2;
}
.reviewer {
font-weight: 600;
color: var(--accent);
font-size: 1.1rem;
}
/* --- CONTACT & LOCATION --- */
.contact-section {
padding: 120px 5%;
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.contact-card {
background: var(--cream);
padding: 50px;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.04);
border: 1px solid rgba(197, 160, 89, 0.2);
}
.contact-card h2 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 30px;
}
.info-group {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
}
.info-group i {
font-size: 1.3rem;
color: var(--accent);
background: rgba(197, 160, 89, 0.15);
padding: 15px;
border-radius: 50%;
margin-top: 3px;
}
.info-group h4 {
font-size: 1.1rem;
color: var(--primary);
margin-bottom: 4px;
}
.info-group p {
color: #555;
font-size: 1rem;
}
.map-box {
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.06);
min-height: 480px;
}
.map-box iframe {
width: 100%;
height: 100%;
border: 0;
}
/* --- WHATSAPP FLOATING BUTTON --- */
.whatsapp-float {
position: fixed;
bottom: 35px;
right: 35px;
background-color: #25d366;
color: var(--light);
width: 65px;
height: 65px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
z-index: 1000;
transition: var(--transition);
text-decoration: none;
}
.whatsapp-float:hover {
transform: scale(1.1) rotate(10deg);
}
/* --- FOOTER --- */
footer {
background-color: var(--dark);
color: var(--light);
text-align: center;
padding: 40px 20px;
font-size: 0.95rem;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* --- ANIMATIONS --- */
@keyframes characterLand {
0% {
opacity: 0;
transform: translateY(-80px) scale(0.8);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
@keyframes pulse-glow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.6)); }
}
/* --- RESPONSIVE DESIGN --- */
@media(max-width: 992px) {
.hero-grid, .about, .contact-section {
grid-template-columns: 1fr;
gap: 40px;
}
.hero h1 {
font-size: 3rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: var(--light);
padding: 30px 0;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
text-align: center;
border-bottom: 1px solid rgba(197, 160, 89, 0.2);
}
.nav-links.active {
display: flex;
}
.hamburger {
display: block;
}
.menu-grid {
grid-template-columns: 1fr;
}
.experience-badge {
right: 10px;
bottom: -20px;
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="nav-container">
<a href="#" class="logo"><i class="fa-solid fa-seedling"></i> Nature Café</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="https://wa.me/919225119734?text=Hi%20Nature%20Café,%20I%20would%20like%20to%20reserve%20a%20table!" target="_blank" class="reserve-btn">Book a Table</a></li>
</ul>
<div class="hamburger" id="hamburger">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<section class="hero" id="home">
<div class="hero-grid">
<div class="hero-content">
<div class="hero-badge"><i class="fa-solid fa-leaf"></i> Welcome to Pune's Green Escape</div>
<h1>Nature Café means full of <span>peace and satisfaction</span></h1>
<p>Step away from the fast-paced city life and immerse yourself in absolute tranquility. Handcrafted coffees, soothing teas, and delightful treats await you.</p>
<div class="hero-btns">
<a href="#menu" class="btn-gold">Explore Menu</a>
<a href="https://wa.me/919225119734?text=Hi%20Nature%20Café,%20I%20want%20to%20place%20an%20order!" target="_blank" class="btn-glass"><i class="fa-brands fa-whatsapp"></i> Order on WhatsApp</a>
</div>
</div>
<div class="hero-visual">
<div class="landing-character-card">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=300&q=80" alt="Barista Character" class="character-avatar">
<h3>Aarav Sharma</h3>
<p>Master Barista & Host</p>
<div class="live-status">
<span></span> Open Now • Serving Peace
</div>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="about-img-wrapper">
<img src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&w=800&q=80" alt="Nature Cafe Ambiance">
<div class="experience-badge">
<h4>100%</h4>
<p>Organic Vibes</p>
</div>
</div>
<div class="about-text-box">
<span>Our Philosophy</span>
<h2>Where Soul Meets Serenity</h2>
<div class="quote-box">“Nature Café means full of peace and satisfaction.”</div>
<p>Nestled in the vibrant heart of Pune, Nature Café was conceptualized as a sanctuary for busy minds. Whether you want to enjoy a quiet moment with a book or share laughter over warm treats, our environment heals your senses.</p>
<a href="#contact" class="btn-gold" style="display: inline-block;">Plan Your Visit</a>
</div>
</section>
<section class="menu-section" id="menu">
<div class="section-header">
<span>Handcrafted With Love</span>
<h2>Our Signature Menu</h2>
<p>Pure ingredients, wholesome flavors, and cozy prices.</p>
</div>
<div class="menu-grid">
<div class="menu-card">
<div class="menu-details">
<h3>Chocolate Coffee</h3>
<p>Rich, smooth, and decadent blended delight</p>
</div>
<div class="menu-price">₹170</div>
</div>
<div class="menu-card">
<div class="menu-details">
<h3>Classic Tea</h3>
<p>Warm, aromatic, and traditional refreshing brew</p>
</div>
<div class="menu-price">₹70</div>
</div>
<div class="menu-card">
<div class="menu-details">
<h3>Fresh Milk</h3>
<p>Pure, wholesome, and farm-fresh goodness</p>
</div>
<div class="menu-price">₹30</div>
</div>
<div class="menu-card">
<div class="menu-details">
<h3>Butterscotch Ice Cream</h3>
<p>Sweet, creamy, with a delightful caramel crunch</p>
</div>
<div class="menu-price">₹110</div>
</div>
</div>
</section>
<section class="gallery-section" id="gallery">
<div class="section-header">
<span>Visual Journey</span>
<h2>Aesthetic Moments</h2>
<p>A glimpse into the peaceful atmosphere at Nature Café.</p>
</div>
<div class="gallery-grid">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=600&q=80" alt="Cafe Interior">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?auto=format&fit=crop&w=600&q=80" alt="Coffee Art">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1563227812-0ea4c22e6cc8?auto=format&fit=crop&w=600&q=80" alt="Ice Cream treat">
</div>
</div>
</section>
<section class="reviews-section">
<div class="reviews-container">
<div class="stars">★★★★★</div>
<p class="review-text">“The absolute best place in Pune to unwind. The chocolate coffee and peaceful ambience completely reset my week. True to its tagline!”</p>
<div class="reviewer">— Rohan K., Local Guide</div>
</div>
</section>
<section class="contact-section" id="contact">
<div class="contact-card">
<h2>Visit Nature Café</h2>
<div class="info-group">
<i class="fa-solid fa-location-dot"></i>
<div>
<h4>Location</h4>
<p>Pune, Maharashtra, India</p>
</div>
</div>
<div class="info-group">
<i class="fa-solid fa-phone"></i>
<div>
<h4>Phone / WhatsApp</h4>
<p>+91 92251 19734</p>
</div>
</div>
<div class="info-group">
<i class="fa-solid fa-clock"></i>
<div>
<h4>Opening Hours</h4>
<p>Everyday: 10:00 AM – 6:00 PM</p>
</div>
</div>
<a href="https://wa.me/919225119734?text=Hi%20Nature%20Café,%20I'm%20coming%20over!" target="_blank" class="btn-gold" style="display: block; text-align: center; margin-top: 15px;">Connect on WhatsApp</a>
</div>
<div class="map-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15132.336128031346!2d73.8567437!3d18.5204303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2c069b5e323eb%3A0xcfaa487532dfc9c2!2sPune%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1650000000000!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
<a href="https://wa.me/919225119734?text=Hi%20Nature%20Café,%20found%20you%20via%20your%20website!" class="whatsapp-float" target="_blank">
<i class="fa-brands fa-whatsapp"></i>
</a>
<footer>
<p>© 2026 Nature Café, Pune. All rights reserved. Designed for peace and satisfaction.</p>
</footer>
<script>
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
15
Requests
6
Domains
616KB
Transfer Size
707KB
Content Size
407.0ms
Dom Content Loaded
592.0ms
First Paint
692.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...