🍝

Restaurant Website

Beautiful restaurant template with menu, about section, and reservations. Perfect for cafes and fine dining.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Bella Vita | Italian Restaurant</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <div class="container">
      <a href="#" class="logo">La Bella Vita</a>
      <div class="nav-links">
        <a href="#home">Home</a>
        <a href="#menu">Menu</a>
        <a href="#about">About</a>
        <a href="#reservations">Reservations</a>
        <a href="#contact">Contact</a>
      </div>
      <button class="mobile-menu"><i class="fas fa-bars"></i></button>
    </div>
  </nav>
  
  <section id="home" class="hero">
    <div class="hero-overlay"></div>
    <div class="container">
      <div class="hero-content">
        <div class="hero-badge">Est. 1985</div>
        <h1>Authentic Italian<br>Cuisine</h1>
        <p>Experience the taste of Italy in the heart of the city. Family recipes passed down for generations.</p>
        <div class="hero-buttons">
          <a href="#menu" class="btn-primary">View Menu <i class="fas fa-arrow-right"></i></a>
          <a href="#reservations" class="btn-secondary">Reserve a Table <i class="fas fa-calendar-alt"></i></a>
        </div>
      </div>
    </div>
  </section>
  
  <section id="menu" class="menu">
    <div class="container">
      <div class="section-header">
        <span class="section-tag">Our Menu</span>
        <h2>Today's Specials</h2>
        <p>Chef's selection of authentic Italian dishes made with fresh, local ingredients.</p>
      </div>
      <div class="menu-grid">
        <div class="menu-category">
          <h3>🍝 Pasta</h3>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Spaghetti Carbonara</h4>
              <p>Classic Roman pasta with eggs, pecorino, guanciale, and black pepper</p>
            </div>
            <div class="menu-price">$18.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Fettuccine Alfredo</h4>
              <p>Creamy parmesan sauce with fresh parsley and cracked black pepper</p>
            </div>
            <div class="menu-price">$16.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Lobster Ravioli</h4>
              <p>Homemade ravioli filled with lobster in a creamy tomato sauce</p>
            </div>
            <div class="menu-price">$24.99</div>
          </div>
        </div>
        
        <div class="menu-category">
          <h3>🍕 Pizza</h3>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Margherita</h4>
              <p>San Marzano tomatoes, fresh mozzarella, basil, and olive oil</p>
            </div>
            <div class="menu-price">$14.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Diavola</h4>
              <p>Spicy salami, tomato sauce, mozzarella, and chili flakes</p>
            </div>
            <div class="menu-price">$16.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Quattro Formaggi</h4>
              <p>Four cheese blend: mozzarella, gorgonzola, parmesan, ricotta</p>
            </div>
            <div class="menu-price">$17.99</div>
          </div>
        </div>
        
        <div class="menu-category">
          <h3>🥩 Main Courses</h3>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Osso Buco</h4>
              <p>Braised veal shanks with gremolata and saffron risotto</p>
            </div>
            <div class="menu-price">$32.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Grilled Branzino</h4>
              <p>Mediterranean sea bass with lemon, herbs, and roasted vegetables</p>
            </div>
            <div class="menu-price">$28.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Chicken Parmigiana</h4>
              <p>Breaded chicken breast topped with marinara and melted mozzarella</p>
            </div>
            <div class="menu-price">$22.99</div>
          </div>
        </div>
        
        <div class="menu-category">
          <h3>🍰 Desserts</h3>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Tiramisu</h4>
              <p>Classic Italian dessert with mascarpone, espresso, and cocoa</p>
            </div>
            <div class="menu-price">$9.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Panna Cotta</h4>
              <p>Vanilla bean panna cotta with berry compote</p>
            </div>
            <div class="menu-price">$8.99</div>
          </div>
          <div class="menu-item">
            <div class="menu-info">
              <h4>Cannoli Siciliani</h4>
              <p>Crispy pastry shells filled with sweet ricotta and chocolate chips</p>
            </div>
            <div class="menu-price">$7.99</div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section id="about" class="about">
    <div class="container">
      <div class="about-grid">
        <div class="about-content">
          <span class="section-tag">Our Story</span>
          <h2>Family Tradition Since 1985</h2>
          <p>For over 35 years, La Bella Vita has been serving authentic Italian cuisine made with love and tradition. Our family recipes have been passed down through generations, and we take pride in using only the freshest ingredients.</p>
          <p>Every dish tells a story of passion, quality, and dedication to the culinary arts. We invite you to join us for an unforgettable dining experience.</p>
          <a href="#" class="btn-primary">Learn More <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="about-image">
          🍷
        </div>
      </div>
    </div>
  </section>
  
  <section id="reservations" class="reservations">
    <div class="container">
      <div class="section-header">
        <span class="section-tag">Reservations</span>
        <h2>Book Your Table</h2>
        <p>Reserve your table online for an unforgettable dining experience.</p>
      </div>
      <form class="reservation-form" id="reservationForm">
        <div class="form-grid">
          <input type="text" placeholder="Your Name" required>
          <input type="email" placeholder="Email Address" required>
          <input type="tel" placeholder="Phone Number" required>
          <input type="date" placeholder="Date" required>
          <input type="time" placeholder="Time" required>
          <select required>
            <option value="">Number of Guests</option>
            <option>1 Guest</option>
            <option>2 Guests</option>
            <option>3 Guests</option>
            <option>4 Guests</option>
            <option>5+ Guests</option>
          </select>
        </div>
        <textarea rows="4" placeholder="Special Requests (dietary restrictions, occasions, etc.)"></textarea>
        <button type="submit" class="btn-primary">Reserve Now <i class="fas fa-calendar-check"></i></button>
      </form>
    </div>
  </section>
  
  <section id="contact" class="contact">
    <div class="container">
      <div class="contact-grid">
        <div>
          <h3><i class="fas fa-map-marker-alt"></i> Visit Us</h3>
          <p>123 Main Street<br>Downtown, CA 94105</p>
        </div>
        <div>
          <h3><i class="fas fa-phone"></i> Call Us</h3>
          <p>(555) 123-4567</p>
        </div>
        <div>
          <h3><i class="fas fa-envelope"></i> Email Us</h3>
          <p>info@labellavita.com</p>
        </div>
        <div>
          <h3><i class="fas fa-clock"></i> Hours</h3>
          <p>Mon-Sun: 11am - 10pm</p>
        </div>
      </div>
    </div>
  </section>
  
  <footer>
    <div class="container">
      <div class="footer-content">
        <p>© 2025 La Bella Vita. All rights reserved. Built with <i class="fas fa-heart"></i> by WordTune®</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-instagram"></i></a>
          <a href="#"><i class="fab fa-facebook-f"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
        </div>
      </div>
    </div>
  </footer>
  
  <script src="script.js"></script>
