<!DOCTYPE html>
< html lang = "en" class = "w-100 h-100" >
< head >
< meta charset = "UTF-8" >
< title > < / title >
< link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" >
< style >
@font-face {
font-family: BLKCHCRY;
src: url("fonts/BLKCHCRY.TTF");
}
p {
font-size: 22px;
font-family: BLKCHCRY;
color: #26263dff;
}
.text-left {
max-width: 53em;
margin: 0 auto;
text-align: left;
}
a {
font-size: 22px;
font-family: BLKCHCRY;
}
a:link {
color: #42b1e8ff;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #42b1e8ff;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: magenta;
background-color: transparent;
text-decoration: underline;
}
#cardtest {
box-shadow: 10px 10px 10px lightslategray;
transition: transform 250ms ease-in-out;
}
#cardtest.rotated {
transform: rotate(90deg);
}
#cardtest.rotated.scaledup {
transform: rotate(90deg) scale(1.5);
}
< / style >
< / head >
< body class = "w-100 h-100 d-flex flex-column mt-5" >
< div class = "flex-grow-1 d-flex justify-content-center align-items-center" >
< img id = "cardtest" src = "images/mapa1.png" width = "450" height = "723" >
< / div >
< div class = "text-left mt-5" >
< div class = "d-flex justify-content-left mt-3" >
< img src = "images/wand.png" width = "60" height = "29" > < a href = "mapa1.html" class = "ml-2" > Listen to a testimony about the Systers List.< / a >
< / div >
< div class = "d-flex justify-content-left mt-3" >
< img src = "images/wand.png" width = "60" height = "29" > < a target = "_blank" rel = "noopener noreferrer" href = "http://systers.org/mailman/listinfo/systers" class = "ml-2" > Join this Email List.< / a >
< / div >
< div class = "d-flex justify-content-left mt-3" >
< img src = "images/wand.png" width = "60" height = "29" > < a href = "random.html" class = "ml-2" > Retrieve another papyrus.< / a >
< / div >
< / div > < br >
< div class = "d-flex justify-content-center mt-5 mb-5" >
< img src = "images/footer.png" width = "410" height = "83" >
< / div >
< script >
const card = document.getElementById("cardtest");
card.addEventListener('click', e => {
card.classList.remove('scaledup');
card.classList.toggle('rotated');
});
card.addEventListener('wheel', e => {
if(card.classList.contains('rotated')) {
e.preventDefault();
}
const zoom = e.deltaY > 0 ? 'out' : 'in';
if(zoom === 'in') {
card.classList.add('scaledup');
}
else {
card.classList.remove('scaledup');
}
});
< / script >
< / body >
< / html >