96 lines
1.7 KiB
HTML
96 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6951907799659255"
|
||
crossorigin="anonymous"></script>
|
||
<a href="index.html">home</a>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible"
|
||
content="IE=edge">
|
||
<meta name="viewport"
|
||
content="width=device-width,
|
||
initial-scale=1.0">
|
||
<style>
|
||
.box {
|
||
background-color: black;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
p {
|
||
font-size: 17px;
|
||
align-items: center;
|
||
}
|
||
.box a {
|
||
display: inline-block;
|
||
background-color: #fff;
|
||
padding: 15px;
|
||
border-radius: 3px;
|
||
}
|
||
.modal {
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(254, 126, 126, 0.7);
|
||
transition: all 0.4s;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
}
|
||
.content {
|
||
position: absolute;
|
||
background: white;
|
||
width: 400px;
|
||
padding: 1em 2em;
|
||
border-radius: 4px;
|
||
}
|
||
.modal:target {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
.box-close {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 15px;
|
||
color: #fe0606;
|
||
text-decoration: none;
|
||
font-size: 30px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="">
|
||
<a href="lol for pop up">
|
||
Click to Open Popup Box !
|
||
</a>
|
||
</div>
|
||
<div id=""></div>
|
||
</body>
|
||
<body>
|
||
<div class="box">
|
||
<a href="inportened">
|
||
Click to Open Popup Box !
|
||
</a>
|
||
</div>
|
||
<div id="popup-box" class="modal">
|
||
<div class="content">
|
||
<h1 style="color: green;">
|
||
i will take a break from making games !
|
||
</h1>
|
||
<b>
|
||
<p>have fun</p>
|
||
</b>
|
||
<a href="#"
|
||
class="box-close">
|
||
×
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|