feat: day 1

Author: solygambas

001-expanding cards/index.html

@@ -9,6 +9,8 @@
       integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
       crossorigin="anonymous"
     /> -->
+    <!-- Add a favicon. -->
+    <link rel="icon" href="favicon.ico" />
     <link rel="stylesheet" href="style.css" />
     <title>Expanding cards</title>
   </head>
@@ -20,39 +22,49 @@
           background-image: url('https://images.unsplash.com/photo-1610212570473-6015f631ae96?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <!-- Change the Card Titles -->
+        <h3>Canada</h3>
       </div>
       <div
         class="panel"
         style="
           background-image: url('https://images.unsplash.com/photo-1606838830438-5f380a664a4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Argentina</h3>
       </div>
       <div
         class="panel"
         style="
           background-image: url('https://images.unsplash.com/photo-1606059100151-b09b22709477?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1778&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Paris</h3>
       </div>
       <div
         class="panel"
         style="
           background-image: url('https://images.unsplash.com/photo-1603048675767-6e79ff5b8fc1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Tokyo</h3>
       </div>
       <div
         class="panel"
         style="
           background-image: url('https://images.unsplash.com/photo-1595433502559-d8f05e6a1041?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
         "
       >
-        <h3>Explore the world</h3>
+        <h3>Brazil</h3>
+      </div>
+      <!-- Add a New Panel -->
+      <div
+        class="panel"
+        style="
+          background-image: url('https://images.unsplash.com/photo-1746105625407-5d49d69a2a47?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
+        "
+      >
+        <h3>Vietnam</h3>
       </div>
     </div>
     <script src="script.js"></script>

001-expanding cards/style.css

@@ -24,14 +24,16 @@ body {
   background-position: center;
   background-repeat: no-repeat;
   height: 80vh;
-  border-radius: 50px;
+  /* Adjust Card Corner Style */
+  border-radius: 0px;
   color: #fff;
   cursor: pointer;
   flex: 0.5;
   margin: 10px;
   position: relative;
-  transition: flex 0.7s ease-in;
-  -webkit-transition: all 700ms ease-in;
+  /* Modify Transition Speed */
+  transition: flex 0.2s ease-in;
+  -webkit-transition: all 200ms ease-in;
 }
 
 .panel h3 {
@@ -50,6 +52,8 @@ body {
 .panel.active h3 {
   opacity: 1;
   transition: opacity 0.3s ease-in 0.4s;
+  /* Change Active Panel Text Color */
+  color: silver;
 }
 
 @media (max-width: 480px) {