Project: Building with Backgrounds and Gradients Copy


In this project you will clone the website of one of the most design-forward companies in the world. Although it isn’t a very complex website, it uses background photos very well. In addition the top navbar contains a gradient that you should be able to create.


  1. Take a close look at the screenshot below which is taken from an old version of the Apple website:

  1. Create a new HTML document and download the media assets that you will use from here.

  2. Think about all the elements on the page and how they are grouped together.

  3. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and positioned.

  4. Set up the top navigation bar. How is that gradient achieved?

  5. Set up the main background image.

  6. Fill in and position the additional sections. Don’t worry about enclosing every paragraph of text in <p> tags.

  7. Push your solution, create the pull request and submit its URL.

Leave a Reply