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

              
                	<head>
		<title>Portfolio</title>
	</head>
	<body>
		<link href='https://fonts.googleapis.com/css?family=Lobster|Arimo|Roboto' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="/style.css">
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="https://use.fontawesome.com/e0fc2221d2.js"></script>
		<script src="script.js"></script>
        <script src="/smooth-scroll.js"></script>

		<header class="container-fluid clearfix">
			<h1 id="logo">
				J L Weston
			</h1>
			<nav>
				<a href="#aboutme">About</a>
				<a href="#portfolio">Portfolio</a>
				<a href="#contact">Contact</a>
			</nav>
		</header>
		<div class="container" id="main">
			<section class="row target">
				<div class="col-sm-offset-1 col-sm-10 aboutme">
				<a id="aboutme"></a>
					I'm Jamie and I'm a web developer, with a focus on responsive single page applications. I've studied a BSc in Computing and IT, and am currently working toward learning full stack web development.
				</div>
			</section>
			<section class="row target">
				<div class="col-sm-offset-1 col-sm-10 portfolio">
				<a id="portfolio"></a>
					The following projects are simply placeholder images. Later there'll be stuff I made myself. Honest.
					<ul class="image-grid">
						<li><img src="http://unsplash.it/600/400?image=0"></li>
						<li><img src="http://unsplash.it/600/400?image=1"></li>
						<li><img src="http://unsplash.it/600/400?image=2"></li>
						<li><img src="http://unsplash.it/600/400?image=3"></li>
						<li><img src="http://unsplash.it/600/400?image=4"></li>
						<li><img src="http://unsplash.it/600/400?image=5"></li>
					</ul>
				</div>
			</section>
			<section class="row target">
				<div class="col-sm-offset-1 col-sm-10 contact">
				<a id="contact"></a>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consequat rhoncus nibh, eget viverra leo consequat in. In nec volutpat ante. Nulla quis mattis felis, aliquet sagittis ex. Duis consequat pretium nulla, quis convallis libero dictum quis. Proin nec erat tempor, mollis erat vitae, placerat orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi elementum pulvinar consectetur. Nulla porttitor ex non felis aliquet, ultricies consectetur metus viverra.
				</div>
			</section>

		</div>
		<section class="container-fluid">
			<div class="aboutpage">
			<a id="aboutpage"></a>
			<ul>
				<li><a href="https://www.linkedin.com/in/jamie-weston" target="_blank"><i class="fa fa-linkedin-square"></i> LinkedIn</a></li>
				<li><a href="https://github.com/monotone2k/" target="_blank"><i class="fa fa-github-square"></i> GitHub</a></li>
			</ul>
			</div>
		</section>

		<footer class="container-fluid clearfix">
			<div><i class="fa fa-copyright"></i> Jamie Weston 2016. All rights reserved.</div>
		</footer>
	</body>
    <script>
      $(document).ready(function() {
        init();
        $('a').smoothScroll({offset: -150});
      });
    </script>
              
            
!

CSS

              
                body {
	background-color: #888;
	font-family: "Arimo";
	font-size: 20px;
}
.container {
	position: relative;
	margin-top: 120px;
}
.aboutme, .aboutpage, footer  {
	padding: 30px;
	background-color: #aaa;
	color: white;
	box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.5);
}
.portfolio, .contact{
	padding: 30px;
	background-color: #eee;
	color: #666;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}
footer {
	display: block;
	background-color: #433c91;
	color: white;
	padding: 5px;
  text-align: center;
}
.aboutpage {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutpage li {
	display: inline;
	padding: 10px;
}
.image-grid {
	display: flex;
	flex-flow: row wrap;
	list-style: none;
	padding: 0;
	max-width: 95%;
	margin: 0 auto;
	margin-top: 20px;
	align-items: flex-start;
	justify-content: space-around;
}
.image-grid li {
	margin: 10px;
	max-width: 400px;
}

.image-grid img {
	max-width: 100%;
	height: auto;
	display: block;
}


a, a:hover, a:active, a:visited, a:focus {
	color: white;
	text-decoration: none;
}

header {
	width: 100%;
	height: 120px;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: #433c91;
	box-shadow: 0 0 5px 2px #000;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	-ms-transition: height 0.3s;
	-o-transition: height 0.3s;
	transition: height 0.3s;
}
header h1#logo {
	display: inline;
	height: 120px;
	line-height: 80px;
	float: left;
	font-family: Lobster;
	font-size: 60px;
	color: white;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
header nav {
	display: inline-block;
	float: right;
	background-color: #201c4e;
	margin-right: -15px;
	padding-right: 20px;
}
header nav a {
	line-height: 120px;
	font-size: 24px;
	margin-left: 20px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
header.smaller {
	height: 50px;
	line-height: 50px;
}
header.smaller h1#logo {
	line-height: 50px;
	font-size: 30px;
	margin: 0;
}
header.smaller nav a {
	line-height: 50px;
	font-size: 18px;
	margin-left: 15px;
}

@media all and (max-width: 660px) {
	header h1#logo {
		display: block;
		float: none;
		margin: 0 auto;
		height: 75px;
		line-height: 75px;
		text-align: center;
	}
	header nav {
		display: block;
		float: none;
		height: 50px;
		text-align: center;
		padding-top: -10px;
		margin-top: 0;
		margin-left: -15px;
	}
	header nav a {
		line-height: 50px;
		margin: 0 10px;
		padding: -10px;
	}
	header.smaller {
		height: 75px;
	}
	header.smaller h1#logo {
		height: 50px;
		line-height: 50px;
		font-size: 30px;
	}
	header.smaller nav {
		height: 25px;
		line-height: 0
	}
	header.smaller nav a {
		line-height: 25px;
		height: 25px;
	}
}

