<div id="fullpage">
  <div class="section splash active" data-background-color="#e8e9f3" id="section0">
    <div class="container">
      <div class="row">
        <div class="twelve columns" >
          <div class="tilter js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.1" data-tilt-perspective="350">
            <p class="subheading">2017</p>
            <h1 class="hero-heading">Made<br/><span>by</span><br/>Droids</h1>
            <hr></hr>
            <p class="subheading">Synthesising new things</p>
        </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="section" id="section1" data-background-color="#75E4B3" >
    <div class="container">
      <div class="row">    
        <div class="eight columns offset-by-two">
          <h2>Senior Designer</h2>
          <p class="subheading-content"> & creator of things</p>
          <p>Hi, I'm Drew. I'm a Designer & Creator with over 15 years of industry experience in the web design world. I've worked with many clients both local and global. Currently I am agency-side making and creating all sorts of wonderful design things.</p>

 <p>I'm a big fan of web technology and love getting under the hood; most recently I've been playing with Sketch, Three.js, Node and various javascript libraries. Most of all I love combining all of this technology and innovation into new things; sometimes useful tools, other times to just push the boundaries and explore what can be done. I love Codepen too!</p>
        </div>
      </div>
    </div>
  </div>
  <!-- use this in section tag to remove 100% height: fp-auto-height !-->
  <div class="section" id="section2" data-background-color="#9CAFB7">
    <div class="slide-head">
          <h4 >Imagination is more important than knowledge</h4>
          <p class="subheading-content">Recent Pens</p>
</div>
        <div class="slide active">
            <div class="intro">
             
                <div class="twelve columns"> 
                  <a class="tilter js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.1" data-tilt-perspective="350" href="https://codepen.io/madebydroids/pen/ZByzJY" target="_blank"> 
                <h2 class="heavy">Ask the Teapot</h2>
                <img class="phone" src="http://placehold.it/450x250">
                <p>A learning three.js experiment. I added some interactivity to make it a bit more fun.</p>  
                </a>
                </div>

            </div>
        </div>
    
        <div class="slide">
            <div class="intro">
                <div class="twelve columns"> 
                   <a class="tilter js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.1" data-tilt-perspective="350"href="https://codepen.io/madebydroids/pen/xRZMNO" target="_blank">
                <h2 class="heavy">Carpe Noctem</h2>
                <img class="phone" src="http://placehold.it/450x250">
                 <p>More three.js experimenting - loading json models into Three and rendering with some shader passes. </p>
                  </a>
                </div>
            </div>
        </div>
        <div class="slide" >
            <div class="intro">           
                <div class="twelve columns">
                  <a class="tilter js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.1" data-tilt-perspective="350"href="https://codepen.io/madebydroids/pen/vNPxmr" target="_blank">            
                <h2 class="heavy">Animated logo</h2>
                <img class="phone" src="http://placehold.it/450x250">
                <p>Using the greensock javascript library to do some fancy logo animation</p>  
                  </a>
                </div>
            </div>
        </div>
    
        <div class="slide">
             <div class="intro">
                <div class="twelve columns">
                  <a class="tilter js-tilt" data-tilt-speed="1000" data-tilt-max="20" data-tilt-scale="1.1" data-tilt-perspective="350"href="https://codepen.io/madebydroids/pen/vEapBZ" target="_blank">   
                  <h2 class="heavy">Doodlathon</h2>
                  <img class="phone" src="http://placehold.it/450x250">  
                  <p>Just a bit of playing around with masonry.js and loading image data into a page</p>
                  </a>
                </div>
          </div>    
  </div>
  </div>

  <div class="section" id="section3" data-background-color="#C2E7D9">
    <div class="container">
      <div class="row">
        <div class="one-half columns">
          <h4 class="center">The journey of a thousand miles begins with one step.</h4>
           <p class="subheading-content">Contact me</p>
        </div>
        <div class="row">
    <div class="two-half column">
               <img class="phone" src="http://placehold.it/650x250">     
    </div>
      </div>
    </div>
  </div> 
</div>  
</div>

