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.