Project: Luigi's Pizzeria - "Our Pizzas" Page

Requirements


Instructions

  1. In the "pizzas.html" file, add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Luigi's Pizzeria</title>
</head>
<body>

</body>
</html>
  1. Save.
  2. If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
  3. Create a heading for the page by adding the following code between the opening and closing tags of the body: 
<h1>Luigi's Pizzeria</h1>
  1. Save.
  2. Create a navigation bar for the website by adding the following code under the heading:
<!-- Navigation Bar -->
<ul>
  <li><a href="./index.html">Home</a></li>
  <li><a href="./pizzas.html">Our Pizzas</a></li>
  <li><a href="./prices.html">Prices</a></li>
  <li><a href="./contact.html">Contact</a></li>
</ul>
  1. Save.
  2. Create a background image for the website by adding the following code under the navigation bar:
<img src="./images/background.jpg" alt="background image">
<br>
  1. Save.
  2. Create a subheading (h2) for the page by adding the following code under the background image:
<h2>Our Pizzas</h2>
<br>
  1. Save.
  2. Create a section with a subheading (h3), image, and description of cheese pizza by adding the following code under the "Our Pizzas" subheading:
<h3>Cheese Pizza</h3>
<img src="./images/cheese_pizza.jpg" alt="cheese pizza">
<p>
  Cheese pizza is a classic and popular type of pizza that consists of a tomato sauce base topped with melted cheese
  and other ingredients such as herbs, spices, and vegetables. The cheese is melted to perfection on top of the sauce
  and
  crust, creating a delicious, gooey and savory combination.
</p>
<br>
  1. Save.
  2. Create a section with a subheading (h3), image, and description of pepperoni pizza by adding the following code under the cheese pizza section:
<h3>Pepperoni Pizza</h3>
<img src="./images/pepperoni_pizza.jpg" alt="pepperoni pizza">
<p>
  Pepperoni pizza is a classic and one of the most popular types of pizza. It is made by spreading tomato sauce over a
  base of dough and then topping it with melted mozzarella cheese and thin slices of spicy pepperoni sausage. The
  combination of the savory tomato sauce, melted cheese, and spicy pepperoni creates a delicious and satisfying
  flavor.
</p>
<br>
  1. Save.
  2. Create a section with a subheading (h3), image, and description of mushroom pizza by adding the following code under the pepperoni pizza section:
<h3>Mushroom Pizza</h3>
<img src="./images/mushroom_pizza.jpg" alt="mushroom pizza">
<p>
  Mushroom pizza is a type of pizza that typically features a tomato sauce base and is topped with sliced mushrooms,
  melted mozzarella cheese, and sometimes additional ingredients such as onions, peppers, and garlic. The mushrooms
  add a
  rich and earthy flavor to the pizza, while the melted cheese and other toppings bring added depth and texture to the
  dish.
</p>
  1. Save.
  2. Create a footer for the page by adding the following code under the mushroom pizza section:
<p>&copy; 2023 All rights reserved.</p>
  1. Save.
  2. Click on the "Our Pizzas" link and in the browser, you should see the following:

    3. index.html page

Code Walkthrough and Explanation

For the "Our Pizzas" page, all requirements were met. The page features links to each of the other pages, allowing easy navigation to other parts of the site. The page includes a large image of the fictional restaurant used for the "background". A copyright is present at the bottom of the page, providing necessary information about the ownership and rights of the content. The page includes a section describing each of the 3 types of pizzas.


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References