one column layout

Project – Jenware

~ Web design

Objectives:

At the end of this project, you will be able to:

  • Create a HTML  documents using <div>  and style with an embeded style sheet

jencare

jenware-specs

Files to Download
Jenware files

Requirements

  1. Folder called “LastName_FrstName_Jenware
  2. HTML document called “jenware.html”
  3. Directory structure
  4. Embedded Style Sheet

Defaults

Fonts – Verdana, Geneva, and sans-serif
Background color – #FDF9BD

  1. Create a one column layout in an HTML document.
  2. The width of the #container is 700px.
  3. Place the jenware_logo image inside of the header section
    Create a class for the jenware_logo called “logo”
  4. Place the main heading inside of the header section
    The main heading “Make it Personal” is 1.2em, letter-spacing is .2em, using a margin-top of -10px in size and color #F26521
  5. Place the tagline inside of the header section
    The tagline (“Special occasions…”) font is  Georgia, Times, and serif, with a margin of 1em
    Create a class for the tagline called “tagline”
  6. Create a navigation/menu within the nav section.
    The nav id background color is #751c54.
    The links color is #FFFFFF, and place a margin of 20px.
    The hover state color is #FDF9BD.
  7. Place the content “New Product…12mos” inside the products section.
    The content id background color is #FFFFFF, line-height 1.5em, padding 1em.
    The border color is #FFBC53 and margin 1em
  8. The secondary heading “New Product” is 1.2em in size and color #AC267B
  9.  “Barware and Babyware” is placed in an <h3> element and the size is 1em color #F26521
  10. The <em> element color is #F26521
  11. Place the copyright into the footer section. The font is .8em in size and color #663333. HTML code for © ( &copy; )
  12. Description of images:
    jenware_logo.png – Jenware
    glasses.jpg – Photo of glasses decorated with the letter R
    shirts.jpg – Photos of shirts personalized with initial letters
  13. Place files in a folder and name: lastname_firstname_Jenware

This is due at the end of class (Tuesday, October 23, 2018).
Share folder link to Google Classroom > Jenware

Ask assistance if you are not sure about a specific task.