-

RESTAURANT   PAGE

 USING HTML AND CSS



HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alif</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Header">
        <nav>
            <h1>Alif</h1>
<ul>
   
    <li>Home|</li>
    <li>Recipe|</li>
    <li>Contact|</li>
</ul>
</nav>
    </div>

    <div class="product">
        <div class="box">
        <img src="cake.jpeg" alt="cake">
        <p> In a bowl, combine 1 cup of sugar, 1 cup of flour, 1/3 cup of cocoa powder, 1 teaspoon of baking powder, 1/2 teaspoon of baking soda, 1/2 teaspoon of salt, 1/2 cup of milk, 1/4 cup of vegetable oil, 1 egg, and 1 teaspoon of vanilla extract..
        </p></div>
   
    <div class="box">
    <img src="chik salad.jpeg" alt="salad">
    <p>Combine 2 cups of cooked, shredded chicken, 1/2 cup of mayonnaise, 1/4 cup of chopped celery, 1/4 cup of chopped onion, 1 tablespoon of lemon juice, salt, and pepper. Mix well and serve chilled on a bed of lettuce or in sandwiches.</p>
</div>
<div class="box">
<img src="pran.jpeg" alt="">
<p>Sauté 1 pound of sliced beef with 1 tablespoon of ginger-garlic paste, 1 teaspoon of turmeric, and salt until browned. Add 2 sliced onions, 2 green chilies, and 1 tablespoon of black pepper, then cook until onions are caramelized and the beef is tender.</p>
</div>
</div>
 <div class="Contact">
<h1>Contact Us</h1><br>
<center>
   
<form>
    <table>
        <tr>
            <td>Name</td><td><input type="text" placeholder="Enter ur name"></td>
           <tr>
            <td>Age</td><td><input type="number" placeholder="Enter ur Age"></td>
           </tr>
           <tr>
            <td>Email</td><td><input type="email" placeholder="Enter ur Email"></td>
           </tr>
        </table>
</form>        
           
           </center><br>
           
       <button>Send</button>
   

    </div>
   
   
</body>
</html>



CSS:

nav{
    background-color: black;
    color: white;
    text-align: center;
    padding: 20px;
    margin: 10px;
   
}
li{
    display: inline-block;
    color: gray;
    cursor: pointer;
}
h1{
    display: inline;
   
}
li:hover{
    color: white;
}
.box{
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    width: 220px;  
}
.Contact{
    text-align: center;
    background-color: black;
    color: white;
    padding: 20px;
    margin: 10px;
}
table{
    text-align: center;
}
   button{
    width: 150px;
    color: blue;
    background-color:chartreuse
   }
   .box:hover{
    background-color: black;
    color: white;
}



.product{
    text-align: center;
}



OUTPUT:



Comments

Post a Comment