waqar-ahmed51/macys-ui-clone

UI clone of mac's.com website - (Search Product Page)

macys-UI-clone

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:

1. Topmost bar which includes links for different functionalities.
2. The Main logo bar includes search option UI and cart icon.
3. Navbar with 8 customized CSS dropdowns which open on hover and show a full-size mega menu.
4. Mega Menu with category heading and category items in it.
5. Side Navbar for product filtering purposes.
6. Side Navbar with collapsible buttons with custom CSS for a minimal look.
7. Checkboxes for product filtering in each side navbar button.
8. Main product showcase layout for product showing.
9. Product display with customized bootstrap cards.
10. Product cards start a slide show of the product images on hover.
11. Product card with image radio buttons for changing the product image color property.
12. The Product card includes a star rating with the total number of feedback.
13. Product cards include customized details about the product.
14. Good-looking footer with different portions for different links divided into rows and columns.
15. 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.