project for resturant
تفاصيل العمل
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>FoodHouse Restaurant</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="nav"> <h2 class="logo">FoodHouse</h2> <ul> <li>Home</li> <li>Menu</li> <li>Contact</li> </ul> </nav> <header class="hero"> <h1>Welcome to FoodHouse</h1> <p>The best meals in your city!</p> <button id="menuBtn">View Menu</button> </header> <section class="menu" id="menuSection"> <h2>Our Menu</h2> <div class="grid" id="menuGrid"></div> </section> <script src="script.js"></script> </body> </html> ``css body { margin: 0; font-family: Arial; } .nav { display: flex; justify-content: space-between; padding: 20px; background: #c0392b; color: white; } .nav ul { list-style: none; display: flex; gap: 20px; } .hero { background: url('https://i.imgur.com/0Zg7Y1J.jpeg'); background-size: cover; padding: 120px; text-align: center; color: white; } .menu { padding: 40px; text-align: center; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { padding: 15px; background: white; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .card img { width: 100%; border-radius: 10px; } `javascript <head> <title>FashionStore</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="nav"> <h2>FashionStore</h2> </nav> <header class="hero"> <h1>New Collection 2025</h1> <button id="showProducts">Show Products</button> </header> <section class="products" id="productsSec"> <h2>Our Products</h2> <div class="grid" id="prodGrid"></div> </section> <script src="script.js"></script> </body> </html> ``` ## 📌 style.css ```css .nav { padding: 20px; background: black; color: white; } .hero { background: url('https://i.imgur.com/ck4F3Kf.jpeg'); background-size: cover; padding: 150px; color: white; text-align: center; } .products { padding: 40px; text-align: center; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .card { background: #fff; padding: 15px; border-radius: 10px; } .card img { width: 100%; } `javascript const menu = [ { name: "Pizza", price: "$12", img: "https://i.imgur.com/ieN1hCL.jpeg" }, { name: "Burger", price: "$8", img: "https://i.imgur.com/Z4KQ5xK.jpeg" }, { name: "Pasta", price: "$10", img: "https://i.imgur.com/HdK3d7C.jpeg" }, ]; const menuGrid = document.getElementById("menuGrid"); const menuBtn = document.getElementById("menuBtn"); const menuSection = document.getElementById("menuSection"); menuBtn.onclick = () => { menuGrid.innerHTML = menu .map( (item) => ` <div class="card"> <img src="${item.img}" /> <h3>${item.name}</h3> <p>${item.price}</p> </div>` ) .join(""); menuSection.scrollIntoView({ behavior: "smooth" }); };
مهارات العمل