@media all and (max-width: 1199px) {
	.image-grid li {
		margin: 10px;
		max-width: 600px;
	}
}

              
            
!

JS

              
                function init() {
	window.addEventListener('scroll', function(e){
		var distanceY = window.pageYOffset || document.documentElement.scrollTop,
			shrinkOn = 200,
			header = document.querySelector("header");
		if (distanceY > shrinkOn) {
			$("header").addClass("smaller");
		} else {
			if ($("header").hasClass("smaller")) {
			$("header").removeClass("smaller");
			}
		}
	});
}
window.onload = init();

/*!
 * jQuery Smooth Scroll - v2.0.1 - 2016-09-07
 * https://github.com/kswedberg/jquery-smooth-scroll
 * Copyright (c) 2016 Karl Swedberg
 * Licensed MIT
 */

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    factory(require('jquery'));
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function($) {

  var version = '2.0.1';
  var optionOverrides = {};
  var defaults = {
    exclude: [],
    excludeWithin: [],
    offset: 0,

    // one of 'top' or 'left'
    direction: 'top',

    // if set, bind click events through delegation
    //  supported since jQuery 1.4.2
    delegateSelector: null,

    // jQuery set of elements you wish to scroll (for $.smoothScroll).
    //  if null (default), $('html, body').firstScrollable() is used.
    scrollElement: null,

    // only use if you want to override default behavior
    scrollTarget: null,

    // fn(opts) function to be called before scrolling occurs.
    // `this` is the element(s) being scrolled
    beforeScroll: function() {},

    // fn(opts) function to be called after scrolling occurs.
    // `this` is the triggering element
    afterScroll: function() {},

    // easing name. jQuery comes with "swing" and "linear." For others, you'll need an easing plugin
    // from jQuery UI or elsewhere
    easing: 'swing',

    // speed can be a number or 'auto'
    // if 'auto', the speed will be calculated based on the formula:
    // (current scroll position - target scroll position) / autoCoeffic
    speed: 400,

    // coefficient for "auto" speed
    autoCoefficient: 2,

    // $.fn.smoothScroll only: whether to prevent the default click action
    preventDefault: true
  };

  var getScrollable = function(opts) {
    var scrollable = [];
    var scrolled = false;
    var dir = opts.dir && opts.dir === 'left' ? 'scrollLeft' : 'scrollTop';

    this.each(function() {
      var el = $(this);

      if (this === document || this === window) {
        return;
      }

      if (document.scrollingElement && (this === document.documentElement || this === document.body)) {
        scrollable.push(document.scrollingElement);

        return false;
      }

      if (el[dir]() > 0) {
        scrollable.push(this);
      } else {
        // if scroll(Top|Left) === 0, nudge the element 1px and see if it moves
        el[dir](1);
        scrolled = el[dir]() > 0;

        if (scrolled) {
          scrollable.push(this);
        }
        // then put it back, of course
        el[dir](0);
      }
    });

    if (!scrollable.length) {
      this.each(function() {
        // If no scrollable elements and <html> has scroll-behavior:smooth because
        // "When this property is specified on the root element, it applies to the viewport instead."
        // and "The scroll-behavior property of the … body element is *not* propagated to the viewport."
        // → https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
        if (this === document.documentElement && $(this).css('scrollBehavior') === 'smooth') {
          scrollable = [this];
        }

        // If still no scrollable elements, fall back to <body>,
        // if it's in the jQuery collection
        // (doing this because Safari sets scrollTop async,
        // so can't set it to 1 and immediately get the value.)
        if (!scrollable.length && this.nodeName === 'BODY') {
          scrollable = [this];
        }
      });
    }

    // Use the first scrollable element if we're calling firstScrollable()
    if (opts.el === 'first' && scrollable.length > 1) {
      scrollable = [scrollable[0]];
    }

    return scrollable;
  };

  $.fn.extend({
    scrollable: function(dir) {
      var scrl = getScrollable.call(this, {dir: dir});

      return this.pushStack(scrl);
    },
    firstScrollable: function(dir) {
      var scrl = getScrollable.call(this, {el: 'first', dir: dir});

      return this.pushStack(scrl);
    },

    smoothScroll: function(options, extra) {
      options = options || {};

      if (options === 'options') {
        if (!extra) {
          return this.first().data('ssOpts');
        }

        return this.each(function() {
          var $this = $(this);
          var opts = $.extend($this.data('ssOpts') || {}, extra);

          $(this).data('ssOpts', opts);
        });
      }

      var opts = $.extend({}, $.fn.smoothScroll.defaults, options);

      var clickHandler = function(event) {
        var escapeSelector = function(str) {
          return str.replace(/(:|\.|\/)/g, '\\$1');
        };

        var link = this;
        var $link = $(this);
        var thisOpts = $.extend({}, opts, $link.data('ssOpts') || {});
        var exclude = opts.exclude;
        var excludeWithin = thisOpts.excludeWithin;
        var elCounter = 0;
        var ewlCounter = 0;
        var include = true;
        var clickOpts = {};
        var locationPath = $.smoothScroll.filterPath(location.pathname);
        var linkPath = $.smoothScroll.filterPath(link.pathname);
        var hostMatch = location.hostname === link.hostname || !link.hostname;
        var pathMatch = thisOpts.scrollTarget || (linkPath === locationPath);
        var thisHash = escapeSelector(link.hash);

        if (thisHash && !$(thisHash).length) {
          include = false;
        }

        if (!thisOpts.scrollTarget && (!hostMatch || !pathMatch || !thisHash)) {
          include = false;
        } else {
          while (include && elCounter < exclude.length) {
            if ($link.is(escapeSelector(exclude[elCounter++]))) {
              include = false;
            }
          }

          while (include && ewlCounter < excludeWithin.length) {
            if ($link.closest(excludeWithin[ewlCounter++]).length) {
              include = false;
            }
          }
        }

        if (include) {
          if (thisOpts.preventDefault) {
            event.preventDefault();
          }

          $.extend(clickOpts, thisOpts, {
            scrollTarget: thisOpts.scrollTarget || thisHash,
            link: link
          });

          $.smoothScroll(clickOpts);
        }
      };

      if (options.delegateSelector !== null) {
        this
        .off('click.smoothscroll', options.delegateSelector)
        .on('click.smoothscroll', options.delegateSelector, clickHandler);
      } else {
        this
        .off('click.smoothscroll')
        .on('click.smoothscroll', clickHandler);
      }

      return this;
    }
  });

  $.smoothScroll = function(options, px) {
    if (options === 'options' && typeof px === 'object') {
      return $.extend(optionOverrides, px);
    }
    var opts, $scroller, scrollTargetOffset, speed, delta;
    var scrollerOffset = 0;
    var offPos = 'offset';
    var scrollDir = 'scrollTop';
    var aniProps = {};
    var aniOpts = {};

    if (typeof options === 'number') {
      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, optionOverrides);
      scrollTargetOffset = options;
    } else {
      opts = $.extend({link: null}, $.fn.smoothScroll.defaults, options || {}, optionOverrides);

      if (opts.scrollElement) {
        offPos = 'position';

        if (opts.scrollElement.css('position') === 'static') {
          opts.scrollElement.css('position', 'relative');
        }
      }
    }

    scrollDir = opts.direction === 'left' ? 'scrollLeft' : scrollDir;

    if (opts.scrollElement) {
      $scroller = opts.scrollElement;

      if (!(/^(?:HTML|BODY)$/).test($scroller[0].nodeName)) {
        scrollerOffset = $scroller[scrollDir]();
      }
    } else {
      $scroller = $('html, body').firstScrollable(opts.direction);
    }

    // beforeScroll callback function must fire before calculating offset
    opts.beforeScroll.call($scroller, opts);

    scrollTargetOffset = (typeof options === 'number') ? options :
                          px ||
                          ($(opts.scrollTarget)[offPos]() &&
                          $(opts.scrollTarget)[offPos]()[opts.direction]) ||
                          0;

    aniProps[scrollDir] = scrollTargetOffset + scrollerOffset + opts.offset;
    speed = opts.speed;

    // automatically calculate the speed of the scroll based on distance / coefficient
    if (speed === 'auto') {

      // $scroller[scrollDir]() is position before scroll, aniProps[scrollDir] is position after
      // When delta is greater, speed will be greater.
      delta = Math.abs(aniProps[scrollDir] - $scroller[scrollDir]());

      // Divide the delta by the coefficient
      speed = delta / opts.autoCoefficient;
    }

    aniOpts = {
      duration: speed,
      easing: opts.easing,
      complete: function() {
        opts.afterScroll.call(opts.link, opts);
      }
    };

    if (opts.step) {
      aniOpts.step = opts.step;
    }

    if ($scroller.length) {
      $scroller.stop().animate(aniProps, aniOpts);
    } else {
      opts.afterScroll.call(opts.link, opts);
    }
  };

  $.smoothScroll.version = version;
  $.smoothScroll.filterPath = function(string) {
    string = string || '';

    return string
      .replace(/^\//, '')
      .replace(/(?:index|default).[a-zA-Z]{3,4}$/, '')
      .replace(/\/$/, '');
  };

  // default options
  $.fn.smoothScroll.defaults = defaults;

}));

              
            
!
999px

Console