diff options
| author | bt <bt@web> | 2023-11-28 08:03:01 -0500 |
|---|---|---|
| committer | IkiWiki <ikiwiki.info> | 2023-11-28 08:03:01 -0500 |
| commit | 0f95435c01d4fa0aec577312212728201c0eff7d (patch) | |
| tree | 4684b117913faa0e43553364bbf2922e21a9d2ec /posts/animated-card-tiles.md | |
| parent | 05473082aeb775cbf38ac8883c16ecf298115e36 (diff) | |
Diffstat (limited to 'posts/animated-card-tiles.md')
| -rw-r--r-- | posts/animated-card-tiles.md | 9 |
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 & 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. |