ابدأ التعلم

قوالب موقع مطعم مجانية

يمكنك نسخ الكود بحرية أو استخدام خدمتنا المجانية البرمجة المباشرة لتعديل الكود وفقًا لاحتياجاتك الخاصة.


قوالب مواقع ويب بسيطة للمطاعم

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

معاينة