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));