Skip to content

hkotak/pizzaria

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pizzaria

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

  1. Fork and clone this project.
  2. Open the readme.md file on one side of your text editor.
  3. Open the index.html file on the other side of your text editor.
  4. In the index.html file, create the basic HTML5 template layout (i.e. doctype, html lang, head and body tags, etc.).
  5. 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:

  1. Header
  2. Today's Special
  3. Menu
  4. Subscribe
  5. Visit
  6. Footer

###1. Header

  1. Create a header element with an id of "intro".
  2. Inside the header element, create a div element with a class of "content".
  3. 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.
  4. 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.
  5. 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.
  6. Inside the div element, create a nav element with an id "topMenu".
  7. Inside the nav element, create 4 li elements with a class of "guide".
  8. 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.
  9. 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.
  10. 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.
  11. 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

  1. Create a section element with an id of "today".
  2. Inside the section element, create a div element with the class of "content".
  3. 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.
  4. 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

  1. Create a section element with an id of "menu".
  2. Inside the section element, create a div element with the class of "content".
  3. 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.
  4. Inside the div element, create another div element with a class of "pizza".
  5. 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.
  6. 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.
  7. 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

  1. Create a section element with an id of "subscribe".
  2. Inside the section element, create a div element with the class of "content".
  3. 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.
  4. 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.
  5. Inside the div element create an input element and add a placeholder="First Name" attribute.
  6. Inside the div element create an input element and add a placeholder="Last Name" attribute.
  7. Inside the div element create an input element and add a placeholder="email" attribute.

Commit Your Work

###5. Visit

  1. Create a section element with an id of "visit".

  2. Inside the section element, create a div element with the class of "content".

  3. 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.

  4. Inside the div element, create an ul element with an id of "addy".

  5. 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.

  6. Inside the ul element, create a li element of an id of "map".

  7. 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.

  8. Next, create three li elements with the class of "hours".

  9. Insert the text "Monday - Saturday" as the content for the first li element.

  10. Insert the text "12pm - 12am" as the content for the second li element.

  11. Insert the text "Coding On Sundays" as the content for the third li element.

Commit Your Work

###6. Footer

  1. Create a footer element.
  2. Inside the footer element, create a div with a class of "content".
  3. 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.
  4. Inside the div element, create a p element with an id of "copyright" and insert the text "&copy 2017 Gin Drinkers Association (GDA)" as the content for the p element.

Commit Your Work

Good job! Let's stack some pizzas!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published