</body>
</html>

/* Restaurant Website Styles */
:root {
  --primary: #e94560;
  --primary-dark: #c7354e;
  --secondary: #2d6a4f;
  --dark: #1a1a2e;
  --light: #fef9f4;
  --gray: #666;
  --white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  line-height: 1.6;
}

h1, h2, h3, .logo {
  font-family: 'Playfair Display', serif;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--primary);
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--primary);
}

.mobile-menu {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Hero */
.hero {
  min-height: 100vh;
  background: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1600') center/cover fixed;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: 4.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background: white;
  color: var(--dark);
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-tag {
  display: inline-block;
  background: rgba(233,69,96,0.1);
  color: var(--primary);
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-header p {
  color: var(--gray);
  max-width: 600px;
  margin: 0 auto;
}

/* Menu */
.menu {
  padding: 5rem 0;
  background: var(--light);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 3rem;
}

.menu-category h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px dashed #ddd;
}

.menu-info h4 {
  margin-bottom: 0.3rem;
}

.menu-info p {
  color: var(--gray);
  font-size: 0.85rem;
}

.menu-price {
  font-weight: 700;
  color: var(--primary);
  font-size: 1.1rem;
}

/* About */
.about {
  padding: 5rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  color: var(--gray);
  margin-bottom: 1rem;
}

.about-image {
  background: linear-gradient(135deg, var(--primary), #ff8c42);
  border-radius: 24px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
}

/* Reservations */
.reservations {
  padding: 5rem 0;
  background: var(--light);
}

.reservation-form {
  max-width: 800px;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.reservation-form input,
.reservation-form select,
.reservation-form textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
}

.reservation-form textarea {
  resize: vertical;
  margin-bottom: 1rem;
}

.reservation-form button {
  width: 100%;
  cursor: pointer;
}

/* Contact */
.contact {
  padding: 4rem 0;
  background: var(--dark);
  color: white;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.contact h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.contact i {
  color: var(--primary);
  margin-right: 0.5rem;
}

.contact p {
  color: #aaa;
}

/* Footer */
footer {
  background: #0f0f1a;
  color: #888;
  padding: 2rem 0;
  text-align: center;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  color: #888;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.social-links a:hover {
  color: var(--primary);
}

footer i {
  color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .section-header h2 {
    font-size: 1.8rem;
  }
  .menu-grid {
    grid-template-columns: 1fr;
  }
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-content {
    flex-direction: column;
  }
}

// Restaurant Website JavaScript

// Mobile Menu Toggle
const mobileMenu = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');

if (mobileMenu) {
  mobileMenu.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    mobileMenu.classList.toggle('active');
  });
}

// Smooth Scroll
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' });
      if (navLinks.classList.contains('active')) {
        navLinks.classList.remove('active');
        mobileMenu.classList.remove('active');
      }
    }
  });
});

// Reservation Form Handler
const reservationForm = document.getElementById('reservationForm');
if (reservationForm) {
  reservationForm.addEventListener('submit', (e) => {
    e.preventDefault();
    alert('🎉 Thank you for your reservation! We will confirm shortly.');
    reservationForm.reset();
  });
}

// Intersection Observer for animations
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
    }
  });
}, observerOptions);

document.querySelectorAll('.menu-item, .menu-category').forEach(el => {
  el.style.opacity = '0';
  el.style.transform = 'translateY(20px)';
  el.style.transition = 'all 0.5s ease';
  observer.observe(el);
});

console.log('Restaurant website ready!');

HTML

This restaurant template includes full menu, about section, reservation form, and contact info.

Live Demo

Restaurant Website

Restaurant Website - Live Preview