wesbos
diff --git a/‎05 - Flex Panel Gallery/index-START.html‎
Lines changed: 27 additions & 1 deletion b/‎05 - Flex Panel Gallery/index-START.html‎
Lines changed: 27 additions & 1 deletion
@@ -22,11 +22,17 @@
     }
 
     .panels {
+      display: flex;
       min-height:100vh;
       overflow: hidden;
     }
 
     .panel {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: space-between;
+      align-items: center;
       background:#6B0F9C;
       box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
       color:white;
@@ -43,6 +49,11 @@
       background-position: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);}
+
 
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
@@ -68,6 +79,7 @@
 
     .panel.open {
       font-size:40px;
+      flex-grow: 6;
     }
 
     .cta {
@@ -107,8 +119,22 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel')
+
+    function toggleOpen() {
+    this.classList.toggle('open')
+    }
+
+    function toggleActive(event) {
+      console.log(event.propertyName)
+      if(event.propertyName.includes('flex')){
+        this.classList.toggle('open-active')
+      }
+    }
 
-  </script>
+  panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
+ </script>