For practice, I created fully responsive clone of macys.com page. I created this during my internship program at NISUM Karachi. This repository is made for record purposes. I used HTML, CSS, Javascript, and Bootstrap for this clone.
Click this link to view live demo: https://waqar-ahmed51.github.io/macys-UI-clone/
Complete fully responsive Macy's page clone which includes:
- Topmost bar which includes links for different functionalities.
- The Main logo bar includes search option UI and cart icon.
- Navbar with 8 customized CSS dropdowns which open on hover and show a full-size mega menu.
- Mega Menu with category heading and category items in it.
- Side Navbar for product filtering purposes.
- Side Navbar with collapsible buttons with custom CSS for a minimal look.
- Checkboxes for product filtering in each side navbar button.
- Main product showcase layout for product showing.
- Product display with customized bootstrap cards.
- Product cards start a slide show of the product images on hover.
- Product card with image radio buttons for changing the product image color property.
- The Product card includes a star rating with the total number of feedback.
- Product cards include customized details about the product.
- Good-looking footer with different portions for different links divided into rows and columns.
- All components are fully responisve to different size of screens from laptops to small phone devices.
Here is the demo video of the project.
Macy-s.UI.Proper.Complete.Video.1.mp4
Here are some screenshots of the output.
- Large screen view - laptop View
- Medium screen view - Tablet View
- Small screen view - Phone View
Note: Images may subject to copyright, I used for learing purpose.