diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..246a3faa9a 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,24 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 2712384201..c8c13ea855 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -61,13 +61,33 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, .5, 1); } - +setInterval(setDate, 1000); + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..1e8ee5fc52 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..2ec17e3740 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,9 +1,11 @@ + Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

- + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..62058b3282 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,8 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; + flex-direction: row; } .panel { @@ -32,6 +34,11 @@ color:white; text-align: center; align-items:center; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: @@ -54,6 +61,22 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + align-items: center; + justify-content: center; + display: flex; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel.open-active > *:first-child, .panel.open-active > *:last-child { + transform: translateY(0%); + } + + .panel > *:last-child { + transform: translateY(100%); } .panel p { @@ -68,6 +91,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +131,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..479fc42f7b 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,7 +16,40 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..a675c387ee 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,9 +1,11 @@ + Array Cardio 💪💪 +

Psst: have a look at the JavaScript Console 💁

- + + \ No newline at end of file