Demo link: https://jimmylee88.github.io/responsive-multipage-2/
Our task is to create a website with which the user can navigate between multiple pages. The build should employ use of CSS Flexbox, to allow elements to grow and shrink responsively. The design should be based upon initial wireframe sketches, which set out the structure and flow of the website.
- Use of CSS flexbox for responsive layouts across different screen sizes
- Custom fonts from Google
- CSS variables for organising styles
- Semantic HTML tags to structure the page, and ensure accessibility
I'm fairly pleased with the results, as I felt that I finally got a better grasp of using flexbox for responsive layouts. It also meant that I only had to make minimal use of media queries to get things looking how I wanted them to. I did use media queries for:
- Resizing the main heading font size, so it's more appropriate and balanced typographically for smaller screens.
- Used diplay modes to hide the horizontal logo for smaller screens, and swap it out for a square ratio logo variant. It works better for a vertical column layout.
I did run out of time for my original plans on the Food & Drink page however. I wanted to recreate the menu entirely using CSS and Flexbox, to really stretch and test my skills. So I have just had to use the flat image for now. I may return to it, and work on it as a feature branch.