diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..ecc3596fde 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,114 +1,40 @@ - - Flex Panels 💪 - + + Flex Panels 💪 + + - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + diff --git a/05 - Flex Panel Gallery/scripts.js b/05 - Flex Panel Gallery/scripts.js new file mode 100644 index 0000000000..66dafc3aa3 --- /dev/null +++ b/05 - Flex Panel Gallery/scripts.js @@ -0,0 +1,16 @@ +const panels = document.querySelectorAll('.panel'); + +function toggleOpen() { + this.classList.toggle('open'); +} + +function toggleActive(e) { + // console.log(e.propertyName); + if(e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } +} + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..0ae1bbfb72 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,99 @@ +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} + +body { + margin: 0; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height: 100vh; + overflow: hidden; + display: flex; +} + +.panel { + background: #6B0F9C; + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + color: white; + text-align: center; + align-items: center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size: cover; + background-position: center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} + +.panel1 { + background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); +} +.panel2 { + background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); +} +.panel3 { + background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); +} +.panel4 { + background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); +} +.panel5 { + background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); +} + +/* Flex Children */ +.panel > * { + margin: 0; + width: 100%; + transition: transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; +} + +.panel > *:first-child { + transform: translateY(-100%); +} + +.panel > *:last-child { + transform: translateY(100%); +} + +.panel.open-active > *:first-child, +.panel.open-active > *:last-child { + transform: translateY(0); +} + +.panel p { + text-transform: uppercase; + 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; +} + +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + font-size: 40px; +} \ No newline at end of file