cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <body id="pageTop"> <button type="button" id="showNav" name="home"> <div id="menuBarWrap"> <span id="menuBar1" class="menuBar"></span> <span id="menuBar2" class="menuBar"></span> <span id="menuBar3" class="menuBar"></span> <span id="menuBar4" class="menuBar"></span> </div></button> <div class="nav_overlay_container"> <div class="nav_overlay"> <div class="navigation"> <ul> <li><a href="#pageTop">Home</a></li><li><a href="#portfolio">Portfolio</a></li><li><a href="#skills">Skills</a></li><li><a href="#about">About Me</a></li><li><a href="#contact">Contact</a></li></ul> </div></div></div><header id="header"> <div class="grid cf"> <div class="row cf"> <div class="g_3" style="border: none;"></div><div class="g_6 corbelStack greeting showGreeting"> <div class="logoImage"><img src="http://gjcarrow.com/img/spaceManWhite.png" alt="logo photo"></div><h1>Welcome</h1> <p style="font-family:'OCR A Std'">I'm James : website, web app, and JavaScript developer extraordinaire.</p></div><div class="g_3" style="border: none;"> </div></div></div><div class="row mtnfifty"> <div class="g_12"> <a href="#portfolio" class="navDown"></a> </div></div></header> <section id="portfolio" class="sectionRow"> <a name="portfolio"></a> <div class="grid cf"> <div class="row cf"> <div class="g_12 cf"> <h1 class="textStyle textCenter">Portfolio</h1> <p class="textCenter">(Clicking on a project will bring you to the website)</p></div><div class="row"> <div class="g_4 min2"> <div class="portItemDisplay cf"> <a href="http://www.gjcarrow.com"><img src="http://gjcarrow.com/img/port1.png" alt="portfolio site screenshot"></a> </div><div class="portItemInfo"> <h1>Portfolio Site</h1> <hr> <p> The first website that I built to showcase my work and to promote myself as a developer. Functionally, it is quite similar to this current site, except I have removed all Bootstrap and jQuery libraries and written all the code myself, which resulted in a 50% reduction in size. </p></div><div class="portItemTech"> <h3>Technologies Used: </h3> <ul> <li>HTML</li><li>CSS</li><li>PHP</li><li>MySql</li></ul> </div></div><div class="g_4 min2"> <div class="portItemDisplay cf"> <a href="http://www.restaurant.gjcarrow.com"><img src="http://gjcarrow.com/img/port2.png" alt="restuarant website screenshot"></a> </div><div class="portItemInfo"> <h1>Restaurant From Scratch</h1> <hr> <p>A website for a fictional restaurant, built from scratch using the LAMP stack. I wrote every line of code myself, including the front-end and the back-end. </p></div><div class="portItemTech"> <h3>Technologies Used: </h3> <ul> <li>HTML</li><li>CSS</li><li>PHP</li><li>MySql</li></ul> </div></div><div class="g_4 min2"> <div class="portItemDisplay cf"> <a href="https://pet-finder.herokuapp.com"><img src="http://gjcarrow.com/img/port3.png" alt="screenshot of webiste"></a> </div><div class="portItemInfo"> <h1>Angular Pet Finder App</h1> <hr> <p>A web application that I build to become more familiar with the MEAN technology stack. It is a "Pet Finder" app that allows the user to browse through the animals available for adoption. </p></div><div class="portItemTech"> <h3>Technologies Used: </h3> <ul> <li>AngularJS</li><li>ExpressJS</li><li>MongoDb</li><li>NodeJS</li></ul> </div></div></div></div></div></section> <section id="skills"> <div class="grid cf"> <div class="row cf"> <div class="g_12 cf"> <h1 class="textStyle">Skills</h1> </div></div><div class="row cf"> <div class="g_6 skillWrap"> <h2 class="tCenter"></h2> <table> <tbody class="be"> <tr> <td>Node</td><td data-tds="skillShift"></td></tr><tr> <td>PhP</td><td data-tds="skillShift"></td></tr><tr> <td>MySQL</td><td data-tds="skillShift" ></td></tr><tr> <td>WordPress</td><td data-tds="skillShift" ></td></tr><tr> <td>React</td><td data-tds="skillShift"></td></tr></tbody> </table> </div><div class="g_6 skillWrap"> <h2 class="tCenter"></h2> <table> <tbody class="fe"> <tr> <td>JavaScript</td><td data-tds="skillShift"></td></tr><tr> <td>HTML5</td><td data-tds="skillShift"></td></tr><tr> <td>CSS3</td><td data-tds="skillShift" ></td></tr><tr> <td>Sass</td><td data-tds="skillShift" ></td></tr><tr> <td>JQuery</td><td data-tds="skillShift"></td></tr></tbody> </table> </div></div></div></section> <section id="about"> <a name="about"></a> <div class="grid cf"> <div class="row cf"> <div class="g_12 cf"> <h1 class="textStyle">A Bit About Me</h1> </div><div class="row cf"> <article class="g_8"> <h2 class="">I often judge books by their covers.</h2> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, numquam, necessitatibus! Itaque, a modi assumenda distinctio quasi dolores minima, eveniet sunt possimus consequatur libero, cum magnam id deleniti nihil provident.</p><div class="row cf"> <div class="g_4" style="height:200px; background:rgba(21,21,21,.5);"> </div><div class="g_4" style="height:200px; background:rgba(21,21,21,.5);"> </div><div class="g_4" style="height:200px; background:rgba(21,21,21,.5);"> </div></div></article> <aside class="g_4"> <h2>This is an aside</h2> <hr> <p>Possibly used to display an image</p><img src="http://placeimg.com/640/480/people/grayscale" alt="placeholder img"> </aside> </div></div></div></section> <section id="contact"> <a name="contact"></a> <div class="grid cf"> <div class="row cf"> <div class="g_12 cf"> <h1 class="textStyle">Contact Me</h1> </div></div><div class="row cf"> <div class="g_3"></div><div class="g_6"> <div id="formWrapper"> <form action=""> <div class="inputWrap"> <input type="text" name="name" id="name" required> <label for="name">Name: </label> </div><div class="inputWrap"> <input type="email" name="email" id="email" required> <label for="email">Email: </label> </div><div class="textareaWrap"> <textarea name="message" id="message" rows="5" required></textarea> <label for="message">Message: </label> </div><div> <button type="button" class='submitBtn' disabled="true">Submit</button> </div></form> </div></div><div class="g_3"></div></div></div></section> <footer class="grid cf"> <div class="row"> <div class="g_6 min2"> <div class="subFooter tCenter"> <h1 class="tCenter">Lorem Ipsum muspi merol.</h1> </div></div><div class="g_6 min2"> <div class="subFooter"> <h1 class="tCenter">Lorem Ipsum muspi merol.</h1> </div></div><div class="g_12"> <h4 class="tCenter">Made with <span class="heartIcon"></span> by Gerald James Carrow</h4> <h4 class="tCenter"><span class="heartIcon"></span>&nbsp; 2015-2016</h4> </div></div></footer> <div id="scrollTop"><a href="#pageTop"></a></div></body></html>
            
          
!
            
              .grid{margin: 0 auto; padding: 0 2em;}.grid.flex{width: 100%; max-width: 100%; padding: 0 2%; padding: 2em; font-size: 16px; padding-top: 0;}.row{display: block; overflow: hidden; clear: both;}*[class*="g_"].alpha{margin-left: 0;}*[class*="g_"].omega{margin-right: 0;}.g_1{width: 6.6666666666667%;}.g_2{width: 15%;}.g_3{width: 23.333333333333%;}.g_4{width: 31.666666666667%;}.g_5{width: 40%;}.g_6{width: 48.333333333333%;}.g_7{width: 56.666666666667%;}.g_8{width: 65%;}.g_9{width: 73.333333333333%;}.g_10{width: 81.666666666667%;}.g_11{width: 90%;}.g_12{width: 98.333333333333%;}*[class*="g_"]{margin-left: 0.83333333333333%; margin-right: 0.83333333333333%; margin-top: 0.5em; margin-bottom: 0.5em; float: left; display: block;}.grid img{max-width: 100%; height: auto;}.clear{clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}.clearfix:after{clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;}* html .clearfix, *:first-child + html .clearfix{zoom: 1;}*[class*="g_"].visible{background: #eee; border: 1px dotted #ccc;}@media all and (min-width: 1024px) and (max-width: 1280px){.grid{max-width: 1024px;}.show-desktop{display: block;}.hide-desktop{display: none;}.show-tablet{display: none;}.hide-tablet{display: block;}.show-phone{display: none;}.hide-phone{display: block;}}@media all and (min-width: 768px) and (max-width: 1024px){.show-desktop{display: none;}.hide-desktop{display: block;}.show-tablet{display: block;}.hide-tablet{display: none;}.show-phone{display: none;}.hide-phone{display: block;}}@media (max-width: 768px) and (min-width: 480px){.grid{margin-right: auto; margin-left: auto;}.grid *[class*="g_"]{float: none; width: auto; clear: both; display: block;}.grid *[class*="g_"] [class*="g_"]{margin-left: 0; margin-right: 0; width: 48%; display: inline-block;}.grid *[class*="g_"] .multPetList:nth-child(odd){margin-right: 4%;}.show-desktop{display: none;}.hide-desktop{display: block;}.show-tablet{display: block;}.hide-tablet{display: none;}.show-phone{display: none;}.hide-phone{display: block;}}@media all and (max-width: 480px){.grid *[class*="g_"]{float: none; width: auto; clear: both; display: block;}.grid *[class*="g_"] [class*="g_"]{margin-left: 0; margin-right: 0; width: 100%;}.grid{max-width: 100%;}.show-desktop{display: none;}.hide-desktop{display: block;}.show-tablet{display: none;}.hide-tablet{display: block;}.show-phone{display: block;}.hide-phone{display: none;}}@media screen and (min-width: 1200px){.grid{min-width: 1170px;}}
.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.grid:before,.grid:after,.grid-fluid:before,.grid-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical > .btn-group:before,.btn-group-vertical > .btn-group:after,.nav:before,.nav:after,.nv:before,.nv:after,.nv-header:before,.nv-header:after,.nv-collapse:before,.nv-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{content: " "; display: table;}.clearfix:after,.dl-horizontal dd:after,.grid:after,.grid-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical > .btn-group:after,.nav:after,.nv:after,.nv-header:after,.nv-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear: both;}@media screen and (max-width: 767px){#mainNavHeader .grid{padding: 0 1em;}#mainNavHeader .grid .ofTwo{margin-right: -15px; margin-left: -15px;}#mainNavHeader .grid .ofTwo ul{margin: 9.75px -15px; padding-left: 0;}#nv-collapse{padding-left: 15px; padding-right: 15px; overflow-x: hidden; border-top: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: height 1s linear;}.collapse{display: none;}#nv-collapse.showMenu{display: block;}}#showNav{z-index: 99999; width: 70px; height: 50px; margin: auto; position: fixed; left: 49%; left: calc(50% - 35px); top: -15px; display: block; background: none; font-size: 35px; line-height: 65px; cursor: pointer; color: darkgray; text-align: center; border: none; border-radius: 0 0 5px 5px; transition: all 0.2s linear;}#showNav .menuBar{width: 70%; height: 4px; margin: auto; border-radius: 5px; background: #887D7B; display: block; margin-top: 5px;}#showNav .menuBar:first-child{margin-top: 20px;}#showNav .menuBar:last-child{margin-bottom: 5px;}#showNav:hover{top: -5px;}#showNav:hover div span{width: 59%;}button.nv-toggle{border-radius: 4px; background: transparent; padding: 9px 10px; float: right; position: relative; margin-right: 15px; margin-top: 13px; margin-bottom: 13px; border: none;}.nv-toggle .hamburger + .hamburger{margin-top: 4px;}.hamburger{display: block; height: 2px; width: 32px; border: 1px solid transparent; border-radius: 1px; background: #030303;}.crossIt{width: 40px; border-radius: 3px; background: red; transition: all 0.5s linear;}.crossIt:nth-child(3){transform: translateY(7px) rotate(90deg); background: blue;}.crossIt:nth-child(2){background: lightgray; display: none;}.nv-toggle:hover .crossIt:nth-child(3){transform: rotate(180deg);}.nv-toggle:hover .crossIt:nth-child(2){height: 6px; display: block;}@media screen and (min-width: 768px){button.nv-toggle{display: none;}#nv-collapse .nv-right{float: right; font-size: 20px;}#nv-collapse ul li{float: left;}#nv-collapse ul li a{color: #f7f7f8; text-decoration: none; padding: 0px 15px; line-height: 21px; font-size: 21px;}}li{list-style-type: none;}.screen-reader{display: none;}.nav_overlay_container{position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; opacity: 0; height: 0%; transition: all 0.5s linear; z-index: 9999; padding: 0; margin: 0;}.overlay_show{width: 100%; height: 100%; opacity: 1; left: 0;}.nav_overlay{display: block; width: 100%; height: 100%;}.navigation{background: rgba(68, 67, 73, 0.88); display: block; width: 100%; margin: 80px auto;}.navigation ul{width: 100%; list-style-type: none;}.navigation ul li{margin-left: -40px;}.navigation a{text-decoration: none; font-family: helvetica, verdana, source sans pro; font-size: 3em; font-size: 3rem; color: #f2f3f6; display: block; width: 100%; margin-top: 12px; text-align: center;}.navigation a:hover{color: #887D7B;}header{background: url(http://gjcarrow.com/img/stardust.png); padding-top: 50px; background-position-x: 0%; min-height: 600px;}header .sectionRow,header div{border: none;}.greeting{text-align: center; padding: 10px 20px; font-size: 24px; font-family: consolas; color: #887D7B;}.greeting div{width: 50%; height: auto; margin: auto;}.greeting h1{font-family: consolas,monospace; font-size: 3em; font-size: 3em; font-weight: 400; margin-bottom: 0; color: #887D7B; text-transform: lowercase;}.greeting p{font-family:consolas,monospace,sans serif;font-size: 1.5em; font-size: 1.5rem; font-weight: 100; color: #887D7B; text-transform: lowercase;}.greeting p a{text-decoration: none; color: #a2a2a2;}.greeting p a:hover{text-decoration: underline;}.navDown{display: block; width: 55px; height: 35px; background: url(http://gjcarrow.com/img/pageSprite.png) no-repeat; background-position: -52px 0; margin: auto;}.mtnfifty{margin-top: -145px;}#portfolio{background-color: #121212; color: #887D7B; font-family: pt serif, cursive;}#portfolio .g_4{border: 1px solid #222222; text-align: left;}#portfolio .g_4 h1{margin-bottom: 0; font-size: 2.3em;}#portfolio .g_4 .portItemInfo{padding: 0 10px; min-height: 200px;}#portfolio hr{border: none; border-top: 1px solid #111111; border-bottom: 1px solid #222222; margin: 0px -10px;}.portItemTech{text-align: left; padding: 0 10px;}.portItemTech h3{margin-bottom: 0;}.portItemTech ul{margin-left: -15px;}.portItemTech li{list-style-type: circle; font-style: italic;}#skills{background: url(http://gjcarrow.com/img/bg.jpg); color: #887D7B;}a[data-scroll=bottom]{text-decoration: none; color: orange; display: block; width: 100%; text-align: center;}.growingDiv{box-sizing: border-box; width: 15%; margin-left: 20px; height: 0px; border: 1px solid #887D7B; background: #18191C; display: inline-block; transition: height 1.3s ease-out;}.growingDiv.grow{height: 200px;}table{width: 100%;}table thead tr > td{width: 100%; font-size: 2em;}table tr{height: 40px; overflow: hidden;}table tbody tr td{height: 40px; line-height: 40px; text-align: left; display: inline-block;}table tbody tr td:first-child{width: 25%;}table tbody tr td:last-child{transition: width 2s ease-in-out; width: 1px;}tbody tr td.seventy_five:last-child{width: 75%;}tbody tr:first-of-type td.seventy_five:last-child{width: 65%; background: #8c4005;}tbody tr:nth-of-type(2) td.seventy_five:last-child{width: 60%; background: #6a6880;}tbody tr:nth-of-type(3) td.seventy_five:last-child{width: 62%; background: #d31603;}tbody tr:nth-of-type(4) td.seventy_five:last-child{width: 65%; background: #002d37;}tbody tr:nth-of-type(5) td.seventy_five:last-child{width: 61%; background: #e7dfcc;}tbody.fe tr:first-of-type td.seventy_five:last-child{background: red; width: 73%;}tbody.fe tr:nth-of-type(2) td.seventy_five:last-child{background: #0074d9; width: 72%;}tbody.fe tr:nth-of-type(3) td.seventy_five:last-child{background: #8c4005; width: 58%;}tbody.fe tr:nth-of-type(4) td.seventy_five:last-child{background: candy; width: 62%;}tbody.fe tr:nth-of-type(5) td.seventy_five:last-child{width: 62%;}#about{background: #0E0C0E; color: #887D7B;}#contact{background: #1F1F1F; color: #887D7B;}#contact form{width: 100%; margin: auto;}#contact .inputWrap, #contact .textareaWrap{padding: 20px 0px 10px; position: relative;}#contact form label, #contact .textareaWrap label{font-size: 1.2em; display: block; position: absolute; top: 25px; color: #887D7B; transition: all 0.5s linear;}#contact .textareaWrap textarea, #contact .inputWrap input{border: none; outline: none; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid #887D7B; color: #1f1f1f; font-family: serif; font-size: 2em; width: 100%; text-indent: 3px;}#contact .textareaWrap textarea:focus + label, #contact .textareaWrap textarea:valid + label, #contact .inputWrap input:focus + label, #contact .inputWrap input:valid + label{top: -3px; color: #fff;}button.submitBtn{border: none; outline: none; padding: 15px 30px; border-radius: 7px; font-size: 16px; color: linen; background: rgba(0, 0, 255, 0.9); display: block; margin: auto;}*, *:before, *:after{box-sizing: border-box;}.tCenter{text-align: center;}.tRight{text-align: right;}.textStyle{text-align: center; font-size: 3.5em; font-size: 3.5rem; text-transform: uppercase; margin-bottom: 0;}.textStyle:first-letter{font-size: 4.5em; font-size: 4.5rem;}.min2{min-height: 200px;}*:focus{outline: none; border: none;}body{margin: 0; font: 100% open sans, lato, merriweather, georgia, serif;}#mainNavHeader.navbar-shrink{padding: 0;}#navbar-collapse li a{font: 16px open sans, lato, helvetica;}.sectionRow{min-height: 800px; text-align: center;}#greeting{min-height: 200px; width: 50%; display: block; margin: auto; border: 1px solid #f2f3f6;}#greeting h1{color: #887D7B; font: merriweather, georgia, serif;}blockquote, .bq{border: 1px solid #777; padding: .75em; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);}.bq blockquote{border: none; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none;}section h1:first-of-type{font-family: dense; text-transform: lowercase;}section article,section aside{box-sizing: border-box; padding: 20px 20px;}section hr{border: none; border-top: 1px solid black; border-bottom: 1px solid #323232;}.navigation a{font-family: dense; font-size: 5em; font-size: 5rem;}footer{background: #010101; color: #887D7B; padding-bottom: 100px;}#scrollTop{display: none;}#scrollTop > a{width: 50px; height: 50px; background: rgba(0, 0, 0, 0.3) url(http://gjcarrow.com/img/upArrow.png) no-repeat center; border-radius: 5px 0 0 5px; position: fixed; top: 80%; left: calc(100% - 50px);}.heartIcon{display: inline-block; vertical-align: middle; width: 30px; height: 30px; background: url(http://gjcarrow.com/img/heart.png) no-repeat; background-position: 0 0;}footer .min2{background: rgba(150, 150, 150, 0.06);}h4:last-child > .heartIcon{background-position: -32px 0px;}@media screen and (min-width: 768px){header .grid{padding-top: 20px;}.showPhone{display: none;}.navigation{width: 70%;}.textStyle{font-size: 4.5em; font-size: 4.5rem;}.textStyle:first-letter{font-size: 5.5em; font-size: 5.5rem;}.skillWrap{padding-bottom: 100px;}}@media screen and (max-width: 767px){section{padding: 35px 0 0;}.showTablet{display: none;}.textStyle{font-size: 3.5em; font-size: 3.5rem;}.textStyle:first-letter{font-size: 4.5em; font-size: 4.5rem;}}@media screen and (max-width: 480px){h1, h2, h3, h4, h5, h6, p, section, aside, .row, article{text-align: center;}table, tr, td, thead, tbody{text-align: left;}.textStyle{font-size: 2.8em; font-size: 2.8rem;}.textStyle:first-letter{font-size: 3.8em; font-size: 3.8rem;}}
header{animation: flowingStars 7s linear; animation-iteration-count: infinite;}.showGreeting{animation: showGreeting 5s linear; animation-delay: 2; animation-iteration-count: 1;}@keyframes flowingStars{0%{background-position: -50% -50%;}100%{background-position: 150% 150%;}}@keyframes showGreeting{0%{transform: translateY(500px); opacity: 0;}100%{transform: translateY(0px); opacity: 1;}}
            
          
!
            
              ;!function(e,t,n){function r(e){return Object.prototype.toString.call(e).slice(8,-1)}function o(e){return Array.isArray&&Array.isArray(e)||"Array"===r(e)?e:Array.prototype.slice.call(e)}function a(e){var t={},n=function(e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])};n(arguments[0]);for(var r=0;r<arguments.length;r++){var o=arguments[r];n(o)}return t}function u(e){var t={},n=function(e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&("[object Object]"===Object.prototype.toString.call(e[n])?t[n]=u(t[n],e[n]):t[n]=e[n])};n(arguments[0]);for(var r=0;r<arguments.length;r++){var o=arguments[r];n(o)}return t}function i(e,n){var r=n||t;return r.getElementsByTagName(e)}function s(e,t,n,r){r=r||!1,"undefined"!=typeof addEventListener?e.addEventListener(t,n,r):"undefined"!=typeof attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n}function c(e,t,n){"undefined"!=typeof removeEventListener?e.removeEventListener(t,n,!1):"undefined"!=typeof detachEvent?e.detachEvent("on"+t,n):e["on"+t]=null}function f(e){return"undefined"!=typeof e.target?e.target:"undefined"!=typeof e.srcElement?e.srcElement:!1}function d(e){"undefined"!=typeof event.preventDefault?event.preventDefault():event.returnValue=!1}function l(e){return"number"==typeof e.charCode?e.charCode:e.keyCode}function v(e,t){return e.classList.add(t)}function y(e,t){return this.hasClass(e,t)?e.classList.remove(t):n}function g(e,t){return e.classList.contains(t)}function p(e,t){e.classList.toggle(t)}function m(t,n){return e.getComputedStyle(t).styleProp}function h(e){return t.getElementById(e)}function E(e){return t.getElementsByClassName(e)}function C(e){var t=/^\s+|\s+$/g;return"string"==={}.toString.call(e).slice(8,-1).toLowerCase()?e.replace(t,""):"Please provide a string"}function L(e){return e.reduce(function(e,t){return e[t]=e[t]?e[t]+1:1,e},{})}var O={addEvent:s,removeEvent:c,prevDefault:d,getTarget:f,getCharCode:l,hasClass:g,has:g,addClass:v,add:v,removeClass:y,remove:y,toggle:p,getById:h,getByTag:i,getByClass:E,toArray:o,isWhat:r,getStyle:m,trimStr:C,extend:a,deepExtend:u,sortArrToObjOfUniqKeys:L};"function"==typeof define&&define.amd?define(O):e._util=O}(window,document,void 0);
