diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index c6509bed02..1be45a02e9 100644
--- a/05 - Flex Panel Gallery/index-START.html
+++ b/05 - Flex Panel Gallery/index-START.html
@@ -24,6 +24,7 @@
.panels {
min-height:100vh;
overflow: hidden;
+ display: flex;
}
.panel {
@@ -41,6 +42,11 @@
font-size: 20px;
background-size:cover;
background-position:center;
+ flex: 1;
+ justify-content: center;
+ align-content: center;
+ display: flex;
+ flex-direction: column;
}
@@ -54,8 +60,18 @@
margin:0;
width: 100%;
transition:transform 0.5s;
+ flex: 1 0 auto;
+ display: flex;
+ justify-content: center;
+ align-content: center;
}
+ .panel > *:first-child { transform: translateY(-100%); }
+ .panel.open-active > *:first-child { transform: translateY(0); }
+ .panel > *:last-child { transform: translateY(100%); }
+ .panel > *:last-child { transform: translateY(100%); }
+ .panel.open-active > *:last-child { transform: translateY(0); }
+ .panel > *:last-child { transform: translateY(100%); }
.panel p {
text-transform: uppercase;
font-family: 'Amatic SC', cursive;
@@ -67,6 +83,7 @@
}
.panel.open {
+ flex: 5;
font-size:40px;
}
@@ -101,9 +118,7 @@
-
+
diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js
new file mode 100644
index 0000000000..4bc4ef9cd9
--- /dev/null
+++ b/05 - Flex Panel Gallery/script.js
@@ -0,0 +1,13 @@
+const panels = document.querySelectorAll('.panel');
+function toggleOpen () {
+ this.classList.toggle('open');
+};
+
+const toggleActive = (evt) => {
+ if(evt.propertyName.includes('flex')) {
+ evt.target.classList.toggle('open-active');
+ }
+};
+
+panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));