Beautiful product card HTML CSS design

An interesting and beautiful looking product card for your website HTML CSS.

CSS

body {
  min-height: 100vh;
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #202020;
  font-family: 'Raleway', sans-serif;
}

.product {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 320px;
  height: 500px;
  border-radius: 20px;
  background-color: #313131;
  box-shadow: -6px -6px 16px 0 rgba(255, 255, 255, 0.15), 6px 6px 16px 0 rgba(0, 0, 0, .85);
  color: white;
}

.product::before {
  content: '';
  display: block;
  width: 320px;
  height: 320px;
  position: absolute;
  top: -90px;
  right: -110px;
  z-index: 2;
  border-radius: 50%;
  transition: all .4s ease;
}

[data-color="blue"]::before {
  background-color: #009ca7;
}

[data-color="red"]::before {
  background-color: #f6392d;
}

.product_image {
  position: absolute;
  top: 110px;
  left: 24px;
  width: 270px;
  z-index: 3;
  transform: rotate(-10deg);
  opacity: 0;
  transition: all .4s ease, opacity .1s ease;
}

[data-color="blue"] [data-color="blue"] {
  opacity: 1;
}

[data-color="red"] [data-color="red"] {
  opacity: 1;
}

.product_brand {
  pointer-events: none;
  font-family: 'Oswald', sans-serif;
  font-size: 170px;
  font-style: italic;
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  z-index: 1;
  text-align: center;
  opacity: .1;
  transition: all .4s ease;
}

.product_content {
  margin-top: 330px;
  transition: all .4s ease;
}

.product_title {
  font-family: 'Oswald', sans-serif;
  text-align: center;
}

.product_form {
  text-align: center;
  opacity: 0;
  transition: all .3s ease;
}

.product_formTitle {
  display: inline-block;
  margin-right: 8px;
}

.product:hover .product_image {
  top: 100px;
}

.product.active::before {
  width: 450px;
  top: -130px;
  right: -70px;
}

.product.active .product_image {
  top: 40px;
}

.product.active .product_brand {
  bottom: 180px;
}

.product.active .product_content {
  margin-top: 230px;
}

.product.active .product_form {
  opacity: 1;
}

.radioColor {
  display: none;
}

.radioColor + label {
  text-indent: -999px;
  position: relative;
  top: -2px;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: red;
  border-radius: 50%;
  margin-right: 10px;
}

.radioColor_blue + label {
  background-color: #009ca7;
}

.radioColor_red + label {
  background-color: #f6392d;
}

.radioSize {
  display: none;
}

.radioSize + label {
  cursor: pointer;
  display: inline-block;
  color: #202020;
  background-color: white;
  width: 27px;
  height: 24px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  top: -1px;
  margin-right: 10px;
  padding-top: 3px;
  transition: all .2s ease;
}

.radioSize:checked + label {
  box-shadow: inset 0 0 0 2px #555;
}

input[type="submit"] {
    -webkit-appearance: none;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 16px;
    background: #009ca7;
    color: #ffffff;
}

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


      <!--fontawesome-->
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" 
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

      <link rel="stylesheet" href="style.css">


<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;900&display=swap" rel="stylesheet">
    <title>PRODUCT CARD</title>
  </head>
  
 
  <body>

    
<section class="product" data-color="blue">
  <img class="product_image" data-color="blue" src="https://res.cloudinary.com/axiol/image/upload/v1588109163/CodePen/nike-shoe-blue_injqk0.png" alt="">
  <img class="product_image" data-color="red" src="https://res.cloudinary.com/axiol/image/upload/v1588109163/CodePen/nike-shoe-red_m7bvr8.png" alt="">
  <span class="product_brand">Nike</span>
  <div class="product_content">
    <h1 class="product_title">Nike Running Shoes</h1>
    <form action="" class="product_form">
      <div class="product_formSection">
        <p class="product_formTitle">Color :</p>

        <span>
          <input class="radioColor radioColor_blue" type="radio" id="blue" name="color" value="blue" checked />
          <label class="labelColor" for="blue">Blue</label>
        </span>

        <span>
          <input class="radioColor radioColor_red" type="radio" id="red" name="color" value="red" />
          <label class="labelColor" for="red">Red</label>
        </span>
      </div>
      
      <div class="product_formSection">
        <p class="product_formTitle">Size :</p>

        <span>
          <input class="radioSize" type="radio" id="41" name="size" value="41" checked />
          <label for="41">41</label>
        </span>

        <span>
          <input class="radioSize" type="radio" id="42" name="size" value="42" />
          <label for="42">42</label>
        </span>
        
        <span>
          <input class="radioSize" type="radio" id="43" name="size" value="43" />
          <label for="43">43</label>
        </span>
        
        <span>
          <input class="radioSize" type="radio" id="44" name="size" value="44" />
          <label for="44">44</label>
        </span>
      </div>
      
      <input type="submit" value="Add to cart">
    </form>
  </div>
</section>
  



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   
   <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
   <script>
     const product = document.querySelector('.product');

     product.addEventListener('click',(e) => {
      product.classList.toggle('active');
     });

     const colorLabels = document.querySelectorAll('.labelColor');

colorLabels.forEach((colorLabel) => {
  colorLabel.addEventListener('click', (e) => {
    const color = e.explicitOriginalTarget.getAttribute('for');
    product.setAttribute('data-color', color);
  });
});
   </script>

   
   
   
  </body>
</html>

 

Author - Vishweb Design.
Link to the author in the video.

The source files can be downloaded from the link below.



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.