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.

            
              -#====================================================================			

  -# Penfolio V.1.0
  -# Description: Haml for Penfolio
  -# Author: Jamie Coulter
  -# Codepen: www.codepen.io/jcoulterdesign
  -# Website: www.jamiecoulter.co.uk
  -# Twitter: @jcoulterdesing
  -# Email: jcoulterdesign@gmail.com

-#=======================================================================  */

.penfolio
  .penfolio_preloader
    %h2 
      Penfolio
      .dot
  .penfolio_inner
    -# Begin home section
    -#.pen_nav__mini
      .pen_intro__image
        %a.p_link{:href => '#', :target => 'blank'}
          %img{:src => ''}
      %h5 
        The penfolio of 
        %span.rep_username
      .pen_cta
        %a.p_link{:href => '#', :target => 'blank'} Follow me on codepen
      %ul
        %li.active Home
        %li About
        %li Penfolio
        %li Contact	
    %section.penfolio_inner__home{:scroll_target => 'home'}
      .header_bg
      %header
        .pen_responsive_nav
          %i.icon.ion-navicon-round
          %ul
            %li.active Home
            %li About
            %li Penfolio
            %li Contact
        .pen_logo
          %h2 Penfolio
        .pen_cta
          %a.p_link{:href => '#', :target => 'blank'} Follow me on codepen
      .pen_intro
        .pen_intro__image
          %a.p_link{:href => '#', :target => 'blank'}
            %img{:src => ''}
        %h2
        %h3
        %h4
        %h5 Build a sweet portfolio in seconds. Simply change the codepen_username variable in the JS and boom! Instant portfolio!
        %nav
          %ul
            %li.active Home
            %li About
            %li Penfolio
            %li Contact
    .penfolio_inner__about{:scroll_target => 'about'}
      .about_left
        %h2 About me
      .about_right
        %p.headline Penfolio is a fully customisable HTML template that integrates directly with your pens. Built using <a href="http://cpv2api.com/">Nate Wileys</a> amazing API.
        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at imperdiet lorem. Sed vitae sodales nulla. Etiam tincidunt cursus augue vel posuere. Aenean justo arcu, hendrerit non lacinia efficitur, viverra vitae mi. In blandit finibus ex a maximus. Vestibulum nec consectetur justo. Nam tempor iaculis metus auctor posuere. Duis vulputate ipsum non ante mattis, in cursus diam elementum. Nam hendrerit mauris ut <a href="http://cpv2api.com/">mauris</a> viverra ornare.
        %p Mauris augue lacus, porta nec urna a, malesuada egestas nisi. Nam est nunc, commodo et neque sed, ornare ullamcorper elit. Fusce volutpat libero eu lacus varius iaculis. Donec erat nisi, fermentum eu lacinia quis, blandit non orci. Maecenas pharetra libero eu tempor ornare. <a href="http://cpv2api.com/">Nullam</a> id tortor dictum, euismod lacus sagittis, ullamcorper justo. Pellentesque sodales mi sit amet turpis accumsan, sed consequat est aliquet.
        .pen_cta
          %a.p_link{:href => '#', :target => 'blank'} Follow me on codepen
    .penfolio_inner__pens{:scroll_target => 'penfolio'}
      .penfolio_header
        .header_bg{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/penfolio_bg.png'}
        %h2 Penfolio
        %h3 
          The penfolio of  
          %span.rep_username Jamie Coulter
      .wrap
    .penfolio_inner__contact{:scroll_target => 'contact'}
      %h2 Get in touch
      %h3 Go ahead, i don't bite!
      .pen_intro__image
        %a.p_link{:href => '#', :target => 'blank'}
          %img{:src => ''}
      .rep_username
      .rep_location
      .rep_links
        %ul
      .pen_cta
        %a.cp.p_link{:href => '#', :target => 'blank'} Follow me on codepen
    .penfolio_inner__footer
      .pen_logo
        %h2 Penfolio
      %ul
        %li.active Home
        %li About
        %li Penfolio
        %li Contact
            
          
!
            
              // Fonts

// Feel free to add your own
@import url(https://fonts.googleapis.com/css?family=Nunito:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700italic,700);

// Variables

// Fonts
$primary-font: "nunito";
$secondary-font: "montserrat";

// Colors
$bg: #121318;
$text-on-color: lighten($bg, 20);

// One color to rule them all. Change this to change the entire scheme
$primary: #EF8E27;

// Styles

* {
  box-sizing: border-box;
}

.wrap {
  margin: 0 auto;
}

.header_bg {
  width: 130%;
  position: absolute;
  z-index: 0;
  height: 100%;
  background-attachment: fixed;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/penfolio_bg.png");
  opacity: 0.06;
  left: 0;
  top: 0;
}

.pen_nav__mini.nav_active {
  top: 0px;
}

img {
  vertical-align: middle;
}

.pen_nav__mini {
  background: #fff;
  overflow: auto;
  transition: all .3s;
  position: fixed;
  width: 100%;
  z-index: 2;
  top: -200px;
  padding: 20px;
  .pen_cta {
    a {
      background: 0 0;
      color: $primary;
      border: 2px solid $primary;
      padding: 12px 14px;
      font-size: 12px;
      font-family: montserrat;
      transition: all .3s;
      cursor: pointer;
      text-decoration: none;
      float: right;
      &:hover {
        background: $primary;
        color: white;
      }
    }
  }
  h5 {
    margin: 10px 0 0 10px;
    float: left;
    color: #606786;
    font-family: lora;
    font-style: italic;
    .rep_username {
      color: $primary;
    }
  }
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
  .pen_intro__image {
    width: 40px !important;
    margin: 0 !important;
    height: 40px;
    float: left;
    overflow: hidden;
    border-radius: 100px;
    padding: 0;
    img {
      width: 100%;
    }
    a {
      border: none;
      padding: 0px;
    }
  }
  ul {
    padding: 10px 0px;
    float: right;
    margin: 0;
    li {
      display: inline;
      transition: all .2s;
      list-style-type: none;
      font-size: 13px;
      margin-right: 25px;
      color: #4D515A;
      cursor: pointer;
      &:hover {
        color: $primary;
      }
    }
  }
}

%button {
  background: none;
  color: $primary;
  border: 2px solid $primary;
  padding: 12px 14px;
  font-size: 12px;
  font-family: $secondary-font;
  transition: all .3s;
  cursor: pointer;
  &:hover {
    color: white !important;
    background: $primary;
    a {
      color: white;
    }
  }
}

body {
  margin: 0;
  font-family: $secondary-font;
  padding: 0;
  iframe {
    margin-bottom: -10px;
    overflow: hidden;
  }
  .penfolio {
    &_preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 3;
      text-align: center;
      h2 {
        position: absolute;
        text-align: center;
        top: 50%;
        left: 0;
        font-weight: 900;
        letter-spacing: -2px;
        color: $primary;
        width: 90px;
        right: 0;
        margin: auto;
        transform: translateY(-50%);
      }
      .dot {
        position: relative;
        text-align: center;
        top: 4px;
        left: 0;
        font-weight: 900;
        letter-spacing: -2px;
        color: $primary;
        animation: dot 1s infinite;
        width: 6px;
        height: 6px;
        border-radius: 10px;
        background: $primary;
      }
    }
    &_inner {
      &__footer {
        background: $bg;
        padding: 10px 40px;
        overflow: auto;
        .pen_logo {
          float: right;
          color: white;
          opacity: 0.1;
          position: Relative;
          top: 10px;
        }
        ul {
          float: left;
          margin: 31px 0;
          position: Relative;
          top: 3px;
          li {
            color: $text-on-color;
            margin-right: 7px;
            cursor: pointer;
            transition: all .3s;
            font-size: 12px;
            &:hover {
              color: $primary;
            }
            list-style-type: none;
            display: inline;
          }
        }
      }
      &__contact {
        background: $primary;
        padding: 60px 20px;
        text-align: center;
        img {
          width: 100px;
          border-radius: 100px;
          margin: 24px 0px;
          border: 2px solid white;
        }
        h2 {
          font-family: Lora;
          font-weight: 100;
          font-size: 40px;
          color: white;
          text-align: center;
          margin: 0;
        }
        h3 {
          margin: 0;
          font-size: 14px;
          font-family: Lora;
          font-weight: 100;
          font-style: italic;
          opacity: .4;
        }
        .rep_username, .rep_location, a {
          color: white;
          font-size: 17px;
          margin: 10px 0px;
        }
        .rep_location {
          color: rgba(0, 0, 0, 0.51);
          font-size: 14px;
          margin: 0px 0;
        }
        .rep_username {
          color: #fff;
          font-size: 27px;
          margin: 10px 0;
          font-family: lora;
          font-weight: bold;
        }
        ul {
          margin: 20px 0px 40px 0px;
          padding: 0;
          li {
            list-style-type: none;
            a {
              font-size: 13px;
              text-decoration: none;
              margin: 10px 0px;
              display: block;
            }
          }
        }
        a.cp {
          text-decoration: none;
          margin: auto;
          text-align: center;
          width: 130px;
          font-size: 12px;
          padding: 13px 20px;
          color: #fff;
          transition: all .2s;
          text-decoration: none;
          border: 2px solid #fff;
          &:hover {
            color: $bg;
            background: white;
          }
        }
      }
      &__about {
        overflow: auto;
        position: relative;
        .about_left {
          float: left;
          height: 100%;
          width: 50%;
          position: absolute;
          background: $primary;
          color: white;
          padding: 80px;
          h2 {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            font-family: 'Lora';
            font-weight: 100;
            font-size: 40px;
            transform: translateY(-50%);
            margin: auto;
            text-align: center;
          }
        }
        .about_right {
          float: right;
          a {
            color: $primary;
            text-decoration: none;
            transition: all .3s;
          }
          .pen_cta {
            float: left;
            @extend %button;
          }
          width: 50%;
          padding: 80px;
          font-family: 'Lora';
          color: #6B6D75;
          font-weight: 100;
          line-height: 26px;
          font-size: 14px;
          .headline {
            font-size: 26px;
            line-height: 38px;
            color: #4F5675;
            font-style: italic;
          }
        }
      }
      .wrap {}
      &__pens {
        overflow: auto;
        .penfolio_header {
          background: $bg;
          position: Relative;
          overflow: hidden;
          color: white;
          padding: 60px 20px;
          text-align: center;
          h2 {
            font-family: 'Lora';
            font-weight: 100;
            font-size: 40px;
            text-align: center;
            margin: 0;
          }
          h3 {
            margin: 0;
            font-size: 14px;
            font-family: 'Lora';
            font-weight: 100;
            font-style: italic;
            opacity: 0.4;
          }
        }
        .pen_card {
          float: left;
          position: relative;
          width: 100%;
          &:hover {
            .pen_overlay {
              opacity: 1;
            }
            .pen_details__inner {}
            img {
              transform: scale(1.07);
              transform-origin: 50%;
            }
          }
          .pen_overlay {
            position: absolute;
            width: 100%;
            opacity: 1;
            transition: all .3s;
            opacity: 0;
            height: 100%;
            background: rgba(32, 37, 43, 0.84);
            right: 0;
            z-index: 1;
            a {
              text-decoration: none;
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              text-align: center;
              width: 130px;
              top: 50%;
              font-size: 12px;
              padding: 13px 20px;
              color: #fff;
              transition: all .2s;
              text-decoration: none;
              border: 2px solid #fff;
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%);
              &:hover {
                color: $bg;
                background: white;
              }
            }
          }
          &:nth-of-type(even) {
            background: #F7F7F7;
          }
          &:nth-of-type(even) .pen_card__inner {
            float: left;
            background: #F7F7F7;
            &:after {
              display: none;
              content: '';
              width: 100px;
              top: -50px;
              right: -60px;
              height: 150%;
              background: #F7F7F7;
              left: auto;
              position: absolute;
              transform: rotate(-4deg);
            }
          }
          &:nth-of-type(even) .pen_details {
            float: right;
            right: 0;
          }
          &__inner {
            background: white;
            overflow: hidden;
            float: right;
            width: 50%;
            position: relative;
            &:hover {
              .pen_details {
                display: block;
              }
            }
            a {
              text-decoration: none;
            }
            &:after {
              display: none;
              content: '';
              width: 100px;
              top: -50px;
              left: -60px;
              height: 150%;
              background: #fff;
              position: absolute;
              transform: rotate(4deg);
            }
          }
          img {
            width: 100%;
            transform: scale(1);
            transition: all 2s;
          }
        }
        .pen_details {
          padding: 20px;
          width: 50%;
          position: absolute;
          // box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.18) inset;
          height: 100%;
          &__inner {
            position: absolute;
            top: 50%;
            width: 330px;
            left: 0;
            transition: all .3s;
            right: 0;
            margin: auto;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            a {
              background: 0 0;
              color: $primary;
              padding: 11px 34px;
              font-size: 12px;
              font-family: lora;
              transition: all .3s;
              cursor: pointer;
              margin-left: 0px;
              text-decoration: none;
            }
            p {
              a {
                padding: 0px;
                border: none;
              }
            }
          }
          h2 {
            margin: 0;
            font-family: 'lora';
            font-style: italic;
            font-size: 26px;
            font-weight: 100;
            color: #4F5675;
          }
          p {
            font-family: Lora;
            color: #6B6D75;
            padding-left: 20px;
            margin-left: 10px;
            font-weight: 100;
            line-height: 26px;
            font-style: italic;
            font-size: 14px;
            margin-bottom: 0px;
          }
        }
      }
      .header_bg {}
      &__home {
        padding-bottom: 20px;
        background: $bg;
        overflow: hidden;
        position: relative;
        border-top: 4px solid $primary;
        header {
          height: 120px;
          z-index: 2;
          position: relative;
          .pen_responsive_nav {
            position: absolute;
            right: 20px;
            display: none;
            top: 20px;
            i {
              color: white;
              font-size: 20px;
              cursor: pointer;
              transition: all .3s;
              &:hover {
                color: $primary;
              }
            }
            ul {
              display: none;
              position: absolute;
              right: -10px;
              top: 30px;
              z-index: 1;
              padding: 0;
              margin: 0;
              li {
                color: white;
                transition: all .3s;
                &:hover {
                  color: $primary;
                }
                padding: 10px;
                font-size: 13px;
                cursor: pointer;
                text-align: right;
                list-style-type: none;
              }
            }
          }
          a {
            @extend %button;
            text-decoration: none;
          }
          .s_link {
            border: none;
            margin-right: 20px;
            color: white;
            &:hover {
              color: $primary !important;
              background: transparent;
            }
          }
        }
        .pen_logo {
          float: left;
          padding: 40px;
          h2 {
            color: white;
            margin: 0;
            font-size: 24px;
          }
        }
        .pen_cta {
          float: right;
          position: relative;
          padding: 40px;
          top: 9px;
          button {
            @extend %button;
          }
        }
        .pen_intro {
          text-align: center;
          margin-top: 30px;
          position: relative;
          z-index: 1;
          nav {
            margin-bottom: 80px;
            margin-top: 90px;
            ul {
              li {
                display: inline-block;
                color: $text-on-color;
                padding: 20px;
                font-size: 12px;
                margin: 0px 20px;
                transition: all .2s;
                cursor: pointer;
                &:hover {
                  color: $primary;
                }
              }
              li.active {
                @extend %button;
              }
            }
          }
          h2 {
            color: $primary;
            font-size: 16px;
            margin: 10px 0px 0px 0px;
          }
          h3 {
            margin: 0;
            color: $text-on-color;
            font-weight: 100;
            font-size: 12px;
          }
          h4 {
            color: White;
            font-size: 12px;
          }
          h5 {
            font-size: 26px;
            line-height: 38px;
            color: #E2F1EA;
            font-weight: 100;
            font-family: 'lora';
            width: 460px;
            margin: 0 auto;
            line-height: 23px;
            font-size: 18px;
            margin: 40px auto -40px auto;
          }
          &__image {
            width: 90px;
            margin: 0 auto 10px auto;
            img {
              width: 100%;
              border: 3px solid white;
              border-radius: 200px;
            }
          }
          &__text {
            width: 600px;
            margin: 0 auto;
            a {
              color: $primary;
              text-decoration: none;
              border-bottom: 2px solid $primary;
              padding-bottom: 3px;
            }
            h1 {
              color: white;
              font-size: 36px;
              margin: 0;
            }
            h3 {
              font-weight: 200;
              font-size: 26px;
              margin: 10px;
              line-height: 35px;
              color: $text-on-color;
            }
          }
        }
      }
    }
  }
}

