Your IP : 216.73.216.40
<!DOCTYPE html>
<!--
Template Name: Academic Education V2
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
-->
<html>
<head>
<title>Academic Education V2 | Pages | Basic Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<!-- / Demo styling - remove before use -->
<style type="text/css">
.container .group{text-align:center;}
.container .group div{padding:8px 0; font-size:16px; font-family:Verdana, Geneva, sans-serif;}
.container .group div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
.container .group div:nth-child(even){color:#FFFFFF; background:#979797;}
@media screen and (min-width:180px) and (max-width:900px) {
.container .group div{margin-bottom:0;}
}
</style>
<!-- / Demo styling -->
</head>
<body id="top">
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row0">
<div id="topbar" class="clear">
<!-- ################################################################################################ -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">A - Z Index</a></li>
<li><a href="#">Student Login</a></li>
<li><a href="#">Staff Login</a></li>
</ul>
</nav>
<!-- ################################################################################################ -->
</div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row1">
<header id="header" class="clear">
<!-- ################################################################################################ -->
<div id="logo" class="fl_left">
<h1><a href="../index.html">Academic Education V2</a></h1>
<p>Free Website Template</p>
</div>
<div class="fl_right">
<form class="clear" method="post" action="#">
<fieldset>
<legend>Search:</legend>
<input type="text" value="" placeholder="Search Here">
<button class="fa fa-search" type="submit" title="Search"><em>Search</em></button>
</fieldset>
</form>
</div>
<!-- ################################################################################################ -->
</header>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row2">
<div class="rounded">
<nav id="mainav" class="clear">
<!-- ################################################################################################ -->
<ul class="clear">
<li><a href="../index.html">Home</a></li>
<li class="active"><a class="drop" href="#">Pages</a>
<ul>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="full-width.html">Full Width</a></li>
<li><a href="sidebar-left.html">Sidebar Left</a></li>
<li><a href="sidebar-left-2.html">Sidebar Left 2</a></li>
<li><a href="sidebar-right.html">Sidebar Right</a></li>
<li><a href="sidebar-right-2.html">Sidebar Right 2</a></li>
<li class="active"><a href="basic-grid.html">Basic Grid</a></li>
</ul>
</li>
<li><a class="drop" href="#">Dropdown</a>
<ul>
<li><a href="#">Level 2</a></li>
<li><a class="drop" href="#">Level 2 + Drop</a>
<ul>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link Text</a></li>
<li><a href="#">Another Link Text</a></li>
<li><a href="#">This a very long link</a></li>
<li><a href="#">This is the last</a></li>
</ul>
<!-- ################################################################################################ -->
</nav>
</div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<div class="rounded">
<main class="container clear">
<!-- main body -->
<!-- ################################################################################################ -->
<p>This page basically demonstrates the use of the mini grid system used in this template.</p>
<p>As can be seen below, multiple rounded boxes can also be created for individual sections.</p>
<p>Please note that when using multiple sections you can only use one <strong><main></main></strong> element per page / document, the rest have to use other markup e.g. <strong><div></div>, <section></section></strong> etc.</p>
<!-- ################################################################################################ -->
<!-- / main body -->
<div class="clear"></div>
</main>
</div>
</div>
<!-- section 1 -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<div class="rounded">
<div class="container clear">
<!-- section content -->
<!-- ################################################################################################ -->
<div class="group">
<div class="one_half first">1/2</div>
<div class="one_half">1/2</div>
</div>
<!-- ################################################################################################ -->
<!-- / section content -->
<div class="clear"></div>
</div>
</div>
</div>
<!-- / section 1 -->
<!-- section 2 -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<div class="rounded">
<div class="container clear">
<!-- section content -->
<!-- ################################################################################################ -->
<div class="group btmspace-50">
<div class="one_quarter first">1/4</div>
<div class="one_quarter">1/4</div>
<div class="one_quarter">1/4</div>
<div class="one_quarter">1/4</div>
</div>
<div class="group btmspace-50">
<div class="one_quarter first">1/4</div>
<div class="one_quarter">1/4</div>
<div class="two_quarter">2/4 or 1/2</div>
</div>
<div class="group">
<div class="one_quarter first">1/4</div>
<div class="three_quarter">3/4</div>
</div>
<!-- ################################################################################################ -->
<!-- / section content -->
<div class="clear"></div>
</div>
</div>
</div>
<!-- / section 2 -->
<!-- section 3 -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row3">
<div class="rounded">
<div class="container clear">
<!-- section content -->
<!-- ################################################################################################ -->
<div class="group btmspace-50">
<div class="one_third first">1/3</div>
<div class="one_third">1/3</div>
<div class="one_third">1/3</div>
</div>
<div class="group">
<div class="one_third first">1/3</div>
<div class="two_third">2/3</div>
</div>
<!-- ################################################################################################ -->
<!-- / section content -->
<div class="clear"></div>
</div>
</div>
</div>
<!-- / section 3 -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row4">
<div class="rounded">
<footer id="footer" class="clear">
<!-- ################################################################################################ -->
<div class="one_third first">
<figure class="center"><img class="btmspace-15" src="../images/demo/worldmap.png" alt="">
<figcaption><a href="#">Find Us With Google Maps »</a></figcaption>
</figure>
</div>
<div class="one_third">
<address>
Long Educational Facility Name<br>
Address Line 2<br>
Town/City<br>
Postcode/Zip<br>
<br>
<i class="fa fa-phone pright-10"></i> xxxx xxxx xxxxxx<br>
<i class="fa fa-envelope-o pright-10"></i> <a href="#">contact@domain.com</a>
</address>
</div>
<div class="one_third">
<p class="nospace btmspace-10">Stay Up to Date With What's Happening</p>
<ul class="faico clear">
<li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="faicon-flickr" href="#"><i class="fa fa-flickr"></i></a></li>
<li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
</ul>
<form class="clear" method="post" action="#">
<fieldset>
<legend>Subscribe To Our Newsletter:</legend>
<input type="text" value="" placeholder="Enter Email Here…">
<button class="fa fa-sign-in" type="submit" title="Sign Up"><em>Sign Up</em></button>
</fieldset>
</form>
</div>
<!-- ################################################################################################ -->
</footer>
</div>
</div>
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<!-- ################################################################################################ -->
<div class="wrapper row5">
<div id="copyright" class="clear">
<!-- ################################################################################################ -->
<p class="fl_left">Copyright © 2015 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
<!-- ################################################################################################ -->
</div>
</div>
<!-- JAVASCRIPTS -->
<script src="../layout/scripts/jquery.min.js"></script>
<script src="../layout/scripts/jquery.fitvids.min.js"></script>
<script src="../layout/scripts/jquery.mobilemenu.js"></script>
</body>
</html>