diff --git a/html/Carousel/Carousel.html b/html/Carousel/Carousel.html
new file mode 100644
index 0000000..e2be8b8
--- /dev/null
+++ b/html/Carousel/Carousel.html
@@ -0,0 +1,131 @@
+<!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>Document</title>
+</head>
+<style>
+    body {
+        background: #eee;
+    }
+
+    .container {
+        width: 90%;
+        margin: 20px auto;
+        height: 300px;
+    }
+
+    .carousel {
+        background: #fff;
+        width: 100%;
+        height: 100%;
+        border: 2px solid orange;
+        border-radius: 3px;
+        display: flex;
+        justify-content: flex-start;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .slider {
+
+        display: flex;
+        height: 100%;
+        width: 500%;
+
+        /* This does not let the slider shrink */
+        flex-shrink: 0;
+
+        transition: all 0.5s;
+    }
+
+    .slider section {
+        flex-basis: 20%;
+
+        /* each section taking 20% of the slider with width 500% of the carousel */
+        width: 20%;
+        flex-shrink: 0;
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .arrow {
+        position: absolute;
+        top: 10px;
+        cursor: pointer;
+    }
+
+    .arrow.prev {
+        left: 10px;
+    }
+
+    .arrow.next {
+        right: 10px;
+    }
+</style>
+
+<body>
+    <div class="container">
+
+        <div class="carousel">
+            <div class="slider">
+                <section>Content Section 1</section>
+                <section>Content Section 2</section>
+                <section>Content Section 3</section>
+                <section>Content Section 4</section>
+                <section>Content Section 5</section>
+            </div>
+            <div class="controls">
+                <span class="arrow prev">prev</span>
+                <span class="arrow
+                 next">next</span>
+            </div>
+        </div>
+    </div>
+</body>
+<script>
+
+    const slider = document.querySelector('.slider')
+    const prev = document.querySelector('.prev')
+    const next = document.querySelector('.next')
+    const carousel = document.querySelector('.carousel')
+    var direction;
+    prev.addEventListener('click', function () {
+        if (direction === -1) {
+            slider.appendChild(slider.firstElementChild)
+            direction = 1;
+        }
+        carousel.style.justifyContent = 'flex-end'
+        slider.style.transform = 'translate(+20%)'
+    })
+    next.addEventListener('click', function () {
+        direction = -1;
+        carousel.style.justifyContent = 'flex-start'
+        slider.style.transform = 'translate(-20%)'
+    })
+    slider.addEventListener('transitionend', function () {
+        if (direction === -1) {
+            slider.appendChild(slider.firstElementChild)
+        } else if (direction === 1) {
+            slider.prepend(slider.lastElementChild)
+        }
+        slider.style.transition = 'none';
+        slider.style.transform = 'translate(0)';
+
+        setTimeout(function () {
+            slider.style.transition = 'all 0.5s'
+        })
+
+
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git a/html/flex_Basis_As_Max_Width.html b/html/flex_Basis_As_Max_Width.html
new file mode 100644
index 0000000..4ac6ac2
--- /dev/null
+++ b/html/flex_Basis_As_Max_Width.html
@@ -0,0 +1,57 @@
+<!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>Document</title>
+</head>
+<style>
+  .container{
+    background: #eee;
+    margin: 50px;
+    padding: 0px;
+    border: 3px solid #000;
+
+    display: flex;
+    flex-wrap: wrap;
+  } 
+  .items{
+    color: #fff;
+    font-style: 20px;
+    font-weight: bold;
+    text-align: center;
+    padding: 0px;
+    margin: 0px;
+    height: 60px;
+
+    /* Fills all empty space out evenly */ 
+   /*  flex-grow: 1; */
+
+   flex-basis: 100px;
+  }
+  .item1{
+   background: orangered;
+
+  /*  works like max width */  
+   flex-basis: 200px;
+  }
+  .item2{
+    background: yellowgreen;
+  }
+  .item3{
+    background: mediumpurple;
+  }
+  .item4{
+    background: hotpink;
+  }
+</style>
+<body>
+    <div class="container">
+        <div class="items item1">One</div>
+        <div class="items item2">Two</div>
+        <div class="items item3">Three</div>
+        <div class="items item4">Four</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/flex_basis_as_min_width copy.html b/html/flex_basis_as_min_width copy.html
new file mode 100644
index 0000000..153239a
--- /dev/null
+++ b/html/flex_basis_as_min_width copy.html	
@@ -0,0 +1,56 @@
+<!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>Document</title>
+</head>
+<style>
+    .container{
+      background: #eee;
+      margin: 50px;
+      padding: 0px;
+      border: 3px solid #000;
+  
+      display: flex;
+      flex-wrap: wrap;
+    } 
+    .items{
+      color: #fff;
+      font-style: 20px;
+      font-weight: bold;
+      text-align: center;
+      padding: 0px;
+      margin: 0px;
+      height: 60px;
+  
+      /* Fills all empty space out evenly */ 
+      flex-grow: 1; 
+  
+    }
+    .item1{
+     background: orangered;
+  
+    /*  works like min width */  
+     flex-basis: 200px;
+    }
+    .item2{
+      background: yellowgreen;
+    }
+    .item3{
+      background: mediumpurple;
+    }
+    .item4{
+      background: hotpink;
+    }
+  </style>
+<body>
+    <div class="container">
+        <div class="items item1">One</div>
+        <div class="items item2">Two</div>
+        <div class="items item3">Three</div>
+        <div class="items item4">Four</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/flex_shrink1.html b/html/flex_shrink1.html
new file mode 100644
index 0000000..d5b5a26
--- /dev/null
+++ b/html/flex_shrink1.html
@@ -0,0 +1,55 @@
+<!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>Document</title>
+</head>
+<style>
+    .container{
+      background: #eee;
+      margin: 50px;
+      padding: 0px;
+      border: 3px solid #000;
+  
+      display: flex;
+      flex-wrap: wrap;
+    } 
+    .items{
+      color: #fff;
+      font-style: 20px;
+      font-weight: bold;
+      text-align: center;
+      padding: 0px;
+      margin: 0px;
+      height: 60px;
+      width: 200px;
+  
+    }
+    .item1{
+     background: orangered;
+
+     /* size is fixed.shrinks on values greater than 0 */  
+     flex-shrink: 0;
+    
+    }
+    .item2{
+      background: yellowgreen;
+    }
+    .item3{
+      background: mediumpurple;
+    }
+    .item4{
+      background: hotpink;
+    }
+  </style>
+<body>
+    <div class="container">
+        <div class="items item1">One</div>
+        <div class="items item2">Two</div>
+        <div class="items item3">Three</div>
+        <div class="items item4">Four</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/flex_shrink2.html b/html/flex_shrink2.html
new file mode 100644
index 0000000..27d40f6
--- /dev/null
+++ b/html/flex_shrink2.html
@@ -0,0 +1,53 @@
+<!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>Document</title>
+</head>
+<style>
+    .container{
+      background: #eee;
+      margin: 50px;
+      padding: 0px;
+      border: 3px solid #000;
+  
+      display: flex;
+      /* flex-wrap: wrap; */
+    } 
+    .items{
+      color: #fff;
+      font-style: 20px;
+      font-weight: bold;
+      text-align: center;
+      padding: 0px;
+      margin: 0px;
+      height: 60px;
+      width: 200px;
+  
+    }
+    .item1{
+     background: orangered;  
+     flex-shrink: 4;
+    
+    }
+    .item2{
+      background: yellowgreen;
+    }
+    .item3{
+      background: mediumpurple;
+    }
+    .item4{
+      background: hotpink;
+    }
+  </style>
+<body>
+    <div class="container">
+        <div class="items item1">One</div>
+        <div class="items item2">Two</div>
+        <div class="items item3">Three</div>
+        <div class="items item4">Four</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/flex_shrinkAndFlexBasis.html b/html/flex_shrinkAndFlexBasis.html
new file mode 100644
index 0000000..7d8e9af
--- /dev/null
+++ b/html/flex_shrinkAndFlexBasis.html
@@ -0,0 +1,53 @@
+<!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>Document</title>
+</head>
+<style>
+    .container{
+      background: #eee;
+      margin: 50px;
+      padding: 0px;
+      border: 3px solid #000;
+  
+      display: flex;
+      /* flex-wrap: wrap; */
+    } 
+    .items{
+      color: #fff;
+      font-style: 20px;
+      font-weight: bold;
+      text-align: center;
+      padding: 0px;
+      margin: 0px;
+      height: 60px;
+  
+    }
+    .item1{
+     background: orangered;  
+     flex-basis: 200px;
+     flex-shrink: 1;
+     
+    }
+    .item2{
+      background: yellowgreen;
+    }
+    .item3{
+      background: mediumpurple;
+    }
+    .item4{
+      background: hotpink;
+    }
+  </style>
+<body>
+    <div class="container">
+        <div class="items item1">One</div>
+        <div class="items item2">Two</div>
+        <div class="items item3">Three</div>
+        <div class="items item4">Four</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
