123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              header
  .container
    .row
      .column
        .logo
          .icon
          div Forkology
            span A <i class='fa fa-code-fork'></i> by Github
      .column
        ul.nav
          li
            a(href='#') Support
          li
            a(href='#') Download Free Guide
            
section.hero
  .container
    .row
      .column
        h1 The free, fast way to fork a repo
        p Forkology is the only 100% free guide on how to fork a repo and quickly rebrand it as your own beautiful money maker — No prior knowledge is required!
        a.button(href='#') Get Forkology Now — Yes It’s Free
        .video
          .overlay
          iframe(src='https://www.youtube.com/embed/XSGBVzeBUbk' frameborder='0' allowfullscreen)

section.showcase
  .container
    .row
      .column
        h5 Download This Free Guide To Learn These Techniques
        h2 3 Types of fork methods that will make you rich
    .row
      .tabs
        .tab-nav
          ul
            li
              a(href='#classic').active Classic
            li
              a(href='#average') Average
            li
              a(href='#proper') Proper
        .tab-content.active#classic
          .row
            .column
              div
                h3 The Classic Fork is the Average Fork’s smooth, subtle cousin.
                p The classic fork allows you to simply fork a random repo, rebrand it with your name and attempt to make profit off of it. Oh, don't forget to ask user for their email to activate your work so you can cross-sell your product later
            .column
              img(src='http://placehold.it/500x250')
        .tab-content#average
          .row
            .column
              h3 The Average Fork is your everyday fork that won’t cause you harm.
              p The average fork is your typical fork, but with less annoyance. You simple fork it, don’t make any changes, and put it public.
            .column
              img(src='http://placehold.it/500x250')
        .tab-content#proper
          .row
            .column
              h3 The Proper Fork, forking with respect in mind.
              p The proper fork is the fork where you properly ask for permission before forking and rebranding it as your own.
            .column
              img(src='http://placehold.it/500x250')

section.features
  .container
    .row
      .column
        h2 Built-In Guide To Rebranding
        h5 Find out how to easily rebranding a fork
    .row
      .column
        img(src='http://placehold.it/500x250')

section.abtest
  .container
    .row
      .column
        h2 Easy AB Testing Guide On Which Fork Works Best
        p AB Testing is the fastest way to view which fork works best at making your profit!
    .row
      .column
        img(src='http://placehold.it/500x250')

section.responsive
  .container
    .row
      .column
        h2 Completely Responsive Across All Devices!
        p Don’t worry, we know that everyone is different and likes reading on random devices.
    .row
      .column
        img(src='http://placehold.it/500x250')

section.repos
  .container
    .row
      .column
        h2 1000+ Helpless Repos to Fork From
        p With over 1000 repos out there under the GPL License, forking and rebranding has never been so easy!

section.seamless
  .container
    .row
      .column
        h5 Seamless Forking
        h2 Seriously, forking has never been so easy
        p Forkology connects to the ancient book of forking, which was passed down throughout the years. <br> Using this book, we have connected with several amazing bloggers in the hopes of teaching you.
    .row.bloggers
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')
    .row.bloggers
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')
      .column
        img(src='http://placehold.it/250x100')

section.cta
  .container
    .row
      .column
        h2 Seriously, just trust us and download the guide. <br> "There are no strings attached"
        a.button(href='#') Get Forkology Now — Yes it's free
        
footer.footer
  .container
    .row
      .column
        p Forkology is a random, yet amazing template, that is in no way assoiciated with any company...<br>Forkology &copy; 2015
            
          
!
            
              $base-font: 'Open Sans';
$header-font: null;

$white: #FFF;
$black: #000;

$accent: #3498DB;
$primary: #34495E;

$thin: 100;
$light: 300;
$regular: 400;
$semibold: 500;
$bold: 700;

body {
  background: #f5f5f5;
  font-family: $base-font, sans-serif;
  font-size: 14px;
  font-weight: $regular;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  line-height: 1.6em;
}

