tarotcard.css/test/index.html

56 lines
1.5 KiB
HTML
Raw Normal View History

2023-12-01 13:59:53 +00:00
<!DOCTYPE html>
<html>
<head>
<title>tarotcard.css Test Page</title>
<style>
body {
height: 100vh;
background: #000056;
2023-12-01 16:43:12 +00:00
margin: 0 auto;
2023-12-01 16:45:28 +00:00
overflow-y: hidden;
2023-12-01 13:59:53 +00:00
}
.center-grid {
height: 100vh;
2023-12-01 15:09:30 +00:00
display: flex;
justify-content: space-evenly;
align-items: center;
2023-12-01 13:59:53 +00:00
}
</style>
<link rel="stylesheet" href="styles/tarotcard.css"/>
2023-12-01 15:09:05 +00:00
<link rel="stylesheet" href="styles/tarotcard-deal.css"/>
2023-12-01 13:59:53 +00:00
</head>
<body>
<div class="center-grid">
2023-12-01 15:09:05 +00:00
<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
2023-12-01 13:59:53 +00:00
<div id="simple-card" class="tarot-card">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image." title="The Simple Card artwork image.">
</div>
<div class="tarot-card__section tarot-card__section--title">
<h1 class="tarot-card__title">The Simple Card.</h1>
</div>
2023-12-01 13:59:53 +00:00
</div>
2023-12-01 15:09:05 +00:00
<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
2023-12-01 16:43:12 +00:00
<div id="deal-card" class="tarot-card tarot-card--deal">
2023-12-01 15:09:05 +00:00
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
</div>
<div class="tarot-card__section tarot-card__section--title">
<h1 class="tarot-card__title">The Deal Card.</h1>
</div>
</div>
2023-12-01 13:59:53 +00:00
</div>
</body>
</html>