diff --git a/tarotcard.css b/tarotcard.css index 81584a5..eb0f6bc 100644 --- a/tarotcard.css +++ b/tarotcard.css @@ -1,3 +1,7 @@ +:root { + --tarot-card-title-background-color: rgb(234, 191, 99); +} + .tarot-card { aspect-ratio: 7 / 12; @@ -13,3 +17,23 @@ .tarot-card__section:nth-child(1) { 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; +} diff --git a/test/index.html b/test/index.html index be0035d..8604197 100644 --- a/test/index.html +++ b/test/index.html @@ -25,12 +25,13 @@
-
Section 1
-
Section 2
-
Section 3
-
Section 4
- -

The Simple Card

+
+ The Simple Card artwork image. +
+ +
+

The Simple Card

+