Buonasera prepsters!
You have been tasked with creating a website for Pizzaria La DevLeague, the hippest pizza joint where all the cool kids go.
Your job is to follow the instructions below and render a HTML layout in the index.html
file. Run live-server
in this project to see your work as you go through each step. And don't forget to commit your work.
###The Setup
- Fork and clone this project.
- Open the
readme.md
file on one side of your text editor. - Open the
index.html
file on the other side of your text editor. - In the
index.html
file, create the basic HTML5 template layout (i.e. doctype, html lang, head and body tags, etc.). - In the head tag, insert the text "Best Pizza Ever" as the content for the title tag.
###The Layout This site will have six sections:
- Header
- Today's Special
- Menu
- Subscribe
- Visit
- Footer
###1. Header
- Create a header element with an id of "intro".
- Inside the header element, create a div element with a class of "content".
- Inside the div element, create a h1 element with an id of "name" and insert the text "Pizzaria La DevLeague" as content for the h1 tag.
- Inside the div element, create an h2 element with an id of "tagLine" and insert the text "Functional Pizza For All!" as the content for the h2 tag.
- Inside the div element, create an img element and from the assets folder insert the pizzaMan.jpeg for the src attribute. Insert "logo" in the alt attribute.
- Inside the div element, create a nav element with an id "topMenu".
- Inside the nav element, create 4 li elements with a class of "guide".
- Inside the first li element, create an a element (anchor tag), insert #today in the href attribute and insert "Today's Special" as the content for the a tag.
- Inside the second li element, create an a element (anchor tag), insert #menu in the href attribute and insert "Menu" as the content for the a tag.
- Inside the third li element, create an a element (anchor tag), insert #subscribe in the href attribute and insert "Subscribe" as the content for the a tag.
- Inside the last li element, create an a element (anchor tag), insert #visit in the href attribute and insert "Visit" as the content for the a tag.
Commit Your Work
###2. Today's Special
- Create a section element with an id of "today".
- Inside the section element, create a div element with the class of "content".
- Inside the div element, create a h3 element with a class of "sectionTitle" and insert the text "Today's Special" as the content for the h3 tag.
- Inside the div element, create a p element with the id of "special" and insert the text "Conditional Love" as the content for the p tag.
Commit Your Work
###3. Menu
- Create a section element with an id of "menu".
- Inside the section element, create a div element with the class of "content".
- Inside the div element, create a h3 element with a class of "sectionTitle" and insert the text "Menu" as the content for the h3 tag.
- Inside the div element, create another div element with a class of "pizza".
- Inside the "pizza" div, create a p element with a class of "pizzaName" and insert the text "Object of My Desire" as the content for the p tag.
- Inside the "pizza" div, create a p element with a class of "description" and insert the text "A programmers delight, this classic has string cheese, an array of BBQ meats and 1 special sauce." as the content for the p tag.
- Inside the "pizza" div, create a p element with a class of "price" and insert the text "19.99." as the content for the p tag.
Commit Your Work
Repeat Steps 4 - 7 for the following:
pizzaName: Four Loop
description: Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!
price: 44.44
pizzaName: Conditional Love
description: This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!
price: 22.14
pizzaName: The DOM
description: This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!
price: 16.99
pizzaName: Conjunction Function
description: Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!
price: 17.02
Commit Your Work
###4. Subscribe
- Create a section element with an id of "subscribe".
- Inside the section element, create a div element with the class of "content".
- Inside the div element, create a h3 element with a class of "sectionTitle" and insert the text "Subscribe" as the content for the h3 tag.
- Inside the div element create a p element with an id of "deal" and insert the text "Sign up for our special deals!" as the content for the p element.
- Inside the div element create an input element and add a placeholder="First Name" attribute.
- Inside the div element create an input element and add a placeholder="Last Name" attribute.
- Inside the div element create an input element and add a placeholder="email" attribute.
Commit Your Work
###5. Visit
-
Create a section element with an id of "visit".
-
Inside the section element, create a div element with the class of "content".
-
Inside the div element, create a h3 element with a class of "sectionTitle" and insert the text "Visit" as the content for the h3 tag.
-
Inside the div element, create an ul element with an id of "addy".
-
Inside the ul element, create a li element with an id of "street" and insert the text "2800 Woodlawn Dr.
Honolulu, HI 96822" as the content for the li tag. -
Inside the ul element, create a li element of an id of "map".
-
Inside the "map" li element, create an a element (anchor tag) and insert "https://www.google.com/maps?ll=21.223782,-157.899628&z=13&t=m&hl=en&gl=US&mapclient=embed&cid=15585431400080676543" target="_blank" in the href attribute and insert the text "View Map" as th content for the a tag.
-
Next, create three li elements with the class of "hours".
-
Insert the text "Monday - Saturday" as the content for the first li element.
-
Insert the text "12pm - 12am" as the content for the second li element.
-
Insert the text "Coding On Sundays" as the content for the third li element.
Commit Your Work
###6. Footer
- Create a footer element.
- Inside the footer element, create a div with a class of "content".
- Inside the div element, create a p element with an id of "credit" and insert the text "Site Design and Development By Your Name" as the content for the p element.
- Inside the div element, create a p element with an id of "copyright" and insert the text "© 2017 Gin Drinkers Association (GDA)" as the content for the p element.
Commit Your Work
Good job! Let's stack some pizzas!