Product Card Design Using Html Css Only

Designing product cards using just HTML and CSS is an essential skill for making your website look great and easy to use. Product cards are like small snapshots of the items you're selling, and they play a big role in attracting and keeping customers on your website. In this tutorial, we'll show you how to create these product cards using only HTML and CSS. We'll guide you through the process, step by step, so you can make eye-catching and responsive product cards for your website or online store.

With HTML and CSS, you'll be able to make product cards that not only show off your items effectively but also make your website more user-friendly. It's a simple and powerful way to improve your online presence and provide a better shopping experience for your customers.

01. Html
02. CSS
03. Output
04. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Product Card Design Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Product Card Design Using Html Css | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <div class="image">
    <img src="shoes.png">
  </div>
 <div class="product">
    <h1>Men's Nike Shoes</h1>
    <p class="sub-heading">Inclusive of all taxes</p>
    <h2>$99.<small>99</small></h2>

  <p class="shoes-size-title">Choose Size</p>
  <div class="sizes-container">
    <div class="size">6</div>
    <div class="size">7</div>
    <div class="size">8</div>
    <div class="size">9</div>
    <div class="size">10</div>
    <div class="size">11</div>
    <div class="size">12</div>
  </div>
  <div class="colors">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="button">
    <button class="add">ADD TO CART</button>
  </div>
 </div>
</div>

</body>
</html>

<!DOCTYPE html>: This line specifies the document type and version of HTML being used.
<html>: The opening tag for the HTML document.
<head>: This section contains metadata about the page, including the title and a link to an external CSS file.
<title>: Sets the title of the webpage, which appears in the browser tab.
<link rel="stylesheet" href="style.css">: Links an external CSS stylesheet (style.css) to apply styles to the page.
<body>: The main content of the webpage starts here.
<div class="container">: A container for the product card.
<div class="image">: A container for the product image.
<img src="shoes.png">: Inserts an image of the product (shoes.png).
<div class="product">: A container for product details.
<h1>: The product title, "Men's Nike Shoes."
<p class="sub-heading">: A sub-heading, "Inclusive of all taxes."
<h2>: The product price, "$99.99," with a small decimal value.
<p class="shoes-size-title">: A title for selecting the shoe size.
<div class="sizes-container">: A container for available shoe sizes (from 6 to 12).
<div class="colors">: A container for product color options.
<div>: Three color options (represented as empty divs).
<div class="button">: A container for the "ADD TO CART" button.
<button class="add">ADD TO CART</button>: A button labeled "ADD TO CART" with the class "add" for styling.

Read Also:

CSS:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body{
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #5B8266;
}

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 700px;
  height: 360px;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 30px;
  background: #F5F5F5;
}

h1{
  font-size: 30px;
  color: #212922;
  margin-bottom: 6px;
}

h2{
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
}

img{
  width: 300px;
}

.sub-heading{
  color: black;
  font-size: 14px;
  margin-bottom: 8px;
}

.product{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 270px;
}

.shoes-size-title{
  padding-top: 20px;
}

.sizes-container{
  display: flex;
  width: 85%;
  padding-top: 5px;
}

.size{
  width: 30px;
  height: 30px;
  padding: 10px;
  text-align: center;
  border: 1px solid #294936;
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.size:hover{
  background: #294936;
  color: white;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.colors{
  display: flex;
  padding-top: 20px;
}

.colors:before{
  content: 'Colors:';
}

.colors div{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 3px;
}

.colors div:nth-child(1){
  background: grey;
}

.colors div:nth-child(2){
  background: black;
}

.colors div:nth-child(3){
  background: #3E6259;
}

button{
  background: #294936;
  padding: 14px;
  border: 0;
  border-radius: 2px;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
  margin-top: 24px;
  width: 100%;
  font-weight: bold;
}

button:hover{
  background: #5B8266;
  transition: all .4s ease-in-out;
}

button:focus{
  outline: none;
}

It(*) sets universal styles for all elements, such as removing margin and padding and adjusting the box model.
Styles are applied to the HTML and body, including the choice of the "Montserrat" font, centering content both vertically and horizontally, and setting a background color.
The .container class defines styles for a container that holds product details. It specifies its size, shadow, border radius, padding, and background color.
Styles for headings (h1, h2), images (img), and a sub-heading are defined.
The .product class is used to style the product section with specific height and layout properties.
Various styles for size options, color choices, and the "ADD TO CART" button are also included.
Hover and focus effects are added to enhance the user experience, like changing colors on hover and removing the outline on button focus.

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Product Card Design Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:

Archive