Number Krunchers

In this example below you will see how to do a Number Krunchers with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SamrajM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamrajM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Number Krunchers</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--
Hostinger to host

https://app.push2.io/#/dashboard

both using pigeonfizz@gmail.com
-->
<header id="header">
  <div class="main_nav">
    <div class="container">
      <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
      <nav>
        <ul>
          <li><a class="smoothscroll" href="#header">Home</a></li>
          <li><a class="smoothscroll" href="#about">About</a></li>
          <li><a class="smoothscroll" href="#skills">Services</a></li>
          <li><a class="smoothscroll" href="#portfolio">Previous Clients</a></li>
          <li><a class="smoothscroll" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="title">
    <h1 class="heading"> Number Krunchers Ltd</h1>
    <h2 class="heading">Accountants and Business Advisors</h2>
    <a class="smoothscroll" href="#about">
    <div class="mouse">
      <div class="wheel"></div>
    </div>
    </a> </div>
  <a class="smoothscroll" href="#about">
  <div class="scroll-down"></div>
  </a> </header>
    
<section id="about">
  <div class="container">
    <div class="row">
      <h1>About</h1>
      <div class="block"></div>
      <p>We make sure that all your numbers add up and are equal and opposite to each other so that people aren't taking numbers of monies away from numbers of companies.</p>
      <img src="http://images.apstaffing.com/I-Stock-000054255772-Large-Accounting-And-Finance-2.jpg?w1533-h552-x0-y267-mw1000-mh360" class="image" width="1000" height="360" alt=""/>
  
    <br></br>
    <div class="row">
      <div class="six columns">
        <h3><span class="typcn typcn-device-desktop icon"></span>Why Choose Us?</h3>
        <p>We are experts in our field and we make our work affordable. We do more than just accounting solutions and we offer various services and solutions to companies for no charge (done by IT geek nephew who doesn't get paid, but will get into Stanford and will make lots of money, but will then lose all of his money because a special set of sisters may or may not spend it all with the reasoning that they got me into Standford)</p>
      </div>
      <div class="six columns">
        <h3><span class="typcn typcn-pen icon"></span>Services</h3>
        <p>We offer many services, typically around accounting, such as book keeping, company accounts, payroll services, VAT returns, corporation tax, self-assessment, company formation, tax returns, business plans, CIS contractors tax, business start-ups, management accounts, sole traders, and much more. We also offer various solutions including database creating, structuring, and maintainance along with free IT geek.</p>
      </div>
      <div class="row">
        <div class="six columns">
          <h3><span class="typcn typcn-cog-outline icon"></span>Base of Operations</h3>
          <p>We started out in Hounslow London and are now based in Staines-upon-Thames, Surrey. We offer our services all around the Untited Kingdom.</p>
        </div>
        <div class="six columns">
          <h3><span class="typcn typcn-lightbulb icon"></span>Associations</h3>
          <p>IFA, AIA, ACCA, IAB</p>
        </div>
        
      </div>
      <br></br>
      <img src="http://callencpa.com/wp-content/uploads/2015/04/iStock_000043976378XXXLarge-750x330.jpg" width="750" height="330" alt=""/ class="image">
    </div>
  </div>
</section>

<section id="team">
  <div class="container">
    <div class="row">
      <h1>Meet the team</h1>
      <div class="block"></div>
      <p>Face of Number Krunchers</p>
    </div>
    <div class="row">
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Shailja Thapar-Sondhi</h4>
        <p>Director</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Muhammad Wahab Tanvir</h4>
        <p>Account Manager</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Manik Wadhwa</h4>
        <p>Account Manager</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Hassan Bajwa</h4>
        <p>Book-Keeper</p>
        </div>
    </div>
    <div class="row">
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Shailja Thapar-Sondhi</h4>
        <p>Director</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Muhammad Wahab Tanvir</h4>
        <p>Account Manager</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Manik Wadhwa</h4>
        <p>Account Manager</p>
        </div>
      <div class="three columns"> <img src="http://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Hassan Bajwa</h4>
        <p>Book-Keeper</p>
        </div>
    </div>
  </div>
</section>

<section id="skills">
  <div class="container">
    <h1>Services</h1>
    <div class="block"></div>
    <div class="row">
      <div class="one-third column">
        <h3>Service 1</h3>
        <p>blah</p>
      </div>
      <div class="one-third column">
        <h3>Service 2</h3>
        <p>blah</p>
      </div>
      <div class="one-third column">
        <h3>Service 3</h3>
        <p>blah</p>
      </div>
    </div>

</section>

<section id="testimonial">
  <div class="container">
    <div class="quoteLoop">
      <blockquote class="quote"> 
        <h5>&nbsp;<br>
          &rdquo;A-NEW PUNKLE&rdquo;<br>
          <small>Annika</small></h5>
      </blockquote>
      <blockquote class="quote"> 
        <h5>&nbsp;<br>
          &ldquo;They need to pay their IT Geek&rdquo;<br>
          <small>Someone out there</small></h5>
      </blockquote>
    </div>
  </div>
</section>

<section id="contact">
  <div class="container">
    <h1>Contact</h1>
    <div class="block"></div>
    <form>
      <div class="row">
        <div class="six columns">
          <label for="exampleRecipientInput">Name</label>
          <input class="u-full-width" type="text">
        </div>
        <div class="six columns">
          <label for="exampleEmailInput">Email</label>
          <input class="u-full-width" type="email">
        </div>
      </div>
      <div class="row">
        <label for="exampleMessage">Message</label>
        <textarea class="u-full-width"></textarea>
        <input class="button-primary" type="submit" value="Submit">
      </div>
    </form>
  </div>
</section>

<footer>
  <div class="container">
    <div class="nine columns">
      <p>© 2017 Copyright Number-Krunchers. </p>
      <br></br>
    <div class="two columns">
        <img src="https://lh4.googleusercontent.com/-kqxwAha6-ro/AAAAAAAAAAI/AAAAAAAAA0M/5lNYNeyLiCU/s0-c-k-no-ns/photo.jpg" alt="ACCA" style="width:100px;height:100px;" class="image"></div>
    
    <div class="five columns">
        <img src="http://khalsacollegelondon.com/wp-content/uploads/2017/01/AIA_logo.jpg" alt="AIA" style="width:175px;height:100px;" class="image"></div>
    <div class="five columns">
    <img src="http://number-krunchers.co.uk/wp-content/uploads/2012/07/ifa.png" alt="IFA" style="width:300px;height:100px;"></div> 
    <div class="two columns">
        <img src="https://lh5.googleusercontent.com/-3XOmnky_umc/AAAAAAAAAAI/AAAAAAAAAhk/dUAtDjAcWjQ/s0-c-k-no-ns/photo.jpg" alt="IAB" style="width:100px;height:100px;" class="image"></div>
  </div>
</footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SamrajM/number-krunchers-zRRMXw */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");

html {
	font-size: 62.5%;
}
body {
	font-size: 1.5em;
	line-height: 1.6;
	font-weight: 400;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	color: #222;
}
  
.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

@media (min-width: 400px) {
.container {
	width: 85%;
	padding: 0;
}
}

@media (min-width: 550px) {
.container {
	width: 80%;
}
.column,  .columns {
	margin-left: 4%;
}
.column:first-child,  .columns:first-child {
	margin-left: 0;
}
.one.column,  .one.columns {
	width: 4.66666666667%;
}
.two.columns {
	width: 13.3333333333%;
}
.three.columns {
	width: 22%;
}
.four.columns {
	width: 30.6666666667%;
}
.five.columns {
	width: 39.3333333333%;
}
.six.columns {
	width: 48%;
}
.seven.columns {
	width: 56.6666666667%;
}
.eight.columns {
	width: 65.3333333333%;
}
.nine.columns {
	width: 74.0%;
}
.ten.columns {
	width: 82.6666666667%;
}
.eleven.columns {
	width: 91.3333333333%;
}
.twelve.columns {
	width: 100%;
	margin-left: 0;
}
.one-third.column {
	width: 30.6666666667%;
}
.two-thirds.column {
	width: 65.3333333333%;
}
.one-half.column {
	width: 48%;
}
/* Offsets */
.offset-by-one.column,  .offset-by-one.columns {
	margin-left: 8.66666666667%;
}
.offset-by-two.column,  .offset-by-two.columns {
	margin-left: 17.3333333333%;
}
.offset-by-three.column,  .offset-by-three.columns {
	margin-left: 26%;
}
.offset-by-four.column,  .offset-by-four.columns {
	margin-left: 34.6666666667%;
}
.offset-by-five.column,  .offset-by-five.columns {
	margin-left: 43.3333333333%;
}
.offset-by-six.column,  .offset-by-six.columns {
	margin-left: 52%;
}
.offset-by-seven.column,  .offset-by-seven.columns {
	margin-left: 60.6666666667%;
}
.offset-by-eight.column,  .offset-by-eight.columns {
	margin-left: 69.3333333333%;
}
.offset-by-nine.column,  .offset-by-nine.columns {
	margin-left: 78.0%;
}
.offset-by-ten.column,  .offset-by-ten.columns {
	margin-left: 86.6666666667%;
}
.offset-by-eleven.column,  .offset-by-eleven.columns {
	margin-left: 95.3333333333%;
}
.offset-by-one-third.column,  .offset-by-one-third.columns {
	margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,  .offset-by-two-thirds.columns {
	margin-left: 69.3333333333%;
}
.offset-by-one-half.column,  .offset-by-one-half.columns {
	margin-left: 52%;
}
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}
h1 {
	font-size: 4.0rem;
	line-height: 1.2;
	letter-spacing: -.1rem;
}
h2 {
	font-size: 3.6rem;
	line-height: 1.25;
	letter-spacing: -.1rem;
}
h3 {
	font-size: 3.0rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
}
h4 {
	font-size: 2.4rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
}
h5 {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: -.05rem;
}
h6 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
}

@media (min-width: 550px) {
h1 {
	font-size: 5.0rem;
}
h2 {
	font-size: 4.2rem;
}
h3 {
	font-size: 3.6rem;
}
h4 {
	font-size: 3.0rem;
}
h5 {
	font-size: 2.4rem;
}
h6 {
	font-size: 1.5rem;
}
}
p {
	margin-top: 0;
}

a {
	color: #1EAEDB;
}
a:hover {
	color: #0FA0CE;
}

header {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
 width: 100%%;
	height: 100vh;
	background: #e55d87;
	background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
}
.title {
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
	padding: 2rem;
	max-width: 960px;
	text-align: center;
}
.title .smallsep {
	background: #fff;
	height: 2px;
	width: 70px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
.title h1 {
	font-size: 80px;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 0.85;
	margin-bottom: 28px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}
.title h2 {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-top: 50px;
}

@media only screen and (max-height: 700px) {
.title h1 {
	font-size: 80px;
}
}
.title p {
	max-width: 600px;
	margin: 0 auto;
	line-height: 150%;
}

@media only screen and (max-width: 500px) {
.title h1 {
	font-size: 65px;
}
}
.title .icon {
	color: #FFFFFF;
	font-size: 50px;
}
.main_nav {
	position: fixed;
	top: 0px;
	max-height: 50px;
	z-index: 999;
	width: 100%;
	padding-top: 17px;
	background: none;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
	top: -100px;
	padding-bottom: 6px;
}

@media only screen and (max-width: 766px) {
.main_nav {
	padding-top: 25px;
}
}
.open-nav {
	max-height: 400px !important;
}
.sticky {
	background-color: #ffffff;
	opacity: 1;
	top: 0px;
}
nav {
	width: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 766px) {
nav {
	width: 100%;
}
}
nav ul {
	list-style: none;
	overflow: hidden;
	text-align: center;
}

@media only screen and (max-width: 766px) {
nav ul {
	padding-top: 0px;
	margin-bottom: 22px;
	text-align: center;
	width: 100%;
}
}
nav ul li {
	display: inline-block;
	margin-left: 35px;
	line-height: 1.5;
	letter-spacing: 1px;
}

@media only screen and (max-width: 766px) {
nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
}
nav ul li:first-child {
	margin-top: 70px;
}
}
nav ul a {
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}
nav ul a:hover {
	color: #CFCFCF;
}
.mobile-toggle {
	display: none;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 22px;
	top: 0;
	width: 30px;
}

@media only screen and (max-width: 766px) {
.mobile-toggle {
	display: block;
}
}
.mobile-toggle span {
	width: 30px;
	height: 4px;
	margin-bottom: 6px;
	background: #000000;
	display: block;
}
.scroll-down {
	position: absolute;
	left: 50%;
	bottom: 5vh;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
	width: 13px;
	height: 13px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	z-index: 9;
	-webkit-transform: translate(-50%, 0%) rotate(45deg);
	-moz-transform: translate(-50%, 0%) rotate(45deg);
	transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 2s ease-in-out infinite;
	-moz-animation: fade_move_down 2s ease-in-out infinite;
	animation: fade_move_down 2s ease-in-out infinite;
}

@-webkit-keyframes fade_move_down {
 0% {
-webkit-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-webkit-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes fade_move_down {
 0% {
-moz-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-moz-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@keyframes fade_move_down {
 0% {
transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}

#about {
	padding: 100px 0 50px 0;
}

#team {
	padding: 50px 0 100px 0;
}
#team .icon {
	font-size: 26px;
}

/*
#skills {
	padding: 100px 0 100px 0;
	background-color: #F5F5F5;
}
.progressBar {
	margin-bottom: 26px;
	margin-bottom: 1.66em;
}
.progressBar h4 {
	font-size: 16px;
	text-transform: none;
	margin-bottom: 7px;
	margin-bottom: .33em;
}
.progressBarContainer {
	width: 100%;
	height: 8px;
	background: #E1E1E1;
	overflow: hidden;
}
.progressBarValue {
	height: 8px;
	float: left;
	background: #e55d87; // Old browsers 
	background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}
.value-00 {
	width: 0;
}
.value-10 {
	width: 10%;
}
.value-20 {
	width: 20%;
}
.value-30 {
	width: 30%;
}
.value-40 {
	width: 40%;
}
.value-50 {
	width: 50%;
}
.value-60 {
	width: 60%;
}
.value-70 {
	width: 70%;
}
.value-80 {
	width: 80%;
}
.value-90 {
	width: 90%;
}
.value-100 {
	width: 100%;
}

#portfolio {
	padding: 100px 0 100px 0;
}*/
.image {
	background-color: #5a5a5a;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	transition: .5s;
}
.image:hover {
	opacity: 0.6;
	transition: .3s;
	background-image: url(../images/hoverbg.png);
	background-repeat: no-repeat;
	background-position: center;
}

#testimonial {
	background-color: #F5F5F5;
	padding: 100px 0 100px 0;
}
.quoteLoop {
	height: auto;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.quote {
	margin: 10px 30px;
	height: inherit;
	top: 0px;
	display: none;
	text-align: center;
}

#contact {
	padding: 100px 0 100px 0;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
	height: 38px;
	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #F5F5F5;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	border-radius: 0;
	outline: none;
}
textarea {
	min-height: 250px;
}
input[type="submit"] {
	display: inline-block;
	height: 38px;
	padding: 0 30px;
	color: #fff;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background: #5fc3e4;
	border-radius: 0px;
	border: 0;
	cursor: pointer;
	box-sizing: border-box;
}
input[type="submit"]:hover {
	background: #e55d87;
	text-decoration: none;
}

footer {
	min-height: 120px;
	padding: 40px 0 40px 0;
	background: #e55d87;
	background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
	box-sizing: border-box;
}
footer p {
	color: #FFFFFF;
	margin: 20px 0 0 0;
}
.socialIcons {
	font-size: 34px;
	color: rgba(255, 255, 255, 0.7);
}

ul {
	list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0;
	margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%;
}
li {
	margin-bottom: 1rem;
}

button, .button {
	margin-bottom: 1rem;
}
input, textarea, select, fieldset {
	margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
	margin-bottom: 2.5rem;
}

.u-full-width {
	width: 100%;
	box-sizing: border-box;
}
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}
.u-pull-right {
	float: right;
}
.u-pull-left {
	float: left;
}

.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}

.icon {
	padding-right: 10px;
	color: #e55d87;
}
.block {
	width: 70px;
	height: 2px;
	background: #e55d87; 
	background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
	margin-bottom: 50px;
}

/*Downloaded from https://www.codeseek.co/SamrajM/number-krunchers-zRRMXw */
function fade($ele) {
    $ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
        var $next = $(this).next('.quote');
        fade($next.length > 0 ? $next : $(this).parent().children().first());
   });
}
fade($('.quoteLoop > .quote').first());

$(window).hover(function() {

    if ($(window).scrollTop() > -10) {
        $('.main_nav').addClass('sticky');
    } else {
        $('.main_nav').removeClass('sticky');
    }
});

$('.mobile-toggle').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.main_nav').removeClass('open-nav');
    } else {
        $('.main_nav').addClass('open-nav');
    }
});

$('.main_nav li a').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_nav').removeClass('open-nav');
    }
});

jQuery(document).ready(function($) {

   $('.smoothscroll').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 800, 'swing', function () {
	        window.location.hash = target;
	    });
	});
  
});

TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);

Comments