<!DOCTYPE html>
<html>
<title>STEAM SAVE AFRICA</title>

<!-- Mirrored from www.w3schools.com/w3css/demo_teal.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 13 Mar 2016 11:04:53 GMT -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap -->
  <link rel="stylesheet" href="../../admin/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="../../admin/dist/css/skins/_all-skins.min.css">
  <link href="../../external/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src='../../external/jquery/jquery.js'></script>
<!-- <!--Import materialize.css 
      <link type="text/css" rel="stylesheet" href="external/materialize/css/materialize.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="external/materialize/css/materialize.min.css"  media="screen,projection"/>
 <!-- <!--JavaScript at end of body for optimized loading 
      <script type="text/javascript" src="external/materialize/js/materialize.min.js"></script>
      <script type="text/javascript" src="external/materialize/js/materialize.js"></script>
	   -->
<link rel="stylesheet" href="../../external/w3lib/w3.css">
<link rel="stylesheet" href="../../external/w3lib/w3-theme-teal.css">
 <!-- Font Awesome -->
 <link rel="stylesheet" href="../../external/font-awesome-4.7.0/css/font-awesome.min.css">


<style>
.user-members{max-width:200px;margin:5px}
/* static navbar for screens below 601px width */
.w3-opennav{display:none}
@media only screen and (max-width: 601px) {.w3-top {position:static;}.w3-opennav{display:block} #menu{display:none}.user-members{max-width:100%}}
<!-- @media only screen and (max-width: 601px) {.w3-top {position:static;}} -->
</style>

<?php 
include("../../dbconnection/dbconnection.php");
include("../../steam_functions/steam_functions.php");
$team=(staff_team($connect));

foreach(school_details($connect) as $row){
											$sch_id=$row["id"];
											$sch=$row["name"];
											$mission=$row["mission"];
											$vision=$row["vision"];
											$about=$row["about"];
											$tel=$row["tel"];
											$whatsapp=$row["whatsapp"];
											$email=$row["email"];
											$fb=$row["fb"];
											$twitter=$row["twitter"];
											$ig=$row["ig"];
											$ln=$row["ln"];
											$youtube=$row["youtube"];
										}
			
					?>

<body class='w3-light-grey' style='transition:2s'>

<!-- Side Navigation -->
<div id="id01" class="w3-hide-large"onclick='w3_close()' style='transition:0.3s;display:none;position:fixed;width:100%;height:100%;z-index:4;top:0px;background:rgba(0,0,0,0.4)' >
</div>
<nav class="w3-sidenav   w3-white w3-hide-large w3-card-4 w3-light-grey" style="width:0px;z-index:4;transition:0.3s">
  <a href='#'class='w3-container  w3-black w3-padding-16'>MENU<span class='w3-right'onclick="w3_close()" class="w3-closenav " style='margin-right:10px'>x</span></a>
	  <a class=" w3-padding-16 w3-border-bottom" href="../../">Home</a></li>
	  <a class="w3-padding-16 w3-border-bottom" href="../../admin/">Staff</a></li>
	  <a class="w3-padding-16 w3-border-bottom" href="javascript:void(0)">Students</a></li>
	  <li class="w3-dropdown-hover ">
		<a class="w3-padding-16 w3-border-bottom" href="javascript:void(0)">Services <i class="fa fa-caret-down"></i></a>
		<div class="w3-dropdown-content w3-card-4">
<?php
			foreach(services($connect) as $row){
				 $sid=ucwords($row["id"]);
				 $service=ucwords($row["service"]);
				?>
		  <a class="w3-padding-16" href="javascript:void(0)" ><?php echo  $service;?></a>
			<?php } ?>
		</div>
	  
</nav>
<!-- Header -->
<header class="w3-container w3-theme " id="myHeader" style='min-height:110px;padding:0px'>
  <!-- <i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>  -->
  <div class="w3-center">
  <img src="../../images/logo.png" class="pull-left w3-round w3-hide-small" style='height:80px;margin-bottom:10px;margin:10px'>
  <h3 class=" w3-animate-top "><span class='w3-text-shadow  w3-text-opacity w3-text-bold'><span class='w3-xxxlarge '>STEAM </span><span classs='w3-large '>Save Africa</span></span></h3>
 <i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav pull-left" style='margin:10px'></i>
  </div>

</header>


<div class="w3-container-12" >
  <ul class="w3-navbar   w3-theme-dark " style='min-height:50px'>
  
	<span id='menu'>   
	  <li><a class=" w3-padding-16" href="../../">Home</a></li>
	  <li><a class="w3-padding-16" href="../../admin/">Staff</a></li>
	  <li><a class="w3-padding-16" href="javascript:void(0)">Students</a></li>
	  <li class="w3-dropdown-hover ">
		<a class="w3-padding-16" href="javascript:void(0)">Services <i class="fa fa-caret-down"></i></a>
		<div class="w3-dropdown-content w3-card-4">
		  	<?php
			foreach(services($connect) as $row){
				 $sid=ucwords($row["id"]);
				 $service=ucwords($row["service"]);
				?>
		  <a class="w3-padding-16" href="javascript:void(0)" ><?php echo  $service;?></a>
			<?php } ?>
		</div>
	  </li>
	  </span>
	  <!-- <li class="w3-right"><a class="w3-padding-16" href="javascript:void(0)"><i class="fa fa-search"></i></a></li> -->
 </ul>
</div>

<script>
<!-- $() -->
	// Side navigation
	function w3_open() {
		document.getElementsByClassName("w3-sidenav")[0].style.width = "80%";
		<!-- document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center"; -->
		<!-- document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "16px"; -->
		 document.getElementById("id01").style.display = "block";
		 <!-- alert(); -->
	}

	function w3_close() {
		<!-- document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; -->
		document.getElementsByClassName("w3-sidenav")[0].style.width = "0px";
		document.getElementById("id01").style.display = "none";
	}
	
	

	</script>