index.html

<!-- @include _top-home.html -->
<!-- @include _nav.html -->

<!-- @todo There's a breakpoint where the Lighthouse background isn't sitting on the bottom -Tim -->

<div class="full-orbit home-slide">
	<ul data-orbit data-options="bullets:false;timer:true;navigation_arrows:false;slide_number:false;pause_on_hover:false;animation:fade;timer_speed: 4000;">
		<li>
			<img src="<!-- @path different-badge@2x.png -->" alt="A different kind of school" id="different-school" />
			<img src="assets/img/main-photo.jpg" alt="main-photo" width="1266" height="443" />
		</li>
		<li>
			<img src="<!-- @path different-badge@2x.png -->" alt="A different kind of school" id="different-school" />
			<img src="assets/img/main-photo2.jpg" alt="main-photo2" width="1266" height="443" />
		</li>
	</ul>
</div>

<div class="row home-lead">
	<div class="large-10 small-10 large-centered small-centered columns">
		<h2>We seek to nurture in each child the power to create a personally meaningful life.</h2>
		<p class="lead">
			We regard childhood as a magical and determining moment in life, when curiosity and wonder illuminate experience.<br><br>
			<a class="button radius small" href="#">Our Philosophy</a>
		</p>
	</div>
</div>
<div id="home-bottom-leader"></div>
<div id="home-bottom">
	<img src="<!-- @path turtle.png -->" id="turtle">
	<div id="home-boxes" class="row">
		<div class="large-8 columns">
			<div class="section-container tabs" data-section="tabs">
				<section>
			    	<p class="title" data-section-title><a href="#">News</a></p>
			    	<div class="content" data-section-content>
			    		<ul class="news_events">
							<li><a href="#">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </a></li>
							<li><a href="#">Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus</a></li>
							<li><a href="#">Tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus</a></li>
			    		</ul>
						<p><a class="button secondary radius medium" href="#">Read more news</a></p>
			    	</div>
			  	</section>
	 			
				<section>
			    	<p class="title" data-section-title><a href="#">Events</a></p>
			    	<div class="content" data-section-content>
			    		<ul class="news_events">
				    		<li class="row">
				    			<time class="columns large-4" datetime="2013-07-31">
				    				July 31, 2013
				    			</time>
				    				<a href="#" class="columns large-8">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</a>
				    		</li>
				    	</ul>
			    		<p><a class="button secondary medium radius" href="#">See All Events</a></p>
			    	</div>
			  	</section>
			</div>						
		</div>
	
		<div id="facebook" class="large-4 columns">
			<img src="assets/img/facebook-sample.jpg" alt="facebook-sample" width="301" height="554" />
		</div>	
	</div>
</div>

<!-- @include _footer.html -->
<!-- @include _bottom.html -->