.clearfix {
  &:before,
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.button {
  display: inline-block;
  background: $accent;
  border: 1px solid transparent;
  border-radius: 100px;
  margin: 0 0 48px;
  padding: 12px 24px;
  color: $white;
  font-weight: $bold;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s ease;

  &:hover {
    background: transparent;
    border: 1px solid $accent;
    color: $accent;
  }
}

.FontAwesome {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1180px;
  width: 90%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.column {
  width: 100%;
}

header {
  z-index: 9;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 24px 0;
  transition: .3s ease;
  
  .fixed-header & {
    background: $white;
    box-shadow: 0 0 3px rgba($black, .3);
  }
  
  .nav {
    padding: 3px 0;
    text-align: right;

    li {
      display: inline-block;
      margin: 0 8px 0 0;

      &:last-child {
        margin: 0;

        a {
          border: 1px solid $accent;
          color: $accent;
          
          &:hover {
            background: $accent;
            color: $white;
          }
        }
      }
    }
    
    a {
      display: block;
      border-radius: 100px;
      border: 1px solid transparent;
      padding: 12px 24px;
      color: $white;
      font-weight: $bold;
      text-decoration: none;
      text-transform: uppercase;
      transition: .3s ease;
      
      &:hover {
        background: $white;
        color: $primary;
      }
      
      .fixed-header & {
        color: #333;
      }
    }
  }
}

.logo {
  .icon {
    display: inline-block;
    background: $white;
    width: 54px;
    height: 54px;
    border-radius: 100%;
    margin: 0 12px 0 0;
    color: $primary;
    line-height: 54px;
    text-align: center;
    vertical-align: middle;
    transition: .3s ease;
    
    .fixed-header & {
      background: $accent;
      color: $white;
    }
    
    &:before {
      @extend .FontAwesome;
      content: '';
    }
  }
  
  div {
    display: inline-block;
    font-size: 22px;
    font-style: italic;
    font-weight: $bold;
    vertical-align: middle;
    color: $white;
    transition: .3s ease;
    
    .fixed-header & {
      color: #666;
    }

    span {
      display: block;
      padding: 4px 0 0;
      font-size: 12px;
      font-style: normal;
      font-weight: $regular;
      line-height: 1;
      
      i {
        margin: 0 4px;
      }
    }
  }
}

section {
  .container {
    max-width: 960px;
  }
  
  h2 {
    margin: 0 0 48px;
    color: #333;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
  }
  
  h5 {
    margin: 0 0 4px;
    color: #999;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
  }
  
  p {
    text-align: center;
  }
}

.hero {
  background: $primary;
  height: 800px;
  padding: 160px 0 0;
  box-sizing: border-box;
  text-align: center;
  color: $white;
  
  h1 {
    margin: 0 0 24px;
    color: inherit;
    font-size: 30px;
    font-weight: 400;
    text-transform: capitalize;
  }
  
  p {
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 48px;
    box-sizing: border-box;
    color: inherit;
  }
  
  .video {
    position: relative;
    background: $white;
    height: 540px;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba($black, .12);
    overflow: hidden;
    
    .overlay {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: $white;
      width: 100%;
      height: 100%;
      color: $accent;
      font-size: 48px;
      
      &:before {
        @extend .FontAwesome;
        cursor: pointer;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 100px;
        margin: auto;
      }
    }
    
    iframe {
      width: 100% !important;
      height: 100% !important;
    }
  }
}

.showcase {
  padding: 200px 0 48px;
  
  h5 {
    
  }
  
  .tabs {
    width: 100%;
  }
  
  .tab-nav {
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid rgba($black, .1);
    }
    
    li {
      display: block;
    }
    
    a {
      display: block;
      padding: 12px 0;
      border-bottom: 2px solid transparent;
      color: #666;
      text-decoration: none;
      text-transform: uppercase;
      transition: .3s ease;

      &.active {
        border-color: $accent;
        color: $accent;
        font-weight: $bold;
      }
    }
  }
}

.tab-content {
  padding: 48px 0;
  
  h3 {
    margin: 0 0 12px;
    color: #333;
    font-size: 20px;
    font-weight: $bold;
    text-transform: uppercase;
  }
  
  p {
    color: #999;
    text-align: left;
  }
  
  img {
    display: block;
    width: 100%;
  }
  
  .row {
    display: table;

    .column {
      display: table-cell;
      width: 60%;
      padding: 0 0 0 24px;
      vertical-align: middle;

      &:first-child {
        width: 40%;
        padding: 0;
      }
    }
  }
}

.features,
.abtest,
.responsive {
  background: $white;
  padding: 96px 0;
  
  h2 {
    margin: 0 0 24px;
  }
  
  h5 {
    margin: 0 0 48px;
  }
  
  p {
    color: #999;
    margin: 0 0 48px;
    text-align: center;
    text-transform: initial;
  }
  
  img {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
}

.abtest {
  background: transparent;
}

.repos {
  background: $primary;
  padding: 96px 0 240px;
  
  h2,
  p {
    color: $white;
    text-align: center;
  }
}

.seamless {
  padding: 96px 0;
  
  p {
    margin: 0 0 48px;
    color: #666;
  }
  
  .bloggers {
    margin: 24px 0 0;

    .column {
      padding: 0 12px;
    }

    img {
      width: 100%;
    }
  }
}

.cta {
  background: $primary;
  padding: 96px 0;
  color: $white;
  text-align: center;

  h2 {
    color: inherit;
    font-size: 30px;
    line-height: 1.6em;
  }
}

.footer {
  background: darken($primary, 10%);
  padding: 24px 0;
  color: $white;
  text-align: center;
}
            
          
!
            
              /* Video Overlay */
$('.video .overlay').on('click', function() {
  $(this).fadeOut(300);
});

/* Tabs */
$('.tab-content').not('.active').hide();

$('.tab-nav a').click(function(e) {
  e.preventDefault();
  $('.tab-nav a').removeClass('active');
  $(this).addClass('active');

  $('.tab-content').hide();
  $($.attr(this, 'href')).fadeIn(300);
});

/* Fixed Navigation */
if ($('header').offset().top > 0) {
  $('body').addClass('fixed-header');
} else {
  $('body').removeClass('fixed-header');
}

/* Scroll Function */
$(window).scroll(function() {
  /* Fixed Navigation */
  if ($('header').offset().top > 0) {
    $('body').addClass('fixed-header');
  } else {
    $('body').removeClass('fixed-header');
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console