Brew Bean Coffee House
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brew & Bean Coffee House | Artisan Coffee & Fresh Pastries</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> </head> <body> <!-- Header Banner --> <div class="header-banner" id="headerBanner"> <div class="container"> ☕ FRESH ROASTED DAILY | FREE WIFI | COZY ATMOSPHERE | ARTISAN PASTRIES ☕ </div> </div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand coffee-font" href="#home"> <i class="fas fa-coffee"></i> Brew & Bean </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu">Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-order" onclick="quickOrder()"> <i class="fas fa-shopping-cart me-2"></i>Order Now </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title coffee-font">Where Every Cup Tells a Story</h1> <p class="hero-subtitle">Experience the perfect blend of artisan coffee, fresh pastries, and cozy atmosphere. From single-origin beans to handcrafted beverages, we're your neighborhood coffee destination.</p> <div class="hero-features"> <div class="feature-item"> <i class="fas fa-seedling feature-icon"></i> <span><strong>Organic Beans</strong></span> </div> <div class="feature-item"> <i class="fas fa-fire feature-icon"></i> <span><strong>Fresh Roasted</strong></span> </div> <div class="feature-item"> <i class="fas fa-heart feature-icon"></i> <span><strong>Made with Love</strong></span> </div> </div> <div class="hero-buttons"> <a href="#menu" class="btn btn-custom btn-primary-custom">View Menu</a> <a href="#order" class="btn btn-custom btn-secondary-custom">Order Online</a> </div> </div> </div> </div> </div> </section> <!-- Menu Section --> <section id="menu" class="menu-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll coffee-font">Our Coffee Menu</h2> <p class="section-subtitle animate-on-scroll">Discover our carefully curated selection of premium coffees, artisan beverages, and fresh pastries</p> </div> </div> <!-- Coffee Category --> <div class="menu-category animate-on-scroll"> <h3 class="category-title coffee-font">Signature Coffee</h3> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Brew & Bean Signature Blend</h4> <p class="menu-description">Our house blend featuring Ethiopian and Colombian beans with notes of chocolate, caramel, and citrus. Perfectly balanced for any time of day.</p> <div class="menu-details"> <span class="detail-badge">Medium Roast</span> <span class="detail-badge">Single Origin</span> <span class="detail-badge">Fair Trade</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Small</div> <div class="price-amount">₹120</div> </div> <div class="price-option"> <div class="price-size">Medium</div> <div class="price-amount">₹150</div> </div> <div class="price-option"> <div class="price-size">Large</div> <div class="price-amount">₹180</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Signature Blend', 150)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1461023058943-07fcbe16d735?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Classic Espresso</h4> <p class="menu-description">Rich, bold espresso shot made from our premium Italian roast. The perfect foundation for all our specialty drinks.</p> <div class="menu-details"> <span class="detail-badge">Dark Roast</span> <span class="detail-badge">Italian Style</span> <span class="detail-badge">Intense</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Single</div> <div class="price-amount">₹80</div> </div> <div class="price-option"> <div class="price-size">Double</div> <div class="price-amount">₹120</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Classic Espresso', 80)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1570968915860-54d5c301fa9f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Caramel Macchiato</h4> <p class="menu-description">Creamy steamed milk with vanilla syrup, marked with espresso and finished with caramel drizzle. A sweet indulgence.</p> <div class="menu-details"> <span class="detail-badge">Sweet</span> <span class="detail-badge">Caramel</span> <span class="detail-badge">Popular</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Small</div> <div class="price-amount">₹160</div> </div> <div class="price-option"> <div class="price-size">Medium</div> <div class="price-amount">₹190</div> </div> <div class="price-option"> <div class="price-size">Large</div> <div class="price-amount">₹220</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Caramel Macchiato', 190)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> </div> <!-- Specialty Drinks Category --> <div class="menu-category animate-on-scroll"> <h3 class="category-title coffee-font">Specialty Beverages</h3> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Vanilla Chai Latte</h4> <p class="menu-description">Aromatic blend of black tea, warm spices, steamed milk, and vanilla. A comforting drink with exotic flavors.</p> <div class="menu-details"> <span class="detail-badge">Spiced</span> <span class="detail-badge">Vanilla</span> <span class="detail-badge">Warming</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Small</div> <div class="price-amount">₹140</div> </div> <div class="price-option"> <div class="price-size">Medium</div> <div class="price-amount">₹170</div> </div> <div class="price-option"> <div class="price-size">Large</div> <div class="price-amount">₹200</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Vanilla Chai Latte', 170)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Iced Caramel Frappé</h4> <p class="menu-description">Blended iced coffee with caramel syrup, whipped cream, and caramel drizzle. Perfect for hot summer days.</p> <div class="menu-details"> <span class="detail-badge">Iced</span> <span class="detail-badge">Blended</span> <span class="detail-badge">Refreshing</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Small</div> <div class="price-amount">₹180</div> </div> <div class="price-option"> <div class="price-size">Medium</div> <div class="price-amount">₹210</div> </div> <div class="price-option"> <div class="price-size">Large</div> <div class="price-amount">₹240</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Iced Caramel Frappé', 210)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> </div> <!-- Pastries Category --> <div class="menu-category animate-on-scroll"> <h3 class="category-title coffee-font">Fresh Pastries</h3> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Chocolate Croissant</h4> <p class="menu-description">Buttery, flaky croissant filled with rich dark chocolate. Baked fresh daily and perfect with your morning coffee.</p> <div class="menu-details"> <span class="detail-badge">Fresh Baked</span> <span class="detail-badge">Chocolate</span> <span class="detail-badge">Buttery</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Each</div> <div class="price-amount">₹90</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Chocolate Croissant', 90)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> <div class="menu-item"> <div class="menu-image" style="background-image: url('https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> <div class="menu-content"> <h4 class="menu-name">Blueberry Muffin</h4> <p class="menu-description">Moist, fluffy muffin bursting with fresh blueberries and topped with a golden crumb topping. Made with organic ingredients.</p> <div class="menu-details"> <span class="detail-badge">Organic</span> <span class="detail-badge">Blueberry</span> <span class="detail-badge">Fluffy</span> </div> <div class="menu-price-section"> <div class="menu-prices"> <div class="price-option"> <div class="price-size">Each</div> <div class="price-amount">₹80</div> </div> </div> <button class="btn-add-to-cart" onclick="addToCart('Blueberry Muffin', 80)"> <i class="fas fa-plus me-1"></i>Add to Cart </button> </div> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="about-content animate-on-scroll"> <div class="about-text"> <h2 class="about-title coffee-font">Our Coffee Story</h2> <p class="about-description">Founded in 2015, Brew & Bean began as a passion project to bring exceptional coffee to our community. We source our beans directly from farmers, ensuring fair trade practices and the highest quality.</p> <p class="about-description">Every cup we serve is crafted with care, from our signature roasting process to the skilled hands of our baristas. We believe coffee is more than a beverage – it's a moment of connection, creativity, and comfort.</p> <ul class="about-features"> <li><i class="fas fa-leaf"></i>Sustainably sourced, organic coffee beans</li> <li><i class="fas fa-fire"></i>Small-batch roasting for optimal freshness</li> <li><i class="fas fa-users"></i>Expert baristas with years of experience</li> <li><i class="fas fa-heart"></i>Community-focused, locally owned business</li> <li><i class="fas fa-award"></i>Award-winning coffee blends and service</li> </ul> <a href="#menu" class="btn btn-custom btn-primary-custom">Explore Our Menu</a> </div> <div class="about-image" style="background-image: url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')"></div> </div> </div> </section> <!-- Locations Section --> <section id="locations" class="location-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll coffee-font">Our Locations</h2> <p class="section-subtitle animate-on-scroll">Visit us at any of our cozy coffee houses for the perfect brew and warm atmosphere</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="location-card animate-on-scroll"> <div class="location-icon"> <i class="fas fa-map-marker-alt"></i> </div> <h4 class="location-name">Downtown Flagship</h4> <p class="location-address">123 Coffee Street<br>Downtown District<br>New Delhi, 110001</p> <div class="location-hours"> <div class="hours-title">Opening Hours</div> <div class="hours-item"> <span>Monday - Friday</span> <span>6:00 AM - 10:00 PM</span> </div> <div class="hours-item"> <span>Saturday</span> <span>7:00 AM - 11:00 PM</span> </div> <div class="hours-item"> <span>Sunday</span> <span>8:00 AM - 9:00 PM</span> </div> </div> <button class="btn-directions" onclick="getDirections('downtown')"> <i class="fas fa-directions me-2"></i>Get Directions </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="location-card animate-on-scroll"> <div class="location-icon"> <i class="fas fa-university"></i> </div> <h4 class="location-name">University Campus</h4> <p class="location-address">456 Campus Road<br>University District<br>New Delhi, 110007</p> <div class="location-hours"> <div class="hours-title">Opening Hours</div> <div class="hours-item"> <span>Monday - Thursday</span> <span>6:30 AM - 11:00 PM</span> </div> <div class="hours-item"> <span>Friday - Saturday</span> <span>6:30 AM - 12:00 AM</span> </div> <div class="hours-item"> <span>Sunday</span> <span>8:00 AM - 10:00 PM</span> </div> </div> <button class="btn-directions" onclick="getDirections('university')"> <i class="fas fa-directions me-2"></i>Get Directions </button> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="location-card animate-on-scroll"> <div class="location-icon"> <i class="fas fa-building"></i> </div> <h4 class="location-name">Business District</h4> <p class="location-address">789 Corporate Plaza<br>Business District<br>Gurgaon, 122001</p> <div class="location-hours"> <div class="hours-title">Opening Hours</div> <div class="hours-item"> <span>Monday - Friday</span> <span>6:00 AM - 8:00 PM</span> </div> <div class="hours-item"> <span>Saturday</span> <span>8:00 AM - 6:00 PM</span> </div> <div class="hours-item"> <span>Sunday</span> <span>Closed</span> </div> </div> <button class="btn-directions" onclick="getDirections('business')"> <i class="fas fa-directions me-2"></i>Get Directions </button> </div> </div> </div> </div> </section> <!-- Order Section --> <section id="order" class="order-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll coffee-font">Order Online</h2> <p class="section-subtitle animate-on-scroll">Skip the line and order your favorite coffee for pickup or delivery</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="order-form animate-on-scroll"> <form id="orderForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Full Name *</label> <input type="text" class="form-control" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Phone Number *</label> <input type="tel" class="form-control" required> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Email Address</label> <input type="email" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Order Type *</label> <select class="form-select" required> <option value="">Select Order Type</option> <option value="pickup">Pickup</option> <option value="delivery">Delivery</option> <option value="dine-in">Dine In</option> </select> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Preferred Location *</label> <select class="form-select" required> <option value="">Select Location</option> <option value="downtown">Downtown Flagship</option> <option value="university">University Campus</option> <option value="business">Business District</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Preferred Time</label> <input type="time" class="form-control"> </div> </div> </div> <div class="form-group"> <label class="form-label">Delivery Address (if applicable)</label> <textarea class="form-control" rows="3" placeholder="Enter your complete delivery address..."></textarea> </div> <div class="form-group"> <label class="form-label">Special Instructions</label> <textarea class="form-control" rows="3" placeholder="Any special requests, allergies, or preferences..."></textarea> </div> <div class="form-group"> <label class="form-label">Payment Method *</label> <select class="form-select" required> <option value="">Select Payment Method</option> <option value="cash">Cash on Pickup/Delivery</option> <option value="card">Credit/Debit Card</option> <option value="upi">UPI Payment</option> <option value="wallet">Digital Wallet</option> </select> </div> <button type="submit" class="btn-submit"> <i class="fas fa-shopping-cart me-2"></i>Place Order </button> </form> <div class="cart-summary" id="cartSummary" style="display: none;"> <h4 class="cart-title">Order Summary</h4> <div id="cartItems"></div> <div class="cart-total" id="cartTotal">Total: ₹0</div> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="contact-content animate-on-scroll"> <h2 class="contact-title coffee-font">Get in Touch</h2> <p class="contact-subtitle">Questions about our coffee, catering services, or want to host an event? We'd love to hear from you!</p> <div class="contact-info"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-text"> <div>Call Us: +91-9876-543-210</div> <div>Orders: +91-9876-543-211</div> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-text"> <div>hello@brewandbean.com</div> <div>orders@brewandbean.com</div> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-text"> <div>Daily: 6:00 AM - 10:00 PM</div> <div>Customer Service Available</div> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-users"></i> </div> <div class="contact-text"> <div>Catering Services</div> <div>Private Events Available</div> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand coffee-font">☕ Brew & Bean</div> <p class="text-white-75 mb-4">Your neighborhood coffee house serving exceptional coffee, fresh pastries, and creating memorable moments since 2015. Every cup tells a story.</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-twitter"></i></a> <a href="#"><i class="fab fa-linkedin"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Menu</h5> <div class="footer-links"> <a href="#" onclick="showCategory('coffee')">Coffee</a> <a href="#" onclick="showCategory('espresso')">Espresso Drinks</a> <a href="#" onclick="showCategory('specialty')">Specialty Beverages</a> <a href="#" onclick="showCategory('pastries')">Fresh Pastries</a> <a href="#" onclick="showCategory('seasonal')">Seasonal Specials</a> <a href="#" onclick="showCategory('beans')">Coffee Beans</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Services</h5> <div class="footer-links"> <a href="#" onclick="showCateringInfo()">Catering Services</a> <a href="#" onclick="showLoyaltyProgram()">Loyalty Program</a> <a href="#" onclick="showGiftCards()">Gift Cards</a> <a href="#" onclick="showPrivateEvents()">Private Events</a> <a href="#" onclick="showCoffeeSubscription()">Coffee Subscription</a> <a href="#" onclick="showBaristaTraining()">Barista Training</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Company</h5> <div class="footer-links"> <a href="#" onclick="showCompanyStory()">Our Story</a> <a href="#" onclick="showSustainability()">Sustainability</a> <a href="#" onclick="showCareers()">Careers</a> <a href="#" onclick="showFranchise()">Franchise Opportunities</a> <a href="#" onclick="showPress()">Press & Media</a> <a href="#" onclick="showCommunity()">Community Impact</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 Brew & Bean Coffee House. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Nutrition Info</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'977c307365c58fb6',t:'MTc1NjYzOTc1Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --coffee-brown: #8B4513; --dark-roast: #5D2A0A; --light-cream: #F5F5DC; --espresso-black: #2F1B14; --caramel-gold: #D2691E; --milk-white: #FFFEF7; --mocha-brown: #A0522D; --latte-beige: #F4E4BC; --warm-amber: #FFBF00; --cozy-orange: #FF8C00; --forest-green: #228B22; --cool-gray: #6B7280; --dark-gray: #1F2937; --gradient-coffee: linear-gradient(135deg, #8B4513 0%, #5D2A0A 100%); --gradient-cream: linear-gradient(135deg, #F5F5DC 0%, #F4E4BC 100%); --gradient-gold: linear-gradient(135deg, #D2691E 0%, #FFBF00 100%); --gradient-warm: linear-gradient(135deg, #FF8C00 0%, #D2691E 100%); --shadow-soft: 0 4px 20px rgba(139, 69, 19, 0.1); --shadow-medium: 0 8px 30px rgba(139, 69, 19, 0.15); --shadow-strong: 0 15px 40px rgba(139, 69, 19, 0.2); --border-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--dark-gray); background: var(--milk-white); overflow-x: hidden; } .coffee-font { font-family: 'Playfair Display', serif; } /* Header Banner */ .header-banner { background: var(--gradient-coffee); color: white; padding: 12px 0; text-align: center; font-weight: 600; animation: slideDown 0.6s ease-out; letter-spacing: 0.5px; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Navigation */ .navbar-custom { background: rgba(255, 254, 247, 0.95); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1.2rem 0; border-bottom: 2px solid var(--coffee-brown); } .navbar-brand { font-weight: 800; font-size: 2.2rem; color: var(--dark-gray) !important; display: flex; align-items: center; letter-spacing: 1px; } .navbar-brand i { margin-right: 12px; font-size: 2.5rem; color: var(--coffee-brown); } .nav-link { font-weight: 500; color: var(--dark-gray) !important; margin: 0 1rem; transition: all 0.3s ease; position: relative; letter-spacing: 0.3px; } .nav-link:hover { color: var(--coffee-brown) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-coffee); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-order { background: var(--gradient-coffee); color: white; border: none; padding: 12px 28px; border-radius: 25px; font-weight: 600; margin-left: 20px; transition: all 0.3s ease; letter-spacing: 0.5px; position: relative; } .btn-order:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(139, 69, 19, 0.1), rgba(93, 42, 10, 0.05)), url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 3.5rem; font-weight: 900; color: white; /* margin-bottom: 1.5rem; */ animation: fadeInUp 1s ease-out; line-height: 1.1; } .hero-subtitle { font-size: 1.2rem; color: white; /* margin-bottom: 2.5rem; */ animation: fadeInUp 1s ease-out 0.3s both; font-weight: 400; max-width: 600px; } .hero-features { display: flex; gap: 2rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; flex-wrap: wrap; } .feature-item { display: flex; align-items: center; color: var(--dark-gray); background: rgba(255, 254, 247, 0.9); padding: 16px 24px; border-radius: 30px; backdrop-filter: blur(15px); border: 2px solid rgba(139, 69, 19, 0.2); transition: all 0.3s ease; } .feature-item:hover { background: rgba(255, 254, 247, 1); transform: translateY(-3px); box-shadow: var(--shadow-medium); } .feature-icon { font-size: 1.5rem; margin-right: 12px; color: var(--coffee-brown); } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 16px 35px; font-weight: 600; border-radius: 35px; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; margin: 0 12px; text-decoration: none; display: inline-block; font-size: 1rem; } .btn-primary-custom { background: var(--gradient-coffee); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: white; } .btn-secondary-custom { background: transparent; color: white; border: 2px solid var(--coffee-brown); } .btn-secondary-custom:hover { background: var(--coffee-brown); color: white; transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; color: var(--dark-gray); text-align: center; line-height: 1.2; } .section-subtitle { font-size: 1.3rem; color: var(--cool-gray); margin-bottom: 4rem; text-align: center; font-weight: 400; max-width: 700px; margin-left: auto; margin-right: auto; } /* Menu Section */ .menu-section { background: var(--milk-white); } .menu-category { margin-bottom: 4rem; } .category-title { font-size: 2.5rem; font-weight: 700; color: var(--coffee-brown); margin-bottom: 2rem; text-align: center; position: relative; } .category-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--gradient-gold); border-radius: 2px; } .menu-item { background: white; border-radius: var(--border-radius); padding: 2rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-soft); transition: all 0.3s ease; border: 1px solid #E5E7EB; display: flex; align-items: center; gap: 2rem; } .menu-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .menu-image { width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; border: 3px solid var(--coffee-brown); } .menu-content { flex: 1; } .menu-name { font-size: 1.5rem; font-weight: 700; color: var(--dark-gray); margin-bottom: 0.5rem; } .menu-description { color: var(--cool-gray); margin-bottom: 1rem; line-height: 1.6; } .menu-details { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .detail-badge { background: var(--latte-beige); color: var(--coffee-brown); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .menu-price-section { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .menu-prices { display: flex; gap: 1rem; align-items: center; } .price-option { text-align: center; } .price-size { font-size: 0.8rem; color: var(--cool-gray); font-weight: 600; text-transform: uppercase; } .price-amount { font-size: 1.2rem; font-weight: 700; color: var(--coffee-brown); } .btn-add-to-cart { background: var(--gradient-coffee); color: white; border: none; padding: 10px 20px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; font-size: 0.9rem; } .btn-add-to-cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* About Section */ .about-section { background: var(--light-cream); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text { padding: 2rem; } .about-title { font-size: 3rem; font-weight: 800; color: var(--dark-gray); margin-bottom: 2rem; line-height: 1.2; } .about-description { font-size: 1.1rem; color: var(--cool-gray); margin-bottom: 2rem; line-height: 1.8; } .about-features { list-style: none; margin-bottom: 2rem; } .about-features li { display: flex; align-items: center; margin-bottom: 1rem; font-weight: 500; } .about-features i { color: var(--coffee-brown); margin-right: 12px; width: 20px; } .about-image { height: 500px; border-radius: var(--border-radius); background-size: cover; background-position: center; box-shadow: var(--shadow-medium); } /* Location Section */ .location-section { background: var(--milk-white); } .location-card { background: white; border-radius: var(--border-radius); padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.3s ease; height: 100%; border: 1px solid #E5E7EB; } .location-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-strong); } .location-icon { width: 80px; height: 80px; background: var(--gradient-coffee); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: white; } .location-name { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-gray); } .location-address { color: var(--cool-gray); margin-bottom: 1.5rem; line-height: 1.6; } .location-hours { background: var(--latte-beige); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; } .hours-title { font-weight: 700; color: var(--coffee-brown); margin-bottom: 1rem; } .hours-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.9rem; } .btn-directions { background: var(--gradient-coffee); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; width: 100%; } .btn-directions:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Order Section */ .order-section { background: var(--gradient-cream); } .order-form { background: white; border-radius: var(--border-radius); padding: 3rem; box-shadow: var(--shadow-medium); border: 1px solid #E5E7EB; } .form-group { margin-bottom: 2rem; } .form-label { font-weight: 600; color: var(--dark-gray); margin-bottom: 0.8rem; display: block; } .form-control { width: 100%; padding: 14px 18px; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: var(--milk-white); } .form-control:focus { outline: none; border-color: var(--coffee-brown); box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1); background: white; } .form-select { width: 100%; padding: 14px 18px; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: var(--milk-white); } .form-select:focus { outline: none; border-color: var(--coffee-brown); box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1); background: white; } .btn-submit { background: var(--gradient-coffee); color: white; border: none; padding: 16px 40px; border-radius: 35px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; width: 100%; letter-spacing: 0.5px; } .btn-submit:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); color: white; } /* Cart Section */ .cart-summary { background: var(--latte-beige); border-radius: var(--border-radius); padding: 2rem; margin-top: 2rem; border: 2px solid var(--coffee-brown); } .cart-title { font-size: 1.5rem; font-weight: 700; color: var(--coffee-brown); margin-bottom: 1.5rem; text-align: center; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(139, 69, 19, 0.2); } .cart-item:last-child { border-bottom: none; } .cart-total { font-size: 1.3rem; font-weight: 700; color: var(--coffee-brown); text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--coffee-brown); } /* Contact Section */ .contact-section { background: var(--gradient-coffee); color: white; text-align: center; } .contact-content { max-width: 800px; margin: 0 auto; } .contact-title { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; } .contact-subtitle { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.9; } .contact-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .contact-item { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: var(--border-radius); backdrop-filter: blur(10px); transition: all 0.3s ease; } .contact-item:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-5px); } .contact-icon { font-size: 2.5rem; margin-bottom: 1rem; color: white; } .contact-text { font-size: 1.1rem; font-weight: 600; } /* Footer */ .footer-section { background: var(--espresso-black); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--caramel-gold); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.8rem; font-weight: 400; } .footer-links a:hover { color: var(--caramel-gold); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-coffee); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 30px; background: var(--gradient-coffee); color: white; padding: 16px 25px; border-radius: 12px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; font-weight: 600; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3rem; } .section-title { font-size: 2.5rem; } .hero-features { flex-direction: column; gap: 1rem; } .about-content { grid-template-columns: 1fr; gap: 2rem; } .menu-item { flex-direction: column; text-align: center; } .menu-price-section { justify-content: center; } }
JavaScript
// Cart functionality let cart = []; let cartTotal = 0; // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 254, 247, 0.98)'; navbar.style.boxShadow = '0 12px 35px rgba(139, 69, 19, 0.15)'; } else { navbar.style.background = 'rgba(255, 254, 247, 0.95)'; navbar.style.boxShadow = '0 4px 20px rgba(139, 69, 19, 0.1)'; } animateOnScroll(); }); // Quick order function function quickOrder() { showSuccessMessage('Opening quick order...'); setTimeout(() => { document.querySelector('#order').scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 500); } // Add to cart function function addToCart(itemName, price) { cart.push({ name: itemName, price: price }); cartTotal += price; updateCartDisplay(); showSuccessMessage(`${itemName} added to cart!`); } // Update cart display function updateCartDisplay() { const cartSummary = document.getElementById('cartSummary'); const cartItems = document.getElementById('cartItems'); const cartTotalElement = document.getElementById('cartTotal'); if (cart.length > 0) { cartSummary.style.display = 'block'; cartItems.innerHTML = ''; cart.forEach((item, index) => { const cartItem = document.createElement('div'); cartItem.className = 'cart-item'; cartItem.innerHTML = ` <span>${item.name}</span> <span>₹${item.price}</span> `; cartItems.appendChild(cartItem); }); cartTotalElement.textContent = `Total: ₹${cartTotal}`; } } // Get directions function function getDirections(location) { const locations = { 'downtown': 'Downtown Flagship - 123 Coffee Street, New Delhi', 'university': 'University Campus - 456 Campus Road, New Delhi', 'business': 'Business District - 789 Corporate Plaza, Gurgaon' }; const locationName = locations[location]; showSuccessMessage('Opening directions...'); setTimeout(() => { alert(`?️ DIRECTIONS TO ${locationName.toUpperCase()} ?️\n\n? Address: ${locationName}\n\n? Getting There:\n• By Car: Use GPS navigation\n• By Metro: Nearest metro station info\n• By Bus: Local bus routes available\n• By Taxi: Uber/Ola readily available\n\n?️ Parking:\n• Free parking available\n• Valet service during peak hours\n• Bike parking spaces\n• Accessible parking spots\n\n⏰ Travel Time Estimates:\n• From City Center: 15-20 minutes\n• From Airport: 45-60 minutes\n• From Railway Station: 25-30 minutes\n\n? Need Help?\nCall us at +91-9876-543-210 for directions!\n\n☕ See you soon at Brew & Bean!`); }, 800); } // Order form submission document.getElementById('orderForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Processing Order...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); cart = []; cartTotal = 0; document.getElementById('cartSummary').style.display = 'none'; showSuccessMessage('Order placed successfully!'); setTimeout(() => { alert('☕ ORDER CONFIRMATION ☕\n\n✅ Your order has been placed successfully!\n\n? Order Details:\n• Order Number: #BB' + Math.floor(Math.random() * 10000) + '\n• Estimated Time: 15-20 minutes\n• Total Amount: ₹' + (cartTotal || 250) + '\n\n? Order Tracking:\n• SMS confirmation sent\n• Real-time order updates\n• Pickup/delivery notifications\n• Payment confirmation\n\n☕ What\'s Next:\n• Order preparation begins immediately\n• You\'ll receive SMS updates\n• Pickup notification when ready\n• Quality check before handover\n\n? Need Changes?\nCall us immediately at +91-9876-543-210\n\n? Loyalty Points:\n• Earned: 25 points\n• Total Points: 150 points\n• Next reward at: 200 points\n\n☕ Thank you for choosing Brew & Bean!\nYour perfect cup is being crafted with love! ☕'); }, 1000); }, 2000); }); // Footer functions function showCateringInfo() { alert('?️ CATERING SERVICES ?️\n\n☕ Perfect Coffee for Every Event:\n\n? Event Types:\n• Corporate meetings & conferences\n• Wedding receptions & parties\n• Birthday celebrations\n• Office parties & gatherings\n• Community events\n• Private functions\n\n☕ Catering Options:\n• Coffee bar setup with barista\n• Bulk coffee dispensers\n• Individual coffee cups\n• Specialty drink stations\n• Fresh pastry platters\n• Custom menu creation\n\n? Package Includes:\n• Professional setup & service\n• All equipment & supplies\n• Experienced barista staff\n• Premium coffee selections\n• Fresh pastries & snacks\n• Cleanup service\n\n? Pricing:\n• Small events (10-25 people): ₹2,500+\n• Medium events (25-50 people): ₹4,500+\n• Large events (50+ people): Custom quote\n• Corporate packages available\n• Bulk discounts offered\n\n? Book Your Event:\nCall +91-9876-543-210 for custom quotes!\n\n☕ Make your event memorable with Brew & Bean!'); } function showLoyaltyProgram() { alert('? BREW & BEAN LOYALTY PROGRAM ?\n\n☕ Earn Points with Every Purchase:\n\n? How It Works:\n• Earn 1 point per ₹10 spent\n• 100 points = ₹50 reward\n• Birthday month: Double points\n• Referral bonus: 50 points\n• Social media share: 10 points\n\n? Membership Tiers:\n• Bronze (0-499 points): 5% discount\n• Silver (500-999 points): 10% discount\n• Gold (1000+ points): 15% discount\n• Platinum (2000+ points): 20% discount\n\n? Exclusive Benefits:\n• Free birthday drink\n• Early access to new products\n• Special member-only events\n• Free size upgrades\n• Exclusive seasonal offers\n• Priority customer service\n\n? Mobile App Features:\n• Digital loyalty card\n• Point tracking\n• Exclusive app offers\n• Order ahead functionality\n• Store locator\n• Push notifications for deals\n\n? Sign Up Today:\n• In-store registration\n• Mobile app download\n• Online account creation\n• Instant welcome bonus: 25 points\n\n? Start earning rewards with every sip!'); } function showGiftCards() { alert('? BREW & BEAN GIFT CARDS ?\n\n☕ The Perfect Gift for Coffee Lovers:\n\n? Gift Card Options:\n• Physical gift cards\n• Digital e-gift cards\n• Custom amount (₹100 - ₹5,000)\n• Beautiful packaging available\n• Personalized messages\n• Instant delivery options\n\n? Design Choices:\n• Classic Brew & Bean design\n• Seasonal holiday themes\n• Birthday celebration designs\n• Corporate gift options\n• Custom business branding\n• Eco-friendly materials\n\n? Digital Features:\n• Email delivery\n• SMS delivery\n• Social media sharing\n• QR code scanning\n• Balance checking online\n• Auto-reload options\n\n? Popular Amounts:\n• ₹250 - Perfect for a coffee date\n• ₹500 - Great for regular customers\n• ₹1,000 - Ideal for coffee enthusiasts\n• ₹2,000 - Perfect corporate gifts\n• Custom amounts available\n\n? Special Offers:\n• Buy ₹1,000 get ₹100 bonus\n• Corporate bulk discounts\n• Holiday promotion bonuses\n• Loyalty points on purchases\n\n? Purchase Options:\n• In-store at any location\n• Online ordering\n• Phone orders: +91-9876-543-210\n• Mobile app purchase\n\n? Give the gift of great coffee!'); } // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen