Pen Settings

HTML

CSS

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

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

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.

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="pagetop"></div>
<header class="header-sticky">
  <div class="header-sticky--wrapper">
  <div class="logo-left">
    <a href="#pagetop">
      J2D2 Development
    </a>
  </div>
  <ul class="mobile-hide">
    <li>About</li>
    <li>Work</li>
    <li>
      <a href="https://j2d2development.wordpress.com/">
        Blog
      </a>
    </li>
    <li>
      <a href="#contact">
        Contact
      </a>
    </li>
  </ul>
  
  <div class="mobile-menu-wrapper">
  <i id="menu-show" class="fa fa-bars mobile-show-flex" aria-hidden="true"></i>
  <ul class="mobile-menu mobile-menu-hide">
    <li>About</li>
    <li>Work</li>
    <li>
      <a href="https://j2d2development.wordpress.com/">
        Blog
      </a>
    </li>
    <li>
      <a href="#contact">
        Contact
      </a>
    </li>
  </ul>
    </div>
  </div>
</header>
<div class="bg-img">
  <div class="screen-white-lg">
  <div class="hero-left">
  </div>
  <div class="hero-right">
    Joe Driscoll
    <small>Full Stack Web Developer</small>
    <small>JS | CSS | PHP | Python | .NET</small>
  </div>
  </div>
</div>
<div class="main">
  <h1 id="header-one">
    Make it fast - Make it work - Make it better
    <small class="subheader">Prototyping and Proof of Concepts in CodePen</small>
    <hr class="j2d2" />
  </h1>
  
  <div class="featured" id="featured-row-one">
    <div class="featured-col featured-col--left" id="featured-col-one--left">
      <h2>
        <i class="fa fa-user" aria-hidden="true"></i>
        UI and JS
        <small>User Profile Slideout</small>
      </h2>
      
      <div class="featured-col--text">
        A quick and dirty initial prototype for a new user profile edit slidout feature.  This was eventually added to a production product after adding JS validation and linking it to our PHP backend.
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link" href="https://codepen.io/joedriscoll79/pen/GqQggZ">Learn More</a>
        </div>
      </div>
    </div>
    <div class="featured-col featured-col--center" id="featured-col-one--center">
      <h2>
        <i class="fa fa-twitch" aria-hidden="true"></i>
        Angular 1.5
        <small>Twitch User Viewer</small>
      </h2>
      <div class="featured-col--text">
        I found <a href="https://www.freecodecamp.com">FreeCodeCamp</a> to be a great resource for projects to practice the latest web development processes and techniques.  This one uses Angular and custom css to allow the user to view different profiles and previews.
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link" href="https://codepen.io/joedriscoll79/pen/BKJQNa">Learn More</a>
        </div>
      </div>
    </div>
    <div class="featured-col featured-col--right" id="featured-col-one--right">
      <h2>
        <i class="fa fa-picture-o" aria-hidden="true"></i>
         Vanilla JS
        <small>Slider with indicators</small>
      </h2>
      <div class="featured-col--text">
        A client wanted a sliding banner to welcome new residents.  It was a fresh project, so used just JS/CSS to mock up an option.  No controls, though they were added to a different version in production (warning: crazy colors for demo purposes only!).
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link" href="https://codepen.io/joedriscoll79/pen/BzrbaY">Learn More</a>
        </div>
      </div>
    </div>
  </div>
  
  <h1 id="header-two" class="work-bg">
    <div class="screen-white-md">
      <div id="header-two-text" class="hidden-scale">
        Real world projects - Real world solutions
        <small class="subheader subheader-light">Examples of projects currently live in production</small>
      </div>
    </div>
  </h1>
  
  <div class="featured">
    <div class="featured-col">
      <h2>
        Case Study 1
        <small>The MEAN Stack</small>
      </h2>
      
      <div class="featured-col--text">
        I was assigned the task to create a backend for an internal marketing site with an Angular frontend.  Given the freedom to pick the backend, I went with NodeJS and MongoDB.
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link">Learn More</a>
        </div>
      </div>
    </div>
    <div class="featured-col">
      <h2>
        Case Study 2
        <small>Javascript | jQuery</small>
      </h2>
      <div class="featured-col--text">
        The online forms feature needed a refresh.  The system was a bit outdated, so I went with a simple approch: jQuery to show real-time validation and ajax to submit the form.
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link">Learn More</a>
        </div>
      </div>
    </div>
    <div class="featured-col">
      <h2>
         Case Study 3
        <small>Python / Django</small>
      </h2>
      <div class="featured-col--text">
        The website was to be built in Angular 1.5 with a Python/Django backend.  I got to work on both- helping with the routing and multiple modules on the front end, and creating the back end structure.
        <div class="primary-color--link--wrapper">
        <a class="primary-color--link">Learn More</a>
        </div>
      </div>
    </div>
  </div>
  <div class="contact" id="contact">
    <div class="contact-text">
      <h1>Contact</h1>
      <hr />
        Want to work together?  Get in touch!
    </div>
    <div class="contact-form" id="contact-form">
      --react form here--
    </div>
  </div>
