Triangle Ghost Theme - Demo Code Samples

Demo HTML

<!-- Demo Version of footerwidgets.hbs -->

<aside class="shade2 uk-clearfix">
	<div class="uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container-center" data-uk-grid-match="{target:'.uk-panel'}">
	<div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
		<div class="uk-h5 uk-panel-title"><i class="uk-icon-envelope uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>MailChimp</div>
		<p>We don't send a lot of mail, but when we do it's usually pretty awesome.</p>
		<div id="mc_embed_signup">
		<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate uk-form" target="_blank" novalidate>
		<div id="mc_embed_signup_scroll">
		<input type="email" value="" name="EMAIL" class="required email uk-width-1-1" id="mce-EMAIL" placeholder="Email Address">
		<div class="uk-hidden"><input type="text" name="#" tabindex="-1" value=""></div>
		<div class="uk-clearfix uk-margin-small uk-float-right"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="uk-button uk-button-small"></div>	
		</div>
		</form>
		</div>         
	</div>

	<div class="uk-width-1-1 uk-width-small-1-2 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header">
		<div class="uk-h5 uk-panel-title"><i class="uk-icon-gears uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i>About Us</div>
		<p>Our focus is on supplying a bulletproof foundation that can serve as starting point for advanced web developers, while also providing a clean design for those who prefer to grow their style organically over time.</p>
	</div>	

	<div class="uk-width-1-1 uk-width-small-1-1 uk-width-medium-1-3 uk-margin-large-top uk-margin-large uk-panel uk-panel-header" itemscope itemtype="http://schema.org/LocalBusiness">
		<div class="uk-h5 uk-panel-title"><i class="uk-icon-h-square uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:600}"></i><span itemprop="name">Haeck Design</span></div>
		<ul itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="uk-list uk-list-line uk-margin-small uk-text-center-small">
		<li><span itemprop="streetAddress" class="uk-display-block">100 N Person Street</span>
		<span itemprop="addressLocality">Raleigh</span>, <span itemprop="addressRegion">North Carolina</span><i class="uk-icon-map-marker uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
		<li><span class="uk-text-muted">@</span>HaeckDesign<i class="uk-icon-twitter uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
		<li><span itemprop="telephone">800-555-5555</span><i class="uk-icon-phone uk-float-right uk-margin-small-top uk-icon-mini uk-text-muted"></i></li>
		</ul>
	</div>

	</div>
</aside>



<!-- Demo Version of front-page.hbs - White Bar -->

<aside class="uk-width-1-1 uk-navbar uk-navbar-attached uk-clearfix uk-text-center uk-clearfix">
	<div class="uk-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-4 uk-container-center uk-margin uk-margin-top midbar" data-uk-margin data-uk-grid-match data-uk-scrollspy="{cls:'uk-animation-fade'}">
		<a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
		<i class="uk-icon-tachometer uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Quick Loading</h5></a>
		<a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
		<i class="uk-icon-arrows-alt uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Fully Responsive</h5></a>
		<a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" data-uk-smooth-scroll="" title="Top">
		<i class="uk-icon-newspaper-o uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Post Sorting</h5></a>
		<a href="#" class="uk-panel uk-panel-space uk-icon-hover uk-animation-hover" target="_blank" title="" rel="nofollow">
		<i class="uk-icon-code uk-icon-large uk-animation-reverse uk-animation-scale"></i><h5 class="uk-h4 uk-margin-small-top">Efficiently Coded</h5></a>
	</div>
</aside>


<!-- Demo Version of socialplugins.hbs -->

<div class="uk-width-1-1 shade2">
	<div class="uk-h3 uk-width-1-1 uk-width-medium-3-4 uk-grid uk-container-center uk-clearfix" data-uk-grid-match="{target:'.uk-width-medium-1-2'}" >

	<div class="uk-width-1-1 uk-container uk-container-center uk-margin-large-top">
		<i class="uk-icon-instagram uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
		<h6 class="uk-h4 uk-display-inline">On Instagram</h6>
		<ul id="instafeed" class="uk-thumbnav uk-grid-width-1-2 uk-grid-width-small-1-4 uk-grid uk-margin uk-margin-large-bottom" data-uk-scrollspy="{cls:'uk-animation-fade'}">
		</ul>
	</div>

	<div class="uk-width-1-1 uk-width-medium-1-2 uk-container uk-container-center">
		<i class="uk-icon-twitter uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
		<h6 class="uk-h4 uk-display-inline">On Twitter</h6>
		<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin-top uk-margin-large-bottom flexmedia uk-grid-width-1-1">
		<a class="twitter-timeline"  href="https://twitter.com/HaeckDesign" data-widget-id="246827722200989696" height="280"></a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>     
		</div>
	</div>	
	
	<div class="uk-width-1-1 uk-width-medium-1-2 uk-container uk-container-center">
		<i class="uk-icon-pinterest uk-margin-right" data-uk-scrollspy="{cls:'uk-animation-fade',delay:900}"></i>
		<h6 class="uk-h4 uk-display-inline">On Pinterest</h6>
		<div class="uk-panel uk-panel-box uk-panel-box-secondary uk-margin-top uk-margin-large-bottom uk-grid-width-1-1 uk-cover">
		<a data-pin-do="embedUser" href="http://www.pinterest.com/haeckdesign/"></a>
		<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
		</div>
	</div>

	</div>
</div>