A @@ -59,6 +58,25 @@ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 075578c930..5a7f5159b9 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -3,7 +3,8 @@ html { background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; } -body,html { +body, +html { margin: 0; padding: 0; font-family: sans-serif; @@ -18,17 +19,17 @@ body,html { } .key { - border: .4rem solid black; - border-radius: .5rem; + border: 0.4rem solid black; + border-radius: 0.5rem; margin: 1rem; font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; + padding: 1rem 0.5rem; + transition: all 0.07s ease; width: 10rem; text-align: center; color: white; - background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; + background: rgba(0, 0, 0, 0.4); + text-shadow: 0 0 0.5rem black; } .playing { @@ -45,6 +46,6 @@ kbd { .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: .1rem; + letter-spacing: 0.1rem; color: #ffc600; } diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..22aa08e076 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,12 +62,46 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.31, 2.78, 0.58, 1); + + } + + .hour-hand { + width: 33%; + left: 17%; /* 50% - 33% */ + } + + .second-hand { + height: 3px; }