diff --git a/animated-flex-cards/Image1.JPG b/animated-flex-cards/Image1.JPG
new file mode 100644
index 0000000..1d69982
Binary files /dev/null and b/animated-flex-cards/Image1.JPG differ
diff --git a/animated-flex-cards/image2.JPG b/animated-flex-cards/image2.JPG
new file mode 100644
index 0000000..7a637b1
Binary files /dev/null and b/animated-flex-cards/image2.JPG differ
diff --git a/animated-flex-cards/image3.JPG b/animated-flex-cards/image3.JPG
new file mode 100644
index 0000000..cdff2eb
Binary files /dev/null and b/animated-flex-cards/image3.JPG differ
diff --git a/animated-flex-cards/image4.JPG b/animated-flex-cards/image4.JPG
new file mode 100644
index 0000000..99270c1
Binary files /dev/null and b/animated-flex-cards/image4.JPG differ
diff --git a/animated-flex-cards/index.html b/animated-flex-cards/index.html
new file mode 100644
index 0000000..a742256
--- /dev/null
+++ b/animated-flex-cards/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Flex Cards</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="container">
+            <input type="radio" name="slide" id="c1" checked>
+            <label for="c1" class="card">
+                <div class="row">
+                    <div class="icon">1</div>
+                    <div class="description">
+                        <h4>THE WATCH</h4>
+                        <p>The stalker walks a trail with his dog and weapon at hand
+                            searching for the prey.
+                        </p>
+                    </div>
+                </div>
+            </label>
+            <input type="radio" name="slide" id="c2">
+            <label for="c2" class="card">
+                <div class="row">
+                    <div class="icon">2</div>
+                    <div class="description">
+                        <h4>CROSS HAIRS</h4>
+                        <p>With his weapon on the sticks the stalker tries to 
+                            accuratly locate the prey.
+                        </p>
+                    </div>
+                </div>
+            </label>
+            <input type="radio" name="slide" id="c3">
+            <label for="c3" class="card">
+                <div class="row">
+                    <div class="icon">3</div>
+                    <div class="description">
+                        <h4>DAWN</h4>
+                        <p>At dawn before the stalk.</p>
+                    </div>
+                </div>
+            </label>
+            <input type="radio" name="slide" id="c4">
+            <label for="c4" class="card">
+                <div class="row">
+                    <div class="icon">4</div>
+                    <div class="description">
+                        <h4>BREATHE</h4>
+                        <p>The stalker must calm his breathing before the 
+                            shot is taken.
+                        </p>
+                    </div>
+                </div>
+            </label>
+        </div>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/animated-flex-cards/style.css b/animated-flex-cards/style.css
new file mode 100644
index 0000000..4a27822
--- /dev/null
+++ b/animated-flex-cards/style.css
@@ -0,0 +1,109 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    background-color: #eeeeee;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+
+.container {
+    height: 400px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: start;
+}
+
+.card {
+    width: 80px;
+    border-radius: .75rem;
+    background-size: cover;
+    cursor: pointer;
+    overflow: hidden;
+    border-radius: 2rem;
+    margin: 0 10px;
+    display: flex;
+    align-items: flex-end;
+    transition: .6s cubic-bezier(.28, -0.03,0,.99);
+    box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
+}
+
+.card > .row {
+    color: white;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.card > .row > .icon {
+    background: #223;
+    color: white;
+    border-radius: 50%;
+    width: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 15px;
+}
+
+.card > .row > .description {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+    height: 80px;
+    width: 520px;
+    opacity: 0;
+    transform: translateY(30px);
+    transition-delay: .3s;
+    transition: all .3s ease;
+}
+
+.description p {
+    color: #b0b0ba;
+    padding-top: 5px;
+}
+
+.description h4 {
+    text-transform: uppercase;
+}
+
+input {
+    display: none;
+}
+
+input:checked + label {
+    width: 600px;
+}
+
+input:checked + label .description{
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+.card[for="c1"] {
+    background-image: url(/Users/sj/repos/zero-to-mastery/zero-to-mastery/animated-flex-cards/Image1.JPG) ;
+}
+
+.card[for="c2"] {
+    background-image: url(/Users/sj/repos/zero-to-mastery/zero-to-mastery/animated-flex-cards/image2.JPG) ;
+}
+
+.card[for="c3"] {
+    background-image: url(/Users/sj/repos/zero-to-mastery/zero-to-mastery/animated-flex-cards/image3.JPG) ;
+}
+
+.card[for="c4"] {
+    background-image: url(/Users/sj/repos/zero-to-mastery/zero-to-mastery/animated-flex-cards/image4.JPG) ;
+}
+
