css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <body class="page-scroll" id="page-top">
	<nav class="navbar navbar-default navbar-fixed-top bg-light" id="myNav" role="navigation">
		<div class="container no-padding">
			<div class="navbar-header">
				<!-- nav menu icon toggle -->
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
					<span class="icon-bar top-bar"></span>
					<span class="icon-bar middle-bar"></span>
					<span class="icon-bar bottom-bar"></span>
				</button>
				<!-- navbar svg logo -->
				<a class="navbar-brand page-scroll" href="#page-top">
					<svg class="nav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/199/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 40 40" style="enable-background:new 0 0 41 41;" xml:space="preserve">
					<style type="text/css">
						.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#1A1C1C;transition:.45s;}
						.st0:hover{fill:#9dbdc6;}
					</style>
					<g>
						<path class="st0" d="M13.68,13.114h4.426h0.177h9.692c0.046-0.002-0.657-0.002,0.135-0.002c1.619-0.002,2.608,0.903,2.139,2.401
							l-0.813,2.589c-0.256,0.809-0.902,1.53-1.788,1.953l2.849,7.835c-13.793-2.695-9.446-8.267-3.501-4.942
							c-0.608-1.044-1.988-2.368-6.261-2.032c-2.367,0.184-6.45,0.749-10.232,2.32L13.68,13.114L13.68,13.114z M0.5,0.5h40v40h-40V0.5L0.5,0.5z"/>
					</g>
					</svg>
				</a>
				<!-- navbar svg logo end -->

				<div class="collapse navbar-collapse bg-light" id="myNavbar">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#portfolio" class="page-scroll">Portfolio</a></li>
						<li><a href="#about" class="page-scroll">About</a></li>
						<li><a href="#skills" class="page-scroll">Skills</a></li>
						<li><a href="#contact" class="page-scroll">Contact</a></li>
					</ul>
				</div>
				<!-- navbar-collapse end -->
			</div>
			<!-- navbar-header end -->
		</div>
		<!-- container end -->
	</nav>

	<!-- hero -->
	<section class="hero-section wrap">
		<div class="hero-bg"></div>
		<div class="container no-padding padding-sm">
			<div class="hero-intro">
				<span>Hi I'm RW</span>
				<div class=title>I Create Branding &<br> Develop Websites</div>
				<a href="#portfolio" class="page-scroll"><button class="btn-lg hero-btn">Take A Look</buton></a>
			</div>
		</div>
	</section>
	<!-- hero end -->

	<!-- portfolio gallery -->
	<section class="portfolio-section" id="portfolio">
		<div class="box-expand"></div>
		<div class="container-fluid">
			<div class="row no-gutter gallery-boxes">
				<!-- portfolio box1 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box1 end -->
				<!-- portfolio box2 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box2 end -->
				<!-- portfolio box3 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box3 end -->
				<!-- portfolio box4 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box4 end -->
				<!-- portfolio box5 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box5 end -->
				<!-- portfolio box6 -->
				<div class="col-lg-4 col-sm-6">
					<a href="#" class="portfolio-box">
						<img class="img-responsive" src="https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/quickpay-portf-thmb-lg.jpg">
						<div class="portfolio-box-caption">
							<div class="portfolio-box-caption-content">
								<div class="project-category text-faded">
									Category
									<div class="project-name">
										Project Name
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<!-- portfolio box6 end -->
			</div>
		</div>
	</section>
	<!-- portfolio gallery end -->

	<!-- about -->
	<section class="about-section bg-light" id="about">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<img class="img-responsive about-img" src= "https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/rw-mtb-profile-img.jpg">
				</div>
				<div class="col-md-6">
					<h2>About</h2>
					<div class="about-content">
						<p>Hello my name is Rick Wisneske and I'm a San Diego based Web Developer and Designer. It's been a year since I've decided to change focus from 12 years of product and print design to a self taught journey to becoming a professional Web Developer. What I believe my design experience has taught me is how to work under impossible deadlines. When the pressure increases I stay positive, humble, and productive within a team or freelance project. I’ve learned how to put my ego aside and just get the work done.</p>
						<p>I'm really happy to be on this road and welcome all the new challenges and triumphs ahead. The comradery in the developer community is really amazing to me. It keeps me motivated to work out problems when I’m completely stuck. My time and energy is dedicated to learning more and progressing each day to achieve my goal of being a dependable and knowledgeable web-developer who clients and development teams want to work with.</p>
						<p>I’m currently looking for front-end web development freelance clients or work with a development team. Please feel free to contact me about your project, networking, or just talk shop.</p>
						<p> Thank you for your time</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- about end -->
	
	
	<!-- skils -->
	<section class="skills-section bg-light padding-sm" id="skills">
		<div class="container">
			<div class="row">
				<h2 class="center">Skills</h2>
				<div class="skills-bar-container">
					<ul>
						<label>HTML5</label>
						<span class="percent" id="html-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-html"></span>
						</li>

						<label>CSS3</label>
						<span class="percent" id="css-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-css"></span>
						</li>

						<label>Javascript / jQuery</label>
						<span class="percent" id="javascript-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-javascript"></span>
						</li>

						<label>Git</label>
						<span class="percent" id="git-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-git"></span>
						</li>
						
						<label>PHP</label>
						<span class="percent" id="php-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-php"></span>
						</li>
						
						<label>Wordpress</label>
						<span class="percent" id="wordpress-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-wordpress"></span>
						</li>

						<label>NodeJS</label>
						<span class="percent" id="nodejs-percent"></span>
						<li>
							<span class="progressbar progressred" id="progress-nodejs"></span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</section>
	<!-- skills end -->

	<!-- contact -->
	<footer class="contact-section bg-dark" id="contact">
		<div class="container">
			<div class="row contact-info lt-blue">
				<div class="row">
					<div class="col-sm-12">
						<div class="flex contact-icons center img-responsive">
							<a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
							<a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
							<a href="#" target="_blank"><i class="fa fa-linkedin"></i></a>
							<a href="#" target="_blank"><i class="fa fa-github"></i></a>
							<a href="#" target="_blank"><i class="fa fa-codepen"></i></a>
						</div>
					</div>
				</div>
				<div class="col-xs-12">
					<a href="#" class="center email-sm"><h3>rwisneske@gmail.com</h3></a>
				</div>
			</div>
		</div>
	</footer>
	<!-- contact end -->
</body>
<!-- body end -->
            
          
!
            
              * ,
*::before,
*::after {
	border: none;
	border-radius: 0 !important;
	box-shadow: none;
}

a {
	text-decoration: none !important;
}

body {
	box-sizing: border-box;
	font-family: "Roboto", Helvetica, sans serif;
	z-index: -2;
}

.bg-light {
	background: #daeaef;
}

.bg-dark {
	background: #2c3e50;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.flex {
	align-items: center;
	display: flex;
	flex-direction: row;
	font-size: 2em;
	justify-content: space-around;
	height: 100%;
}

h1,
h2,
h3 {
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
}

.lt-blue {
	color: #daeaef;
}

.drk-blue {
	color: #2c3e50;
}

.no-gutter {
	margin-left: 0;
	margin-right: 0;
}

.no-gutter > [class*='col-'] {
	padding-left: 0;
	padding-right: 0;
}

.no-padding {
	padding: 0;
}

@media screen and (max-width: 768px) {
	.padding-sm {
		padding: 0 20px;
	}
}

.row {
	margin-left: -15px;
	margin-right: -15px;
}

.section {
	padding: 250px 0;
}

@media screen and (max-width: 768px) {
	.section {
		padding: 150px 0;
	}
}

.text-faded {
	color: rgb(255, 255, 255);
	color: rgba(255, 255, 255, 0.7);
}

.title {
	color: #191b1c;
	font-family: "Roboto Slab", serif;
	font-size: 3.85em;
	font-weight: bold;
	letter-spacing: -.01em;
	line-height: 1em;
	word-spacing: -.05em;
}

@media screen and (max-width: 768px) {
	.title {
		font-size: 3.45em;
		letter-spacing: -.009em;
		line-height: 1em;
		word-spacing: -.04em;
	}
}


/* navbar */

.navbar-header {
	float: none;
	height: 80px;
}

.navbar-fixed-top .navbar-collapse {
  max-height: 450px;
}

.navbar-fixed-top a {
	display: block;
	transition: .45s;
}

@media screen and (max-width: 768px) {
	.nav .navbar-nav .navbar-right {
		border: none !important;	
		padding: 0 15px !important;
	}
}

.navbar-default .navbar-nav li a {
	background-color: transparent !important;
	color: #1a1c1d;
	font-family: "Roboto", Helvetica, sans serif;
	font-size: .96em;
	font-weight: normal;
	margin-top: 10px;
	padding-top: 20px;
	text-transform: uppercase;
}

@media screen and (max-width: 768px) {
	.navbar-default li a {
		font-family: "Roboto", Helvetica, sans serif;
		font-size: 1.55em;
		font-weight: 400;
		margin: 50px auto;
		text-transform: uppercase;
	}
	
	.navbar-default li a:hover {
		color: #9dbdc6 !important;
	}
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
	color: #9dbdc6;
}

.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:focus {
	color: #9dbdc6;
}

.navbar-toggle {
	margin: 25px;
}

@media screen and (max-width: 768px) {
	.navbar-toggle {
		border: none;
		background: transparent !important;
	}
	
	.navbar-default .navbar-toggle .icon-bar {
		background-color: #1a1c1d;
	}
	.navbar-default .navbar-toggle:hover .icon-bar {
		background-color: #9dbdc6;
		transition: .45s;
	}
	
	/* nav-toggle icon animation*/
	.navbar-toggle .icon-bar {
		width: 22px;
		transition: all 0.1s;
	}
	.navbar-toggle .top-bar {
		transform-origin: 10% 10%;
		transform: rotate(45deg);
	}
	.navbar-toggle .middle-bar {
		opacity: 0;
	}
	.navbar-toggle .bottom-bar {
		transform: rotate(-45deg);
		transform-origin: 10% 90%;
	}
	.navbar-toggle.collapsed .top-bar {
		transform: rotate(0);
	}
	.navbar-toggle.collapsed .middle-bar {
		opacity: 1;
	}
	.navbar-toggle.collapsed .bottom-bar {
		transform: rotate(0);
	}
	/* nav-toggle animation end*/
	
	.navbar-toggle:hover {
		background: transparent !important;
	}
}

@media screen and (max-width: 768px) {
	.navbar-brand {
		margin-left: 15px !important;
	}
	
	.navbar-collapse {
		border: none;
		box-shadow: none;
/* 		clear: both; */
		text-align: center;
		width: 100%;
	}
}
/* navbar end */


/* hero */
@media screen and (min-width: 1024px) {
	.hero-bg {
		background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-lg-Ret.jpg") no-repeat top right;
		background-size: 2200px;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transform: scale(1.1);
		transition: .25s ease;
		width: 100%;
		z-index: -5;
	}
}

@media screen and (max-width: 1024px) {
	.hero-bg {
		background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-med-Ret.jpg") no-repeat top right;
		background-size: 1650px;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transform: scale(1.1);
		transition: .25s ease;
		width: 100%;
		z-index: -5;
	}
}

@media screen and (max-width: 768px) {
	.hero-bg {
		background: url("https://dl.dropboxusercontent.com/u/8239023/RW_Design/fcc-rwportfolio/images/wave-hero-img-med-Ret.jpg") no-repeat top right;
		background-size: 1500px;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transform: scale(1.1);
		transition: .25s ease;
		width: 100%;
		z-index: -5;
	}
}


.hero-btn {
	background-color: transparent;
	border: 2px solid #1d1f20 !important;
	font-family: 'Roboto', Helvetica, sans serif;
	font-size: 1.25em;
	margin-top: 1.5em;
	transition: .45s ease;
}

.hero-btn a {
	color: #1d1f20;
	text-decoration: none;
}

.hero-btn:hover, .hero-btn:focus {
	background-color: #e74c3c;
}

@media screen and (max-width: 768px) {	
	.hero-btn {
		font-size: 1.36em;
		margin-top: 1.15em;
	}
}

.hero-section {
	padding-top: 275px;
	padding-bottom: 525px;
}

@media screen and (max-width: 1024px) {
	.hero-section {
		padding-top: 275px;
		padding-bottom: 125px;
	}
}

@media screen and (max-width: 768px) {
	.hero-section {
		padding-top: 275px;
		padding-bottom: 125px;
	}
}

.hero-intro {
	text-align: right;
	width: 100%;
}

.hero-intro > span {
	color: #191b1c;
	font-size: 1.56em;
	font-weight: normal;
	line-height: 1.96em;
}

@media screen and (max-width: 768px) {
	.hero-intro > span {
		color: #191b1c;
		font-size: 1.26em;
		font-weight: normal;
		line-height: 1.56em;
	}
}

.wrap {
	overflow: hidden;
	position: relative;
}
/* hero end */


/* portfolio gallery */

.box-expand {
	background: #FFF;
	display: none;
	height: 100%;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 25;
}

.gallery-boxes {
	z-index: -1;
}

.portfolio-box {
	display: block;
	margin: 0 auto;
	position: relative;
	width: 100%;
}

.portfolio-box .portfolio-box-caption {
	background: rgb(231, 76, 60);
	background: rgba(231, 76, 60, 0.9);
	bottom: 0;
	color: white;
	display: block;
	height: 100%;
	opacity: 0;
	position: absolute;
	text-align: center;
	transition: all 0.35s;
	width: 100%;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
	font-size: .95em;
	font-weight: normal;
	text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-family: 'Roboto', Helvetica, sans-serif;
	padding: 0 15px;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-family: 'Roboto Slab', serif;
	font-size: 1.65em;
	text-transform: capitalize;
}

.portfolio-box:hover .portfolio-box-caption,
.portfolio-box:focus .portfolio-box-caption{
	opacity: 1;
}
/* portfolio gallery end */


/* about */

.about-content {
	padding: 5px 0;
}

.about-img {
	height: auto;
	padding: 25px 0;
	width: 100%;
}

.about-section {
	padding: 85px 0 30px;
}

.about-section p {
	text-align: justify;
}
/* about end */


/* skills */

.skills-section {
	padding-bottom: 100px;
	padding-top: 50px;
}

.skills-bar-container ul {
	list-style: none;
	padding: 25px 0;
	width: 100%;
}

.skills-bar-container li {
	background: #1A1C1C;
	height: 5px;
	margin-bottom: 45px;
	padding-left: 0px;
	position: relative;
	width: 100%;	
}

.skills-bar-container h1 {
	margin-bottom: 50px;
}

.skills-bar-container label {
	color: #1A1C1C;
	position: relative;
	font-size: .96em;
	font-weight: 300;
}

.skills-bar-container .percent {
	color: #1A1C1C;
	font-size: .96em;
	float: right;
}

.progressbar {
	position: absolute;
	width: 0%;
	height: 100%;
	border-radius: 5px;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}

#progress-html {
	animation-name: progress-html;
	animation-delay: .7s;
}

