Create Shopping Cards Using HTML and CSS

By Faraz - January 17, 2025

Learn how to create shopping cards using HTML and CSS with this easy step-by-step guide. Build responsive and stylish cards for your website today.

Join us on Telegram

Read Also halloween landing page design made easy with html, css, and javascript.jpg

Halloween Landing Page Design Made Easy with HTML, CSS, and JavaScript

Shopping cards are essential for any online store, allowing users to view and manage the products they wish to purchase. This tutorial will show you how to create stylish and responsive shopping cards using only HTML and CSS. This is a great project for beginners to practice their web development skills.

Prerequisites:

Before we begin, ensure you have:

Basic knowledge of HTML and CSS
A text editor (like Visual Studio Code or Sublime Text)
A browser to preview your project

Source Code

Step 1 (HTML Code):

Start by setting up the basic HTML structure for the shopping cards. Each card will contain an image, product name, price, and a button to add the product to the cart.

Here's an explanation of its structure and functionality:

1. Document Structure

<!DOCTYPE html>: Declares the document as an HTML5 document.
<html lang="en">: Starts the HTML document, specifying the language as English.
<head>: Contains metadata and links to external resources like fonts, icons, and stylesheets.
<body>: Contains the main content of the page.

2. `<head>` Section

<meta charset="UTF-8" />: Sets the character encoding to UTF-8 for supporting a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures the page is responsive on different devices.
<link href="...">: Links to the Google Fonts API for using the "Inter" font.
<link rel="stylesheet" href="...">: Links to:
- Bootstrap Icons for adding icons.
- styles.css for custom styles (assumed to style the page).

3. `<body>` Section

a. Navigation Bar

<nav>
  <span class="logo">The Hanger.</span>
  <button class="btn-primary mr-30 pr-10 row">
    <i class="bi bi-bag"></i> Shop now
  </button>
</nav>

Displays the logo (The Hanger.) and a button labeled "Shop now" with a shopping bag icon.

b. Title

<span class="title">Explore More</span>

Displays a title or heading for the next section.

c. Chips Section

<div class="row">
  <div class="chip pr-10"><img src="..." alt="" /> Sneaker</div>
  <div class="chip pr-10"><img src="..." alt="" /> Hodie</div>
  <div class="chip pr-10"><img src="..." alt="" /> Trousers</div>
</div>

Displays a row of "chips," each containing an image and a label (e.g., "Sneaker," "Hodie," "Trousers").

d. Product Cards

<div class="cards">
  <div class="card">
    <img src="..." alt="" />
    <span class="name">Sneaker MK1</span>
    <span class="description">Great boots!</span>
    <span class="price">$100</span>
    <div class="cts">
      <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
      <button class="btn-primary"><i class="bi bi-heart"></i></button>
    </div>
  </div>
  <!-- Similar structure repeated for other cards -->
</div>

Displays a grid of product cards, each with:
- Image: Displays the product (e.g., sneakers).
- Name: Product name (e.g., "Sneaker MK1").
- Description: A brief description (e.g., "Great boots!").
- Price: The price (e.g., "$100").
- Buttons: Two buttons:
  - Add to bag (<i class="bi bi-bag-plus"></i>).
  - Add to wishlist (<i class="bi bi-heart"></i>).

e. Action Bar

<div class="action-bar">
  <button class="btn-secondary"><i class="bi bi-credit-card"></i></button>
  <button class="btn-secondary primary-action"><i class="bi bi-bag"></i></button>
  <button class="btn-secondary"><i class="bi bi-heart"></i></button>
</div>

A sticky action bar with three buttons:
- Credit Card Icon: Presumably for payment options.
- Shopping Bag Icon: For viewing the cart.
- Heart Icon: For accessing the wishlist.

4. Visual and Functional Features

