Responsive Product Cards | With Quick Popup View Using HTML, CSS & Javascript

In this video, you are going to learn how to design Responsive e-commerce product cards with quick popup views using HTML, CSS, and Vanilla Javascript. The product card includes the product name, product price, and quick popup view button. The product popup view card includes product name, description, product price, add cart button, add to wishlist button, and popup card close button. So this video will be helpful for you to get an idea about how to design a quick popup view for an e-commerce website. Let’s see how to design this e-commerce product card with a quick popup view.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Product Cards | With Quick Popup View</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  </head>
  <body>

    <div class="container">
      <div class="product">
        <div class="product-card">
          <h2 class="name">Nike Shoe</h2>
          <span class="price">$120.00</span>
          <a class="popup-btn">Quick View</a>
          <img src="1.png" class="product-img" alt="">
        </div>
        <div class="popup-view">
          <div class="popup-card">
            <a><i class="fas fa-times close-btn"></i></a>
            <div class="product-img">
              <img src="1.png" alt="">
            </div>
            <div class="info">
              <h2>Nike Shoe<br><span>Men's Sport</span></h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <span class="price">$120.00</span>
              <a href="#" class="add-cart-btn">Add to Cart</a>
              <a href="#" class="add-wish">Add to Wishlist</a>
            </div>
          </div>
        </div>
      </div>
      <div class="product">
        <div class="product-card">
          <h2 class="name">Smart Watch</h2>
          <span class="price">$100.00</span>
          <a class="popup-btn">Quick View</a>
          <img src="2.png" class="product-img" alt="">
        </div>
        <div class="popup-view">
          <div class="popup-card">
            <a><i class="fas fa-times close-btn"></i></a>
            <div class="product-img">
              <img src="2.png" alt="">
            </div>
            <div class="info">
              <h2>Smart Watch<br><span>Smart Sport Modes</span></h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <span class="price">$100.00</span>
              <a href="#" class="add-cart-btn">Add to Cart</a>
              <a href="#" class="add-wish">Add to Wishlist</a>
            </div>
          </div>
        </div>
      </div>
      <div class="product">
        <div class="product-card">
          <h2 class="name">Camera</h2>
          <span class="price">$250.00</span>
          <a class="popup-btn">Quick View</a>
          <img src="3.png" class="product-img" alt="">
        </div>
        <div class="popup-view">
          <div class="popup-card">
            <a><i class="fas fa-times close-btn"></i></a>
            <div class="product-img">
              <img src="3.png" alt="">
            </div>
            <div class="info">
              <h2>Camera<br><span>Classic Camera</span></h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
              <span class="price">$250.00</span>
              <a href="#" class="add-cart-btn">Add to Cart</a>
              <a href="#" class="add-wish">Add to Wishlist</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
    var popupViews = document.querySelectorAll('.popup-view');
    var popupBtns = document.querySelectorAll('.popup-btn');
    var closeBtns = document.querySelectorAll('.close-btn');

    //javascript for quick view button
    var popup = function(popupClick){
      popupViews[popupClick].classList.add('active');
    }

    popupBtns.forEach((popupBtn, i) => {
      popupBtn.addEventListener("click", () => {
        popup(i);
      });
    });

    //javascript for close button
    closeBtns.forEach((closeBtn) => {
      closeBtn.addEventListener("click", () => {
        popupViews.forEach((popupView) => {
          popupView.classList.remove('active');
        });
      });
    });
    </script>

  </body>
</html>

style.css



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #151515;
}

.container{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

/*Styles for product card*/

.product .product-card{
  z-index: 1;
  background: #1D212B;
  position: relative;
  width: 300px;
  height: 400px;
  margin: 40px;
  border-radius: 10px;
}

.product .product-card:before{
  content: '';
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.product .product-card .product-img{
  z-index: 1;
  position: absolute;
  max-width: 350px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product .product-card .name{
  z-index: 2;
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 130px;
  font-size: 20px;
  letter-spacing: 1px;
}

.product .product-card .price{
  z-index: 2;
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 80px;
  font-size: 30px;
  font-weight: 300;
}

.product .product-card .popup-btn{
  z-index: 2;
  color: #fff;
  background: #555;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
}

/*Styles for popup view*/

.product .popup-view{
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}

.product .popup-view.active{
  opacity: 1;
  visibility: visible;
}

.product .popup-card{
  position: relative;
  display: flex;
  width: 800px;
  height: 500px;
  margin: 20px;
}

.product .popup-card .product-img{
  z-index: 2;
  background: #1D212B;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 90%;
  transform: translateY(25px);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.product .popup-card .product-img img{
  z-index: 2;
  position: relative;
  width: 450px;
  left: -50px;
}

.product .popup-card .info{
  z-index: 2;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 55%;
  height: 100%;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 10px;
}

.product .popup-card .close-btn{
  color: #555;
  z-index: 3;
  position: absolute;
  right: 0;
  font-size: 20px;
  margin: 20px;
  cursor: pointer;
}

.product .popup-card .info h2{
  font-size: 40px;
  line-height: 20px;
  margin: 10px;
}

.product .popup-card .info h2 span{
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.product .popup-card .info p{
  font-size: 15px;
  margin: 10px;
}

.product .popup-card .info .price{
  font-size: 45px;
  font-weight: 300;
  margin: 10px;
}

.product .popup-card .info .add-cart-btn{
  color: #fff;
  background: #009DD2;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin: 10px auto;
  padding: 10px 50px;
  border-radius: 20px;
}

.product .popup-card .info .add-wish{
  color: #009DD2;
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}

/*Responsive styles*/

@media (max-width: 900px){
  .product .popup-card{
    flex-direction: column;
    width: 550px;
    height: auto;
  }

  .product .popup-card .product-img{
    z-index: 3;
    width: 100%;
    height: 200px;
    transform: translateY(0);
    border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .product .popup-card .product-img img{
    left: initial;
    max-width: 100%;
  }

  .product .popup-card .info{
    width: 100%;
    height: auto;
    padding: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .product .popup-card .info h2{
    margin: 20px 5px 5px 5px;
    font-size: 25px;
  }

  .product .popup-card .info h2 span{
    font-size: 10px;
  }

  .product .popup-card .info p{
    margin: 5px;
    font-size: 13px;
  }

  .product .popup-card .info .price{
    margin: 5px;
    font-size: 30px;
  }

  .product .popup-card .info .add-cart-btn{
    margin: 5px auto;
    padding: 5px 40px;
    font-size: 14px;
  }

  .product .popup-card .info .add-wish{
    font-size: 14px;
  }

  .product .popup-card .close-btn{
    z-index: 4;
  }
}

#css #html #javascript