From 96ced9f972f39d5b0445c383d0a95b2b2cba3cfe Mon Sep 17 00:00:00 2001
From: rohitPandey469 <rd8614196@gmail.com>
Date: Tue, 10 Oct 2023 15:37:08 +0530
Subject: [PATCH] Added a flex panel gallery project

---
 contributors/contributorsList.js        |   5 +
 projects/Flex Pannel Gallery/index.html | 161 ++++++++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 projects/Flex Pannel Gallery/index.html
diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js
index 2146cd3..9f04ed5 100644
--- a/contributors/contributorsList.js
+++ b/contributors/contributorsList.js
@@ -8,5 +8,10 @@ contributors = [
     id: 2,
     fullname: "sample 2",
     username: "https://github.com/TechHack3",
+  },
+  {
+    id:3,
+    fullname:"Rohit Pandey",
+    username:"https://github.com/rohitPandey469"
   }
   ];
diff --git a/projects/Flex Pannel Gallery/index.html b/projects/Flex Pannel Gallery/index.html
new file mode 100644
index 0000000..b81221f
--- /dev/null
+++ b/projects/Flex Pannel Gallery/index.html	
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Flex Panels 💪</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Amatic+SC"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="icon" href="https://fav.farm/🔥" />
+  </head>
+  <body>
+    <style>
+      html {
+        box-sizing: border-box;
+        background: #ffc600;
+        font-family: "helvetica neue";
+        font-size: 20px;
+        font-weight: 200;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      .panels {
+        min-height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .panel {
+        background: #6b0f9c;
+        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
+        color: white;
+        text-align: center;
+        align-items: center;
+        transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
+          flex-grow 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
+        font-size: 20px;
+        background-size: cover;
+        background-position: center;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .panel1 {
+        background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
+      }
+      .panel2 {
+        background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
+      }
+      .panel3 {
+        background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
+      }
+      .panel4 {
+        background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
+      }
+      .panel5 {
+        background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
+      }
+
+      /* Flex Children */
+      .panel > * {
+        margin: 0;
+        width: 100%;
+        transition: transform 0.5s;
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .panel > *:first-child {
+        transform: translateY(-100%);
+      }
+      .panel.open-active > *:first-child {
+        transform: translateY(0%);
+      }
+      .panel > *:last-child {
+        transform: translateY(100%);
+      }
+      .panel.open-active > *:last-child {
+        transform: translateY(0%);
+      }
+
+      .panel p {
+        text-transform: uppercase;
+        font-family: "Amatic SC", cursive;
+        text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+        font-size: 2em;
+      }
+
+      .panel p:nth-child(2) {
+        font-size: 4em;
+      }
+
+      .panel.open {
+        font-size: 40px;
+
+        flex: 5;
+      }
+    </style>
+
+    <div class="panels">
+      <div class="panel panel1">
+        <p>Hey</p>
+        <p>Let's</p>
+        <p>Dance</p>
+      </div>
+      <div class="panel panel2">
+        <p>Give</p>
+        <p>Take</p>
+        <p>Receive</p>
+      </div>
+      <div class="panel panel3">
+        <p>Experience</p>
+        <p>It</p>
+        <p>Today</p>
+      </div>
+      <div class="panel panel4">
+        <p>Give</p>
+        <p>All</p>
+        <p>You can</p>
+      </div>
+      <div class="panel panel5">
+        <p>Life</p>
+        <p>In</p>
+        <p>Motion</p>
+      </div>
+    </div>
+
+    <script>
+      window.onload = () => {
+        const panels = document.querySelectorAll(".panel");
+        panels.forEach((panel) => {
+          panel.addEventListener("click", toggleOpen);
+          panel.addEventListener("transitionend",toggleActive);
+        });
+      };
+      function toggleOpen() {
+        this.classList.toggle("open");
+      }
+      function toggleActive(e){
+        if(e.propertyName.includes('flex')){
+            this.classList.toggle("open-active")
+        }
+      }
+    </script>
+  </body>
+</html>
