-
- A
- clap
-
-
- S
- hihat
-
-
- D
- kick
-
-
- F
- openhat
-
-
-
G
-
boom
+
+
+
JS Drum Kit
+
+
+
+
+
+ A clap
+
+
+ S hihat
+
+
+ D kick
+
+
+ F openhat
+
+
+ G boom
+
+
+ H ride
+
+
+ J snare
+
+
+ K tom
+
+
+ L tink
+
-
- 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 0673a8752a..1ac90eb0f5 100644
--- a/01 - JavaScript Drum Kit/style.css
+++ b/01 - JavaScript Drum Kit/style.css
@@ -4,7 +4,8 @@ html {
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;
}
diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
index 7cbf5f6ba6..ef88de29c3 100644
--- a/02 - JS and CSS Clock/index-START.html
+++ b/02 - JS and CSS Clock/index-START.html
@@ -1,12 +1,10 @@
-
-
-
JS + CSS Clock
-
-
-
-
+
+
+
JS + CSS Clock
+
+
+
+ .clock {
+ width: 30rem;
+ height: 30rem;
+ border: 20px solid white;
+ border-radius: 50%;
+ margin: 50px auto;
+ position: relative;
+ padding: 2rem;
+ box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
+ inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
+ }
-
-
+
+