+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..937a55c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,20 @@
+window.addEventListener("load", () => {
+ const sounds = document.querySelectorAll(".sound");
+ const pads = document.querySelectorAll(".line div");
+ const colors = [
+ "#60d394",
+ "#d36060",
+ "#c060d3",
+ "#d3d160",
+ "#606bd3",
+ "#60c2d3"
+ ];
+
+ pads.forEach((pad, index) => {
+ pad.addEventListener("click", function() {
+ sounds[index].currentTime = 0;
+ sounds[index].play();
+ createBubble(index);
+ });
+ });
+});
diff --git a/sounds/808.wav b/sounds/808.wav
new file mode 100755
index 0000000..145bbdd
Binary files /dev/null and b/sounds/808.wav differ
diff --git a/sounds/hat.wav b/sounds/hat.wav
new file mode 100755
index 0000000..1d971e6
Binary files /dev/null and b/sounds/hat.wav differ
diff --git a/sounds/kick.wav b/sounds/kick.wav
new file mode 100755
index 0000000..27de5d2
Binary files /dev/null and b/sounds/kick.wav differ
diff --git a/sounds/snare.wav b/sounds/snare.wav
new file mode 100755
index 0000000..46df9d4
Binary files /dev/null and b/sounds/snare.wav differ
diff --git a/sounds/synth1.wav b/sounds/synth1.wav
new file mode 100755
index 0000000..cf0cf11
Binary files /dev/null and b/sounds/synth1.wav differ
diff --git a/sounds/synth2.wav b/sounds/synth2.wav
new file mode 100755
index 0000000..ec697a4
Binary files /dev/null and b/sounds/synth2.wav differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d5401a8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,65 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Poppins", sans-serif;
+}
+
+.app {
+ min-height: 100vh;
+ align-items: center;
+}
+
+header h1 {
+ margin: 50px 0px 20px 0px;
+ text-align: center;
+ font-size: 40px;
+}
+header p {
+ font-size: 25px;
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.pads {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.kick {
+ background: #60d394;
+}
+._808 {
+ background: #d36060;
+}
+.snare {
+ background: #c060d3;
+}
+.hat {
+ background: #d3d160;
+}
+.synth1 {
+ background: #606bd3;
+}
+.synth2 {
+ background: #60c2d3;
+}
+
+.line {
+ display: flex;
+}
+
+.line > div {
+ padding: 3rem;
+ margin: 1rem;
+}
+
+h3 {
+ text-align: center;
+ color: white;
+}
\ No newline at end of file