Skip to content

Instantly share code, notes, and snippets.

@HeNy007

HeNy007/index.html

Created September 7, 2022 14:47
Show Gist options
  • Save HeNy007/c0ced3e44b1622d6d134427ca0573317 to your computer and use it in GitHub Desktop.
Save HeNy007/c0ced3e44b1622d6d134427ca0573317 to your computer and use it in GitHub Desktop.
Download ZIP
vYdJJxd
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--====== Design by codemediaweb.com =====-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Stylesheets-->
<style media="screen">
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #8fbaec;
}
.popup{
background-color: #ffffff;
width: 420px;
padding: 30px 40px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
border-radius: 8px;
font-family: "Poppins",sans-serif;
display: none;
text-align: center;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
h2{
margin-top: 10px;
font-size: 25px;
}
.popup button{
display: block;
position: absolute;
top: 0;
right: 0;
margin: 10px 10px auto;
background-color: transparent;
font-size: 30px;
color: #ffffff;
background: #03549a;
border-radius: 100%;
width: 40px;
height: 40px;
border: none;
outline: none;
cursor: pointer;
}
.popup p{
font-size: 14px;
text-align: justify;
margin: 20px 0;
line-height: 25px;
}
a{
display: block;
width: 150px;
position: relative;
margin: 10px auto;
font-size: 17px;
text-align: center;
background-color: red;
border-radius: 10px;
color: #ffffff;
text-decoration: none;
padding: 10px 0;
}
.icon1{
font-size: 60px;
background: red;
height: 120px;
width: 120px;
color: white;
border-radius: 50%;
line-height: 120px;
text-align: center;
}
</style>
</head>
<body>
<div class="popup">
<div class="fab fa-youtube icon1"></div>
<button id="close">&times;</button>
<h2> Code Media </h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui,
</p>
<a href="#">Subscribe Here</a>
</div>
<!--Script-->
<script type="text/javascript">
window.addEventListener("load", function(){
setTimeout(
function open(event){
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function(){
document.querySelector(".popup").style.display = "none";
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment