Objective:

Choose one layout below. Write the semantic HTML and valid, cross-browser friendly CSS to match the layout comp you choose. Upload to your launcher via FTP.

Layout Challenge 4A

4A: Pricing Table

This is a one-column, centered, fixed width layout that is 1080px wide. The light-blue background should fill the remainder of the browser.

Pay attention to the details in the pricing table, making sure to mark it up semantically. Give the “select” buttons a creative, animated hover effect.

Layout Challenge 4B

4B: Image Grid

This is a 1-column, centered fluid-width layout that is never wider than 1080px

The Images should always be 225px square. The person’s info¬†should appear overlaid on hover.

Animate the transition creatively.

User data can be generated here

 


Grading points for all Challenges

  • Valid HTML
  • Semantic HTML
  • Concise HTML
  • Valid CSS
  • Organized CSS
  • Concise CSS
  • Appearance matches the mockup and specs
  • Looks good in: modern Chrome, modern Firefox, Internet Explorer (current + 2 versions back)

Extra credit

complete all challenges for the week.