/* fullpage js styles */
/*!
 * fullPage 3.0.1
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
html.fp-enabled,
.fp-enabled body {
    margin: 0;
    padding: 0;
    overflow:hidden;

    /*Avoid flicker on slides transitions for mobile phones #336 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
    -moz-box-sizing: border-box; /* <=28 */
    box-sizing: border-box;
}
.fp-slide {
    float: left;
}
.fp-slide, .fp-slidesContainer {
    height: 100%;
    display: block;
}
.fp-slides {
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer {
    float: left;
    position: relative;
}
.fp-controlArrow {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev {
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
    overflow: hidden;
    position: relative;
}
.fp-scroller{
    overflow: hidden;
}
.iScrollIndicator{
    border: 0 !important;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.fp-right {
    right: 17px;
}
#fp-nav.fp-left {
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;
}
.fp-slidesNav.fp-bottom {
    bottom: 17px;
}
.fp-slidesNav.fp-top {
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
.fp-slidesNav ul li {
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 12px;
    width: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
 }
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #333;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 10px;
    height: 10px;
    margin: -5px 0px 0px -5px;
}
#fp-nav ul li .fp-tooltip {
    position: absolute;
    top: -2px;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    opacity: 0;
    width: 0;
    cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
}
#fp-nav ul li .fp-tooltip.fp-right {
    right: 20px;
}
#fp-nav ul li .fp-tooltip.fp-left {
    left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
    height: auto !important;
}












/* custome styles */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  margin-bottom:0px;
}

a {
   text-decoration:none; 
   color:#333;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

a:hover {color:#000;}

h1, h2, h3, h4 {
  font-family: 'Roboto Condensed', sans-serif;
}

h1 {
  text-align:center; 
  font-family: 'Playfair Display SC', serif;
  font-weight: 700;
  }

h1.hero-heading {
  padding-bottom:0.5em; 
  text-align:center;
  font-size:4em; 
  line-height:0.9em; 
  letter-spacing:15px;
  color:#0B5563;
  font-weight:700;
  }

h1.hero-heading span {
  font-size:0.5em
}

hr  {
    content:"";
    background: #0B5563;
    bottom: 0%;
    left: 25%;
    width: 30%;
    height: 1px;
  }

h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  text-align:center; 
  color:#0B5563;
}

h4 {
  font-size:1em; 
  font-style:italic;
}

p {color:#0B5563}

.heavy {
  font-weight:500; 
  font-size:2em;
  padding-top:1em
}

.slide-head {
  position:absolute; 
  width:100%; 
  text-align:center; 
  padding-top:3em
}

p.subheading {
  text-align:center;
  width:100%;
  padding:1.5em 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:400;
  color:#0B5563;
  text-transform: uppercase;
  letter-spacing:10px;
  font-size:1em 
}

p.subheading-content {
  text-align:center;
  width:100%;
  padding:0em 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight:400;
  color:#0B5563;
  text-transform: uppercase;
  letter-spacing:10px;
  font-size:1em 
}

.gallery {
  text-align:center;
}
.grey {}

.fp-controlArrow.fp-prev {
    border-color: transparent #333 transparent transparent;
  left:50px;
}

.fp-controlArrow.fp-next {
    border-color: transparent transparent transparent #333;
  right:50px;
}

.intro {
  text-align:center;
}

#section3, #section1 {
  text-align:center;
}

.phone {
  margin-bottom:20px;
}

.tilter {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display:block;
  cursor:pointer;
}

#section2 div {text-align:center;}
#fullpage {  transition: background .5s ease;}


$(document).ready(function() {
    $('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage'],
				
				navigation:false,
				navigationPosition: 'right',
				navigationTooltips: ['First', 'Second', 'Third'], 
        slidesNavigation: true,
        responsiveWidth: 760, 
        scrollBar:true,
      autoScrolling:false,
			});

// tilt.js
$('.js-tilt').tilt({
    scale: 1.2
})

// scrollie.js
 var $target = $('#fullpage');
inView('.section').on('enter', function(el){
  var color = $(el).attr('data-background-color');
  $target.css('background-color', color );
});
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css
  2. https://fonts.googleapis.com/css?family=Playfair+Display+SC:700|Playfair+Display:400i,700i|Roboto+Condensed

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.js
  3. https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/in-view.min.js