From e6b2cdb7ff91639986ff625b76bce10c61f1c0a3 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 4 Feb 2024 14:05:50 -0800
Subject: [PATCH] Add big box shadow card

---
 index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/index.html b/index.html
index 1ddb3bf..6d7505f 100644
--- a/index.html
+++ b/index.html
@@ -315,6 +315,21 @@
       transition: filter 200ms;
     }
 
+    .card.big-box-shadow {
+      margin-block: 8px;
+      border: 1px solid hsl(0deg 0% 70%);
+      border-radius: 12px;
+      transition: padding 400ms, border 400ms, box-shadow 400ms;
+    }
+
+    .card.big-box-shadow:hover,
+    .card.big-box-shadow:focus-within {
+      border: 1px solid black;
+      box-shadow: 10px 10px black;
+      padding: 16px 24px 24px 16px;
+      transition: padding 200ms, border 200ms, box-shadow 200ms;
+    }
+
     /* Button hovers */
 
     button {
@@ -614,6 +629,10 @@
         <p>The text inside this card will become more "in-focus" when this card is hovered or focused.</p>
       </div>
 
+      <div class="card big-box-shadow">
+        <h2>Big box shadow</h2>
+        <p>A big box shadow will appear around this card when this card is hovered or focused.</p>
+      </div>
     </section>
 
     <section>
-- 
2.47.3