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

              
                        <header>
<!-- Navigation -->
		<nav class="menu-md"> 
			<button class="nav-toggle">
				<span class="menu-toggle-bar-md"></span>
				<span class="menu-toggle-bar-md"></span>
				<span class="menu-toggle-bar-md"></span>
      </button>
			<ul class="nav-links">
				<li>
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">Services</a>
				</li>     
				<li>
					<a href="#">Portfolio</a>
				</li>
				<li>
					<a href="#">About</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>                 
			</ul>
		</nav>
        <!--End Navigation-->

            <!--Name section-->
    <h1>Brandon Cranmore</h1>
            <h2>CODER.</h2><h2>DEVELOPER.</h2><h2>TECHNOLOGY ENTHUSIAST.</h2>
       <div class="container">
		

</div>
 </header>
        
<!--End Header-->
        
  
              
            
!

CSS

              
                @import "compass/css3";

@import "compass/reset";
@import url(https://fonts.googleapis.com/css?family=Arvo:700);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

@import url(https://fonts.googleapis.com/css?family=Bevan);

//fonts
$font-url--google           : 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700';
$font-family--primary       : 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family--secondary     : 'Helvetica Neue', Helvetica, Arial, sans-serif;


$font-weight--thin         		: 100;
$font-weight--light        		: 300;
$font-weight--medium        	: 400;
$font-weight--bold          	: 700;
$font-weight--ultra-bold    	: 900;

//font-sizes
$base-font--size            		: 16px;
$base--line                  		: 24px;

//base colors
$dark                           : rgba(0,0,0, 0.87);
$light                          : #F8F8F8;
$color                          : #b3e5fc;
$stardust						: #90908E;
$white                      	: #fff;
$black-pearl               		: #041D2F;
$black-haze                     : #F8F8F8;
$kashmir-blue             	  	: #446F8F;
$curious-blue                   : #3498db;
$amaranth                       : #f03c4f;
$mantis		              	  	: #90c05d;
$shark                          : #292B2E;

//material design colors
$pistachio		              	: #99cc00;
$amethyst						: #aa66cc;
$coral-red                 	  	: #ff4444;
$sunglow						: #ffbb33;
$picton-blue					: #33b5e5;

$color-background               : $black-haze;
$color-text                     : $black-pearl;
$color-highlight                : $pistachio;
$color-primary                  : $amaranth;

// variables - colors

$main-text: #7f8c97; // main text
$link: #acb7c0; // anchor tags
$background: #e9f0f5; // body background color

$color-1: #303e49; // blue dark
$color-2: #c03b44; // red
$color-3: #ffffff; // white
$color-4: #75ce66; // green
$color-5: #f0ca45; // yellow

// variables - fonts 

$primary-font: 'Droid Serif', serif;
$secondary-font: 'Open Sans', sans-serif;

// layout - breakpoints
   
$S:     320px;   
$M:     768px;     
$L:     1170px; 

// btn/color variables
$ui-colors: (
    default                  		: darken($stardust, 5%),
	primary							: darken($amethyst, 10%),
	info						    : darken($picton-blue, 10%),
    success                  		: darken($pistachio, 2%),
	danger							: darken($coral-red, 2%),
	warning							: darken($sunglow, 10%)
);


@mixin bg-colors($map){
@each $theme, $color in $map {
    &--#{$theme}{
        background-color: $color;
        }
    }
}

@function palette($palette, $shade: $color-primary) {
	@return map-get(map-get($color-palettes, $palette), $shade);
}


//breakpoint mixins
 @mixin respond-to($point) {
  @if $point == wide {
     @media (min-width: 70em) { @content ; }
  }
  @else if $point == desktop {
     @media (min-width: 64em) { @content ; }
  }
  @else if $point == tablet {
     @media (min-width: 50em) { @content ; }
  }
  @else if $point == phablet {
     @media (min-width: 0em) { @content ; }
  }
  @else if $point == mobileonly {
    @media (max-width: 37.5em)  { @content ; }
  }
}

// mixins - rem fallback - credits: http://zerosixthree.se/

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// mixins - border radius

@mixin border-radius($radius:.25em) {
  border-radius: $radius;
}

a[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}
body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 1.5;
    color: #333;
}
header{
    background-color: $shark;
    margin: 0, auto;
    color: #fff;
    text-align: center;
    padding: 30px 0 120px;
    height: 700px;
    h1 {
        text-align: center;
        text-transform: uppercase;
        font-size: 65px;
        font-weight: 400;
        letter-spacing: 3px;
        line-height: .8;
        padding-top: 50px;
        font-family: 'Montserrat', sans-serif;
        &:before {
            content: "[";
            color: $mantis;
            line-height:20px;
            font-size: 90px;
        }
         &:after {
            content: "]";
            color: $mantis;
            line-height:40px;
            font-size: 90px;
        }
    }
    span {
        text-transform: uppercase;
        letter-spacing: 7px;
        font-size: 25px;
       
    }
    h2{
        font-family: 'Montserrat';
        font-size: 22px;
        display: inline-block;
        margin-left: 4px;
      color: $black-haze;
    
    &:nth-of-type(2n) {
    color: $curious-blue;
    }
  }
}
 
