Hello developers, today in this blog, you will learn how to create an Automatic Popup Card using HTML, CSS & JavaScript.
Popup boxes are the most useful way of showing some important information to the visitor. A popup box may appear as a message box in the browser-based on an action performed by a user. A popup box comes in different forms and shapes which include the alert box, flash notification box, dialog box, lightbox, etc.
In this program (Automatic Popup Card), on the webpage, popup, or a modal card the center of the webpage with a close icon at the top right of the card. There is an image on the left and the content area on the right side. This card is a popup offer card. There is a button which is named 'Get the Deal'.
The JavaScript code is used to close the function by clicking on the close icon and popup the card. At first, only the background linear gradient color will appear only after three seconds the box will popup. This timing condition is made by using JavaScript. The displaying time can be changed as per your need.
The source code of this Automatic Popup Card is given below, if you want the source code of this program, you can copy it. You can use this Automatic Popup Card code on your projects.
Automatic Popup 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.
* {
box-sizing: border-box;
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: #56ab2f;
background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);
background: linear-gradient(to right, #a8e063, #56ab2f);
}
.popupBox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.popupBox__content {
position: relative;
width: 600px;
height: 400px;
background: #fff;
border-radius: 30px;
display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.popupBox__img {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.popupBox__img img{
width: 60%;
}
.popupBox__img::before {
content: "";
position: absolute;
width: 250px;
height: 250px;
background: #e7ffe0;
border-radius: 50%;
}
.popupBox__img img {
position: relative;
max-width: 250px;
z-index: 1;
}
.popupBox__contentTwo {
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.popupBox__title {
color: #333;
line-height: 1em;
font-weight: 300;
font-size: 2em;
}
.popupBox__titleTwo {
font-size: 4em;
color: #887fff;
line-height: 1em;
}
.popupBox__titleTwo span {
color: #333;
font-size: 0.75em;
text-transform: uppercase;
}
.popupBox__description {
font-weight: 300;
}
.popupBox__btn {
display: inline-block;
padding: 10px 20px;
background: #887fff;
text-decoration: none;
color: #000;
margin-top: 15px;
border-radius: 10px;
}
.close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: #f3f3f3 url(https://www.pikpng.com/pngl/m/302-3024308_close-icon-png-x-png-icon-clipart.png);
background-repeat: no-repeat;
background-size: 10px;
background-position: center;
z-index: 10;
cursor: pointer;
border-radius: 50%;
}
@media (max-width: 768px) {
.popupBox__content {
width: 300px;
height: auto;
flex-direction: column;
}
.popupBox__img {
height: 200px;
transform: translateY(-50px);
}
.popupBox__contentTwo {
height: auto;
text-align: center;
padding: 20px;
padding-top: 0;
}
.popupBox__img::before {
background: #fff;
}
.close {
top: -50px;
right: -10px;
background: #fff url(./img/close.png);
background-repeat: no-repeat;
background-size: 10px;
background-position: center;
}
}
.credit a{
text-decoration: none;
color: #887fff;
}
.credit {
margin-top: 10px;
}
const popup = document.querySelector(".popupBox");
const close = document.querySelector(".close");
window.onload = function () {
setTimeout(() => {
popup.style.display = "block";
}, 3000);
};
close.addEventListener("click", () => {
popup.style.display = "none";
});
Thank you for reading our blog. If you face any problem in creating this Automatic Popup 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