Topic Homework Assignment:
HW-06: “Layout”

These are the requirements for your homework this Topic. You should go through all of the materials before beginning, so these requirements make sense.

/web-dev-hw/project-3/

Continue your Project 3 by creating any additional CSS files you need, if any, to keep your layout design organized. There are no additional HTML files needed for this Project.

Layout

For this assignment you are to explore the techniques introduced this week, applying them to you Typography sight. These include:

• The Box Model
  • Padding
  • Margin
  • Border
• z-index
• Display
• Position
• Float & Clear

With these techniques, you should create a simple plan to apply tp your current Project content that contains:

1. A header (fixed or not):
   • with a basic site title
   • with a logo (A simple filler shape is fine, but feel free to be creative! FlatIcon has great free icons to search for and download.)
2. A horizontal navigation bar:
   Remove the list of links from your Index you made for HW-05, and add a new nav bar:
   • Links to Home, Sample, Contact, and About pages.
   • At least 1 additional outside link relating to the autor or Project (i.e. Amazon, Wikipedia article, University, etc.).
   • At least one dropdown menu. You may organize your current pages inside the dropdown, or add a collection of outside links.
3. Main content:
   For at least your Sample and About pages, organize your content into a two-column layout contining a “main content” area, and 1 of the following:
   • “side” content containing your reviews and/or factoids, etc, that you made in HW-05.
   • a side menu
   • “pull quotes” or other advert boxes (such as my coupon example)
   • other examples you’ve explored through the outside sites.

Styling

These new addtions, while not necessarily wholly “fresh” elements, should still follow your color palette and typography design that you’ve been utilizing.

Your site is a brand; make sure it’s cohesive:

1. Horizontal navigation bar is available across all site pages.
2. Divs and boxes are styled and fit within your design, using your colors to highlight important content.
3. Alignments, floats, sizing, etc follows a clear pattern. For example, unless it is a special case, your text sizes and colors (heading, body) should be similar for the whole site.

readme.md

Continue documenting your learning progress in your Project 3 Readme as you go along. I’m interested in hearing about why you chose the layout you did!

{ TODO: }

1. Use the previous pages of the Topic to complete you homework assignment.
2. Finish documenting your Project’s progress in your README.md!

---