Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>


              
            
!

CSS

              
                /* 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;}


              
            
!

JS

              
                
$(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 );
});
});


              
            
!
999px

Console