.nav-toggle {
  display: none;
  cursor: pointer;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border: 0;
  padding: 12px;
  height: 60px;
  width: 60px;
  margin: 20, auto;
  color: $color-highlight;
  top: 10;
          &:hover {
          color: $color-text;
        }
    .menu-toggle-bar-md {
  display: block;
  width: 35px;
  height: 4px;
  margin: 0 auto;
  margin-top: 4px;
  background-color: $mantis;
  -webkit-transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
  transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);

    }
  
}

nav {
  position: absolute;
  background: #fafafa;
  border: 1px solid #ebebeb;
  top: 0px;
  width: 100%;

ul > li{
        list-style: none;
        display: inline-block;
        position: relative;
        padding: 8px;
        z-index: 10;
        margin: 0 auto;
        text-align: center;
        a{
            text-decoration: none;
            font-family: 'Roboto', sans-serif;
            font-size: 24px;
            font-weight: 300;
            position: relative;
            padding: 6px 0;
            -webkit-transition: all 0.8s;
            transition: all 0.8s;
            color: #333;
            text-align: center;
            margin: 0, auto;
            
            }
       }
}

/* line 144, ../sass/style.scss */
.navlinks > li > a.active:after {
  background-color: #90c05d;
  width: 60%;
  margin-left: 20%;
  box-shadow: 0px 0px 10px #999;
}

.navlinks > li:last-child {
  border: 0;
}
.navlinks > a:child {
  padding: 10px;
  width: 100%;
  border-color: $black-pearl;
}

@include respond-to(mobileonly) {
    
    .menu-md {
    margin: 0px;
    margin-left: 20px;
    top: 0;
    padding: 5px 5px 5px 5px;
	background: transparent;
	border: none;
	box-shadow:none;
    text-align: left;

}
  .nav-toggle {
    display: inline-block;
	box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  }

  .nav-links,
  .nav-links__child {
    display: none;
  }

  .nav-links {
    margin: 10px 0;
  }
.nav-links > li {
    width: 100%;
    border-right: 0;

  }
  .nav-links > li:last-child {
    border: 0;
  }
  .nav-links> li:first-child > a:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: 1em;
    top: -6px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: inherit;
  }
  .nav-links > li > a {
    width: 100%;
    padding: 10px;
    border-color: #90c05d;
    position: relative;
  }


  .nav-links {
    position: static;
    background-color: #373737;
    margin: 0;
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
  }
  .nav-links > li:first-child > a:after {
    content: none;
  }
  .nav-links a {
    padding-left: 20px;
    width: 100%;
  }

.nav-links--open {
  display: block !important;
}
.nav-links--open .nav-links__child {
  display: block;
}

}

.container {
	height: 2em;
	left: 50%;
	margin: -1.5em 0 0 -6em;
	position: absolute;
	top: 61%;
	width: 12em;
}

/* ---------- SOCIAL ---------- */

.social {
	position: absolute;
  top: 40px;
	height: 3em;
	width: 14.5em;
}

.social li {
	display: block;
	height: 4em;
	line-height: 4em;
	margin: -2.2em;
	position: absolute;
      box-shadow: 0 5px 20px rgba(0,0,0,0.8);
	-webkit-transition: -webkit-transform .7s;
	-moz-transition: -moz-transform .7s;
	-ms-transition: -ms-transform .7s;
	-o-transition: -o-transform .7s;
	transition: transform .7s;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	text-align: center;
	width: 4em;
}

