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. You will be building this project as part of our CSS Course.
Resources: Shopping Cart Icon, Shoe 1 Image, Shoe 2 Image, Shoe 3 Image, Shoe 4 Image, Shoe 5 Image, Shoe 6 Image, Shoe 6 Large Image 1, Shoe 6 Small Large Image 2
Things you need to know: HTML structure, position, display, float, box model, browser events, functions.
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
#2c3e50and 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
underlinewhen hovered.
Task 5
Use
#f5f5f5for the page background.Set the text color to
#333and use theArial, sans-seriffont family for the entire page.
Task 6
Style the sidebar with a white background color.
Add a
box-shadoweffect withrgba(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-shadowwith 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
#ffffor 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
#3498dbwith 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
#e74c3cwith white text. On hover, darken the background color to#c0392b.For the Favorite button, use a background color of
#f5f5f5with 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.
