This is an exercise to hone your layout skills ๐ก
Take a look at the following projects, attempt the primary mockup for both exercises, and then if you have time, go back and complete the bonus mockup.
Note: Nothing is linked yet. You have all the files you need, but none of them are connected. Make sure you
<link>
your CSS file, and use the right path in thehref
of your<img>
's.
Using the mockup below, attempt to recreate the Google Homepage. https://www.google.com/
See if you can add the extra elements included in the following mockup.
Develop a layout that mimic's the following blog post, which is a centered website with a header.
Attempt to add a code block section (marked A), a quote block section (marked B) and the inline code section (marked C). These can be inserted anywhere on the page, just make sure they follow the same layout as the rest of the blog post (i.e. width, font-size, etc).