A modern and responsive ecommerce frontend built purely with HTML, CSS and Bootstrap.
View the live Site https://joncgroberg.github.io/EcommerceCapstone/
Diagram designed in Figma
Welcomes users with hero image and overview of the watch process
- Stages using Bootstrap cards
- Dynamic and collapsing navbar
Displays products in responsive image grid. Bookmark, add to cart by clicking.
- Responsive hero image using columns and Bootstrap cards
- Responsive product list using Bootstrap cards
- Responsive buttons using Bootstrap columns
- Form to capture basic user details
- Validation of required fields
- Remember me checkbox
- Link to register page
- Form to capture basic user details
- Validation of required fields
- Remember me checkbox
- Radio buttons
- Link to login page
- Shows selected products, totals
- Enter to checkout: Address, payment, confirmation.
- Validation before proceeding.
- Cart built with HTML table
- Images turn into a masonry grid at small sizes
- Add to cart and bookmark icons on small cards change size
- Images scale to fit display size
- Add to cart text shortens to "Add" on wide screens
- Button text shortens in larger views
- Navbar collapses and search bar moves to the top
- Hero Image expands to fill mobile screen
-
Images scale to become larger forcing them to wrap
-
Collapsed navbar
- Search bar moves to the top only when collapsed
- CSS
- HTML
- Bootstrap
- Figma (wireframing and planning)
- Stable Diffusion (used in image generation)
- Claude-instant-100k (used in paragraph generation)