Project: Luigi's Pizzeria - "Contact" Page

Requirements


Instructions

  1. In the "contact.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>Contact Us</h2>
<br/>
  1. Save.
  2. Create a subheading (h3) and two paragraphs for the restaurant location by adding the following code under the "Contact Us" subheading:
<h3>Restaurant Location</h3>
<p>100 Main St.</p>
<p>Somewhere in Italy</p>
<br>
<br>
  1. Save.
  2. Create a form wrapper by adding the following code under the restaurant location:
<form action="" method="">

</form>
  1. Save.
  2. Create a name field by adding the following code between the opening and closing form tags:
<!-- Name -->
<label for="name">Name</label>
<input type="text" name="name" id="name">
<br>
<br>
  1. Save.
  2. Create an email field by adding the following code under the name field:
<!-- Email -->
<label for="email">Email</label>
<input type="email" name="email" id="email">
  1. Save.
  2. Create a survey question on pizza enjoyment by adding the following code under the email field:
<!-- Survey question on Pizza Enjoyment -->
<p>Did you enjoy your pizza?</p>
<input type="radio" name="enjoy" id="enjoy" value="yes">Yes
<input type="radio" name="enjoy" id="enjoy" value="no">No
<input type="radio" name="enjoy" id="enjoy" value="na">N/A
<br>
<br>
  1. Save.
  2. Create a survey question on pizzas tried by the customer by adding the following code under the pizza enjoyment survey question:
<!-- Survey question about pizzas tried -->
<p>Which pizzas have you tried?</p>
<input type="checkbox" name="pizzas" id="pizzas" value="cheese">Cheese
<input type="checkbox" name="pizzas" id="pizzas" value="mushroom">Mushroom
<input type="checkbox" name="pizzas" id="pizzas" value="pepperoni">Pepperoni
<br>
<br>
  1. Save.
  2. Create a comment box by adding the following code under the pizzas tried survey question:
<p>Comments</p>
<textarea name="comments" id="comments" cols="50" rows="5"></textarea>
<br>
<br>
  1. Save.
  2. Create a "Submit" button by adding the following code under the comment box:
<input type="submit" value="submit">
  1. Save.
  2. Create a footer for the page by adding the following code after the closing tag of the form:
<p>&copy; 2023 All rights reserved.</p>
  1. Save.
  2. In the browser, you should see the following:

    3. index.html page

Code Walkthrough and Explanation

For the "Contact" 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 form to survey the customer for feedback.


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References