HTML CODING FOR RESTAURANT
<!DOCTYPE html>
<html lang="en">
<head>
<title>RESTUARANT SPACE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>RESTAURANT SPACE</h1>
<p>MAKE YOUR OWN SPACE</p>
</div>
<div class="navbar">
<a href="#">HOME</a>
<a href="#">RESTAURANTS</a>
<a href="#">NEARBY</a>
<a href="#" class="right">CONTACT US</a>
</div>
<div class="row">
<div class="side">
<h2>PREMIUM RESTAURANT</h2>
<h5>Offer Day</h5>
<div class="C:\Users\HP\Downloads\OIP (2).jpg" style="height:200px;"></div>
<p>Click to make your restaurant space</p>
<h3>Famous restaurants</h3>
<p>Top Star Ratings</p>
<div class="C:\Users\HP\Downloads\OIP (2).jpg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>RESTAURANTS</h2>
<h5>Top Deals</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Famous Dishes</p>
<p>The Seaside Bistro
City: Tirukalukunram
Type of Food: Coastal Seafood
Description: All of our menu items are inspired by traditional coastal cuisine. Our head chef, after studying authentic coastal flavors, has created a delightful array of dishes. From fresh flown-in seafood to handcrafted cocktails, wine, and beer, we invite you to dine with us and experience an authentic coastal meal in our intimate dining space. We look forward to serving you! 🌊🦐🍹</p>
<br>
<h2>Roof Top Restaurants</h2>
<h5>Famous restaurants</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Famous Dishes</p>
<p>Smokehouse Grill
City: Tirukalukunram
Type of Food: BBQ, Southern, Cajun/Creole
Description: At Smokehouse Grill, we don’t reinvent food; we celebrate its rich flavors. Our generous portions of slow-smoked, sizzling prime chops are reminiscent of old butcher shops. Each chop is rubbed with a secret blend of seasonings, cured, and roasted on a pecan wood rotisserie for up to six hours. Topped with our signature herb-garlic butter, it’s then carved tableside. And remember, save room for dessert! 🍖🔥🍰</p>
</div>
</div>
<div class="footer">
<h2>contact us</h2>
<p>Phone Number</p>
<p>9123536024</p>
</div>
</body>
</html>
.jpeg)
Comments
Post a Comment
NAME
EMAIL ID
MESSAGE