</div>
<footer class="footer-dark">
  <div class="footer-dark--wrapper">
  <div class="footer-left">
    J2D2 is Joe Driscoll
  </div>
  <div class="footer-right">
    <a href="https://github.com/j2d2development">
    <i class="fa fa-github" aria-hidden="true"></i>
    </a>
    <a href="https://codepen.io/joedriscoll79">
    <i class="fa fa-codepen" aria-hidden="true"></i>
    </a>
    <a href="https://j2d2development.wordpress.com/">
    <i class="fa fa-wordpress" aria-hidden="true"></i>
    </a>
  </div>
  </div>
</footer>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}
html, body {
  margin-top: 0;
  font-family: 'Open Sans', sans-serif;
}
.header-sticky {
  z-index: 9999;
  width: 100%;
  font-size: 1.25em;
  padding: 16px 0 16px 0;
  color: #156cbe;
  background-color: #eee;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 0 6px #333;
  transition: all 0.3s linear;
}
.header-sticky--shrink {
  font-size: 0.75em;
  padding: 4px 0 4px 0;
}
.header-sticky--wrapper {
  width: 90%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-sticky--wrapper a {
  text-decoration: none;
  color: inherit;
  padding: 0 3px 0 3px;
}
.logo-left {
  font-family: 'Inconsolata', Monospace;
  font-size: 1.5em;
}
.header-sticky ul {
  margin: 0;
}
.header-sticky li {
  list-style-type: none;
  display: inline-block;
  padding: 0 6px 2px 6px;
  margin-left: 9px;
  border-bottom: 1px solid #eee;
  transition: border-bottom 0.5s ease;
}
.header-sticky li:hover {
  border-bottom: 1px solid #333;
}
.bg-img {
  min-height: 90vh;
  background-image: url('https://images.unsplash.com/photo-1429051883746-afd9d56fbdaf?dpr=1.5&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
.screen-white-lg {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 3.5em;
  min-height: 90vh;
  background-color: rgba(0,0,255,0.2);
  font-weight: normal;
  color: #fff;
  text-align: center;
}
.hero-left {
}
.hero-right {
}
.hero-right small {
  display: block;
  font-size: 0.5em;
}
.main h1 {
  font-weight: normal;
  text-align: center;
  margin: 46px 0 46px 0;
}
#header-two-text {
  transition: transform 0.5s ease;
}
.hidden-scale {
  transform: scale(0);
}
.work-bg {
  background-image: url(https://images.unsplash.com/uploads/141103282695035fa1380/95cdfeef?dpr=1.5&auto=format&crop=entropy&fit=crop&w=1500&h=770&q=80&cs=tinysrgb);
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
.screen-white-md {
  height: 100%;
  padding: 60px 16px 60px 0;
  min-height: 300px;
  background-color: rgba(0,0,255,0.5);
  box-shadow: 0 0 6px #000;
  font-weight: normal;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.featured {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  padding: 3px 0 3px 0;
}
.featured-col {
  width: 30%;
  box-shadow: 0 0 3px #156cbe;
  padding: 6px 12px 6px 12px;
  transition: transform 0.5s ease-in-out;
}
.featured-col--left {
  transform: translateX(-110%);
}
.featured-col--center {
  transform: scale(0);
}
.featured-col--right {
  transform: translateX(110%);
}
.featured-col h2 {
  font-weight: normal;
  text-align: center;
}
.featured-col h2 small {
  display: block;
  font-size: 0.65em;
}
.featured-col--text {
  font-size: 0.85em;
}
.contact {
  display: flex;
  justify-content: space-around;
  margin-top: 92px;
  text-align: center;
  background-color: #156cbe;
  color: #eee;
  padding: 64px 0 84px 0;
}
.contact h1 {
  font-size: 2.5em;
  margin: 0;
  padding: 0;
  padding-bottom: 12px;
  font-weight: normal;
}
.contact-text {
  padding-top: 16px;
  width: 49%;
}
.contact-form {
  width: 49%;
}
.contact-form input[type=text], .contact-form textarea {
  width: 65%;
  background-color: #333;
  color: #eee;
  margin-bottom: 6px;
  border: 0;
  padding: 6px;
}
.contact-form input[type=submit] {
  width: 65%;
  background-color: #eee;
  border: 1px solid #333;
  padding: 3px;
  color: #156cbe;
  transition: all 0.3s ease-in-out;
}
.contact-form input[type=submit]:hover {
  background-color: #fff;
  border: 1px solid #eee;
}
.footer-dark {
  background-color: #333;
  color: #eee;
  width: 100%;
  font-size: 1.25em;
  padding: 26px 0 26px 0px;
}
.footer-dark--wrapper {
  width: 90%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left {
  padding-bottom: 6px;
}
.footer-right {
  text-align: right;
}
.footer-right i {
  color: #eee;
  font-size: 1.5em;
  padding: 0 9px 6px 9px;
  border-bottom: 1px solid #333;
  transition: border-bottom 0.5s ease;
}
.footer-right i:hover {
  border-bottom: 1px solid #eee;
}
.footer-right a {
  text-decoration: none;
  color: inherit;
}

/*Utility classes*/
hr {
  width: 30%;
}
.subheader {
  display: block;
  font-size: 0.55em;
  color: #156cbe;
}
.subheader-light {
  color: #d0e1f2;
}
.primary-color--link--wrapper {
  text-align: center;
}
.primary-color--link {
  display: inline-block;
  text-decoration: none;
  margin: 16px auto;
  padding: 6px;
  text-align: center;
  color: #156cbe;
  border: 1px solid #156cbe;
  transition: all 0.3s ease;
}
.primary-color--link:hover {
  background-color: #156cbe;
  color: #eee;
}
.reversed-color--link--wrapper {
  text-align: center;
}
.reversed-color--link {
  display: inline-block;
  text-decoration: none;
  margin: 16px auto;
  padding: 6px;
  text-align: center;
  color: #eee;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}
.reversed-color--link:hover {
  background-color: #eee;
  color: #156cbe;
}
#header-one {
  position: relative;
  overflow-x: hidden;
}
.mobile-show {
  display: none;
}
.mobile-menu-wrapper {
  display: none;
}

/*mobile*/
@media (max-width: 700px) {
  .mobile-menu-wrapper {
    display: flex;
    position: relative;
  }
  .mobile-hide {
    display: none;
  }
  .mobile-show-block {
    display: block;
  }
  .mobile-show-flex {
    display: flex;
  }
  .mobile-menu-hide {
    display:none;
  }
  .mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 2.5em;
    width: 100%;
    background-color: #fff;
    padding: 0;
  }
  .menu-mobile-show {
  }
  .mobile-menu a {
    margin: 0;
  }
  .mobile-menu  li {
    display: block;
    margin: 6px 0 0 0;
  }
  #mobile-show {
    z-index: 9999;
  }
 
  h1 {
    font-size: 1.5em;
  }
  .screen-white-lg {
    font-size: 2.5em;
    background-color: rgba(0,0,255,0.5);
  }
  
  .featured {
    display: block;
  }
  .featured-col {
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
    box-shadow: none;
  }
  .contact {
    display: block;
  }
  .contact-text {
    width: 100%;
    margin-bottom: 32px;
  }
  .contact-form {
    width: 100%;
  }
  .footer-dark--wrapper {
    display: block;
    text-align: center;
  }
  .footer-right {
    text-align: center;
    margin: 16px 0 16px 0;
  }
}
              
            
!

JS

              
                function init() {
  //grab header and wrapper for dynamic offset and shrink on scroll effect
  const header = document.querySelector('.header-sticky');
  const headerWrapper = document.querySelector('.header-sticky--wrapper');
  const heroImg = document.querySelector('.bg-img');
  
  //grab mobile menu to show/hide on click/tap
  const menuBars = document.querySelector('#menu-show');
  
  //grab header two for zoom in text animation
  const headerTwo = document.querySelector('#header-two');
  const headerTwoText = headerTwo.querySelector('#header-two-text');
  
  //grab first row of featured divs for animating on scroll
  const featuredTopRow = document.querySelector('#featured-row-one');
  const featuredTopRowLeft = document.querySelector('#featured-col-one--left');
  const featuredTopRowCenter = document.querySelector('#featured-col-one--center');
  const featuredTopRowRight = document.querySelector('#featured-col-one--right');
  
  //grab bounding rect for any element to be animated
  let headerTwoRect = headerTwo.getBoundingClientRect();
  let topRowRect = featuredTopRow.getBoundingClientRect();
  
  //set y height where menu should shrink 'up'
  let breakPoint = header.offsetHeight + heroImg.offsetHeight;
  
  //set header offset (for static header)
  heroImg.style.marginTop = (header.offsetHeight - 4) + 'px';
  
  function mobileMenuShow() {
    //set bool show.  if true, add listener to menu items- onclick, close menu.  then, remove listeners from menu items (will be re-added if menu show again)
    document.querySelector('.mobile-menu').classList.toggle('mobile-menu-hide');
  }
  
  //if element is in viewport, perform proper animation
  function animateElementInViewport(indicatorElement, elementToAnimate, animationEffect, offset) {
    offset = offset || 0;
    if(isInView(indicatorElement, offset)) {
      elementToAnimate.classList.remove(animationEffect);
    } else {
      elementToAnimate.classList.add(animationEffect);
    }
  }
  
  //utility function to calculate position
  function isInView(element, offset) {
    offset = offset || 0;
    return window.scrollY > element.top - offset;
  }
  
  //shrink header if page scrolls past breakpoint
  function headerShrink() {
    if(window.scrollY > breakPoint) {
      header.classList.add('header-sticky--shrink');
    } else {
      header.classList.remove('header-sticky--shrink');
    }
  }
  
  //event listener adding
  menuBars.addEventListener('click', mobileMenuShow, false);
  window.addEventListener('scroll', headerShrink, false);
  window.addEventListener('scroll', function() {
    animateElementInViewport(headerTwoRect, headerTwoText, 'hidden-scale', 200);
  }, false);
  window.addEventListener('scroll', function() {
    animateElementInViewport(topRowRect, featuredTopRowLeft, 'featured-col--left', 375);
    animateElementInViewport(topRowRect, featuredTopRowCenter, 'featured-col--center', 375);
    animateElementInViewport(topRowRect, featuredTopRowRight, 'featured-col--right', 375);
  })
}

//kick it all off on load
window.addEventListener('DOMContentLoaded', init, false);

//react contact form (needs work)
class ContactForm extends React.Component {
  render() {
    return (
      <div>
        <form>
          <input type="text" placeholder="Your Name" /><br />
          <input type="text" placeholder="Your Email" /><br />
          <textarea placeholder="Questions?"></textarea><br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

ReactDOM.render(
  <ContactForm />,
  document.getElementById('contact-form')
);
              
            
!
999px

Console