generator-steroids/generators/example/drumMachine/templates/index.html

A Yeoman generator for Steroids

<style>

html, body, .drumpad-container {
  height:100%;
  width:100%;
}

.drumpad-container > div {
  height:34%;
  width:50%;
  float:left;
  -webkit-box-sizing: border-box;

  font-weight: 600;
  color:#9DA2A4;
  font-size:24px;
  text-shadow: 0px 2px 3px #DDD;

  border: 1px solid #9DA2A4;

  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

.drumpad-container > div.active {
  color:#00AEEF;
  background-color: #CCF1FF;
}

</style>

<div class="drumpad-container">
  <div class="button" data-sound="kick.wav">KICK</div>
  <div class="button" data-sound="snare.wav">SNARE</div>
  <div class="button" data-sound="hihat.wav">HI-HAT</div>
  <div class="button" data-sound="clap.wav">CLAP</div>
  <div class="button" data-sound="perc.wav">PERC 1</div>
  <div class="button" data-sound="perc2.wav">PERC 2</div>
</div>