diff --git a/01 - JavaScript Drum Kit/colin-style.css b/01 - JavaScript Drum Kit/colin-style.css new file mode 100644 index 0000000000..3e0a320b37 --- /dev/null +++ b/01 - JavaScript Drum Kit/colin-style.css @@ -0,0 +1,50 @@ +html { + font-size: 10px; + background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background-size: cover; +} +body,html { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +.keys { + display:flex; + flex:1; + min-height:100vh; + align-items: center; + justify-content: center; +} + +.key { + border:4px solid black; + border-radius:5px; + margin:1rem; + font-size: 1.5rem; + padding:1rem .5rem; + transition:all .07s; + width:100px; + text-align: center; + color:white; + background:rgba(0,0,0,0.4); + text-shadow:0 0 5px black; +} + +.playing { + transform:scale(1.1); + border-color:#ffc600; + box-shadow: 0 0 10px #ffc600; +} + +kbd { + display: block; + font-size: 40px; +} + +.sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 1px; + color:#ffc600; +} diff --git a/01 - JavaScript Drum Kit/index-COLIN.html b/01 - JavaScript Drum Kit/index-COLIN.html new file mode 100644 index 0000000000..46a735842e --- /dev/null +++ b/01 - JavaScript Drum Kit/index-COLIN.html @@ -0,0 +1,57 @@ + + + + + Colin's Musical Adventure + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+ + + +
> + + + + + + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..75fcd18811 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -7,6 +7,7 @@ +