.social a {
	color: #fffdf0;
	display: block;
	height: 4em;
	line-height: 4em;
	text-align: center;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 4em;	
}



.social li:hover {
  -webkit-transform: scale(1.3,1.3) rotate(45deg);
	-moz-transform: scale(1.3,1.3) rotate(45deg);
  -ms-transform: scale(1.3,1.3) rotate(45deg);
	-o-transform: scale(1.3,1.3) rotate(45deg);
  transform: scale(1.3,1.3) rotate(45deg);
}

.facebook {
	background: #155b9d;
	left: 0;
	top: 0%;
}

.twitter {
	background: #1a9ec4;
	bottom: 0;
	left: 25%;
}

.codepen {
	background: $mantis;
	left: 50%;
	top: 0%;
}

.behance {
	background: #3f7aa3;
	bottom: 0;
	left: 75%;
}

.linked-in {
	background: #157f9d;
	left: 100%;
	top: 0%;
}

@include respond-to(mobileonly) {

.container {
	height: 3em;
	left: 50%;
	margin: -1.5em 0 0 -6em;
	position: absolute;
	top: 60%;
	width: 12em;
    }
}


* {
  box-sizing: border-box; 
}

body {
  margin: 0; 
  font-weight: 500;
  font-family: 'HelveticaNeue';
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: $black-haze;
  height: 100vh;
  h1 {
    color: $black-pearl;
  }
  p {
    color: $black-pearl;
  }
  &:nth-of-type(2n) {
    background-color: $kashmir-blue;
  }
   &:nth-of-type(2n) h1 {
   color: $black-haze;
}
   &:nth-of-type(2n) p {
   color: #041D2F;
}

.intro {
  height: 90vh;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

h1 {
  font-size: 3em;
  display: block;
  font-weight: 300;
}

p {
  font-size: 1.5em;
  font-weight: 500;

}

a {
  font-weight: 700;
  color: #373B44;
  position: relative;
  
  &:hover{ 
    opacity: 0.8;
  }
  
  &:active {
    top: 1px;
  }
}
}

.progress{
@include bg-colors($ui-colors);
}
.techList {
	position: relative;
  list-style: none;
  margin: 0 auto;
    float: left;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 100%;
  text-transform: uppercase;
  color: #666;
  width: 50%;
  top: 0px;

 li {
  position: absolute;
     text-align: center;
  top: 0px;
  left: 0;
}

.html5 {
  font-weight: 700;
  letter-spacing: -.05em;
  -webkit-transform: 
  		scale(7.5, 7.8)
 			translate(1.18em, .68em);
  -moz-transform: 
    	scale(7.5, 7.8)
 			translate(1.18em, .68em);
}

.javascript {
  letter-spacing: -.04em;
  font-weight: 400;
	-webkit-transform: 
    	scale(1.4)
    	rotate(90deg)
    	translate(3.88em, -13.2em);
  -moz-transform: 
    	scale(1.4)
    	rotate(90deg)
    	translate(3.88em, -13.2em);
}

.accessibility {
  letter-spacing: -.05em;
  font-weight: 300;
	-webkit-transform:
    	scale(1.4, 1.33)
    	rotate(90deg)
    	translate(4.1em, -18.0em);
  -moz-transform: 
    	scale(1.4, 1.33)
    	rotate(90deg)
    	translate(4.1em, -18.0em);
}

.responsive {
  font-weight: 300;
  letter-spacing: -.03em;
  word-spacing: .3em;
  -webkit-transform: 
    	scale(2)
    	translate(2.12em, 5.14em);
  -moz-transform: 
    	scale(2)
    	translate(2.12em, 5.14em);
}

.usability {
  font-weight: 400;
  letter-spacing: -.04em;
  -webkit-transform: 
    	scale(2.85, 3)
      translate(7.14em, 3.55em);
  -moz-transform: 
      scale(2.85, 3)
      translate(7.14em, 3.55em);
}

.ajax {
  letter-spacing: -0.01em;
  font-weight: 700;
	-webkit-transform: 
    	scale(2.4, 2.3)
    	rotate(90deg)
    	translate(6em, -5.8em);
  -moz-transform: 
    	scale(2.4, 2.3)
    	rotate(90deg)
    	translate(6em, -5.8em);
}

.css3 {
  letter-spacing: .02em;
  font-weight: 700;
	-webkit-transform: 
    	scale(6.8, 6.75)
    	rotate(90deg)
    	translate(1.32em, -4.54em);
  -moz-transform: 
    	scale(6.8, 6.75)
    	rotate(90deg)
    	translate(1.32em, -4.54em);
}

.jquery {
  letter-spacing: 0.045em;
  font-weight: 700;
	-webkit-transform: 
    	scale(3.88, 3.8)
    	translate(5.42em, 3.72em);
  -moz-transform: 
    	scale(3.88, 3.8)
    	translate(5.42em, 3.72em);
}

.objectoriented {
  font-weight: 700;
  letter-spacing: -.010em;
  -webkit-transform: 
    	scale(1.85, 1.9)
      translate(1.86em, 6.5em);
  -moz-transform: 
      scale(1.85, 1.9)
      translate(1.86em, 6.5em);
}

.wordpress {
  font-weight: 300;
  letter-spacing: -0.05em;
  -webkit-transform: 
    	scale(2.75, 3)
      translate(1.72em, 4.95em);
  -moz-transform: 
      scale(2.75, 3)
      translate(1.72em, 4.95em);
}

.seo {
  font-weight: 300;
  letter-spacing: -0.07em;
  -webkit-transform: 
    	scale(3.9, 4)
      translate(6.05em, .95em);
  -moz-transform: 
      scale(3.9, 4)
      translate(6.05em, .95em);
}

.crossbrowser {
  font-weight: 700;
  letter-spacing: 0.1em;
  word-spacing: .2em;
  -webkit-transform: 
  		scale(2)
      translate(2.28em, 8.58em);
  -moz-transform: 
      scale(2)
      translate(2.28em, 8.58em);
}

.webstandards {
  font-weight: 300;
  letter-spacing: 0em;
  word-spacing: .1em;
  -webkit-transform: 
    	scale(2)
      translate(12.7em, 8.6em);
  -moz-transform: 
      scale(2)
      translate(12.7em, 8.6em);
}

.jg {
  color: #ee5d29;
  font-weight: 700;
  letter-spacing: -.03em;
  -webkit-transform: 
    	scale(3.4)
      translate(7.03em, 2.15em);
  -moz-transform: 
      scale(3.4)
      translate(7.03em, 2.15em);
}

.skills {
  color: #ee5d29;
  font-weight: 700;
  letter-spacing: -.03em;
  -webkit-transform: 
    	scale(1.8)
      translate(9.95em, 9.55em);
  -moz-transform: 
      scale(1.8)
      translate(9.95em, 9.55em);
}
}

#skill {
	list-style:none;
	font-size:12px;
    width: 50%;
    top: 300px;
    margin: 5em auto;
	position:relative;
	height:2em;
    float: right;
      	scale:(1.4);
    	rotate:(90deg);
    	translate:(3.88em, -13.2em);
  -moz-transform: 
    	scale(1.4)
    	rotate(90deg)
    	translate(3.88em, -13.2em);
}
#skill li {
	margin-bottom:25px;
	background:#eee;
}
#skill li h3 {
	position:relative;
	font-size:18px;
    line-height:3.5em;
	color:#fff;
	margin-left:10px;
	font-weight:normal;
}
.thebar {
	height:5em;
	position:absolute;
	width:100%;
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 13px 0 rgba(0, 0, 0, 0.54);
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);


