diff --git a/login/Expanding Cards/Images/image-1.jpg b/login/Expanding Cards/Images/image-1.jpg new file mode 100755 index 0000000..c772fa1 Binary files /dev/null and b/login/Expanding Cards/Images/image-1.jpg differ diff --git a/login/Expanding Cards/Images/image-2.jpg b/login/Expanding Cards/Images/image-2.jpg new file mode 100755 index 0000000..525cbf9 Binary files /dev/null and b/login/Expanding Cards/Images/image-2.jpg differ diff --git a/login/Expanding Cards/Images/image-3.jpg b/login/Expanding Cards/Images/image-3.jpg new file mode 100755 index 0000000..e46f9c4 Binary files /dev/null and b/login/Expanding Cards/Images/image-3.jpg differ diff --git a/login/Expanding Cards/Images/image-4.jpg b/login/Expanding Cards/Images/image-4.jpg new file mode 100755 index 0000000..351bfc3 Binary files /dev/null and b/login/Expanding Cards/Images/image-4.jpg differ diff --git a/login/Expanding Cards/Images/image-5.jpg b/login/Expanding Cards/Images/image-5.jpg new file mode 100755 index 0000000..e1953ba Binary files /dev/null and b/login/Expanding Cards/Images/image-5.jpg differ diff --git a/login/Expanding Cards/index.html b/login/Expanding Cards/index.html new file mode 100755 index 0000000..95f7d45 --- /dev/null +++ b/login/Expanding Cards/index.html @@ -0,0 +1,30 @@ + + + + + + + + Expanding Cards + + +
+
+

Beautiful Girl

+
+
+

Nightmare Girl

+
+
+

Witch Eyed Girl

+
+
+

Science Trick

+
+
+

Gully with Effects

+
+
+ + + diff --git a/login/Expanding Cards/script.js b/login/Expanding Cards/script.js new file mode 100755 index 0000000..82fbd58 --- /dev/null +++ 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 new file mode 100755 index 0000000..07bb984 --- /dev/null +++ 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; + } +}