filippoerbisti · filippoerbisti · May 19, 2022 · May 19, 2022 · May 20, 2022 · May 20, 2022
diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-# Some cool CSS effects
+# Expanding Flex Cards CSS
 
-Check my branches and have fun!
-
-View [DEMOS](https://codepen.io/filippoerbisti) on Codepen.
+View and try [DEMO](https://codepen.io/filippoerbisti/pen/wvyqYZz) on Codepen.
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Expanding Flex Cards CSS</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+    <div class="options">
+        <div class="option active" style="--optionBackground:url(https://66.media.tumblr.com/6fb397d822f4f9f4596dff2085b18f2e/tumblr_nzsvb4p6xS1qho82wo1_1280.jpg);">
+           <div class="shadow"></div>
+           <div class="label">
+              <div class="icon">
+                 <i class="fas fa-walking"></i>
+              </div>
+              <div class="info">
+                 <div class="main">Title1</div>
+                 <div class="sub">Parargraph1</div>
+              </div>
+           </div>
+        </div>
+        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg);">
+           <div class="shadow"></div>
+           <div class="label">
+              <div class="icon">
+                 <i class="fas fa-snowflake"></i>
+              </div>
+              <div class="info">
+                 <div class="main">Title2</div>
+                 <div class="sub">Parargraph2</div>
+              </div>
+           </div>
+        </div>
+        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5af3f8303456e376ceda1517553ba786/tumblr_o4986gakjh1qho82wo1_1280.jpg);">
+           <div class="shadow"></div>
+           <div class="label">
+              <div class="icon">
+                 <i class="fas fa-tree"></i>
+              </div>
+              <div class="info">
+                 <div class="main">Title3</div>
+                 <div class="sub">Parargraph3</div>
+              </div>
+           </div>
+        </div>
+        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg);">
+           <div class="shadow"></div>
+           <div class="label">
+              <div class="icon">
+                 <i class="fas fa-tint"></i>
+              </div>
+              <div class="info">
+                 <div class="main">Title4</div>
+                 <div class="sub">Parargraph4</div>
+              </div>
+           </div>
+        </div>
+        <div class="option" style="--optionBackground:url(https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg);">
+           <div class="shadow"></div>
+           <div class="label">
+              <div class="icon">
+                 <i class="fas fa-sun"></i>
+              </div>
+              <div class="info">
+                 <div class="main">Title5</div>
+                 <div class="sub">Parargraph5</div>
+              </div>
+           </div>
+        </div>
+     </div>
+
+     <script>
+        $(".option").click(function(){
+            $(".option").removeClass("active");
+            $(this).addClass("active");
+        });
+     </script>
+</body>
+</html>