diff --git a/.gitignore b/.gitignore index 6e1a3738b8..164ae8655c 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ *.log haters/ +.idea/ diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..16dc4b78a2 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,7 +57,28 @@ - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS CSS Clock/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS CSS Clock/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS CSS Clock/index-START.html similarity index 53% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS CSS Clock/index-START.html index 2712384201..f74b316b7a 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS CSS Clock/index-START.html @@ -61,13 +61,54 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + } + + .hour-hand { + width:30%; + height:8px; + background:black; + left:20%; + } + + .min-hand { + height:6px; + background:black; + } + + .second-hand { + width:45%; + height:3px; + left:5%; } diff --git a/02 - JS + CSS Clock/index.html b/02 - JS CSS Clock/index.html similarity index 100% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS CSS Clock/index.html diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..76a85c8300 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -5,7 +5,7 @@ Scoped CSS Variables and JS -

Update CSS Variables with JS

+

Update CSS Variables with JS

@@ -22,9 +22,21 @@

Update CSS Variables with JS

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..bdfdafb1af 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,10 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + display: flex; + flex-direction: column; } @@ -51,9 +56,30 @@ .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel > * { - margin:0; + margin: 0; width: 100%; - transition:transform 0.5s; + transition: transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + display: flex; + align-items: center; + } + + .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,7 +93,8 @@ } .panel.open { - font-size:40px; + flex: 5; + font-size: 40px; } .cta { @@ -108,6 +135,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..5d83071c7a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -15,7 +15,48 @@