TheMagician
/
tarotcard.css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split card into artwork and title sections

This commit is contained in:
The Magician 2023-12-01 14:45:04 +00:00
parent ad19b85751
commit a4554fbbe3
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
tarotcard.css
View File

@ -1,3 +1,7 @@
:root {
--tarot-card-title-background-color: rgb(234, 191, 99);
}
.tarot-card { .tarot-card {
aspect-ratio: 7 / 12; aspect-ratio: 7 / 12;
@ -13,3 +17,23 @@
.tarot-card__section:nth-child(1) { .tarot-card__section:nth-child(1) {
border-top: 0.4rem solid black; border-top: 0.4rem solid black;
} }
.tarot-card__section--art {
height: 90%;
}
.tarot-card__art {
height: 100%;
width: 100%;
object-fit: cover;
}
.tarot-card__section--title {
height: 10%;
background: var(--tarot-card-title-background-color);
}
.tarot-card__title {
margin: 0;
}

13
test/index.html
View File

@ -25,12 +25,13 @@
<div class="center-grid"> <div class="center-grid">
<div id="simple-card" class="tarot-card"> <div id="simple-card" class="tarot-card">
<div class="tarot-card__section">Section 1</div> <div class="tarot-card__section tarot-card__section--art">
<div class="tarot-card__section">Section 2</div> <img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Simple Card artwork image.">
<div class="tarot-card__section">Section 3</div> </div>
<div class="tarot-card__section">Section 4</div>
<div class="tarot-card__section tarot-card__section--title">
<p>The Simple Card</p> <p class="tarot-card__title">The Simple Card</p>
</div>
</div> </div>
</div> </div>