Responsive Popup Product Card using HTML, CSS & JavaScript

Responsive Popup Product Card using HTML, CSS & JavaScript

 Hello developers, today in this blog you'll learn to create a Responsive Popup Product Card using HTML, CSS & JavaScript.

A product card contains a picture or image of the product, price, and description of that product or an item. A product card is used to advertise a product to people.

In this blog (Responsive Popup Product Card), there is a button at the center of the webpage, by clicking on the button the product card will popup from the center of the webpage. The card contains the image of the product, description of the product. There are two buttons on the card as buy and close, which are used to buy the product and close it when the user doesn't want to. There is also a cross button at the top right of the card, which is used to close the product card. This product card is made responsive by using CSS media query property.

The source code of this Responsive Popup Product Card is given below, if you want the source code of this program, you can copy it. You can use this Responsive Popup Product Card code with your creativity and can take this product card to the next level.

Responsive Popup Product Card [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"> <link rel="stylesheet" href="style.css"> <title>Responsive Popup Product Card || Learningrobo</title> </head> <body> <section class="modal container"> <button class="modal__button" id="open-modal"> Open Modal </button> <div class="modal__container" id="modal-container"> <div class="modal__content"> <div class="modal__close close-modal" title="Close"> <i class='bx bx-x'></i> </div> <img src="https://cdn.pixabay.com/photo/2012/04/13/17/00/camera-32871__340.png" alt="" class="modal__img"> <h1 class="modal__title">Camera Click</h1> <p class="modal__description">Buy online... Enjoy with memories</p> <button class="modal__button modal__button-width"> Buy </button> <button class="modal__button-link close-modal"> Close </button> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </section> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page responsive and attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
:root {
  --hue: 240;
  --first-color: hsl(var(--hue), 16%, 18%);
  --first-color-alt: hsl(var(--hue), 16%, 12%);
  --title-color: hsl(var(--hue), 8%, 15%);
  --text-color: hsl(var(--hue), 8%, 35%);
  
  --container-color: #FFF;
  --body-font: 'Poppins', sans-serif;
  --big-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --z-modal: 1000;
}

@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 1.75rem;
    --normal-font-size: 1rem;
  }
}

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

body,
button{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body{
  background-color: #0093E9;
  color: var(--text-color);
  position: relative;
}

button{
  cursor: pointer;
  border: none;
  outline: none;
}

img{
  max-width: 100%;
  height: auto;
}
.container{
  margin-left: 1rem;
  margin-right: 1rem;
}

.modal{
  height: 100vh;
  display: grid;
  place-items: center;
}

.modal__button{
  display: inline-block;
  background-color: var(--first-color);
  color: #FFF;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
}

.modal__button:hover{
  background-color: var(--first-color-alt);
}

.modal__container{
  position: absolute;
  top: 0;
  left: 0;
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  width: 100%;
  height: 100%;
  display: grid;
  align-items: flex-end;
  overflow: hidden;
  transition: all .3s;
  z-index: var(--z-modal);
  visibility: hidden;
  opacity: 0;
}

.modal__content{
  position: relative;
  background-color: var(--container-color);
  text-align: center;
  padding: 3rem 2rem 2rem;
  border-radius: 1rem 1rem 0 0;
  transition: all .3s;
  transform: translateY(10%);
}

.modal__img{
  width: 150px;
  margin-bottom: .75rem;
}

.modal__close{
  display: inline-flex;
  background-color: var(--first-color);
  border-radius: .25rem;
  color: #FFF;
  font-size: 1.5rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
}

.modal__title{
  font-size: var(--big-font-size);
  color: var(--title-color);
  font-weight: 500;
}

.modal__description{
  margin-bottom: 1.5rem;
}

.modal__button-width{
  width: 90%;
}

.modal__button-link{
  display: block;
  margin: 1rem auto 0;
  background: #000;
  color: #fff;
  font-weight: 500;
  width: 90%;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  transition: .3s;
}

.show-modal{
  visibility: visible;
  opacity: 1;
}

.show-modal .modal__content{
  transform: translateY(0);
}
@media screen and (min-width: 576px){
  .modal__content{
    margin: auto;
    width: 380px;
    border-radius: 1.25rem;
  }

  .modal__img{
    width: 170px;
  }
}
.credit{
    text-align: center;
    color: #000;
    margin-top: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  
  .credit a{
    text-decoration: none;
    color:#072f5f;
    font-weight: bold;
  } 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const showModal = (openButton, modalContent) =>{
    const openBtn = document.getElementById(openButton),
    modalContainer = document.getElementById(modalContent)
    
    if(openBtn && modalContainer){
        openBtn.addEventListener('click', ()=>{
            modalContainer.classList.add('show-modal')
        })
    }
}
showModal('open-modal','modal-container')

const closeBtn = document.querySelectorAll('.close-modal')

function closeModal(){
    const modalContainer = document.getElementById('modal-container')
    modalContainer.classList.remove('show-modal')
}
closeBtn.forEach(c => c.addEventListener('click', closeModal))
We hope you would like this Responsive Popup Product Card using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Popup Product Card using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools