diff options
| author | bt <bt@web> | 2023-11-28 08:08:24 -0500 |
|---|---|---|
| committer | IkiWiki <ikiwiki.info> | 2023-11-28 08:08:24 -0500 |
| commit | 04a2f11b199d75ca6fe08c10da314799ac66e3a2 (patch) | |
| tree | 39cb64055b272621cc731e0c0b886afba368acf9 /posts/animated-card-tiles.md | |
| parent | 0f95435c01d4fa0aec577312212728201c0eff7d (diff) | |
Diffstat (limited to 'posts/animated-card-tiles.md')
| -rw-r--r-- | posts/animated-card-tiles.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md index f24e5cb..efe9580 100644 --- a/posts/animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -1,5 +1,5 @@ -[[!meta title=“Animated Card Tiles”]] -[[!meta date=“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. @@ -20,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"> @@ -29,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. |