Shopping Website

• 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.

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

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 ♥.

• 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.

• Use #f5f5f5 for the page background.

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

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.