Share & Copy — HTML file
Preview your HTML as raw code, copy to clipboard, download or open in a new tab.
Download as:
index.html
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Savor & Stone | Modern Bistro</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Manrope', 'sans-serif'], serif: ['Cormorant Garamond', 'serif'], }, colors: { brand: { black: '#050505', dark: '#121212', gold: '#D4AF37', cream: '#F5F5F0', gray: '#A1A1AA' } }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', } } } } </script> <style> @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } img { transition: opacity 0.5s ease-in-out; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px #121212 inset !important; -webkit-text-fill-color: white !important; transition: background-color 5000s ease-in-out 0s; } </style> </head> <body class="bg-brand-black text-brand-cream antialiased selection:bg-brand-gold selection:text-brand-black"> <div id="root"></div> <script type="text/babel"> const { useState, useEffect } = React; // Icons const IconMenu = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter"><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="18" y2="18"/></svg>; const IconX = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>; const IconStar = () => <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-brand-gold" stroke="none"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>; const IconArrowDown = () => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square" strokeLinejoin="miter"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>; const menuItems = [ { id: 1, category: 'Starters', name: 'Tandoori Paneer Tikka', price: '450', description: 'Char-grilled cottage cheese, yogurt marinade, mint chutney.', image: 'https://images.unsplash.com/photo-1567188040759-fb8a883dc6d8?q=80&w=500&auto=format&fit=crop' }, { id: 2, category: 'Starters', name: 'Samosa', price: '190', description: 'Golden samosa cones, green peas filling, coriander aroma.', image: 'https://images.unsplash.com/photo-1601050690597-df0568f70950?q=80&w=500&auto=format&fit=crop' }, { id: 3, category: 'Mains', name: 'Thali', price: '550', description: 'Aromatic basmati rice, ghee drizzle, toasted cumin.', image: 'https://images.unsplash.com/photo-1546833999-b9f581a1996d?q=80&w=500&auto=format&fit=crop' }, { id: 4, category: 'Mains', name: 'Hyderabadi Veg Biryani', price: '650', description: 'Basmati rice, saffron, seasonal vegetables, fried onions.', image: 'https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?q=80&w=500&auto=format&fit=crop' }, { id: 5, category: 'Mains', name: 'Palak Paneer', price: '595', description: 'Cottage cheese cubes, spinach purée, garlic tempering.', image: 'https://images.unsplash.com/photo-1589647363585-f4a7d3877b10?q=80&w=500&auto=format&fit=crop' }, { id: 6, category: 'Mains', name: 'Malai Kofta', price: '625', description: 'Potato & paneer dumplings, rich cashew gravy, cardamom.', image: 'https://images.unsplash.com/photo-1606471191009-63994c53433b?q=80&w=500&auto=format&fit=crop' }, { id: 7, category: 'Desserts', name: 'Pan Cake', price: '295', description: 'Fluffy batter, warm maple drizzle, butter melt.', image: 'https://images.unsplash.com/photo-1589119908995-c6837fa14848?q=80&w=500&auto=format&fit=crop' }, { id: 8, category: 'Drinks', name: 'Lemon Water', price: '120', description: 'Fresh lemon extract, fizzy soda, a hint of mint.', image: 'https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=500&auto=format&fit=crop' }, ]; const Navbar = () => { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { name: 'Home', href: '#home' }, { name: 'The Story', href: '#about' }, { name: 'Menu', href: '#menu' }, { name: 'Gallery', href: '#gallery' }, ]; return ( <> <nav className={`fixed w-full z-50 transition-all duration-500 border-b ${scrolled ? 'bg-brand-black/80 backdrop-blur-md border-white/10 py-4' : 'bg-transparent border-transparent py-8'}`}> <div className="container mx-auto px-6 flex justify-between items-center"> <a href="#" className="font-serif text-3xl font-light tracking-tight text-white z-50 relative"> Savor<span className="text-brand-gold mx-1">&</span>Stone </a> <div className="hidden md:flex items-center space-x-12"> {links.map((link) => ( <a key={link.name} href={link.href} className="text-xs uppercase tracking-[0.2em] text-brand-gray hover:text-white transition-colors duration-300"> {link.name} </a> ))} <a href="#reservation" className="px-8 py-3 border border-brand-gold text-brand-gold text-xs uppercase tracking-[0.2em] hover:bg-brand-gold hover:text-brand-black transition-all duration-300"> Reserve </a> </div> <button className="md:hidden focus:outline-none z-50 text-white" onClick={() => setMobileOpen(!mobileOpen)}> {mobileOpen ? <IconX /> : <IconMenu />} </button> </div> </nav> <div className={`fixed inset-0 bg-brand-black z-40 flex items-center justify-center transition-transform duration-500 ease-out ${mobileOpen ? 'translate-y-0' : '-translate-y-full'}`}> <div className="flex flex-col items-center space-y-8"> {links.map((link) => ( <a key={link.name} href={link.href} className="font-serif text-4xl text-white hover:text-brand-gold transition-colors italic" onClick={() => setMobileOpen(false)}> {link.name} </a> ))} <a href="#reservation" onClick={() => setMobileOpen(false)} className="mt-8 px-10 py-4 bg-brand-gold text-brand-black text-sm uppercase tracking-widest font-bold"> Book a Table </a> </div> </div> </> ); }; const Hero = () => { return ( <section id="home" className="relative h-screen w-full overflow-hidden"> <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=1920&auto=format&fit=crop')] bg-cover bg-center opacity-40 scale-105 animate-[pulse_10s_ease-in-out_infinite_alternate]"></div> <div className="absolute inset-0 bg-gradient-to-b from-brand-black/60 via-transparent to-brand-black"></div> <div className="relative z-10 h-full flex flex-col items-center justify-center text-center px-6"> <div className="space-y-6 animate-fade-up"> <p className="text-brand-gold text-xs uppercase tracking-[0.4em] border-b border-brand-gold/30 pb-4 inline-block mx-auto"> Est. 2025 • Davangere </p> <h1 className="font-serif text-6xl md:text-8xl lg:text-9xl text-white leading-none"> Culinary <br/> <span className="italic text-brand-gray font-light">Heritage</span> </h1> <p className="max-w-md mx-auto text-brand-gray text-sm md:text-base leading-relaxed font-light tracking-wide pt-4"> An immersive dining experience where authentic Indian flavors meet modern precision. </p> </div> <div className="absolute bottom-12 animate-bounce duration-[2000ms] opacity-50 hover:opacity-100 transition-opacity cursor-pointer"> <a href="#about" className="text-white flex flex-col items-center gap-2 text-[10px] uppercase tracking-widest"> Explore <IconArrowDown /> </a> </div> </div> </section> ); }; const About = () => { return ( <section id="about" className="py-32 bg-brand-black relative overflow-hidden"> <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none opacity-[0.03]"> <span className="font-serif text-[20vw] leading-none text-white whitespace-nowrap absolute top-10 -left-20">SPICE</span> </div> <div className="container mx-auto px-6 relative z-10"> <div className="grid md:grid-cols-2 gap-20 items-center"> <div className="relative group"> <div className="absolute -inset-4 border border-brand-gold/30 translate-x-4 translate-y-4 transition-transform duration-500 group-hover:translate-x-2 group-hover:translate-y-2"></div> <img src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?q=80&w=800&auto=format&fit=crop" alt="Chef plating" className="w-full h-[600px] object-cover grayscale group-hover:grayscale-0 transition-all duration-700 relative z-10"/> </div> <div className="space-y-10"> <h2 className="font-serif text-5xl md:text-6xl text-white leading-tight"> Tradition in every<br/> <span className="text-brand-gold italic">Bite.</span> </h2> <div className="w-12 h-[1px] bg-brand-gold"></div> <div className="space-y-6 text-brand-gray font-light leading-relaxed"> <p>Savor & Stone celebrates the rich tapestry of Indian vegetarian cuisine. We believe that true flavor comes from patience—slow-cooked dals, hand-ground spices, and recipes passed down through generations.</p> <p>Led by Executive Chef Aryan Malhotra, our kitchen transforms humble ingredients into a royal feast, sourcing locally to ensure every dish sings with freshness and authenticity.</p> </div> <div className="pt-4"> <a href="#menu" className="group inline-flex items-center gap-4 text-white text-xs uppercase tracking-widest hover:text-brand-gold transition-colors"> <span>Discover Our Menu</span> <span className="w-12 h-[1px] bg-white group-hover:bg-brand-gold transition-colors"></span> </a> </div> </div> </div> </div> </section> ); }; const Menu = () => { const [activeCategory, setActiveCategory] = useState('Starters'); const categories = ['Starters', 'Mains', 'Desserts', 'Drinks']; const filteredItems = menuItems.filter(item => item.category === activeCategory); return ( <section id="menu" className="py-32 bg-brand-dark"> <div className="container mx-auto px-6"> <div className="flex flex-col items-center text-center mb-20"> <span className="text-brand-gold text-xs uppercase tracking-[0.3em] mb-4">Royal Vegetarian Selections</span> <h2 className="font-serif text-5xl md:text-6xl text-white mb-12">The Menu</h2> <div className="flex flex-wrap justify-center gap-8 md:gap-16 border-b border-white/10 pb-4"> {categories.map(cat => ( <button key={cat} onClick={() => setActiveCategory(cat)} className={`text-sm uppercase tracking-[0.2em] pb-4 border-b border-transparent transition-all duration-300 ${activeCategory === cat ? 'text-brand-gold border-brand-gold -mb-[1px]' : 'text-brand-gray hover:text-white'}`} > {cat} </button> ))} </div> </div> <div className="grid md:grid-cols-2 gap-x-20 gap-y-12 max-w-6xl mx-auto"> {filteredItems.map((item, idx) => ( <div key={item.id} className="group flex items-start gap-6 animate-fade-up" style={{animationDelay: `${idx * 100}ms`}}> <div className="w-24 h-24 overflow-hidden flex-shrink-0"> <img src={item.image} alt={item.name} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-700" /> </div> <div className="flex-1 pt-2"> <div className="flex justify-between items-baseline border-b border-white/10 pb-3 mb-3 group-hover:border-brand-gold/50 transition-colors"> <h3 className="font-serif text-2xl text-white">{item.name}</h3> <span className="text-brand-gold font-serif text-xl italic">₹{item.price}</span> </div> <p className="text-brand-gray text-sm font-light leading-relaxed">{item.description}</p> </div> </div> ))} </div> </div> </section> ); }; const Gallery = () => { return ( <section id="gallery" className="py-0 bg-brand-black"> <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 h-[80vh] md:h-[60vh]"> <div className="relative group overflow-hidden"> <img src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=600&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-80 group-hover:opacity-100" alt="Lassi" /> <div className="absolute inset-0 bg-brand-black/20 group-hover:bg-transparent transition-colors"></div> </div> <div className="relative group overflow-hidden lg:col-span-2"> <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=1200&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-80 group-hover:opacity-100" alt="Restaurant Interior" /> </div> <div className="relative group overflow-hidden"> <img src="https://images.unsplash.com/photo-1631452180519-c014fe946bc7?q=80&w=600&auto=format&fit=crop" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 opacity-80 group-hover:opacity-100" alt="Plated Food" /> </div> </div> <div className="bg-brand-gold text-brand-black py-4 text-center"> <a href="https://www.instagram.com/jain.trinity/" target="_blank" className="text-xs uppercase tracking-widest font-bold hover:text-white transition-colors">Follow @SavorStone</a> </div> </section> ); }; const Reservation = () => { const [status, setStatus] = useState(''); const handleSubmit = (e) => { e.preventDefault(); setStatus('submitting'); setTimeout(() => setStatus('success'), 1500); }; return ( <section id="reservation" className="py-32 bg-brand-black relative flex items-center justify-center"> <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div> <div className="container mx-auto px-6 max-w-2xl relative z-10"> <div className="text-center mb-12"> <h2 className="font-serif text-5xl text-white mb-4">Secure Your Table</h2> <p className="text-brand-gray font-light">Experience the night with us.</p> </div> {status === 'success' ? ( <div className="bg-brand-dark border border-brand-gold/20 p-12 text-center animate-fade-up"> <div className="inline-block p-4 rounded-full bg-brand-gold/10 text-brand-gold mb-6"> <IconStar /> </div> <h3 className="font-serif text-3xl text-white mb-2">Confirmed</h3> <p className="text-brand-gray">We await your arrival.</p> <button onClick={() => setStatus('')} className="mt-8 text-xs uppercase tracking-widest text-brand-gold hover:text-white transition-colors">Book Another</button> </div> ) : ( <form onSubmit={handleSubmit} className="space-y-10"> <div className="grid grid-cols-1 md:grid-cols-2 gap-10"> <div className="group relative"> <input type="text" required placeholder=" " className="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b border-brand-gray appearance-none focus:outline-none focus:ring-0 focus:border-brand-gold peer" /> <label className="peer-focus:font-medium absolute text-sm text-brand-gray duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-brand-gold peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 uppercase tracking-widest text-[10px]">Name</label> </div> <div className="group relative"> <input type="email" required placeholder=" " className="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b border-brand-gray appearance-none focus:outline-none focus:ring-0 focus:border-brand-gold peer" /> <label className="peer-focus:font-medium absolute text-sm text-brand-gray duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-brand-gold peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 uppercase tracking-widest text-[10px]">Email</label> </div> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-10"> <div className="group relative"> <input type="date" required className="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b border-brand-gray appearance-none focus:outline-none focus:ring-0 focus:border-brand-gold peer [color-scheme:dark]" /> <label className="peer-focus:font-medium absolute text-sm text-brand-gray duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-brand-gold peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 uppercase tracking-widest text-[10px]">Date</label> </div> <div className="group relative"> <select required className="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b border-brand-gray appearance-none focus:outline-none focus:ring-0 focus:border-brand-gold peer"> <option value="" className="bg-brand-dark">Select Time</option> <option value="18:00" className="bg-brand-dark">06:00 PM</option> <option value="19:00" className="bg-brand-dark">07:00 PM</option> <option value="20:00" className="bg-brand-dark">08:00 PM</option> <option value="21:00" className="bg-brand-dark">09:00 PM</option> </select> <label className="peer-focus:font-medium absolute text-sm text-brand-gray duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-brand-gold peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 uppercase tracking-widest text-[10px]">Time</label> </div> <div className="group relative"> <select required className="block py-2.5 px-0 w-full text-sm text-white bg-transparent border-0 border-b border-brand-gray appearance-none focus:outline-none focus:ring-0 focus:border-brand-gold peer"> <option value="2" className="bg-brand-dark">2 Guests</option> <option value="3" className="bg-brand-dark">3 Guests</option> <option value="4" className="bg-brand-dark">4 Guests</option> <option value="5" className="bg-brand-dark">5+ Guests</option> </select> <label className="peer-focus:font-medium absolute text-sm text-brand-gray duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-brand-gold peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 uppercase tracking-widest text-[10px]">Guests</label> </div> </div> <button type="submit" className="w-full py-5 bg-brand-gold text-brand-black font-bold text-xs uppercase tracking-[0.2em] hover:bg-white transition-colors duration-300 mt-8"> {status === 'submitting' ? 'Processing...' : 'Request Reservation'} </button> </form> )} </div> </section> ); }; const Footer = () => { return ( <footer className="bg-brand-black py-20 border-t border-white/5 text-brand-gray text-sm font-light"> <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8"> <div className="text-center md:text-left"> <h4 className="font-serif text-2xl text-white mb-2">Savor & Stone</h4> <p>4244 S S Layout B Block,Davangere-577004</p> </div> <div className="flex gap-8"> <a href="https://www.instagram.com/jain.trinity/" className="hover:text-brand-gold transition-colors uppercase tracking-wider text-xs">Instagram</a> <a href="https://www.facebook.com/jaintrinitycollege/" className="hover:text-brand-gold transition-colors uppercase tracking-wider text-xs">Facebook</a> <a href="mailto:contact@jtcollege.org" className="hover:text-brand-gold transition-colors uppercase tracking-wider text-xs">Email</a> </div> <div className="text-center md:text-right"> <p>© 2025 Savor & Stone. All Rights Reserved.</p> </div> </div> </footer> ); }; const App = () => { return ( <div className="w-full"> <Navbar /> <Hero /> <About /> <Menu /> <Gallery /> <Reservation /> <Footer /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); </script> </body> </html>
Copy to clipboard
Select all
Download .html
Open in new tab
Tip: use
Ctrl/⌘ + V
to paste where needed.