Untitled

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="css/exercise1.css">
<link rel="stylesheet" href="css/exercise1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css">
</head>
<!--------Themes go to : http://themeroller.jquerymobile.com/---------->
<body>
<!---------------------------------SCRIPT FOR PAGE 1---------------------------------->
<div data-role="page" id="page01">
	<div data-role="header" data-position="fixed">
		<h1 align="center" style="font-size:2em; margin-bottom:-40px; margin-top:-20px" >SMST</h1>
        <h2>Home</h2>
    </div>
    <script>
$( document ).on( "swipeleft swiperight", "page01.html", function( e ) {
     if ( e.type === "swipeleft" )
         {
        $.mobile.changePage("page02.html", {transition:"slide", reloadPage: true});
         }
         else if ( e.type === "swiperight" )
         {
         $.mobile.changePage("page04.html", {transition: "slide", reverse:true, reloadPage: true});
         }
    });
</script>

    <div data-role="content">
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>
	This is the Homescreen. <br>

    </div>

    <div data-role="footer" data-position="fixed">
    	<div data-role="navbar">
        	<ul>
            	<li><a data-icon="home1" data-transition="slide" href="page01.html" style="color:#082E40 !important" class="ui-btn-active ui-state-persist">Home</a></li>
            	<li><a data-icon="contact1" data-transition="slide" href="page02.html">Contact Us</a></li>
            	<li><a data-icon="location1" data-transition="slide" href="page03.html">Map</a></li>
            	<li><a data-icon="arrival1" data-transition="slide" href="page04.html">Arrival Times</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
<style type="text/css">
	.ui-btn {
		border-width: 2px;
	}
	.ui-icon-home1:after {
		background-image: url(home.png) !important;
		background-size:16px 16px;
	}
	.ui-icon-contact1:after {
		background-image: url(contact.png) !important;
		background-size:16px 16px;
	}
	.ui-icon-location1:after {
		background-image: url(location.png) !important;
		background-size:16px 16px;
	}
	.ui-icon-arrival1:after {
		background-image: url(arrival.png) !important;
		background-size:16px 16px;
	}
	.ui-popup {

	}
	#textarea-a {
		height: 100px;
		width: 300px;
	}
	closebtn {
		margin-left: 200px;
		margin-top: 20px;
		width: 100px;
		height: 100px;
	}
	hgroup {
		margin-left: 170px;
		font-size: 2em;
		margin-bottom: -10px;
	}
	html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

</style>
</html>
<!---------------------------------END OF SCRIPT---------------------------------->