h2 {
    margin-bottom: 30px;
    color: #4679bd;
    font-weight: 400;
    text-align: center;
}

p.footer {
    margin-bottom: 20px;
    color: #999999;
    font-size: 18px;
    text-align: center;
}

/* -----------------------------------------------
 * Timeline
 * --------------------------------------------- */
 .timeline {
    list-style: none;
    padding: 10px 0;
    margin-top: 2em;
     margin-bottom: 2em;
    position: relative;
    font-weight: 300;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 2px;
    background: #ffffff;
    left: 50%;
    margin-left: -1.5px;
}
.timeline > li {
    margin-bottom: 20px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: calc(100% - 25px);
    width: -moz-calc(100% - 25px);
    width: -webkit-calc(100% - 25px);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 13px 0 rgba(0, 0, 0, 0.54);
    float: left;

    background: #ffffff;
    position: relative;
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #dcdcdc;
    border-right: 0 solid #dcdcdc;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #ffffff;
    border-right: 0 solid #ffffff;
    border-bottom: 14px solid transparent;
    content:" ";
}
.timeline > li > .timeline-badge {
    color: #ffffff;
    width: 44px;
    height: 44px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 16px;
    right: -12px;
    z-index: 100;
    font-size: 28px;
}
.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline-badge > a {
    color: #ffffff !important;
}
.timeline-badge a:hover {
    color: #dcdcdc !important;
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}
.timeline-heading h4 {
    font-weight: 400;
    padding: 0 15px;
    color: #4679bd;
}
.timeline-body > p, .timeline-body > ul {
    padding: 10px 15px;
    margin-bottom: 0;
}
.timeline-footer {
    padding: 5px 15px;
    background-color: darken($pistachio, 2%);
}
.timeline-footer p { margin-bottom: 0; }
.timeline-footer > a {
    cursor: pointer;
    text-decoration: none;
}
.timeline > li.timeline-inverted {
    float: right;
    clear: right;
}
.timeline > li:nth-child(2) {
    margin-top: 60px;
}
.timeline > li.timeline-inverted > .timeline-badge {
    left: -12px;
}
.no-float {
    float: none !important;
}

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }
    ul.timeline > li {
        margin-bottom: 0px;
        position: relative;
        width:100%;
        float: left;
        clear: left;
    }
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 65px);
        width: -moz-calc(100% - 65px);
        width: -webkit-calc(100% - 65px);
    }
    ul.timeline > li > .timeline-badge {
        left: 28px;
        margin-left: 0;
        top: 16px;
    }
    ul.timeline > li > .timeline-panel {
        float: right;
    }
    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }
    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
    .timeline > li.timeline-inverted {
        float: left;
        clear: left;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .timeline > li.timeline-inverted > .timeline-badge {
        left: 28px;
    }
}

