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
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
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.