Giter VIP home page Giter VIP logo

pizzaria's Introduction

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!

pizzaria's People

Contributors

victorlhlee avatar

Watchers

James Cloos avatar May Chen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.