Now that you have experienced building a layout using inline-block
. Lets revisit the same HTML structure and refactor our first page with flexbox. If you didn't finish yesterday's assignment, just start from scratch.
Once you have finished the home page using flexbox, go build the services page based on the design file provided to you. This time you will need to structure your own HTML in addition to using flexbox. You have been provided all the necessary images in the img folder.
Useful Resource: CSS Tricks Flexbox Guide
Objectives:
- Refactor the home page with flexbox where inline was used before
- Link the services navigation item out to the
services.html
page - Make the Great Idea logo clickable and point it back to the
index.html
page - Using the provided design file, create the services page layout using flexbox and all your box model skills you have been practicing with!
- Try to make your styles match the design as closely as you can
Stretch Goal:
- Create another page based on one of the navigation items in addition to services. Try to create a layout that follows the patterns of the first two designs but with your own creative twist. Use lorem ipsum text for all your content.
- Fork / Clone this project into a directory on your machine.
- Pull up the code into your preffered text editor.
- Start coding!