HTML code below goes just after <body> tag:
3
<!-- Start Popup -->
<div class="w3-animate-opacity" id="ac-wrapper" style="display:none">
<div id="popup" style="background-color:black">
<div class="w3-center">
<p><input type="submit" name="submit" value="Close" onClick="PopUp('hide')" style="border-radius:4px; float:right; margin:10px 30px 0 0;" /></p>
<h4 style="color:white">Things About Web Design</h4><br />
<h5 style="color:white">Have a great 2021 <input id="read" type="submit" value="Read more" onClick="PopUp('hide')" style="border-radius:4px; margin:1px 30px 1px 1px;"></h5>
<a href="https://pngimage.net/tribal-flames-png-3/" title="Image from PNG Image"><img src="https://pngimage.net/wp-content/uploads/2018/06/tribal-flames-png-3.png" alt="tribal flames png 3"></a>
</div>
</div>
</div>
<!-- End Popup -->
Javascript code below goes just before </body> tag:
2
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 3000);
};
</script>
The CSS code below goes in <head> or in file: css/style.css
1
<style>
#read {
cursor:pointer;
background-color:transparent;
border:none;
color:DodgerBlue;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 255px;
height: auto;
background: black;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 100px; left:15%;
}
#flames {
width:245px;
height:139px;
z-index:99;
border-radius:25px;
margin:0 0 0 0;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 355px;
height: auto;
background: black;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 120px; left:24%;
}
#flames {
width:345px;
height:151px;
z-index:99;
border-radius:25px;
margin:0 0 0 0;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 455px;
height: auto;
background: black;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 120px; left:24%;
}
#flames {
width:445px;
height:141px;
z-index:99;
border-radius:25px;
margin:0 0 0 0;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 505px;
height: auto;
background: black;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 120px; left:26%;
}
#flames {
width:495px;
height:177px;
z-index:99;
border-radius:25px;
margin:0 0 0 0;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup {
width: 555px;
height:auto;
background: black;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 120px; left:27%;
}
#flames {
width:545px;
height:247px;
z-index:99;
border-radius:25px;
margin:0 0 0 0;
}
}
</style>
Today is the first day of the rest of your life!
