Accueil

Modèles de restaurant gratuits

Vous pouvez librement copier le code ou utiliser notre éditeur HTML en direct pour modifier le code selon vos besoins spécifiques.


Modèles de sites web simples pour restaurants

<!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;
 }

Aperçu