Fonts: Uses the "Inter" font from Google Fonts.
Icons: Utilizes Bootstrap Icons for consistent and scalable icons.
Responsive Design: The viewport meta tag ensures the layout adapts to different screen sizes.
Custom Styles: styles.css is used for additional styling.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Shopping Cards</title>
  </head>
  <body>
    <nav>
      <span class="logo">The Hanger.</span
      ><button class="btn-primary mr-30 pr-10 row">
        <i class="bi bi-bag"></i> Shop now
      </button>
    </nav>
    <span class="title">Explore More</span>
    <div class="row">
      <div class="chip pr-10"><img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" /> Sneaker</div>
      <div class="chip pr-10"><img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/hodie.jpg?raw=true" alt="" /> Hodie</div>
      <div class="chip pr-10"><img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/trousers.jpg?raw=true" alt="" /> Trousers</div>
    </div>
    <div class="cards">
      <div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div>
      <div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div><div class="card">
        <img src="https://github.com/farazc60/Project-Images/blob/main/shopping-card/sneaker.jpg?raw=true" alt="" />
        <span class="name">Sneaker MK1</span>
        <span class="description">Great boots!</span>
        <span class="price">$100</span>
        <div class="cts">
          <button class="btn-primary "><i class="bi bi-bag-plus"></i></button>
          <button class="btn-primary"><i class="bi bi-heart"></i></button>
        </div>
      </div>
    </div>
    <div class="action-bar">
      <button class="btn-secondary"><i class="bi bi-credit-card"></i></button>
      <button class="btn-secondary primary-action"><i class="bi bi-bag"></i></button>
      <button class="btn-secondary"><i class="bi bi-heart"></i></button>
    </div>
  </body>
</html>

Read Also

Create Word Cloud using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Next, create a styles.css file to style the shopping cards. We will add some basic styles to make the cards look neat and responsive.

Here's a detailed explanation of the CSS code:

General Styles

body
- Sets the page to use a flexbox layout with a column direction, allowing vertical stacking of elements.
- Uses the Inter font with a fallback of sans-serif.
- Sets the viewport to take at least the full height of the screen (min-height: 100vh).
- Removes default margin and applies padding of 20px.
- Background:
  - A gradient transitioning from a pinkish hue (hsla(298, 68%, 90%, 1)) to a light orange hue (hsla(30, 82%, 91%, 1)).
  - Compatibility is ensured with multiple gradient syntaxes for different browsers (linear-gradient, -moz-linear-gradient, -webkit-linear-gradient).
- Adds an IE-specific gradient fallback (filter).

Navigation Bar (`nav`)

Position: Fixed at the top-left corner, spans the full width of the viewport.
Layout: Flexbox for alignment, with justify-content: space-between to space out child elements.
Styling:
- Transparent backdrop with a blur effect (backdrop-filter: blur(10px)).
- High stacking context (z-index: 1000).
- Background color matches the second gradient color.
- Adds a subtle shadow for depth.

Action Bar (`.action-bar`)

Positioned fixed at the bottom of the viewport, centered horizontally.
Styled with:
- White background, rounded edges, and a subtle shadow.
- Flexible layout for evenly spaced child elements (gap: 10px).

Card Layout

.cards
- Flexbox container that wraps child elements to the next line if needed (flex-wrap: wrap).
- Centered alignment with a gap between cards.
.card
- A container for individual items with:
  - Rounded corners and a subtle shadow.
  - Flexbox layout for stacking content vertically.
  - Maximum width of 310px.
Card Elements
- Image (.card img): Rounded corners, fixed height of 200px, and fills the container width.
- Name (.name): Bold, large text in black.
- Description (.description): Smaller, gray text for details.
- Price (.price): Highlighted in orange, bold, and slightly larger text.

Chips (`.chip`)

Small, pill-shaped elements styled with:
- Rounded corners, shadow, and centered content.
- Hover effect (scale: 1.05) for interactivity.
Child Image (.chip img): Circular thumbnails with a fixed size of 30px.

Buttons

Primary Button (.btn-primary)
- Styled as a rounded, shadowed button with white background and black text.
- Includes a circular icon (.btn-primary i) with a gray background.
- Hover effect: Slight scaling for emphasis.
Secondary Button (.btn-secondary)
- Similar to the primary button but with a smaller icon (30px) and no background for the icon.

