At the end of this project, you will be able to:
- Create a HTML documents using <div> and style with an embeded style sheet
Files to Download
- Folder called “LastName_FrstName_Jenware
- HTML document called “jenware.html”
- Directory structure
- Embedded Style Sheet
Fonts – Verdana, Geneva, and sans-serif
Background color – #FDF9BD
- Create a one column layout in an HTML document.
- The width of the #container is 700px.
- Place the jenware_logo image inside of the header section
Create a class for the jenware_logo called “logo”
- 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
- 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”
- 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.
- 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
- The secondary heading “New Product” is 1.2em in size and color #AC267B
- “Barware and Babyware” is placed in an <h3> element and the size is 1em color #F26521
- The <em> element color is #F26521
- Place the copyright into the footer section. The font is .8em in size and color #663333. HTML code for © ( © )
- 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
- 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.