diff --git a/Components/Carousels/Card-Carousel/index.html b/Components/Carousels/Card-Carousel/index.html
new file mode 100644
index 00000000..3726d585
--- /dev/null
+++ b/Components/Carousels/Card-Carousel/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Card Carousel
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Carousels/Card-Carousel/style.css b/Components/Carousels/Card-Carousel/style.css
new file mode 100644
index 00000000..e1604642
--- /dev/null
+++ b/Components/Carousels/Card-Carousel/style.css
@@ -0,0 +1,102 @@
+body {
+ background-color: #100e17;
+ font-family: 'Open Sans', sans-serif;
+ }
+
+ .container {
+ position: absolute;
+ height: 300px;
+ width: 600px;
+ top: 60px;
+ left: calc(50% - 300px);
+ display: flex;
+ }
+
+ .card {
+ display: flex;
+ height: 280px;
+ width: 200px;
+ background-color: #17141d;
+ border-radius: 10px;
+ box-shadow: -1rem 0 3rem #000;
+ /* margin-left: -50px; */
+ transition: 0.4s ease-out;
+ position: relative;
+ left: 0px;
+ }
+
+ .card:not(:first-child) {
+ margin-left: -50px;
+ }
+
+ .card:hover {
+ transform: translateY(-20px);
+ transition: 0.4s ease-out;
+ }
+
+ .card:hover ~ .card {
+ position: relative;
+ left: 50px;
+ transition: 0.4s ease-out;
+ }
+
+ .title {
+ color: white;
+ font-weight: 300;
+ position: absolute;
+ left: 20px;
+ top: 15px;
+ }
+
+ .bar {
+ position: absolute;
+ top: 100px;
+ left: 20px;
+ height: 5px;
+ width: 150px;
+ }
+
+ .emptybar {
+ background-color: #2e3033;
+ width: 100%;
+ height: 100%;
+ }
+
+ .filledbar {
+ position: absolute;
+ top: 0px;
+ z-index: 3;
+ width: 0px;
+ height: 100%;
+ background: rgb(0,154,217);
+ background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
+ transition: 0.6s ease-out;
+ }
+
+ .card:hover .filledbar {
+ width: 120px;
+ transition: 0.4s ease-out;
+ }
+
+ .circle {
+ position: absolute;
+ top: 150px;
+ left: calc(50% - 60px);
+ }
+
+ .stroke {
+ stroke: white;
+ stroke-dasharray: 360;
+ stroke-dashoffset: 360;
+ transition: 0.6s ease-out;
+ }
+
+ svg {
+ fill: #17141d;
+ stroke-width: 2px;
+ }
+
+ .card:hover .stroke {
+ stroke-dashoffset: 100;
+ transition: 0.6s ease-out;
+ }
\ No newline at end of file
diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
index 6918c315..f70107c4 100644
--- a/assets/html_files/carousels.html
+++ b/assets/html_files/carousels.html
@@ -214,6 +214,19 @@ Neumorphic Carousel
+
+
+ 
+
+