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.
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.
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.
These are some of the projects you'll build while learning.