"use strict";var $util=window._util,smoothie=function(){function t(){var t=$util.toArray(s);t.forEach(function(t){$util.addEvent(t,"click",function(t){a(t)},!1)})}function a(t){$util.prevDefault(t),$util.removeClass(c,"overlay_show");var a=$util.getTarget(t),n=$util.getById(a.hash.slice(1));i(n)}function i(t){var a=window.scrollY,i=t.offsetTop,r=i-a;o=Math.abs(r),e=Math.round(r/o*(o/60)),n()}function n(){var t=Math.abs(e);return o>t?(window.scrollBy(0,e),o-=t,r=u(n),void 0):(window.scrollBy(0,o*(e/t)),void cancelAnimationFrame(r))}var o,e,r,l=$util.toArray($util.getByTag("a")),u=window.requestAnimationFrame,c=$util.getByClass("nav_overlay_container")[0],s=l.filter(function(t){return t.href&&-1!==t.href.indexOf("#")&&t.search===location.search&&("/"+t.pathname===location.pathname||t.pathname===location.pathname)});return{init:t,overlayHideClass:c}}();smoothie.init();
var showNav=$util.getById("showNav"),overlayHideClass=$util.getByClass("nav_overlay_container")[0],scrollTop=$util.getById("scrollTop"),header=$util.getById("header");header=$util.getByClass("g_6",header)[0];var firstSection=$util.getById("portfolio");header.style.height=window.innerHeight+"px",$util.addEvent(document.body,"click",function(){var e=overlayHideClass,l="overlay_show";return $util.hasClass(e,l)?($util.removeClass(e,l),void $util.removeEvent(document.body,"click")):"Doesn't have that class"},!0),$util.addEvent(window,"scroll",function(e){var l=parseInt(firstSection.offsetTop);scrollTop.style.display=window.scrollY>=l?"block":"none"},!1),$util.addEvent(showNav,"click",function(){$util.hasClass(overlayHideClass,"overlay_show")?$util.removeClass(overlayHideClass,"overlay_show"):$util.addClass(overlayHideClass,"overlay_show")},!1);
function skillSlide(){goodTds.forEach(function(e){var t=e.classList;t.toggle("seventy_five")}),didHerOnce=!0}var elems=document.getElementsByTagName("td"),didHerOnce=!1,allTds="function"==typeof Array.from?Array.from(elems):[].slice.call(elems,0),tble=document.getElementById("skills").offsetTop-200,ct=document.getElementById("about").offsetTop,goodTds=allTds.filter(function(e){return e.hasAttribute("data-tds")});window.onscroll=function(){window.scrollY>tble&&window.scrollY<ct&&(didHerOnce||skillSlide())};

            
          
!
999px
Loading ..................

Console