#progress-css {
	animation-name: progress-css;
	animation-delay: 1.4s;
}

#progress-javascript {
	animation-name: progress-javascript;
	animation-delay: 2.1s;
}

#progress-git {
	animation-name: progress-git;
	animation-delay: 2.8s;
}

#progress-php {
	animation-name: progress-php;
	animation-delay: 3.5s;
}

#progress-nodejs {
	animation-name: progress-nodejs;
	animation-delay: 4.2s;
}

#progress-wordpress {
	animation-name: progress-wordpress;
	animation-delay: 4.9s;
}

.progressred {
	background-color: #ff3d2e;
}

@keyframes progress-html {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}

@keyframes progress-css {
	0% {
		width: 0%;
	}
	100% {
		width: 90%;
	}
}

@keyframes progress-javascript {
	0% {
		width: 0%;
	}
	100% {
		width: 50%;
	}
}

@keyframes progress-git {
	0% {
		width: 0%;
	}
	100% {
		width: 55%;
	}
}

@keyframes progress-php {
	0% {
		width: 0%;
	}
	100% {
		width: 35%;
	}
}

@keyframes progress-nodejs {
	0% {
		width: 0%;
	}
	100% {
		width: 25%;
	}
}

@keyframes progress-wordpress {
	0% {
		width: 0%;
	}
	100% {
		width: 65%;
	}
}
/* skills end */


/* contact */

.contact-section {
	height: 20%;
}

.contact-icons {
	padding: 25px 0;
	max-width: 700px;
}

.contact-info {
	padding-bottom: 150px;
	padding-top: 100px;
}

.contact-info a {
	color: #daeaef;
}

.contact-info a:hover {
	color: #ff3d2e;
	transition: .45s ease;
}
/* contact end */


            
          
!
            
              $(function() {

	// // Parallax Background Image
	var lFollowX = 0,
    lFollowY = 0,
    x = 0,
    y = 0,
    friction = 1 / 35;

	function moveBackground() {
		x += (lFollowX - x) * friction;
		y += (lFollowY - y) * friction;

		translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

		$('.hero-bg').css({
			'-webit-transform': translate,
			'-moz-transform': translate,
			'transform': translate
		});

		window.requestAnimationFrame(moveBackground);
	}

	$(window).on('mousemove click', function(e) {

		var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
		var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
		lFollowX = (-10 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
		lFollowY = (-5 * lMouseY) / 100;
	});

	moveBackground();
	
	
	// Portfolio Box Expand
	
	
	
	
	// jQuery for page scrolling feature - requires jQuery Easing plugin
	$('a.page-scroll').bind('click', function(event) {
		var $anchor = $(this);
		$('html, body').stop().animate({
			scrollTop: ($($anchor.attr('href')).offset().top - 79)
		}, 1250, 'easeInOutExpo');
		event.preventDefault();
	});
	
	

	// // Highlight the top nav as scrolling occurs
	$('body').scrollspy({
		target: "#myNav",
		offset: 80
	});

	
	
	// Fixed Nav Menu Navbar Shrink on Scroll

	
	
	// Closes the Responsive Menu on Menu Item Click
	$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
		$('.navbar-toggle:visible').click();
	});

	
	
	// Skills Bars Animation
	setTimeout(function() {
		$('#html-percent').html('100%');
	}, 2800);

	setTimeout(function() {
		$('#css-percent').html('90%');
	}, 3500);

	setTimeout(function() {
		$('#javascript-percent').html('50%');
	}, 4200);
	
	setTimeout(function() {
		$('#git-percent').html('70%');
	}, 4200);

	setTimeout(function() {
		$('#php-percent').html('35%');
	}, 4900);

	setTimeout(function() {
		$('#nodejs-percent').html('25%');
	}, 5600);
	
	setTimeout(function() {
		$('#wordpress-percent').html('65%');
	}, 5600);

	
	
	// Fit Text Plugin for Main Header
	// $("h1").fitText(
	// 	1.2, {
	// 		minFontSize: '35px',
	// 		maxFontSize: '65px'
	// 	}
	// );

	// // Offset for Main Navigation
	// $('#mainNav').affix({
	// 	offset: {
	// 		top: 100
	// 	}
	// })
	
	
	
	// Touch Events
	function onTouch(evt) {
  evt.preventDefault();
  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
    return;

  var newEvt = document.createEvent("MouseEvents");
  var type = null;
  var touch = null;

  switch (evt.type) {
    case "touchstart": 
      type = "mousedown";
      touch = evt.changedTouches[0];
      break;
    case "touchmove":
      type = "mousemove";
      touch = evt.changedTouches[0];
      break;
    case "touchend":        
      type = "mouseup";
      touch = evt.changedTouches[0];
      break;
  }

  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
  evt.originalTarget.dispatchEvent(newEvt);
	}
	


	// Initialize WOW.js Scrolling Animations
	new WOW().init();

});
            
          
!
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.
Loading ..................

Console