.pen_card {
  .pen_details__inner {
    opacity: 0;
    left: -80px !important;
  }
}

.pen_card {
  .pen_card__inner {
    opacity: 0 !important;
    transition: all .3s;
  }
}

.pen_card.bring_in {
  .pen_card__inner {
    opacity: 1 !important;
    transition: all .3s;
  }
}

.pen_card.bring_in {
  .pen_details__inner {
    opacity: 1;
    left: 0px !important;
  }
}

@media (max-width: 768px) {
  .about_left, .about_right {
    width: 100% !important;
    position: relative !important;
    float: none !important;
    height: auto !important;
  }
  .pen_nav__mini {
    display: none !important;
  }
  body .penfolio_inner__footer ul {
    float: left;
    margin: 31px 0;
    position: Relative;
    top: 3px;
    margin: 30px 0px;
    padding: 0;
    float: none;
    text-align: center;
  }
  body .penfolio_inner__home .pen_intro h5 {
    width: 100%;
    padding: 20px;
  }
  .about_right {
    text-align: Center  !important;
    padding: 24px  !important;
  }
  body .penfolio_inner__about .about_left h2 {
    font-size: 32px;
  }
  .pen_logo, .pen_cta {
    width: 100% !important;
    text-align: center;
  }
  .penfolio_inner__home .pen_cta, nav {
    display: none;
  }
  .pen_responsive_nav {
    display: block !important;
  }
  .pen_cta {
    margin-top: 20px;
  }
  .pen_intro {
    margin: 0px 0px 54px 0px !important;
  }
  .pen_card__inner, .pen_details {
    width: 100% !important;
    position: Relative !important;
  }
  .pen_details {
    clear: both;
    height: auto !important;
  }
  body .penfolio_inner__pens .pen_details__inner {
    position: relative;
    transform: none;
    width: 100%;
    text-align: center;
  }
  body .penfolio_inner__pens .pen_card {
    float: left;
    position: relative;
    width: 100%;
    padding: 20px;
  }
  body .penfolio_inner__pens .pen_details p {
    padding-left: 0px;
    margin-left: 0px;
  }
  body .penfolio_inner__pens .penfolio_header {
    margin-top: 20px;
  }
  body .penfolio_inner__pens .pen_details__inner a {
    margin-left: 0px;
  }
}

