kokonior · jagdish47 · Mar 17, 2023
diff --git a/login/Expanding Cards/Images/image-1.jpg b/login/Expanding Cards/Images/image-1.jpg
diff --git a/login/Expanding Cards/Images/image-2.jpg b/login/Expanding Cards/Images/image-2.jpg
diff --git a/login/Expanding Cards/Images/image-3.jpg b/login/Expanding Cards/Images/image-3.jpg
diff --git a/login/Expanding Cards/Images/image-4.jpg b/login/Expanding Cards/Images/image-4.jpg
diff --git a/login/Expanding Cards/Images/image-5.jpg b/login/Expanding Cards/Images/image-5.jpg
diff --git a/login/Expanding Cards/index.html b/login/Expanding Cards/index.html
@@ -0,0 +1,30 @@
+<!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" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Expanding Cards</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="pannel" style="background-image: url(./Images/image-1.jpg)">
+        <h3>Beautiful Girl</h3>
+      </div>
+      <div class="pannel" style="background-image: url(./Images/image-2.jpg)">
+        <h3>Nightmare Girl</h3>
+      </div>
+      <div class="pannel" style="background-image: url(./Images/image-3.jpg)">
+        <h3>Witch Eyed Girl</h3>
+      </div>
+      <div class="pannel" style="background-image: url(./Images/image-4.jpg)">
+        <h3>Science Trick</h3>
+      </div>
+      <div class="pannel" style="background-image: url(./Images/image-5.jpg)">
+        <h3>Gully with Effects</h3>
+      </div>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/login/Expanding Cards/script.js b/login/Expanding Cards/script.js
@@ -0,0 +1,14 @@
+const pannels = document.querySelectorAll(".pannel");
+
+pannels.forEach((pannel) => {
+  pannel.addEventListener("click", (event) => {
+    removePannelClass();
+    pannel.classList.toggle("active");
+  });
+});
+
+function removePannelClass() {
+  pannels.forEach((pannel) => {
+    pannel.classList.remove("active");
+  });
+}
diff --git a/login/Expanding Cards/style.css b/login/Expanding Cards/style.css
@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,400&display=swap");
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  display: flex;
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  width: 90vw;
+}
+
+.pannel {
+  height: 80vh;
+  background-size: auto 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  color: white;
+  border-radius: 50px;
+  cursor: pointer;
+  flex: 0.5;
+  margin: 10px;
+  transition: flex 0.5s ease-in;
+  position: relative;
+}
+
+.pannel h3 {
+  font-size: 24px;
+  position: absolute;
+  margin: 0;
+  bottom: 20px;
+  left: 20px;
+  opacity: 0;
+}
+
+.pannel.active {
+  flex: 5;
+}
+
+.pannel.active h3 {
+  opacity: 1;
+  transition: opacity 0.3s ease-in 0.4s;
+}
+
+@media (max-width: 480px) {
+  .container {
+    width: 100vw;
+  }
+
+  .pannel:nth-of-type(4),
+  .pannel:nth-of-type(5) {
+    display: none;
+  }
+}