Start learning

Restaurant Free Templates

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


Simple Restaurant website Templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <h1>Restaurant Name</h1>
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Menu</a>
    <a href="#">Contact</a>
</nav>

<div class="menu-container">
    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Main Course
        </div>
        <div class="menu-description">Description: Delicious main course dishes</div>
        <div class="menu-price">Price: $15.99</div>
    </div>

    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Appetizers
        </div>
        <div class="menu-description">Description: Tasty appetizers to start your meal</div>
        <div class="menu-price">Price: $8.99</div>
    </div>

    <div class="menu-item">
        <div class="menu-title" onclick="toggleDetails(this)">
            Desserts
        </div>
        <div class="menu-description">Description: Sweet treats to satisfy your cravings</div>
        <div class="menu-price">Price: $6.99</div>
    </div>
</div>
<script>
    function toggleDetails(element) {
        const item = element.parentElement;
        const description = item.querySelector('.menu-description');
        const price = item.querySelector('.menu-price');
        if (description.style.display === 'block') {
            description.style.display = 'none';
            price.style.display = 'none';
        } else {
            description.style.display = 'block';
            price.style.display = 'block';
        }
    }
</script>
</body>
</html>

  body {
    font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f5f5f5;
 }

header {
     background-color: #333;
     color: white;
     padding: 10px;
     text-align: center;
 }

nav {
     background-color: #444;
     overflow: hidden;
 }

nav a {
     float: left;
     display: block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
 }

nav a:hover {
     background-color: #ddd;
     color: black;
 }

.menu-container {
     padding: 20px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 20px;
       }

 .menu-item {
     position: relative;
     background-color: #fff;
     border: 1px solid #ddd;
     padding: 15px;
     text-align: center;
     transition: transform 0.3s;
 }

 .menu-item:hover {
     transform: scale(1.05);
 }

 .menu-title {
     font-size: 1.2em;
     font-weight: bold;
     cursor: pointer;
 }

 .menu-description,
 .menu-price {
     display: none;
 }

 .menu-item:hover .menu-description,
 .menu-item:hover .menu-price {
           display: block;
 }

Preview