For this exam, you will write the HTML and CSS to render this design as accurately as possible (click to enlarge). Execute the following design in Codepen:



  • The white container is a centered, fluid box that is never narrower than 320px or wider than 500px
  • Fonts Used: Montserrat, Lato from Google web fonts
  • You may link the image from a placeholder website, like Lorem Pixel
  • You may use colorzilla to generate the gradient background.

Aside from google fonts, colorzilla, and an image placeholder service, You may not use any other web resources while you work.

You will receive points for executing these key items:

  • Valid HTML
  • Semantic HTML
  • Organized CSS
  • accurate appearance and attention to the Specs

How to turn in Your Final Practical

Email a link to your pen to