diff --git a/Drum/falgun143/icons/drumback.jpg b/Drum/falgun143/icons/drumback.jpg new file mode 100644 index 000000000..c4cc3a271 Binary files /dev/null and b/Drum/falgun143/icons/drumback.jpg differ diff --git a/Drum/falgun143/index.html b/Drum/falgun143/index.html index f587e7864..378a46368 100644 --- a/Drum/falgun143/index.html +++ b/Drum/falgun143/index.html @@ -17,32 +17,32 @@

PLAY DRUM KIT.

-

A

+

A

clap
-

S

+

S

crash
-

D

+

D

oh
-

F

+

F

kick
-

G

+

G

snare
-

H

+

H

ch
diff --git a/Drum/falgun143/styles.css b/Drum/falgun143/styles.css index 0495efa28..1c1078c84 100644 --- a/Drum/falgun143/styles.css +++ b/Drum/falgun143/styles.css @@ -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;