diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..5c3d2533af --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,86 @@ + + + + + + + Javascript Drum kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index bfdba84312..86ca0d65f0 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,10 +1,11 @@ html { font-size: 10px; - background: url('./background.jpg') bottom center; + background: url("./background.jpg") bottom center; background-size: cover; } -body,html { +body, +html { margin: 0; padding: 0; font-family: sans-serif; @@ -19,17 +20,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 { @@ -46,6 +47,6 @@ kbd { .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: .1rem; + letter-spacing: 0.1rem; color: #ffc600; }