A responsive front-end recreation of the Monogram website shop page. This is a self-directed challenge from Frontend Practice.
The goal is to recerate the structure, appearance, and behavior of the Monogram's shop page. Specifically, the preview page that Frontend Practice provides.
❗This is a personal practice project! all banding, content, and design elements remain the property of Monogram. This clone is for educational, recreational, and non-commercial use only. Images, and text may be replaced with placeholders or free-to-use alternatives.
- Mobile-first layout
- Responsive design
- Layout, hover states, and interaction mimicry (attempt)
- Recreations: image hover transitions, dropdown menu, stricky meny, etc
- HTML5
- Javascript
- Tailwind CSS 4.1.13
- Vite 7.1.2
- Frontend Practice challenge site
- The Monogram Shop
- For images: Unsplash
- For product mockup images: Mockup Free
- For icons: Boxicons and Flaticon
This is completed! 🍣
- Build the header
- Build the hero image/section
- Build the main section
- Build the first grid (featured)
- Build the main hero (break)
- Build the second grid (normal products)
- Build the footer
- Style the header
- Style the mobile menu
- Style the dropdowns
- Style the hero image
- Style the main section
- Style the first grid (last row is looooong)
- Style the main hero (break)
- Style the second grid
- Style the footer
- Add the image hover transitions
- Implement the mobile menu sidebar
- Implement dropdowns
- Implement the cart sidebar
- Implement currency changes
- Final code cleanup and commenting
- Deploy the site to Github Pages
- Add the live site link to the top of the README
This is a personal, non-commercial project created for educational and recreational purposes only.
All text content, links, and branding elements in this project are copied from the Monogram website shop page for practice purposes.
All images, icons, and other media are sourced from free-to-use platforms (e.g., Unsplash, Boxicons) or replaced with placeholders.
This project is not affiliated with, endorsed, sponsored, or specifically approved by Monogram.
All original code in this repository is licensed under the MIT License.