https://marcelino-g.github.io/Deb-s-College-Fund/
Deb's College Fund is a web page that displays a variety of items to be sold. Any money earned goes towards Deb's college fund.
The purpose of this project was to focus heavily on the practice of Bootstrap by demonstrating the responsive design features it has to offer. The goal was to make the user experience smooth as possible for both the desktop and mobile views with Bootstrap alone.
The languages used here were HTML, CSS (Bootstrap), and JavaScript. The layout of the page relies on Bootstrap's grid system which is responsible for the responsive user friendly experience. All images used here were made and edited with GIMP and Inkscape.
-
Desktop View
The container that holds all the HTML elements inside of it is centered on the page. At the top left is the name of the website and to its right is the logo which features members of the store. Underneath those two elements is another container which holds the items for sale, a scroll bar, and a type of nav bar. The items are paired with their own descriptions, pricing, and checkbox to be selected. Marking a checkbox and clicking "Add to Cart" is not a real working feature and is only a HTML form. You can scroll through the items either by using the scroll bar or clicking on one of the item categories which automatically glides you over to the corresponding item(s).
-
Mobile View
The container that holds the items for sale stacks the items on top of one another instead of side by side like in the desktop view. The scroll bar in the mobile view is missing but you can still easily navigate through the page by clicking on one of the item categories which will take you to the corresponding item(s). If you were to do this, the nav bar will follow you by sticking itself to the top of the page so you can continue to use it to transport you.
- Desktop View
- Mobile View
- GIMP: https://www.gimp.org/
- Inkscape: https://inkscape.org/