From 38abe8c26a136dddbacc253bb52dafad5a59e730 Mon Sep 17 00:00:00 2001 From: Colin Turner Date: Tue, 13 Dec 2016 22:03:41 -0500 Subject: [PATCH 1/4] Test Comment --- 01 - JavaScript Drum Kit/index-FINISHED.html | 1 + 1 file changed, 1 insertion(+) 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 @@ +
From 2bc1012499c1995b85cf480ab5a331d029578ff6 Mon Sep 17 00:00:00 2001 From: Colin Turner Date: Thu, 15 Dec 2016 10:53:28 -0500 Subject: [PATCH 2/4] Intialize HTML file --- 01 - JavaScript Drum Kit/index-COLIN.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 01 - JavaScript Drum Kit/index-COLIN.html diff --git a/01 - JavaScript Drum Kit/index-COLIN.html b/01 - JavaScript Drum Kit/index-COLIN.html new file mode 100644 index 0000000000..e69de29bb2 From fce3b5fb501a1fffcc1856aa8e338601d938f660 Mon Sep 17 00:00:00 2001 From: Colin Turner Date: Thu, 15 Dec 2016 10:54:20 -0500 Subject: [PATCH 3/4] HTML skeleton --- 01 - JavaScript Drum Kit/index-COLIN.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-COLIN.html b/01 - JavaScript Drum Kit/index-COLIN.html index e69de29bb2..0f8af32f1a 100644 --- a/01 - JavaScript Drum Kit/index-COLIN.html +++ b/01 - JavaScript Drum Kit/index-COLIN.html @@ -0,0 +1,10 @@ + + + + + Document + + + + + \ No newline at end of file From 0ede08c19b5cefdd32cf984d043b3691674dd457 Mon Sep 17 00:00:00 2001 From: Colin Turner Date: Thu, 15 Dec 2016 12:08:33 -0500 Subject: [PATCH 4/4] Add drum tiles --- 01 - JavaScript Drum Kit/colin-style.css | 50 +++++++++++++++++++++++ 01 - JavaScript Drum Kit/index-COLIN.html | 49 +++++++++++++++++++++- 2 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 01 - JavaScript Drum Kit/colin-style.css 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 index 0f8af32f1a..46a735842e 100644 --- a/01 - JavaScript Drum Kit/index-COLIN.html +++ b/01 - JavaScript Drum Kit/index-COLIN.html @@ -2,9 +2,56 @@ - Document + 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