TEMPLATE2

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<section class="hero full-height">
	<div class="hero-inner full-height">
    
    <div class="row">
             <span class="hero-title">
					<h1>TEST..</h1>
                 <a class="arrow-down" href="#content"><i class="fi fi-arrow-down"></i></a>
             </span>
             
        </div>
     </div> 

    </div>
</section>

<div id="content">
 <article>
 <p>
 Here at ZURB, we created these icons with specific standards which gives a cohesive voice and style to develop an amazing font set for everyone to love, enjoy and use on their website. Some standards includes:    
 </p>
     
</article>
    

</div>

CSS

section.hero {
    padding: 20px;
}

section.hero .hero-inner {
    padding: 20px;
    background-color: red;
}

.full-height {
    height: 100%;
	position: relative;
}
/**/

#content {
    padding: 0 20px 20px;

}
article{
    background-color: #efefef;
    padding: 20px;
    min-height:1000px;
}

.hero h1{
    color: #fff;
    font-size: 3em;
} 

section.hero a.arrow-down i {
	font-size: 3em;
    color: #fff;
}


@media only screen and (max-width : 40em) {

section.hero,
section.hero .hero-inner{
    padding: 10px;
}

  
    
#content {
    padding: 0 10px 10px;

}   
    
}

JavaScript

$('.arrow-down').click(function(e){
  		e.preventDefault();
		$('html, body').animate({scrollTop:($("#content").offset().top - 20)}, 800, 'swing');
	});