header.html

{% macro render_header(video) %}

<header class="sheader {% if video %}vheader{% endif %}">
	<!-- Main navbar -->
	<nav class="navbar navbar-default" role="navigation">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle  {% if homepage %}navbar-adjust{% endif %}" data-toggle="collapse" data-target="#nav-primary">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<ul class="nav join visible-xs">
					<li class="active"><a href="/subscribe">Subscribe </a></li>
				</ul>
				<div>
					<a class="logo" href="/" title=""></a>
				</div>
			</div>

			<div class="collapse navbar-collapse" id="nav-primary">
				<ul class="nav navbar-nav navbar-right hidden-xs">
					<li><a href="/subscribe">Subscribe</a></li>
					<li><a href="/whyivape">Why I Vape</a></li>
                    <li><a href="/shop">Shop</a></li>
                    <li><a href="http://community.zamplebox.com">Community</a></li>
					<li><a href="/about">About</a></li>
                    <li><a href="http://support.zamplebox.com/">Support</a></li>
                    <li><a href="http://blog.zamplebox.com/">Blog</a></li>
				</ul>

				<div class="navbar-mobile">
					<div class="row">
						<div class="area-login">
							<p><button type="button" class="btn">LOGIN</button></p>            
							<p><button type="button" class="btn">SIGN UP</button></p>
						</div>
						<div class="area-menu">
							<ul class="nav navbar-nav">
								<li><a href="/whyivape">Why I Vape</a></li>
								<li><a href="/shop">Shop</a></li>
								<li><a href="http://community.zamplebox.com">Community</a></li>
								<li><a href="/about">About</a></li>
                  				<li><a href="http://support.zamplebox.com/">Support</a></li>
                                <li><a href="http://blog.zamplebox.com/">Blog</a></li>
							</ul>                
						</div>
					</div>
				</div>
			</div><!-- /.navbar-collapse -->
          	
            <ul class="nav join subscribe-mobile-hidden">
                <li class="active"><a href="/subscribe">Subscribe</a></li>
            </ul>
		</div><!-- /.container -->
	</nav>
	<!-- /Main navbar -->
	{% if video %}
	<div class="container-fluid">
		<div class="row video">

			<canvas width="640" height="400" class="visible-xs"></canvas>
			<video class="hvideo hidden-xs">
              	<source src="https://dl.dropboxusercontent.com/u/90811826/zamplebox-product.mp4.mp4" type='video/mp4'>
				<source src="https://dl.dropboxusercontent.com/u/90811826/zamplebox-product.webmhd.webm" type='video/webm'> 
				
                
              	Your browser doesn't support <code>video</code> element.
			</video>

			<section class="poster has-videobtn">
				<hgroup>
					<h1 class="hidden-xs">A Delicious Assortment of the <strong>BEST</strong><br>E-Liquid Delivered Monthly</h1>
					<h2 class="visible-xs">A Delicious Assortment of the <strong>BEST</strong><br>E-Liquid Delivered Monthly</h2>
					<h3>(Get $60-150 of the best e-liquid every month from just $24.99/month)</h3>
				<span class="playbtn"></span>
				</hgroup>
			</section>     
		</div>
	</div>
	{% endif %}

</header>
{% endmacro %}