<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emmanuel Anglican Secondary School</title>

	<link rel="shortcut icon" type="image/x-icon" href="images/school_logo.png" />
	<link href="my_styles/index.css" rel="stylesheet">
    <link href="my_styles/my_responsive.css" rel="stylesheet">
    <link href="Metro-UI-CSS-master/build/css/metro-icons.min.css" rel="stylesheet">
	<link href="Metro-UI-CSS-master/build/fonts/metro.ttf" rel="stylesheet">
    <link href="Metro-UI-CSS-master/build/css/metro.min.css" rel="stylesheet">
    <link href="Metro-UI-CSS-master/build/css/metro-responsive.min.css" rel="stylesheet">
   <!-- <link href="Metro-UI-CSS-master/docs/css/metro-schemes.css" rel="stylesheet">-->
    <script src="Metro-UI-CSS-master/build/js/jquery.js"></script> 
    <script src="Metro-UI-CSS-master/build/js/metro.min.js"></script>
    <script src="my_scripts/ajax.js"></script>
    <script src="my_scripts/script.js"></script>
    <script src="my_scripts/contact_script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBdj6RyhTqd8eqd845GJDDjn97uVaN5sPw"></script>
    
    <script>
  function initialize() {
        var mapCanvas = document.getElementById('map_canvas');
        var mapOptions = {
          center: new google.maps.LatLng(6.863786, 7.385558),
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
		var marker = new google.maps.Marker({
        position: new google.maps.LatLng(6.863986, 7.384558),
        map: map,
        title: 'Emmanuel Anglican Secondary School, Enugu'
	  });}
	  
      google.maps.event.addDomListener(window, 'load', initialize);

</script>
    

<!--<link href="Metro-UI-CSS-master/build/css/metro.css" rel="stylesheet">

<script type="text/javascript" src="my_scripts/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Metro-UI-CSS-master/build/js/metro.js"></script>-->
</head>

<body>
   
   <?php require_once('nav.php');?>
    <!--contents beside the navigation side bar-->
    <div class="from_hd">
        <div class="grid app-bar bg-darkCobalt myhead fixed-top">
            <div class="my_crump">
                <img id="mym" src="images/my_crump.png">
            </div>
            <div class="logo-afa"><div class="afa1"><img class="mysize place-right" src="images/school_logo.png"></div><div class="afa2">Emmanuel Anglican Secondary School</div>
            </div>
        </div>
        <!--Load other pages here-->
            <div id="mycont" class="posi shift-l mycont ">
                <div class="cova bg-white">
                    <div class="bg-black">
                        <div class="bg6"><h2 class="align-center myrotate360 txtshad">Contact Us</h2></div>
                    </div>
                    
                    <div class="bg-grayLighter fg-darkCobalt no-margin line_ht1 padding40">
                      <div class="grid">
                      	<div class="row cells2">
                    <div class="cell">
                    	<h2 >Please Note</h2>
                            <p class="mtop3">You are required to fill all the fields in our contact form below.</p>
                            <p>Please endeavour to re-check your email address and phone number before you submit.</p>
                            <p>You can check your inbox within 72 hours of receiving this message for our feedback.</p>
                        <!--<p><span class="mif-mail"></span></p>-->
                    </div>
                    <div class="cell">
                    	<h2 >Our Map Location</h2>
                        <div class="mtop3" id="map_canvas"></div>
                    </div>
                </div>
                      </div>
                        
                    </div>
                   
             
                    <div class="theme_color2 grid fg-white no-margin line_ht1 padding40">
                        <div class="row cells5">
                      <div class="cell"></div>
                      <div class="cell colspan3">
                      	<h2>Send us a mail</h2>
                      	<form data-role="validator" action="javascript:;">
                           <label>First Name</label>
                           <div class="input-control text full-size" data-role="input">
                                <input id="firstName" type="text">
                                <button class="button helper-button clear"><span class="mif-cross"></span></button>
                           </div>
                           
                           <label>Last Name</label>
                            <div class="input-control text full-size" data-role="input">
                                <input id="lastName" type="text">
                                <button class="button helper-button clear"><span class="mif-cross"></span></button>
                            </div>
                           
                           <label>Email Address</label>
                           <div  class="input-control text full-size" data-role="input">
                                <input  id="email" type="text">
                                
                                <button class="button helper-button clear"><span class="mif-cross"></span></button>
                           </div>
                          
                           <label>Message</label>
                           <div class="input-control textarea full-size" data-role="input" data-text-auto-resize="true" data-text-max-height="200">
                            <textarea id="message"></textarea>
                           </div>
                          
                          <div class="grid">
                          	<div class="row cells2">
                            	<div class="cell">
                                	<input id="send" class="bg-grayLight fg-white full-size" type="submit" value="Send">
                                </div>
                                <div class="cell"></div>
                            </div>
                          </div>
                         </form>
                      </div>
                      <div class="cell"></div>
                     </div>
                    </div>
                    
                   
                </div>
                
                <div data-role="dialog" data-hide="5000" data-close-button="true" class="padding20 dialog orangeBg" id="dialog1">
                	<p >
                	</p>
                </div>
                
                <?php require_once('footer.php') ?>
            </div>
        
	</div>
</body>
</html>