Shopping Website Project

Build a sleek website for a Shoe Store. Design a dashboard to display shoes, add filters and sorting options, and let users select their favourite pairs, add them to the cart, and place an order.

Max Chat

Task 1

  • Add the heading Sneaker Shop.

  • Add a navigation bar with links for Men, Women, and Kids.

  • Include a search bar next to the navigation menu.

  • Add a cart icon as given in the resources to the right of the search bar.

  • Add a sidebar on the left with categories like Lifestyle, Basketball, Jordan and Skateboarding.

Task 2

Create individual cards for each product. Each card should have:

  • An image of the shoe.

    • Use the shoe images given in the resources.

    • Give a sm width for the images now for better visibility. We will work on improving the style in later steps.

  • The name and the price of the shoe. Use the below data to fill these details.

    • Shoe 1:

      • Name: AeroMax Flex

      • Price: ₹ 10,499

    • Shoe 2:

      • Name: Urban Stride Pro

      • Price: ₹ 12,999

    • Shoe 3:

      • Name: Velocity Pulse X

      • Price: ₹ 11,999

    • Shoe 4:

      • Name: EdgeRider Sport

      • Price: ₹ 9,499

    • Shoe 5:

      • Name: Horizon Runner Pro

      • Price: ₹ 14,999

    • Shoe 6:

      • Name: Action Hyper High

      • Price: ₹ 13,995

Task 3

When a user clicks on a product, they should be taken to product detail page.

On this page, include:

  • Product Images: Two large images of the shoes. (Use Shoe 6 Large Image 1 and Shoe 6 Large Image 2 from the given resources)

  • Product Name: Clearly display the name of the product at the top of the page.

  • Gender and Price: Indicate the gender (e.g., Men's, Women's) and the price of the shoes.

  • Size Selection: Include a set of buttons with size option as given in the images.

  • Action Buttons: Add two prominent buttons with the texts, Add to Bag and Favorite ♥.

Task 4

  • Set the header background color to #2c3e50 and the text color to white.

  • Align the content in the header (logo, navigation links, and search bar) in a single line.

  • Style the search bar as per the given image without a border.

  • Add a hover effect to the navigation links, changing the text-decoration to underline when hovered.

Task 5

  • Use #f5f5f5 for the page background.

  • Set the text color to #333 and use the Arial, sans-serif font family for the entire page.

Task 6

  • Style the sidebar with a white background color.

  • Add a box-shadow effect with rgba(0, 0, 0, 0.1)and rounded corners.

  • Make that the category links are neatly aligned and styled with color: #3498db.

  • Add a hover effect to the category links, changing the color to #2980b9.

Task 7

  • The product grid is where the products (shoes) will be displayed and it should be placed to the right of the sidebar.

  • Product cards should be placed in a 3 x 3 Grid-like structure.

  • Add proper spacing between each product cards.

  • Make sure that the product cards have a white background, with enough space around the content and rounded corners

  • Add other styles to the product cards as per the given image and make sure the images, product names, and prices neatly aligned.

Task 8

  • Each product card should have a box-shadow with a hover effect that lifts the card slightly and increases the shadow.

  • Style the product images with a rounded border.

  • Make sure the product name and price are aligned neatly below each image, with clear spacing and readable font sizes.

Task 9

  • Use the same styles as the product listing page for the product detail page.

  • Add a background color of #fff for the main product container and add proper spacing around it.

  • Add a box-shadow and round the corners.

  • Set the product images container to take up half of the width, centering the images.

  • Make sure they are displayed in separate rows with enough spacing between them.

  • Apply rounded corners to the images.

Task 10

  • Set the product images container to take up half of the width, centering the images.

  • Make sure they are displayed in separate rows with enough spacing between them.

  • Apply rounded corners to the images.

Task 11

  • For the product title, use a large font size and set the color to #2c3e50.

  • Use a smaller font size for the product description and price, with a color of #555.

  • Style the size selection section with a medium-sized heading, and add padding inside the size buttons so the text is well-spaced from the borders.

  • Set the button background color to #f5f5f5.

  • - On hover, change the size button background to #3498db with white text.

Task 12

  • Style both action buttons with adequate spacing and rounded corners.

  • For the Add to Bag button, set the background color to #e74c3c with white text. On hover, darken the background color to #c0392b.

  • For the Favorite button, use a background color of #f5f5f5 with red text #e74c3c. On hover, reverse the colors to a red background with white text.

More projects

These are some of the projects you'll build while learning.