Responsive Product Cards | With Quick Popup View - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! 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.

First, create the index.html file and the style.css file. After you created these two files, Then link the style.css file and link the font awesome libraries in between <head></head> tags to the index.html file. Then start the HTML part of the product card in the index.html file as you can see in the video. After the HTML part of the product card is complete, then go to the style.css file and do the styling part of the product card as you can see in the video. After the styling part of the product card is complete, then go to the index.html file for the HTML part of the product card quick popup view. After complete the HTML part of the quick popup view, then go to the style.css file to the styling part of the quick popup view. Complete it as you can see in the video. After styling of the popup view is complete, then go back to the index.html file to the javascript part of the product card and the quick popup view. In the index.html file before the body close tag open <script></script> tags. Then complete the javascript part of the product card and the quick popup view as you can see in the video. So that's all, Hope this video will be helpful to design a responsive quick popup view for an e-commerce product card using HTML, CSS, and Vanilla Javascript.

Source Codes

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>

//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;
  }
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

TharushaJanuary 27, 2021 at 1:24 AM
This is so great! Keep it up.
hindrikJanuary 30, 2021 at 1:22 PM
awesome
Praddep kumarFebruary 14, 2021 at 8:48 AM
Thanks guruji! But will you teach java.
UnknownMarch 31, 2021 at 7:06 AM
Good one. I want to make this into a slider with same features and more no of cards. How can I do that?
Chitra K ShresthaJanuary 15, 2022 at 5:41 PM
You are truly an amazing and Inspiration for my journey to coding. I love your work. Thank you for all you are doing.
AnonymousJanuary 11, 2023 at 11:50 AM
Well hello there! well when i adjust everything, it makes padding-top to much if you know what I mean. Well, hope you fix it.

Wednesday, January 13, 2021

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

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

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

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form