Html - CSS project London Pizza, a local restaurant specializing in farm-fresh, local ingredients has come to you to imp
Posted: Thu Jul 14, 2022 2:12 pm
Html - CSS project
London Pizza, a local restaurant specializing in farm-fresh,local ingredients has come to you to improve their website. Theythink their menu should be displayed in a table format insteadof the current list format. They would also like you to build theman Order page with an online order form. Lastly, they are notranking very well in search engines. They would like you to improvetheir search engine rankings by adding in some keywords throughoutthe site.
The starting folder contains an index.html file anda main.css file that should act as your starting point.You should modify/add to these files as needed as well as add asecond HTML file for the Order page. Ensure all HTML tags areclosed appropriately and properly nested. Remember you can validateyour HTML code using this HTML Validator
You may utilize your class notes, examples and any notes postedunder FOL content for the course. If you run into any problems beaware that there are part marks for everything.
Step 1 : Modify/Add to theexisting index.html file:
Step 2 : Add a second page- order.html.
Step 3 : Optimize the website for search engines and adda description
Add some keywords to the page that will help the company rankhigher in search engine results.
Index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1">
<link rel="preconnect"href="https://fonts.googleapis.com">
<link rel="preconnect"href="https://fonts.gstatic.com" crossorigin>
<linkhref="https://fonts.googleapis.com/css2?famil ... stylesheet">
<link rel="preconnect"href="https://fonts.googleapis.com">
<link rel="stylesheet" type="text/css"href="main.css">
</head>
<body>
<main>
<header>
<h1>LondonPizza</h1>
</header>
<section id="hero">
<imgsrc="images/pizza.jpg" alt="a fresh pizza" />
<divid="heroParagraph">
<h2>Generic Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed fringilla mauris ut felis ultrices,
ornare semper mi consectetur. Etiam sollicitudin nec leo adignissim. Aliquam sit amet tincidunt
sem, sed ultricies nulla. Cras convallis neque at dolorlacinia rhoncus. Cras eu justo orci.
Praesent id vulputate magna. Integer vestibulum molestiepurus sed placerat. Phasellus gravida odio
non felis tempor dignissim. Phasellus semper sit amet lacusut faucibus.
</p>
</div>
</section>
<section id="menu">
<h2>Menu</h2>
<h3><u>Pizzas</u></h3>
<p>Pepperoni</p>
<ul>
<li>Large - $14.99</li>
<li>Medium - $10.99</li>
<li>Small - $9.99</li>
</ul>
<p>MeatLovers</p>
<ul>
<li>Large - $16.99</li>
<li>Medium - $12.99</li>
<li>Small - $10.99</li>
</ul>
<h3><u>Calzones</u></h3>
<p>Pepperoni</p>
<ul>
<li>Large - $16.99</li>
<li>Medium - $12.99</li>
<li>Small - $10.99</li>
</ul>
<p>MeatLovers</p>
<ul>
<li>Large - $18.99</li>
<li>Medium - $16.99</li>
<li>Small - $12.99</li>
</ul>
<h3><u>Salads</u></h3>
<p>Caesar</p>
<ul>
<li>Large - $10.99</li>
<li>Medium - $8.99</li>
<li>Small - $6.99</li>
</ul>
<p>Garden</p>
<ul>
<li>Large - $9.99</li>
<li>Medium - $7.99</li>
<li>Small - $5.99</li>
</ul>
</section>
</main>
<footer>
<p>© Copyright2021</p>
</footer>
</body>
</html>
main.css Code:
main, nav, section, footer {display: block;}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
}
header, footer{
background-color: #000;
padding: 3%;
color: #f0f0f0;
}
#heroParagraph{
color: #f0f0f0;
}
img{
width: 100%;
max-width: 100%;
}
h1,h2{
font-family: 'Bebas Neue', cursive;
}
h1{
font-size: 3em;
margin: 0;
}
h2{
font-size: 1.8em;
}
#hero{
background-color: #561420;
padding: 2%;
margin-bottom: 1em;
}
#menu{
text-align: center;
}
li{
list-style: none;
}
@media screen and (min-width: 900px){
#hero{
display: grid;
grid-template-columns: 45% 50%;
grid-template-rows: auto;
grid-template-areas: "heroImgheroPara";
column-gap: 2%;
}
#hero img{
grid-area: heroImg;
}
#heroParagraph{
grid-area: heroPara;
}
}
Home Page
Mark Breakdown: \begin{tabular}{|l|l|} \hline & Points (out of possible 10) \\ \hline The HTML and CSS code are correct with no syntax errors & 1 \\ \hline Restaurant menu is displayed on the home page using HTML table tag & 1 \\ \hline Table is styled correctly - heading background colour and text alignment matches screenshot & 1 \\ \hline Background colour of table rows changes on hover & 1 \\ \hline The Order Now button is added to the home page and links to order page & 1 \\ \hline The Order Now button is styled similar to screenshot (hint - background colour and border radius) & 1 \\ \hline Navigation menu is present with two links - 'Home' which links to index.html and 'Order' which links to order.html & 1 \\ \hline Order page uses HTML form tag to create the order form similar to screenshot & 1 \\ \hline Keywords are used appropriately throughout the page & 1 \\ \hline A description is added to the homepage with meta name="description" & 1 \\ \hline \end{tabular}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla mauris ut felis ultrices, ornare semper mi consectetur. Etiam sollicitudin nec leo a dignissim. Aliquam sit amet tincidunt sem, sed ultricies nulla. Cras convallis neque at dolor lacinia rhoncus. Cras eu justo orci. Praesent id vulputate magna. Integer vestibulum molestie purus sed placerat. Phasellus gravida odio non felis tempor dignissim. Phasellus semper sit amet lacus ut faucibus.
DBERPIIAONUNE Home Order
London Pizza, a local restaurant specializing in farm-fresh,local ingredients has come to you to improve their website. Theythink their menu should be displayed in a table format insteadof the current list format. They would also like you to build theman Order page with an online order form. Lastly, they are notranking very well in search engines. They would like you to improvetheir search engine rankings by adding in some keywords throughoutthe site.
The starting folder contains an index.html file anda main.css file that should act as your starting point.You should modify/add to these files as needed as well as add asecond HTML file for the Order page. Ensure all HTML tags areclosed appropriately and properly nested. Remember you can validateyour HTML code using this HTML Validator
You may utilize your class notes, examples and any notes postedunder FOL content for the course. If you run into any problems beaware that there are part marks for everything.
Step 1 : Modify/Add to theexisting index.html file:
Step 2 : Add a second page- order.html.
Step 3 : Optimize the website for search engines and adda description
Add some keywords to the page that will help the company rankhigher in search engine results.
Index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1">
<link rel="preconnect"href="https://fonts.googleapis.com">
<link rel="preconnect"href="https://fonts.gstatic.com" crossorigin>
<linkhref="https://fonts.googleapis.com/css2?famil ... stylesheet">
<link rel="preconnect"href="https://fonts.googleapis.com">
<link rel="stylesheet" type="text/css"href="main.css">
</head>
<body>
<main>
<header>
<h1>LondonPizza</h1>
</header>
<section id="hero">
<imgsrc="images/pizza.jpg" alt="a fresh pizza" />
<divid="heroParagraph">
<h2>Generic Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed fringilla mauris ut felis ultrices,
ornare semper mi consectetur. Etiam sollicitudin nec leo adignissim. Aliquam sit amet tincidunt
sem, sed ultricies nulla. Cras convallis neque at dolorlacinia rhoncus. Cras eu justo orci.
Praesent id vulputate magna. Integer vestibulum molestiepurus sed placerat. Phasellus gravida odio
non felis tempor dignissim. Phasellus semper sit amet lacusut faucibus.
</p>
</div>
</section>
<section id="menu">
<h2>Menu</h2>
<h3><u>Pizzas</u></h3>
<p>Pepperoni</p>
<ul>
<li>Large - $14.99</li>
<li>Medium - $10.99</li>
<li>Small - $9.99</li>
</ul>
<p>MeatLovers</p>
<ul>
<li>Large - $16.99</li>
<li>Medium - $12.99</li>
<li>Small - $10.99</li>
</ul>
<h3><u>Calzones</u></h3>
<p>Pepperoni</p>
<ul>
<li>Large - $16.99</li>
<li>Medium - $12.99</li>
<li>Small - $10.99</li>
</ul>
<p>MeatLovers</p>
<ul>
<li>Large - $18.99</li>
<li>Medium - $16.99</li>
<li>Small - $12.99</li>
</ul>
<h3><u>Salads</u></h3>
<p>Caesar</p>
<ul>
<li>Large - $10.99</li>
<li>Medium - $8.99</li>
<li>Small - $6.99</li>
</ul>
<p>Garden</p>
<ul>
<li>Large - $9.99</li>
<li>Medium - $7.99</li>
<li>Small - $5.99</li>
</ul>
</section>
</main>
<footer>
<p>© Copyright2021</p>
</footer>
</body>
</html>
main.css Code:
main, nav, section, footer {display: block;}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
}
header, footer{
background-color: #000;
padding: 3%;
color: #f0f0f0;
}
#heroParagraph{
color: #f0f0f0;
}
img{
width: 100%;
max-width: 100%;
}
h1,h2{
font-family: 'Bebas Neue', cursive;
}
h1{
font-size: 3em;
margin: 0;
}
h2{
font-size: 1.8em;
}
#hero{
background-color: #561420;
padding: 2%;
margin-bottom: 1em;
}
#menu{
text-align: center;
}
li{
list-style: none;
}
@media screen and (min-width: 900px){
#hero{
display: grid;
grid-template-columns: 45% 50%;
grid-template-rows: auto;
grid-template-areas: "heroImgheroPara";
column-gap: 2%;
}
#hero img{
grid-area: heroImg;
}
#heroParagraph{
grid-area: heroPara;
}
}
- Html Css Project London Pizza A Local Restaurant Specializing In Farm Fresh Local Ingredients Has Come To You To Imp 1 (31.34 KiB) Viewed 46 times
- Html Css Project London Pizza A Local Restaurant Specializing In Farm Fresh Local Ingredients Has Come To You To Imp 2 (381.07 KiB) Viewed 46 times
- Html Css Project London Pizza A Local Restaurant Specializing In Farm Fresh Local Ingredients Has Come To You To Imp 3 (378.96 KiB) Viewed 46 times
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla mauris ut felis ultrices, ornare semper mi consectetur. Etiam sollicitudin nec leo a dignissim. Aliquam sit amet tincidunt sem, sed ultricies nulla. Cras convallis neque at dolor lacinia rhoncus. Cras eu justo orci. Praesent id vulputate magna. Integer vestibulum molestie purus sed placerat. Phasellus gravida odio non felis tempor dignissim. Phasellus semper sit amet lacus ut faucibus.
DBERPIIAONUNE Home Order