diff --git a/01 - JavaScript Drum Kit/index-MINE.html b/01 - JavaScript Drum Kit/index-MINE.html new file mode 100644 index 0000000000..eac934be9f --- /dev/null +++ b/01 - JavaScript Drum Kit/index-MINE.html @@ -0,0 +1,81 @@ + + + + + JS 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/summary.md b/01 - JavaScript Drum Kit/summary.md new file mode 100644 index 0000000000..c648fa36a4 --- /dev/null +++ b/01 - JavaScript Drum Kit/summary.md @@ -0,0 +1,36 @@ +# Knowledge Summary +## JS + +## Html +- kbd tag for semantic reading +- audio tag + +## CSS +- background + ```css + background-size: cover; + background: url('./background.jpg') bottom center; + ``` +- flex + ```css + display: flex; + flex: 1; + align-items: center; + justify-content: center; + ``` +- vh unit is relative to viewport +- unit + - vh is relative to viewport + - rem is relative to the font size of the root element(html) +- transition and transform + ```css + transition: all .07s ease; + transform: scale(1.1); + ``` +- box shadow +```css +box-shadow: 0 0 1rem #ffc600; +``` + + +