You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.9 KiB
HTML
167 lines
3.9 KiB
HTML
5 years ago
|
<!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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card_div {
|
||
|
|
width: 440px;
|
||
|
|
height: 710px;
|
||
|
|
box-shadow: 10px 10px 10px lightslategray;
|
||
|
|
transition: transform 250ms ease-in-out;
|
||
|
|
background-color: #f8f5f1ff;
|
||
|
|
background-image: url(images/summoning/bordour.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: auto 680px;
|
||
|
|
background-position: 15px 15px;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.card_div .description {
|
||
|
|
font-family: BLKCHCRY;
|
||
|
|
}
|
||
|
|
.card_div .lower_part {
|
||
|
|
background-image: url(images/summoning/card-name.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 50%;
|
||
|
|
background-position: right 10px bottom 5px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
</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/eniac6.png" width="440" height="710">
|
||
|
|
|
||
|
|
<div class="card_div ml-5 d-flex flex-column">
|
||
|
|
<div class="upper_part flex-grow-1 d-flex flex-row">
|
||
|
|
<div class="description">
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
rand Invocation of the Great Eniac Female Computers
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
O spirits,I summon you, to appear now by the power of the Great Name of Ada; O spirits of Eniac Women, I summon you;
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
May the sacred pages of the Syster Papyri Magicae reveil to me the knowledge and power of the Systers; This day and always.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
||
|
|
|
||
|
|
Jean, Marlyn, Ruth, Betty, Frances, Kay.
|
||
|
|
|
||
|
|
Send me a quest.
|
||
|
|
|
||
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
J $ M @ R =
|
||
|
|
B @ F & K
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="picture">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="lower_part flex-grow-0"></div>
|
||
|
|
</div>
|
||
|
|
</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="quest-usenet.html" class="ml-2">Summon the Spirits to get a quest</a>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-left mt-2">
|
||
|
|
<img src="images/wand.png" width="60" height="29"><a href="game-over.html" class="ml-2">I don't believe in pagan data</a>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex justify-content-left mt-2">
|
||
|
|
|
||
|
|
|
||
|
|
</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 => {
|
||
|
|
const zoom = e.deltaY > 0 ? 'out' : 'in';
|
||
|
|
if(zoom === 'in') {
|
||
|
|
card.classList.add('scaledup');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
card.classList.remove('scaledup');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|
||
|
|
|