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.
@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;
}
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))
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.
Post a Comment
Thank you
Learning robo team