<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<body>
<!--button to open modal-->
<h1>Try exiting the tab...</h1>
<h3>Now play with modals</h3>
<div class="btn-container">
<button class="btn modal-btn-WO">White Out</button>
<button class="btn modal-btn-BO">Black Out</button>
</div>
<h3 class="tut"><a href="#">Link to the tutorial</a></h3>
<!--modal-->
<div id="zeldaModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="message-container fade-in">
<p class="modal-message">
<span>it's </span>
<span>dangerous </span>
<span>to </span>
<span>go </span>
<br>
<span>alone! </span>
<span>take </span>
<span>this.</span>
</p>
</div>
<div class="icon-container">
<img src="https://raw.githubusercontent.com/pin0S/zelda-meme-modal/main/assets/flame.png" id='flame-one' class="flame image">
<img src="https://raw.githubusercontent.com/pin0S/zelda-meme-modal/96970eadd5059c2b0e5f2884ac85a1392f3b633d/assets/oldman.svg" class="image" id="old-man">
<img src="https://raw.githubusercontent.com/pin0S/zelda-meme-modal/main/assets/flame.png" id="flame-two" class="flame image">
</div>
<div class="resume-container">
<img id="sword" src="https://raw.githubusercontent.com/pin0S/zelda-meme-modal/main/assets/sword.jpg">
<a href="#" id="resume">My Resume</a>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
body {
margin: 0;
padding: 0;
min-height:100%;
height:100%;
font-family: Verdana, sans-serif;
}
h1 {
padding: 150px 0 30px 0;
text-align: center;
font-size: 30px;
font-weight: 400;
line-height: 30px;
}
h3 {
padding: 0px 0 20px 0;
text-align: center;
font-weight: 400;
line-height: 10px;
}
.tut a {
margin-top: 5px;
text-decoration: none;
color: green;
}
.tut a:hover {
color: #d4ce46;
background:#0e5135;
padding: 3px;
}
.btn-container {
text-align: center;
}
.modal-btn-BO {
display: inline-block;
background-color: #000;
border: none;
border-radius: 3px;
color: #fff;
padding: 10px 15px;
margin: 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.modal-btn-WO {
display: inline-block;
background-color: #fefefe;
border: none;
border-radius: 3px;
color: #000;
padding: 10px 15px;
margin: 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.btn:hover {
background:#0e5135;
color: #d4ce46;
}
.modal {
display: none;
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.blackout {
position: relative;
z-index: 1;
background-color: black;
transition: background-color linear 0.1s;
}
.modal-content {
text-align: center;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
background-color: #000;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.image {
width:120px;
height: 120px;
padding: 20px 50px;
}
.flame {
filter: drop-shadow(0px 0px 4px darkorange);
}
.modal-message {
text-transform: uppercase;
font-family: 'Press Start 2P', cursive;
font-size: 32px;
color: #fff;
}
.resume-container {
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 0px 100px 0px;
animation: resume-up ease-out 1.5s forwards;
animation-delay: 3.5s;
}
#sword {
width: 100px;
height: 100px;
}
#resume {
text-decoration: none;
display: inline;
font-size: 0.7em;
padding: 20px;
background: rgb(124, 74, 74);
border-radius: 4%;
color: #fff;
text-transform: uppercase;
font-family: "Press Start 2P", cursive;
border: 3px solid rgb(212, 168, 81);
}
.fade-in span {
opacity: 0;
animation: text-fade 0.5s linear forwards;
animation-delay: 0.3s;
}
.fade-in span:nth-of-type(2) {
animation-delay: 0.7s;
}
.fade-in span:nth-of-type(3) {
animation-delay: 1.2s;
}
.fade-in span:nth-of-type(4) {
animation-delay: 1.7s;
}
.fade-in span:nth-of-type(5) {
animation-delay: 2.2s;
}
.fade-in span:nth-of-type(6) {
animation-delay: 2.7s;
}
.fade-in span:nth-of-type(7) {
animation-delay: 2.9s;
}
@keyframes text-fade{
0% {
opacity: 0.1;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes resume-up {
from {
opacity: 0.1;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// Get the modal
var modal = document.getElementById("zeldaModal");
// Get the button that opens the modal
var woBtn = document.querySelector(".modal-btn-WO");
var boBtn = document.querySelector(".modal-btn-BO");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
woBtn.onclick = function() {
modal.style.display = "block";
}
boBtn.onclick = function() {
modal.style.display = "block";
document.body.classList.add('blackout')
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
document.body.classList.remove('blackout')
}
const exitEvent = e => {
if (!e.toElement && !e.relatedTarget) {
document.removeEventListener('mouseout', exitEvent);
modal.style.display = "block";
document.body.classList.add('blackout');
}
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.body.classList.remove('blackout')
}
}
document.addEventListener('mouseout', exitEvent);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.