@include respond-to(mobileonly) {

    header{ 
        h1 {
            font-size: 24px;
        &:before {
            content: "[";
            color: $mantis;
            line-height:20px;
            font-size: 40px;
        }
         &:after {
            content: "]";
            color: $mantis;
            line-height:40px;
            font-size: 40px;
        }
    }
    span {
        text-transform: uppercase;
        letter-spacing: 7px;
        font-size: 25px;
       
    }
    h2{
        font-family: 'Montserrat';
        font-size: 22px;
        display: inline-block;
        margin-top: 10px;
        margin-left: 4px;
    
    &:nth-of-type(2n) {
    color: $curious-blue;
    }
  }
}
  
    
    .techList {
      position: relative;
      margin: 0 auto;
      padding: 0;
        text-align: center;
      font-family: 'Oswald', sans-serif;
      font-size: 60%;
      text-transform: uppercase;
      color: #666;
      width: 50%;
      top: 0px;
        margin-left: 6em;
}

    #skill {
	list-style:none;
	font-size:10px;
    width: 100%;
    top: 75px;
    margin: 12em auto;
	position:relative;
	height:2em;
    float: right;
      	scale:(1.4);
    	rotate:(90deg);
    	translate:(3.88em, -13.2em);
  -moz-transform: 
    	scale(1.4)
    	rotate(90deg)
    	translate(3.88em, -13.2em);
}
    #skill li {
	margin-bottom:25px;
	background:#eee;
}
#skill li h3 {
	position:relative;
	font-size:14px;
    line-height:3.0em;
	color:#fff;
	margin-left:10px;
	font-weight:normal;
}
.thebar {
	height:4em;
	position:absolute;
	width:100%;
    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.39), 0 6px 13px 0 rgba(0, 0, 0, 0.54);
}
}

              
            
!

JS

              
                       jQuery(document).ready(function($){
	var $timeline_block = $('.cd-timeline-block');

	//hide timeline blocks which are outside the viewport
	$timeline_block.each(function(){
		if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
			$(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
		}
	});

	//on scolling, show/animate timeline blocks when enter the viewport
	$(window).on('scroll', function(){
		$timeline_block.each(function(){
			if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
				$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
			}
		});
	});
});
              
            
!
999px

Console