learned some flex and transitions!

Author: adamki

05 - Flex Panel Gallery/index-START.html

@@ -44,6 +44,7 @@
       background-position:center;
       flex: 1;
       justify-content: center;
+      align-items: center;
       display: flex;
       flex-direction: column;
     }
@@ -55,13 +56,12 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
-    /* Flex Items */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
       flex: 1 0 auto;
-      display:flex;
+      display: flex;
       justify-content: center;
       align-items: center;
     }
@@ -82,8 +82,8 @@
     }
 
     .panel.open {
-      flex: 5;
       font-size:40px;
+      flex: 5;
     }
 
     .cta {
@@ -126,12 +126,10 @@
     const panels = document.querySelectorAll('.panel');
 
     function toggleOpen() {
-      console.log('Hello');
       this.classList.toggle('open');
     }
 
     function toggleActive(e) {
-      console.log(e.propertyName);
       if (e.propertyName.includes('flex')) {
         this.classList.toggle('open-active');
       }
@@ -141,5 +139,7 @@
     panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
   </script>
 
+
+
 </body>
 </html>