<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main-background section-overlay">
<div class="key-box">
<div data-key="65" class="key">
<kbd>A</kbd><span>clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd><span>hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd><span>kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd><span>openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd><span>boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd><span>ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd><span>snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd><span>tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd><span>tink</span>
</div>
</div>
</div>
</div>
</div>
</div>
<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>
</div>
<link rel="stylesheet" href="css/main.min.css">
<script src="js/scripts.min.js"></script>
</body>