Miscellaneous

Row (.row)
- Aligns child elements horizontally with gaps and a bottom margin.
Spacing Utilities
- .mr-20, .mr-30: Right margin utilities.
- .pr-10: Padding-right utility.
Title (.title)
- Large, bold heading with spacing above and below.
Primary Action (.primary-action)
- A call-to-action button styled with a purple background, white text, and scaling.
Child Positioning (.cts)
- Positioned at the bottom-right corner of its container.

Transitions and Effects

Smooth hover transitions (transition: all 0.3s) are applied to interactive elements like buttons and chips.
Scaling effects (scale: 1.05) are used for visual feedback on hover.

body {
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background: hsla(298, 68%, 90%, 1);

  background: linear-gradient(
    90deg,
    hsla(298, 68%, 90%, 1) 0%,
    hsla(30, 82%, 91%, 1) 100%
  );

  background: -moz-linear-gradient(
    90deg,
    hsla(298, 68%, 90%, 1) 0%,
    hsla(30, 82%, 91%, 1) 100%
  );

  background: -webkit-linear-gradient(
    90deg,
    hsla(298, 68%, 90%, 1) 0%,
    hsla(30, 82%, 91%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F6D5F7", endColorstr="#FBE9D7", GradientType=1 );
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  backdrop-filter: blur(10px);
  z-index: 1000;
  background-color: hsla(30, 82%, 91%, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.action-bar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 10px 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  display: flex;
  gap: 10px;
}
.cards{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.chip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 30px;
  background: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;
}
.chip:hover {
  scale: 1.05;
}
.chip img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.logo {
  font-size: 2rem;
  font-weight: 600;
  color: black;
}
.btn-primary {
  background: white;
  color: black;
  padding: 5px;
  border-radius: 30px 30px;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: scale 0.3s;
}

.btn-primary i {
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(184, 184, 184);
}

.btn-primary:hover {
  scale: 1.05;
}
.btn-secondary {
  background: white;
  color: black;
  padding: 5px;
  border-radius: 30px 30px;
  border: none;
  cursor: pointer;
  transition: scale 0.3s;
}
.btn-secondary i {
  height: 30px;
  width: 30px;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.mr-20 {
  margin-right: 20px;
}
.mr-30 {
  margin-right: 30px;
}
.pr-10 {
  padding-right: 10px;
}
.title {
  font-size: 3rem;
  margin-top: 60px;
  margin-bottom: 20px;
  font-weight: 600;
  color: black;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  padding-bottom: 10px;
  border-radius: 20px;
  max-width: 310px;
  background: white;
  box-shadow: 0 0 10px rgba(107, 107, 107, 0.1);
}
.card img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.name {
  font-size: 1.5rem;
  font-weight: 600;
  color: black;
}
.description {
  font-size: 1rem;
  color: rgb(105, 104, 104);
}
.price {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgb(251, 156, 62);
}
.primary-action {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  color: white;
  scale: 1.1;
  background: #825CFF;
}
.cts {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Final Output:

Read Also how to create neobrutalism sign-up form using html and css only.jpg

How to Create Neobrutalism Sign-up Form Using HTML and CSS Only

Conclusion:

This tutorial taught us how to create simple and responsive shopping cards using HTML and CSS. These cards can be easily customized and integrated into any e-commerce website. By following these steps, you can build a visually appealing shopping card layout that enhances the user experience on your website.

With a solid understanding of HTML and CSS, you can expand this project by adding more features, such as shopping cart functionality, product details, and interactive elements.

Design by: Tom Nemec

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: create shopping cards using html and css, shopping card design with html and css, responsive shopping cards tutorial, html css shopping card tutorial, build shopping cards for website using html css, product card, e-commerce card, shopping cards, html css tutorial, shopping card design, create shopping cards

End of the article

Latest Post

Create Modern Expense Tracker Using HTML, CSS, and JavaScript

by Faraz - January 17, 2025

Learn how to create a modern expense tracker using HTML, CSS, and JavaScript. Follow this easy step-by-step guide to build your own tracker in minutes!