@keyframes dot {
  0% {
    left: 0;
  }
  50% {
    left: 88px;
  }
  100% {
    left: 0;
  }
}
            
          
!
            
              $(document).ready(function(){

	/* ====================================================================			

	Penfolio V.1.0
	Description: Javascript for Penfolio
	Author: Jamie Coulter
	Codepen: www.codepen.io/jcoulterdesign
	Website: www.jamiecoulter.co.uk
	Twitter: @jcoulterdesing
	Email: jcoulterdesign@gmail.com

	=======================================================================  */

	/* ====================================================================
	
	Codepen username

	=======================================================================  */

	var codepen_username = 'jcoulterdesign'; // Your username

	/* ====================================================================
	
	Penfolio options

	=======================================================================  */

	var image_size = 'large'; // Small or large
	var pen_type = 'popular'; // Get showcase, can be public, loved, forked or popular

	/* ====================================================================
	
	Grab profile data from Nate's api
	--> Shouts to Nate for this http://cpv2api.com/

	=======================================================================  */

	var api = 'https://cpv2api.com/'; // Shouts to Nate for this http://cpv2api.com/

	var my_profile = $.getJSON(api + 'profile/' + codepen_username, function() {
	  my_profile.complete(function() {
	    var profile_data = $.parseJSON(my_profile['responseText']);
	    var profile = profile_data['data'];
	    console.log(profile)
	    // Set penfolio avatar
	    $('.pen_intro__image').find('img').attr('src', profile.avatar);
	    // Set penfolio name
	    $('.pen_intro').find('h2').html(profile.nicename);
	    $('body').find('.rep_username').html(profile.nicename);
	    // Set penfolio username
	    $('.pen_intro').find('h3').html('@' + profile.username);
	    // Set pen location
	     $('body').find('.rep_location').html(profile.location);
	    // Set penfolio followers
	    $('.pen_intro').find('h4').html(profile.followers + ' Followers | ' + profile.following + ' Following');
	    // Set codepen follow link
	    $('.p_link').attr('href', 'https://www.codepen.io/' + codepen_username);
	    // Set penfolio links
	    //console.log( profile.links)
	    for (i = 0; i < profile.links.length; i++) {

	    	$('.rep_links ul').append('<li><a href="' + profile.links[i] + '">' + profile.links[i] + '</a></li>')
	    }
	    // Fade out preloader once data is fetched
	    setTimeout(function(){
	      $('.penfolio_preloader').fadeOut();
	    },1000);
	  });
	});

	/* ====================================================================
	
	Grab pen data from Nate's api
	--> Shouts to Nate for this http://cpv2api.com/

	=======================================================================  */

	var my_pens = $.getJSON(api + 'pens/' + pen_type + '/' + codepen_username, function() {
	  my_pens.complete(function() {
	    var data = $.parseJSON(my_pens['responseText']);
	    var pens = data['data'];
	    // Build the content
	    //console.log(pens)
	    for (i = 0; i < pens.length; i++) {
	        $('.penfolio_inner__pens .wrap ').append('<div class="pen_card"><div class="pen_card__inner"><div class="pen_overlay"><a target="_blank" href="' + pens[i].link + '">View project</a></div><img src="' + pens[i].images[image_size] + '" /></div><div class="pen_details"><div class="pen_details__inner"><h2>' + pens[i].title + '</h2><p>' + pens[i].details.substr(0, 175).replace(/<p>|<\/p>+/ig, "") + '...' + '<a target="_blank" href="' + pens[i].link + '"> Read more</a></p></div></div></div>')
	    }
	  });
	});

	/* ====================================================================
	
	Navigation scroll

	=======================================================================  */

	// Scroll to point on page

	// Options

	var scroll_speed = 500; // Scroll speed. Set to 0 for instant snap
	var nav_links = $('ul li'); // Nav link elements

	function scroll_to(element){
		$('html, body').animate({
	    	scrollTop: $(element).offset().top -75 // Scroll to element
	  	}, scroll_speed);
	}

	nav_links.click(function() {
		var id = $(this).html().toLowerCase(); // Get clicked link
		var target = $('[scroll_target = ' + id + ']'); // Set the target element
		scroll_to(target); // Scroll to target
	});

	/* ====================================================================
	
	Responsive menu

	=======================================================================  */

	// Options

	var r_nav_open = 0; // Init menu closed

	$('.pen_responsive_nav').click(function(){
	  if(r_nav_open == 0){
	  	$(this).find('ul').show(); // Show the menu
	    r_nav_open = 1; // Set to open
	  } else{
	    $(this).find('ul').hide(); // Hide the menu
	    r_nav_open = 0; // Set to closed
	  }
	});

});

