This web page was made to be responsive and as practice for future web pages. It was made using bootstrap, html and css. Overall it's a fairly simple design and can be used as a template for further projects.

The site is laid out with first a navbar, then a Bootstrap grid system and then finally a footer.

This picture shows how the site looks when viewed on a large screen. The Navbar fully extends across the top of the screen and is fixed in position, linking to various sections of the page.

When adjusting the screen size to a smaller size or viewing on mobile the site changes to the new image, where the navbar is now collapsed with a hamburger icon available to bring a drop down list.

The formatting of the rows below also changes as the images and text reverse order on alternate rows so each row is shown consistent with the others.

Large Screen has a format like this for the grid

Whereas on small Screen

This project uses a custom compiled version of Bootstrap which adjusts the navbar collapse breakpoint. The nav bar now collapses before the width where the various links start pushing onto a new line.