POP-UP-BOX CREATION
Hey guy's this tutorial is based on How to create simple pop-up-box using only HTML and CSS . No JavaScript code is used here. Pop-up-box will occur every time when you visit my blog . It will also occur when you refresh the web page. So we hope you will like our this concept of designing pop-up-box .
Programming code :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop-up box creation</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
:root{
--w : #fff;
}
body{
background-image: linear-gradient(rgba(0,0,0,0.4),
rgba(0,0,0,0.4)),url(../Images/Nature.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
h1{
font-size: 5rem;
color: var(--w);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
font-weight: bold;
letter-spacing: .2rem;
text-align: center;
padding: 2rem 0rem;
}
#popup{
width: 40rem;
height: auto;
background-color:red;
color:var(--w);
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
padding-bottom: 3rem;
border-radius: 3rem;
display: none;
transition: all 1s ease;
box-shadow: 0.5rem 0.5rem 2rem 0.3rem yellow,
-0.5rem -0.5rem 2rem 0.3rem yellow;
}
#popup h2{
font-size: 3rem;
text-align: center;
padding: 5rem 0rem 3rem 0rem;
}
#popup h3{
font-size: 2rem;
text-align: center;
padding: 3rem 0rem 5rem 0rem;
}
#popup label i{
position: absolute;
right: 0;
padding: 1rem;
background-color: blue;
font-size:2rem;
text-align: center;
cursor: pointer;
}
#popup #a{
background-color: green;
text-decoration: none;
text-align: center;
padding:1rem 2rem;
color: var(--w);
border: .2rem solid var(--w);
font-size: 2rem;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#popup #a:hover{
background-color: var(--w);
color: green;
border: .2rem solid green;
}
input[type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<h1>WEB-DEVELOPMENT</h1>
<input type="checkbox" id="c">
<div id="popup">
<label for="c" id="l" title="Close"><i class="fa fa-times"></i></label>
<h2>Welcome to <br/>WEB-DEVELOPMENT!</h2>
<h3>Subscribe Our Blog for New Updates!</h3>
<center><a href="#" id="a" title="Subscribe us">SUBSCRIBE</a></center>
</div>
<script>
setTimeout(function(){
document.getElementById('popup').style.display = "block";
} ,5000);
document.getElementById('l').addEventListener("click",function(){
document.getElementById('popup').style.display = "none";
})
</script>
</body>
</html>
OUTPUT :)
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
.){kind=link}