$(window).ready(function(){

	/* ====================================================================
	
	Mini menu

	=======================================================================  */

	var threshold = $('.penfolio_inner__home').innerHeight() + 50;

	$(window).scroll(function(){
		if($(document).scrollTop() > threshold){
			$('.pen_nav__mini').addClass('nav_active');
		} else {
			$('.pen_nav__mini').removeClass('nav_active');
		}
	})

	
	/* ====================================================================
	
	Mini menu

	=======================================================================  */

	function isScrolledIntoView(elem){
	    var $elem = $(elem);
	    var $window = $(window);

	    var docViewTop = $window.scrollTop();
	    var docViewBottom = docViewTop + $window.height();

	    var elemTop = $elem.offset().top + 400;
	    var elemBottom = elemTop + $elem.height() - 600;
	    	//console.log(elemTop);
	    if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)){
	    	$elem.addClass('bring_in');
	    } else {
	    	$elem.removeClass('bring_in');
	    }
	}

	$(window).scroll(function(){
		$('.pen_card').each(function(){
			isScrolledIntoView($(this));
		})
	})

	/* ====================================================================
	
	Scroll fade

	=======================================================================  */
		
	$(window).scroll(function(){
		op = threshold / $(document).scrollTop() - 1;
		$('.pen_intro').css('opacity',op);
	})

})
            
          
!
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