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
- Fork / Clone this project into a directory on your machine.
- Open the code with your preferred integrated development environment (IDE).
- Start on the objectives
- Refactor the home page layout with flexbox where
inline-blockwas used before - In your navigation, point the services anchor tag's
hreftoservices.html - Copy and paste the contents of your
index.htmlpage into your emptyservices.htmlpage.- Delete any content inside the body tag besides the navigation
- If you didn't finish yesterday's assignment, you may use the last assignment's solution code here instead.
- Update the title in your newly copied services page to say
Great Idea! - Services
- Using the provided design file, create the services page layout using flexbox. Remember, you should be using box model properties this whole time. Flexbox is only used for bigger layout pieces. You will still need content width, padding, border, and margins to succeed.
- Add an anchor tag around the Great Idea logo and point the
hreftoindex.html - 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.
- Introduce media queries into your services page to create a mobile view that stacks all the boxes on top of each other on phone but looks like the layout file on desktop.