How to make this look like a decent resturant hompage using the following - in h
ID: 3600719 • Letter: H
Question
How to make this look like a decent resturant hompage using the following - in html5
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="resturantstyle.css">
<title>Fresh Grill</title>
</head>
<body>
<div class="blended_grid">
<div class="pageHeader">
Fresh Grill
<img src="rest.jpeg" alt="">
</div>
<div class="pageHeaderSub">
</div>
<div class="pageBarLeft">
<div class="pageBarLeftTop">
</div>
<div class="pageBarLeftButtom">
</div>
</div>
<div class="pageContent">
<p> Dear guests, you are welcomed to dine with us at Good Food restaurant.
We will serve you with the mouth watering dishes. Have a pleasant dining experience. </p>
</div>
<div class="pageBarRight">
<div class="pageBarRightTop">
</div>
<div class="pageBarRightButtom">
</div>
</div>
<div class="pageFooter">
<a href="http://www.albany.edu/~cb197214/foodmenu.html"> Food Menu |</a>
<a href="http://www.albany.edu/~RO778458/drinkmenu.html"> Drink Menu |</a>
<a href="http://www.albany.edu/~cb197214/contact.html"> Contact Us |</a>
</div>
<div class="pageFooterSub">
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------
css
.blended_grid{
display : block;
width : 1000px;
overflow : auto;
margin : 50px auto 0 auto;
}
.pageHeader{
background-color : rgba(4,139,255,0.4);
float : left;
clear : none;
height : 200px;
width : 1000px;
text-align:center;
font-size: 100px;
}
.pageHeaderSub{
background-color:rgba(252,255,124,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageBarLeft{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarLeftTop{
background-color : rgba(0,107,243,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarLeftButtom{
background-color : rgba(0,96,235,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageContent{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 600px;
width : 600px;
text-align:center;
}
.pageBarRight{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarRightTop{
background-color : rgba(0,89,227,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarRightButtom{
background-color : rgba(0,82,219,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageFooter{
background-color : rgba(0,83,235,0.4);
float : left;
clear : none;
height : 150px;
width : 1000px;
}
.pageFooterSub{
background-color : rgba(0,77,227,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageHeader{
background-color : rgba(4,139,255,0.4);
float : left;
clear : none;
height : 200px;
width : 1000px;
}
.pageHeaderSub{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageBarLeft{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarLeftTop{
background-color : rgba(0,107,243,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarLeftButtom{
background-color : rgba(0,96,235,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageContent{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 600px;
width : 600px;
}
.pageBarRight{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarRightTop{
background-color : rgba(0,89,227,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarRightButtom{
background-color : rgba(0,82,219,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageFooter{
background-color : rgba(0,83,235,0.4);
float : left;
clear : none;
height : 150px;
width : 1000px;
text-align:center;
}
.pageFooterSub{
background-color : rgba(0,77,227,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
Explanation / Answer
Solution=========================
css================
.blended_grid{
display : block;
width : 1000px;
overflow : auto;
margin : 50px auto 0 auto;
}
.pageHeader{
background-color : rgba(4,139,255,0.4);
float : left;
clear : none;
height : 200px;
width : 1000px;
text-align:center;
font-size: 100px;
}
.pageHeaderSub{
background-color:rgba(252,255,124,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageBarLeft{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarLeftTop{
background-color : rgba(0,107,243,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarLeftButtom{
background-color : rgba(0,96,235,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageContent{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 600px;
width : 600px;
text-align:center;
}
.pageBarRight{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarRightTop{
background-color : rgba(0,89,227,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarRightButtom{
background-color : rgba(0,82,219,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageFooter{
background-color : rgba(0,83,235,0.4);
float : left;
clear : none;
height : 25px;
width : 1000px;
}
.pageFooterSub{
background-color : rgba(0,77,227,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageHeader{
background-color : rgba(4,139,255,0.4);
float : left;
clear : none;
height : 200px;
width : 1000px;
}
.pageHeaderSub{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
.pageBarLeft{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarLeftTop{
background-color : rgba(0,107,243,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarLeftButtom{
background-color : rgba(0,96,235,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageContent{
background-color : rgba(252,255,124,0.4);
float : left;
clear : none;
height : 600px;
width : 600px;
}
.pageBarRight{
float : left;
clear : none;
min-width : 80px;
min-height : 80px;
}
.pageBarRightTop{
background-color : rgba(0,89,227,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageBarRightButtom{
background-color : rgba(0,82,219,0.4);
float : none;
clear : both;
height : 250px;
width : 200px;
}
.pageFooter{
background-color : rgba(0,83,235,0.4);
float : left;
clear : none;
height : 150px;
width : 1000px;
text-align:center;
}
.pageFooterSub{
background-color : rgba(0,77,227,0.4);
float : left;
clear : none;
height : 50px;
width : 1000px;
}
table{
margin-left:152px;
margin-top:20px;
margin-bottom:20px;
}
table, td, th {
border: 1px solid rgba(0,77,227,0.4);
text-align: center;
font-size:25px;
}
td:hover {background-color: rgba(0,77,227,0.4)}
p {
text-align: center;
}
ul li {
text-align: left;
}
html====================
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="resturantstyle.css">
<title>Fresh Grill</title>
</head>
<body>
<div class="blended_grid">
<div class="pageHeader">
Fresh Grill
<img src="rest.jpeg" alt="">
</div>
<div class="pageHeaderSub">
<p>
Dear guests, you are welcomed to dine with us at Good Food restaurant.
We will serve you with the mouth watering dishes. Have a pleasant dining experience.
</p>
</div>
<div class="pageBarLeft">
<div class="pageBarLeftTop">
</div>
<div class="pageBarLeftButtom">
</div>
</div>
<div class="pageContent">
<br>
<ol>
<li><b> Choose your favouraite dish:</b>
<table >
<tr><td>Pizza Marinara</td></tr>
<tr><td>Pizza Margherita</td></tr>
<tr><td>Chicago Pizza</td></tr>
<tr><td>New York Style Pizza</td></tr>
<tr><td>Sicilian Pizza</td></tr>
<tr><td>Greek Pizza</td></tr>
<tr><td>California Pizza</td></tr>
</table>
</li>
<br>
<li> <b>Place your order:</b>
<br>
<ul >
<li> You can call us on our toll-free number XXXX-XXXX-XXXX</li>
<li> You can order online vial debit/credit cards</li>
<li> You can walk in to our closest restraunt and order directly</li>
</ul>
<br>
<li><b> Enjoy our Serivices!!<b></li>
</ol>
</div>
<div class="pageBarRight">
<div class="pageBarRightTop">
</div>
<div class="pageBarRightButtom">
</div>
</div>
<div class="pageFooter">
<a href="http://www.albany.edu/~cb197214/foodmenu.html"> Food Menu |</a>
<a href="http://www.albany.edu/~RO778458/drinkmenu.html"> Drink Menu |</a>
<a href="http://www.albany.edu/~cb197214/contact.html"> Contact Us |</a>
</div>
<div class="pageFooterSub">
</div>
</div>
</body>
</html>
You can change pizza items to grill items.. Let me know if any issue...
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.