Merge pull request #706 from sanathan-git/drumupdate

updated background and symbols

Author: PBJI

Drum/falgun143/icons/drumback.jpg

@@ -17,32 +17,32 @@ <h1>PLAY DRUM KIT.</h1>
     </div>
     <div class="drumkit">
         <div class="pad" data-sound="clap" data-sound-key="a">
-            <h1>A</h1>
+            <h1 class="alphabet">A</h1>
             <img src="./icons/clap.png" alt="clap">
         </div>
 
         <div class="pad" data-sound="crash" data-sound-key="s">
-            <h1>S</h1>
+            <h1 class="alphabet">S</h1>
             <img src="./icons/crash.png" alt="crash">
         </div>
 
         <div class="pad" data-sound="openhihat" data-sound-key="d">
-            <h1>D</h1>
+            <h1 class="alphabet">D</h1>
             <img src="./icons/open-hihat.png" alt="oh">
         </div>
 
         <div class="pad" data-sound="kick" data-sound-key="f">
-            <h1>F</h1>
+            <h1 class="alphabet">F</h1>
             <img src="./icons/kick.png" alt="kick">
         </div>
 
         <div class="pad" data-sound="snare" data-sound-key="g">
-            <h1>G</h1>
+            <h1 class="alphabet">G</h1>
             <img src="./icons/snare.png" alt="snare">
         </div>
 
         <div class="pad" data-sound="closedhihat" data-sound-key="h">
-            <h1>H</h1>
+            <h1 class="alphabet">H</h1>
             <img src="./icons/closed-hihat.png" alt="ch">
         </div>
 

Drum/falgun143/index.html

@@ -3,9 +3,53 @@
     padding: 0;
 }
 
-body {
+.alphabet{
+  align-items: center;
+  appearance: none;
+  background-color: #FCFCFD;
+  border-width: 0;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
+  box-sizing: border-box;
+  color: #36395A;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: "JetBrains Mono",monospace;
+  height: 35px;
+  border-radius: 100%;
+  justify-content: center;
+  line-height: 1;
+  list-style: none;
+  overflow: hidden;
+  padding: 20px;
+  margin: 15px;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow .15s,transform .15s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow,transform;
+  font-size: 18px;
+}
 
-    
+.button-30:focus {
+  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+}
+
+.button-30:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+.button-30:active {
+  box-shadow: #D6D6E7 0 3px 7px inset;
+  transform: translateY(2px);
+}
+
+body {
+    background: url(./icons/drumback.jpg);  
     font-family: 'Montserrat', sans-serif;
     background-color: hsl(56, 29%, 62%);
     display: flex;