<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graduation</title>
<!-- CSS -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/bootstrap.css"/> <!-- Bootstrap -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/bootstrap-social.css"/> <!-- For Social Icons -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/font-awesome.css"/> <!-- Font Awesome -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/main.css"/> <!-- Main Style -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/prettyPhoto.css"/> <!-- Carousel -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_lib/lightbox/css/jquery.lightbox-0.5.css"/> <!-- Lightbox -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> <!-- Blueimp -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_lib/Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css"/> <!-- For the Photo gallery Effect -->
<link rel="stylesheet" href="//tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css"> <!-- Booking Calendar -->
<link href="//www.fuelcdn.com/fuelux/3.2.1/css/fuelux.min.css" rel="stylesheet"> <!-- Booking calendar -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <!-- Calendar -->
<link rel="stylesheet" href="http://graduation.dev/graduation/public/_css/datepicker.css"/> <!-- Carousel -->
</head>
<!-- Head End -->
<body id="home" onload="startTime()">
<nav class="nav navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://graduation.dev/graduation/public">
<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt=""> <!-- Hidden XS devices like Iphone -->
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt=""> <!-- Visible XS devices like Iphone -->
<!-- Logo in two formats one normal one for mobile -->
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://graduation.dev/graduation/public">Home</a></li>
<li><a href="http://graduation.dev/graduation/public/about">About</a></li>
<li><a href="http://graduation.dev/graduation/public/media">Gallery</a></li>
<li><a href="http://graduation.dev/graduation/public/booking">Booking</a></li>
<li class="hidden-xs"><a href="http://graduation.dev/graduation/public/contact">Contact</a></li>
<li class="visible-xs"><a href="http://graduation.dev/graduation/public/info">Info</a></li> <!-- Mobile Vs -->
</ul>
</div>
</div>
</nav>
<!-- Nav -->
<!-- NAVIGATION -->
<div id="wrap">
<div class="content container">
<section class="slide-show">
<div class="visible-xs">
<img class="logo-mobile visible-xs img-responsive img-rounded" src="http://graduation.dev/graduation/public/_imgs/example-logo-mobile.png" alt="logoMobile"> <!-- Visible only on mobile / Iphone / Smart Phones -->
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://graduation.dev/graduation/public/_imgs/1.jpg" alt="" />
<div class="carousel-caption" >
<h4 class="back-light hidden-xs">Aenean faucibus luctus enim. Duis quis sem risu suspend lacinia elementum nunc.</h4>
</div>
</div>
<div class="item">
<img src="http://graduation.dev/graduation/public/_imgs/2.jpg" alt="" />
<div class="carousel-caption ">
<h4 class="back-light hidden-xs">Aenean faucibus luctus enim. Duis quis sem risu suspend lacinia elementum nunc.</h4>
</div>
</div>
<div class="item">
<img src="http://graduation.dev/graduation/public/_imgs/3.jpg" alt="" />
<div class="carousel-caption ">
<h4 class="back-light hidden-xs">Aenean faucibus luctus enim. Duis quis sem risu suspend lacinia elementum nunc.</h4>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
</div>
</section>
<!--SLIDESHOW END --> <!-- HEADER -->
<section class="main col-lg-12">
<section class="home col col-lg-8">
<article class="intro">
<div class="well">
<h1 class="h1">Home</h1>
<p>Velox repressors ducunt ad habena.Ubi est ferox barcas?Superbus zirbuss ducunt ad galatae.</p>
<p><img style="float: right; margin: 0px 0px 15px 15px;" src="http://lorempixel.com/output/abstract-q-c-300-300-5.jpg" max-width="100%" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque ea est eveniet fugit id ipsam minima molestiae, mollitia nam necessitatibus nihil quas quasi quos sit tempora voluptatem. Quisquam, sequi!</span>
<span>Autem blanditiis consequatur culpa cumque cupiditate eaque in maxime tenetur vel! Fuga harum optio perferendis placeat quis soluta ut! Cum dignissimos doloribus error iusto quis quos rerum saepe vel voluptatum.</span>
<span>A, aliquid, asperiores cupiditate doloremque eius ex explicabo id impedit inventore ipsum, maiores nam necessitatibus optio pariatur quam quidem quis rem sequi sint voluptatem. Aperiam ea excepturi iure quas quia?</span>
<span>Aliquid animi architecto aspernatur commodi corporis cumque dolore doloremque doloribus dolorum ex exercitationem id illum inventore laborum magni maxime, molestiae molestias non pariatur ratione reiciendis rem repudiandae sit voluptas voluptatibus.</span>
<span>Aperiam eos eveniet harum in incidunt! Atque autem commodi deleniti dolores esse fugit id ipsam itaque iusto laborum magni, nemo optio perferendis perspiciatis porro, quis quos soluta suscipit ullam voluptate!</span>
<span>Aliquid, quam, quasi. A eos laudantium pariatur unde. Facere fugit id minima omnis sequi soluta voluptatibus voluptatum. Amet culpa cupiditate eius eos explicabo fuga laudantium maiores repudiandae sint suscipit, voluptate?</span>
</p>
</div>
</article> <!-- Intro -->
<article class="intro">
<div class="well">
<h1 class="h1">Home</h1>
<p>Velox repressors ducunt ad habena.Ubi est ferox barcas?Superbus zirbuss ducunt ad galatae.</p>
<p><img style="float: left; margin: 0px 0px 15px 15px;" src="http://lorempixel.com/output/abstract-q-c-300-300-5.jpg" max-width="100%" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque ea est eveniet fugit id ipsam minima molestiae, mollitia nam necessitatibus nihil quas quasi quos sit tempora voluptatem. Quisquam, sequi!</span>
<span>Autem blanditiis consequatur culpa cumque cupiditate eaque in maxime tenetur vel! Fuga harum optio perferendis placeat quis soluta ut! Cum dignissimos doloribus error iusto quis quos rerum saepe vel voluptatum.</span>
<span>A, aliquid, asperiores cupiditate doloremque eius ex explicabo id impedit inventore ipsum, maiores nam necessitatibus optio pariatur quam quidem quis rem sequi sint voluptatem. Aperiam ea excepturi iure quas quia?</span>
<span>Aliquid animi architecto aspernatur commodi corporis cumque dolore doloremque doloribus dolorum ex exercitationem id illum inventore laborum magni maxime, molestiae molestias non pariatur ratione reiciendis rem repudiandae sit voluptas voluptatibus.</span>
<span>Aperiam eos eveniet harum in incidunt! Atque autem commodi deleniti dolores esse fugit id ipsam itaque iusto laborum magni, nemo optio perferendis perspiciatis porro, quis quos soluta suscipit ullam voluptate!</span>
<span>Aliquid, quam, quasi. A eos laudantium pariatur unde. Facere fugit id minima omnis sequi soluta voluptatibus voluptatum. Amet culpa cupiditate eius eos explicabo fuga laudantium maiores repudiandae sint suscipit, voluptate?</span>
</p>
</div>
</article> <!-- Intro -->
</section> <!-- Home Section Main -->
<section class="home-aside col col-lg-4">
<aside class="schedule">
<div class="well">
<h2>Schedule</h2>
<hr class="style" />
<p>There's a lot happening at our many workshop and talks. Make sure you check out the <a href="http://graduation.dev/graduation/public/schedule">full schedule</a> for more information</p>
<div class="panel" id="schedule">
<!-- Monday ##########################-->
<!-- Tuesday ##########################-->
<!-- Wednesday ##########################-->
<!-- Thursday ##########################-->
<section class="panel-group" id="schedule">
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#schedule" href="#thursday">
<span class="glyphicon glyphicon-calendar"></span>
Thursday
</a>
</div>
<div id="thursday" class="panel-body collapse">
<section class="panel-default">
<p>Providing definition to abstract art, salvaging recyclables and collectibles for creating mixed media art, and a hands-on lesson in color theory are the hot topics for Thursday's lineup. Join Riley Rudolph Rewington, Constance Olivia Smith, and Hassum Harrod, some of the most talented up-and-coming artists of their generation.<br />
<a href="javascript:" class="btn btn-danger btn-small">Thursday Schedule</a>
</p>
</section>
</div>
</section>
<!-- Friday ##########################-->
</div>
</div>
<script>
$(function () {
var days = ["sunday","monday","tuesday","wednesday","thursday","friday","saturday"];
d = new Date(); //This returns Wed Apr 02 2014 17:28:55 GMT+0800 (Malay Peninsula Standard Time)
x = d.getDay(); //This returns a number, starting with 0 for Sunday
$('#' + days[x]).collapse();
});
</script>
</aside> <!-- Schedule --> <section class="newsletter">
<div class="well">
<h1>newsletter</h1>
</div>
</section>
</section>
<!-- Mobile version -->
<div class="visible-xs">
<article class="home-mobile col-xs-12">
<h1 class="h1">Mobile content here</h1>
</article>
</div>
<!-- Mobile Home Content Here -->
<!-- Mobile Home Content -->
</section>
<!-- CONTENT -->
</div> <!-- Content -->
</div> <!-- Wrap -->
<div class="clearfix"></div>
<footer class="footer" id="footer">
<div class="container">
<p class="text-muted pull-left">
<a class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-primary hidden-xs" href="http://graduation.dev/graduation/public/contact">
<span class="glyphicon glyphicon-envelope fa-1x"></span>
</a>
</p>
<p id="copyright" class="text-muted pull-right">
<span class="glyphicon glyphicon-copyright-mark"></span>2014/2015
</p>
</div>
</footer>
<!-- FOOTER -->
<!-- Scripts JS/JQ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_js/bootstrap.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.jqEasyCharCounter-min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_lib/Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js"></script>
<script src="http://graduation.dev/graduation/public/_js/response.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.prettyPhoto.js"></script>
<script src="http://graduation.dev/graduation/public/_js/jquery.fittext.js"></script>
<script src="http://graduation.dev/graduation/public/_lib/lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<script src="http://graduation.dev/graduation/public/_js/mainScripts.js"></script>
</body> <!-- Body End -->
</html>
