<div class="container">

			<div class="row">
				<div class="text-center"><h1>Soundboard</h1></div>
			</div>

			<div class="row">

				<div class="col-md-4 col-xs-6">
					<audio preload="auto" id="sound1">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.ogg" type="audio/ogg">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.mp3" type="audio/mpeg">
					</audio>
					<button type="button" class="btn btn-lg btn-block" onclick="document.getElementById('sound1').play()">punch</button>
				</div>

				<div class="col-md-4 col-xs-6">
					<audio preload="auto" id="sound2">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.ogg" type="audio/ogg">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.mp3" type="audio/mpeg">			
					</audio>
					<button type="button" class="btn btn-lg btn-block" onclick="document.getElementById('sound2').play()">punch</button>
				</div>

				<div class="col-md-4 col-xs-6">
					<audio preload="auto" id="sound3">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.ogg" type="audio/ogg">
						<source src="https://raw.githubusercontent.com/cartz/various/master/soundboard/audio/punch.mp3" type="audio/mpeg">
            </audio>
					<button type="button" class="btn btn-lg btn-block" onclick="document.getElementById('sound3').play()">punch</button>
				</div>

			</div>

		</div>
		
		<footer>
			<div class="col-md-offset-9 col-xs-offset-9">
				<p class="text">made with <a href="https://getbootstrap.com" target="_blank">bootstrap</a> and &#x2665;</p>
			</div>
		</footer>

/* settings for tags */
html {
  position: relative;
  min-height: 100%; }

body {
  background-color: #2c3e50;
  margin-bottom: 60px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }

footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  width: 100%;
  background-color: #34495e;
  border-top: 1px solid;
  border-color: #d35400; }

h1 {
  color: #d35400;
  border-color: #d35400;
  font-size: 4em;
  margin-bottom: 1em; }

.btn {
  background-color: #2c3e50;
  color: #d35400;
  border-color: #d35400;
  border: 1px solid; }
  .btn:hover {
    background-color: #34495e;
    border-color: #d35400;
    color: #d35400; }

.col-xs-6 {
  margin-bottom: 1em; }

.text {
  color: #d35400; }
  .text a {
    color: #d35400;
    text-decoration: underline; }