summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorbt <bt@web>2023-11-28 08:03:01 -0500
committerIkiWiki <ikiwiki.info>2023-11-28 08:03:01 -0500
commit0f95435c01d4fa0aec577312212728201c0eff7d (patch)
tree4684b117913faa0e43553364bbf2922e21a9d2ec
parent05473082aeb775cbf38ac8883c16ecf298115e36 (diff)
-rw-r--r--posts/animated-card-tiles.md9
1 files changed, 4 insertions, 5 deletions
diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md
index 4cbc8b7..f24e5cb 100644
--- a/posts/animated-card-tiles.md
+++ b/posts/animated-card-tiles.md
@@ -1,6 +1,5 @@
-# Animated Card Tiles
-
-2019-02-27
+[[!meta title=“Animated Card Tiles”]]
+[[!meta date=“2019-02-27”]]
*The design trend of using "cards" or "tiles" to display interactive* sections/article headings in an app or website remains a popular choice among designers. So, let's build a set of animated cards with only HTML &amp; CSS.
@@ -21,7 +20,7 @@ For the base skeleton of these cards we only need:
- the inner child element that will display on `:hover`
- proper `h4` and `p` tags inside that child element
-
+‘’’
<div class="card-tiles-container">
<div class="card-tile">
<div class="text-content">
@@ -30,7 +29,7 @@ For the base skeleton of these cards we only need:
</div>
</div>
</div>
-
+‘’’
That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier.