<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sangeet</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/utility.js"></script>
	<script src="code/SangeetCode.js"></script>
	<script src="code/SangeetData.js"></script>

	<link href="css/SangeetStyle.css" rel="stylesheet">

</head>

<body>
	<div style="background-image:url(CSS/Preloader_3.gif);" class="se-pre-con col-lg-12 col-md-12 col-xs-12 col-sm-12">
	</div>

	<div id="Icons" class="col-md-12 col-lg-12 col-sm-12 col-xs-12 navHeight">
		<div id="home" class='forPos'>
			<img id="myHome" class='center-block'>
		</div>
		<div id="space"
			class="col-md-8 col-lg-8 col-sm-8 col-xs-8 col-md-offset-2 col-lg-offset-2 col-sm-offset-2 col-xs-offset-2">
			<center id="instrumentName"> </center>
		</div>
		<div id="logo" class='forPos'>
			<img id="myLogo" class='img-responsive center-block'>
		</div>
	</div>
	<div id="wrapper">
		<div id='startBtn'
			class=" noPadding col-md-1 col-lg-1 col-sm-1 col-xs-1 col-md-offset-10 col-lg-offset-10 col-sm-offset-10 col-xs-offset-10">
			<img id='btnStart' class='img-responsive center-block noPadding col-md-12 col-lg-12 col-sm-12 col-xs-12'>
		</div>
		<!-- 		<div id="instrumentOptions" class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
			<div class="myRows col-md-8 col-lg-8 col-sm-8 col-xs-8">
				<div data="Piano" class="col-md-7 col-lg-7 col-sm-7 col-xs-7 roundBox instrumentChoice">
					<center>
						<h2 data="Piano" id='PianoSound' class="instrumentChoice lblText">Piano</h2><br><br>
					</center>
				</div>
				<div data="Flute" class="col-md-7 col-lg-7 col-sm-7 col-xs-7 roundBox instrumentChoice">
					<center>
						<h2 data="Flute" id='FluteSound' class="instrumentChoice lblText">Flute</h2>
					</center>
				</div>
				<div data="Guitar" class="col-md-7 col-lg-7 col-sm-7 col-xs-7 roundBox instrumentChoice">
					<center>
						<h2 data="Guitar" id='GuitarSound' class="instrumentChoice lblText">Guitar</h2>
					</center>
				</div>
				<div data="Trumpet" class="col-md-7 col-lg-7 col-sm-7 col-xs-7 roundBox instrumentChoice">
					<center>
						<h2 data="Trumpet" id='TrumpetSound' class="instrumentChoice lblText">Trumpet</h2>
					</center>
				</div>
				<div data="Violin" class="col-md-7 col-lg-7 col-sm-7 col-xs-7 roundBox instrumentChoice">
					<center>
						<h2 data="Violin" id='ViolinSound' class="instrumentChoice lblText">Violin</h2>
					</center>
				</div>
			</div>
		</div> -->

		<div id="containerKeyboard" class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
			<audio id="myAudio" src="" style="display:none;"></audio>

			<div id="keyNote1" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">C</span></div>
			<div id="keyNote16" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey1 keysBlack"></div>

			<div id="keyNote2" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">D</span></div>
			<div id="keyNote17" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey2 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote3" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">E</span></div>

			<div id="keyNote4" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">F</span></div>
			<div id="keyNote18" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey3 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote5" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">G</span></div>
			<div id="keyNote19" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey4 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote6" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">A</span></div>
			<div id="keyNote20" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey5 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote7" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">B</span></div>

			<div id="keyNote8" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">C</span></div>
			<div id="keyNote21" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey6 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote9" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">D</span></div>
			<div id="keyNote22" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey7 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote10" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">E</span></div>

			<div id="keyNote11" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">F</span></div>
			<div id="keyNote23" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey8 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote12" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">G</span></div>
			<div id="keyNote24" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey9 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote13" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">A</span></div>
			<div id="keyNote25" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound blackKey10 keysBlack"><span
					class="text-bottom"></span></div>

			<div id="keyNote14" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">B</span></div>

			<div id="keyNote15" class="col-md-1 col-lg-1 col-sm-1 col-xs-1 playSound keypress keysMain"><span
					class="text-bottom">C</span></div>

		</div>

		<div id='instrmentsChoice' class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
			<div data="Piano" class="col-md-2 col-lg-2 col-sm-2 col-xs-2 firstInst instrumentChoice">
				<img id='pianoImg' data="Piano" class='img-responsive center-block myImgs'>
			</div>
			<div data="Flute" class="col-md-2 col-lg-2 col-sm-2 col-xs-2 instrumentChoice">
				<img id='fluteImg' data="Flute" class='img-responsive center-block myImgs'>
			</div>
			<div data="Guitar" class="col-md-2 col-lg-2 col-sm-2 col-xs-2 instrumentChoice">
				<img id='guitarImg' data="Guitar" class='img-responsive center-block myImgs'>
			</div>
			<div data="Trumpet" class="col-md-2 col-lg-2 col-sm-2 col-xs-2 instrumentChoice">
				<img id='trumpetImg' data="Trumpet" class='img-responsive center-block myImgs'>
			</div>
			<div data="Violin" class="col-md-2 col-lg-2 col-sm-2 col-xs-2 instrumentChoice">
				<img id='violinImg' data="Violin" class='img-responsive center-block myImgs'>
			</div>
		</div>

	</div>
</body>

</html>