Project: Luigi's Pizzeria - "Prices" Page

Requirements


Instructions

  1. In the "prices.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>Prices</h2>
      <br>
  1. Save.
  2. Create a price table for the three pizzas types by adding the following code under the "Prices" subheading:
<table>
        <tr>
          <th>Toppings</th>
          <th>Slice</th>
          <th>Small</th>
          <th>Medium</th>
          <th>Large</th>
        </tr>
        <tr>
          <td>Cheese</td>
          <td>$3.00</td>
          <td>$10.00</td>
          <td>$13.00</td>
          <td>$15.00</td>
        </tr>
        <tr>
          <td>Mushroom</td>
          <td>$3.50</td>
          <td>$12.00</td>
          <td>$15.00</td>
          <td>$17.00</td>
        </tr>
        <tr>
          <td>Pepperoni</td>
          <td>$4.00</td>
          <td>$15.00</td>
          <td>$17.00</td>
          <td>$19.00</td>
        </tr>
      </table>
  1. Save.
  2. Create a footer for the page by adding the following code under price table:
<p>&copy; 2023 All rights reserved.</p>
  1. Save.
  2. Click on the "Prices" link and in the browser, you should see the following:

    3. index.html page

Code Walkthrough and Explanation

For the "Prices" 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 table showing the prices of the 3 types of pizzas by size.


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References