course wesbos#5 finished

Author: Jin Xu

05 - Flex Panel Gallery/index-START.html

@@ -24,6 +24,7 @@
     .panels {
       min-height:100vh;
       overflow: hidden;
+      display: flex;
     }
 
     .panel {
@@ -41,6 +42,10 @@
       font-size: 20px;
       background-size:cover;
       background-position:center;
+      flex: 1;
+      display: flex;
+      will-change: transform;
+      flex-direction: column;
     }
 
 
@@ -61,13 +66,34 @@
       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;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      transition: transform .7s ease-in;
     }
+    .panel p:nth-child(1) {
+      transform: translateY(-100%);
+    }
+    .panel p:nth-child(3) {
+      transform: translateY(100%);
+    }
+    
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       font-size:40px;
+      flex: 5;
+    }
+
+    .panel.open p:nth-child(1) {
+      transform: translateY(0);
+    }
+
+    .panel.open p:nth-child(3) {
+      transform: translateY(0);
     }
 
     .cta {
@@ -107,10 +133,14 @@
   </div>
 
   <script>
-
+    document.querySelectorAll('.panel').forEach(panel => {
+      // evt binding
+      panel.addEventListener('click', e => {
+        document.querySelectorAll('.panel').forEach(item => item.classList.remove('open'))
+        panel.classList.add('open')
+      }, false)
+    })
   </script>
 
-
-
 </body>
 </html>

readme.md

@@ -8,7 +8,7 @@
 2. [x] ~~JS + CSS Clock~~
 3. [x] ~~CSS Variables~~
 4. [x] ~~Array Cardio, Day 1~~
-5. [ ] Flex Panel Gallery
+5. [x] ~~Flex Panel Gallery~~
 6. [ ] Type Ahead
 7. [ ] Array Cardio, Day 2
 8. [ ] Fun with HTML5 Canvas