diff --git a/expanding-cards/index.html b/expanding-cards/index.html
new file mode 100644
index 0000000..164951d
--- /dev/null
+++ b/expanding-cards/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Expanding Cards
+
+
+
+
+
Explore The World
+
+
+
Wild Forest
+
+
+
Sunny Beach
+
+
+
City on Winter
+
+
+
Mountains - Clouds
+
+
+
+
+
+
+
diff --git a/expanding-cards/script.js b/expanding-cards/script.js
new file mode 100644
index 0000000..68d6b5c
--- /dev/null
+++ b/expanding-cards/script.js
@@ -0,0 +1,14 @@
+const panels = document.querySelectorAll('.panel')
+
+panels.forEach(panel => {
+ panel.addEventListener('click', () => {
+ removeActiveClasses()
+ panel.classList.add('active')
+ })
+})
+
+function removeActiveClasses() {
+ panels.forEach(panel => {
+ panel.classList.remove('active')
+ })
+}
\ No newline at end of file
diff --git a/expanding-cards/style.css b/expanding-cards/style.css
new file mode 100644
index 0000000..4e8e15a
--- /dev/null
+++ b/expanding-cards/style.css
@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Muli', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+}
+
+.container {
+ display: flex;
+ width: 90vw;
+}
+
+.panel {
+ background-size: auto 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 80vh;
+ border-radius: 50px;
+ color: #fff;
+ cursor: pointer;
+ flex: 0.5;
+ margin: 10px;
+ position: relative;
+ transition: flex 0.7s ease-in;
+}
+
+.panel h3 {
+ font-size: 24px;
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+ margin: 0;
+ opacity: 0;
+}
+
+.panel.active {
+ flex: 5;
+}
+
+.panel.active h3 {
+ opacity: 1;
+ transition: opacity 0.3s ease-in 0.4s;
+}
+
+@media (max-width: 480px) {
+ .container {
+ width: 100vw;
+ }
+
+ .panel:nth-of-type(4),
+ .panel:nth-of-type(5) {
+ display: none;
+ }
+}