diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..cdb0319ccf 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,6 +58,23 @@ diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 2712384201..17b8952064 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -2,7 +2,7 @@ - JS + CSS Clock + Document @@ -42,7 +42,7 @@ position: relative; padding:2rem; box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), + 0 0 0px 4px rgba(0,0,0,0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); @@ -61,12 +61,35 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.42, 1.07, 0.58, 1); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..93f3332bcf 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,19 +9,34 @@

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..4bbd13762b 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -5,7 +5,6 @@ Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..ed26cd85b8 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-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +60,24 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + justify-content: center; + align-items: center; + display: flex; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel > *:last-child { + transform: translateY(100%); + } + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -67,6 +91,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +132,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..f0bf382093 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,47 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..656684e355 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -2,10 +2,9 @@ - Array Cardio 💪💪 + Document -

Psst: have a look at the JavaScript Console 💁

diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..564d1bee77 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,8 +7,62 @@ + diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..f5b108fba8 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -45,6 +45,30 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index abdf4c91af..99c4a2515e 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,39 @@ diff --git a/30 - Whack A Mole/Testing.txt b/30 - Whack A Mole/Testing.txt new file mode 100644 index 0000000000..73709ba686 --- /dev/null +++ b/30 - Whack A Mole/Testing.txt @@ -0,0 +1 @@ +Testing