Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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>
	<meta charset="UTF-8">
	<title>Lewis Alberto Briffa</title>
	<link href='https://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="styles/main.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"
	<!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

</head>
<body>
	
		<!-- LANDING PAGE -->
		<section id="home">
			<!-- OVERLAY -->
			<div class="overlay">
				<!-- PRIMARY NAVIGATION -->
				<nav role="navigation">
					<ul class="vertical-list">
						<li><a href="#home">Home</a></li>
						<li><a href="#about">About me</a></li>
						<li><a href="#portfolio">Portfolio</a></li>
						<li><a href="#contact" >Contact Me</a></li>
					</ul>
				</nav>
				<!-- END OF PRIMARY NAVIGATION -->

				<!-- CONTAINER -->
				<div class="container">
					<h1><span class="logo">lab</span><small>web / automation development</small></h1>
						<ul class="social-links vertical-list">
						<li><a href="https://twitter.com/labDevelopments" class="noir twitter" target="_blank">Twitter</a></li>
						<li><a href="https://www.planecode.co.uk" class="noir linkedin" target="_blank">Blog</a></li>
						<li><a href="https://www.freecodecamp.com/labriffa" class="noir freecodecamp" target="_blank">freeCodeCamp</a></li>
					</ul>
				</div>
				<!-- END OF CONTAINER -->
			</div>
			<!-- END OF OVERLAY -->
		</section>
		<!-- END OF LANDING PAGE -->


		<!-- ABOUT -->
		<section id="about">
			<!-- CONTAINER -->
			<div class="container">
				<h2>a little about me...</h2>
				<div class="row info">
					<div class="col-sm-8">
						<p>
							I'm currently studying Software Engineering at Salford University having just completed my 2nd year. I obsess over the minor details in CSS/HTML and am passionate in getting computers to more effectively work on your side by freeing you of the burdens of carrying out repetitive tasks through automative processes.
						<span class="signature">.lewis briffa</span>
					</div>

					<div class="col-md-4">
						<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688702/codepen/portfolio/profile.jpg" alt="Lewis Alberto Briffa" class="img-responsive img-circle">
					</div>
				</div>
				
				<div id="skill-set">
					<h3>Skills</h3>
					<ul class="vertical-list">
						<li>
							<ul class="vertical-list skills" id="web-development-skills">
								<li>HTML</li>
								<li>CSS</li>
								<li>JavaScript</li>
							</ul>
						</li>
						<li>
							<ul class="vertical-list skills" id="automation-skills">
								<li>AutoHotKey</li>
							</ul>
						</li>

						<li>
							<ul class="vertical-list skills" id="misc-skills">
								<li>Regular Expressions</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!-- END OF CONTAINER -->
		</section>
		<!-- END OF ABOUT -->

		<!-- PORTFOLIO -->
		<section id="portfolio">
			
					<!-- CONTAINER -->
					<div class="container">
						<h2>some of my work...</h2>
					</div>
					<!-- END OF CONTAINER -->
					
					<div class="container">
						<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Designed using Sketch, developed using PHP whilst incorporating the BEM methodology. A wide range of 
											hooks and filters were utilized to create an E-Commerece themed WordPress site that offers a high degree of 
											color customization to reflect company branding.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>PHP</li>
											<li>BEM</li>
											<li>SASS</li>
											<li>Sketch</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688745/codepen/portfolio/venditore.png" alt="Editorial Monitoring Automated Excel Screenshot">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>WordPress (WooCommerce) Theme: Venditore</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->

							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Designed using the Selenium library - to fully automate the task of scraping the EGi news website. I then made use of the COM Excel object to create a spreadsheet and paste the headlines from the scraping into automatically created tabs revelant to the news sectors.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>Python</li>
											<li>Selenium</li>
											<li>COM (Component Object Model)</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688773/codepen/portfolio/editorial_excel.jpg" alt="Editorial Monitoring Automated Excel Screenshot">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Editorial Monitoring Job - Automated</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->
						
							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Written using pure JavaScript and the STAND4S Network's quote API, users can do a general search for quotes, get a random quote or can search for quotes from particular authors. Twitter social integration is then included to allow them to tweet it.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>HTML5</li>
											<li>CSS3</li>
											<li>JavaScript</li>
											<li>XML</li>
											<li>STAND4S Network API</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688815/codepen/portfolio/quote_machine.jpg" alt="Quote Machine in Action">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Quote Machine</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->

						<!-- COLUMN 3 -->
							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Was achieved using the Google Maps API to geocode user search terms, data was then retrieved from the Forecast IO API. Users can click on any day in the seven day cycle to get a quick summary on the predicated forecast.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>Google Maps API</li>
											<li>Forecast API</li>
											<li>AJAX</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688847/codepen/portfolio/weather_app.jpg" alt="Weather Web Application Displaying the Weather for London">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Weather Web Application</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->

							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Made using AngularJS and AJAX using multiple asynchronous API calls within a closure. The search functionality made use of the ng-model and filter feature of the AngularJS Framework.  
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>AnuglarJS</li>
											<li>JavaScript</li>
											<li>Twitchtv API</li>
											<li>HTML &amp; CSS</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688882/codepen/portfolio/twitch_tv.jpg" alt="Twitchtv API screenshot">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Twitchtv JSON API</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->
                                                
							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Created using a mixture of pure JavaScript and JQuery, users are challenged to remember a sequence of steps based on the popular memory game Simon Says. Users also have the ability to swap between the normal Simon Says with default sounds and also the Animal Simon Says with fitting animal effects. 
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>JavaScript</li>
											<li>JQuery</li>
											<li>Less</li>
											<li>Font Awesome</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688912/codepen/portfolio/simon_says.png" alt="Simon Says Game">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Simon Says Animals</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->
										
							<!-- COLUMN 1 -->
							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											Made with a combination of JQuery &amp; Bootstrap. Players are free to choose whether they wish to play as X or O. They are then pitted against the Computer who throughout the game makes varying comments towards the player.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>JQuery</li>
											<li>Bootstrap (Modal)</li>
											<li>HTML &amp; CSS</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688951/codepen/portfolio/tictactoe.png" alt="Tic Tac Toe Screenshot">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Tic Tac Toe</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->
						
						<!-- COLUMN 2 -->
							<!-- SECTION -->
							<section>
								<!-- OVERLAY -->
								<div class="overlay">
									<!-- DESCRIPTION -->
									<div class="description">
										<p>
											A real time Chat application built using the MeteorJS framework working alongside a MongoDB database. The App was fully tested to work on the Android Platform via MeteorJS' support for Cordova.
										</p>
										
										<h6>Tools<span class="glyphicon glyphicon-cog"></span></h6>
										<ul class="tools vertical-list">
											<li>MeteorJS</li>
											<li>JavaScript</li>
                                                                                        <li>MongoDB</li>
											<li>Stylus</li>
										</ul>
									</div>
									<!-- END OF DESCRIPTION -->
									
									<img src="https://res.cloudinary.com/dj7k0lade/image/upload/v1526688983/codepen/portfolio/chatter_box.png" alt="Chatterbox ">
									<h4 class="heading"><span class="glyphicon glyphicon-hand-up"></span>Chatterbox</h4>
								</div>
								<!-- END OF OVERLAY -->
							</section>
							<!-- END OF SECTION -->
					</section>
					<!-- END OF PORTFOLIO -->
					</div>

		<!-- CONTACT PAGE -->
		<section id="contact">
			<div class="overlay">
				<div class="container">
					<h2>get in touch...</h2>
					
					<div class="row">
						<div class="col-lg-9">
						<form role="form" method="POST">
							<div class="form-group">
								<label for="nameTXT">Your Name</label>
								<input type="text" id="nameTXT" name="nameTXT">
							</div>

							<div class="form-group">
								<label for="emailTXT">Email Address</label>
								<input type="email" id="emailTXT" name="emailTXT">
							</div>

							<div class="form-group">
								<label for="subjectTXT">Subject</label>
								<input type="text" id="subjectTXT" name="subjectTXT">
							</div>

							<div class="form-group">
								<label for="messageTXT">Message</label>
								<textarea cols="36" rows="8" id="messageTXT" name="messageTXT"></textarea>
							</div>

							<button type="submit" class="noir" id="submitBTN" name="submitBTN"><span class="glyphicon glyphicon-send"></span>Send</button>
						</form>	
					</div>
					
					<div class="col-lg-3 overflow">
						<ul class="social-links vertical-list">
							<li><a href="https://twitter.com/labDevelopments" class="noir twitter" target="_blank">Twitter</a></li>
							<li><a href="https://www.planecode.co.uk" class="noir linkedin" target="_blank">Blog</a></li>
							<li><a href="https://www.freecodecamp.com/labriffa" class="noir freecodecamp" target="_blank">freeCodeCamp</a></li>
						</ul>
					</div>
					</div>
				</div>
			</div>
		</section>
		<!-- END OF CONTACT PAGE -->
!

CSS 

              
                * {
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Fauna One', serif;
	font-size: 20px;
}

li {
	list-style: none;
}

a {
	color: white;
}

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


h1 {
	color: white;
	text-align: center;
	margin-top: 4%;
	font-size: 412.5%;
}


h1 > small {
	display: block;
	color: white;
}

h2 {
	font-size: 245%;
	margin-top: 140px;
}

h2:after {
	display: block;
	margin: 42px 0;
	content: "";
}

h3 {
	font-weight: bold;
}

h4 {
	font-size: 92%;
}

h6 {
	color: #F0F0F0;
}


h1 .logo {
	font-size: 230%;
	font-family: 'Brush Script MT', cursive;
	width: 200px;
	margin-left: -20px;
}

/* ELEMENTS */
.noir {
	display: block;
	background-color: black;
	padding: 18px;
	border: 3px solid white;
}

.vertical-list li {
	float: left;
}

.blue-border {
	border: 2px solid #114190;
}

.magenta-border {
	border: 2px solid #e11a61;
}

.purple-border {
	border: 2px solid #9d1098;
}

.red-border {
	border: 2px solid #9d102b;
}

/* END OF ELEMENTS */

.overflow {
	overflow: hidden;
}

.overlay {
	background-color: rgba(4,14,22,.83);
	height: 100%;
	width: 100%;
	padding-bottom: 80px;
}

#home {
	background: url("https://static.pexels.com/photos/232/apple-iphone-books-desk-large.jpg") no-repeat;
	width: 100%;
	background-size: cover;
}

#home nav {
	margin: 0 auto;
	width: 700px;
	padding-top: 80px;
}

#home nav ul {
	overflow: hidden;
}

#home nav ul li {
	width: 25%;
}

#home nav a {
	padding: 16px;
	padding-right: 30px;
	display: table-cell;
}

#home nav.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: black;
	z-index: 999;
	padding: 0;
	transition: background-color .8s;
	
}

#home nav.fixed ul {
    max-width: 700px;
	margin: 0 auto;
}


#about::before {
	height: 0px;
	width: 0px;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid #131c23;
	margin: 0 auto;
	content: "";
	display: block;
}

.social-links {
	margin-top: 100px;
	overflow: hidden;
	padding: 0;
	display: table;
	margin: 0 auto;
	margin-top: 90px;
}

.social-links li {
	display: inline-table;
	margin-right: 10px;
}

.twitter {
	border-color: #55acee;
}

.linkedin {
	border-color: #0077b5;
}

.freecodecamp {
	border-color: #4a2b0f;
}

.twitter:hover {
	background-color: #55acee;
	transition: background-color .4s;
}

.linkedin:hover {
	background-color: #0077b5;
	transition: background-color .4s;
}

.freecodecamp:hover {
	background-color: #4a2b0f;
	transition: background-color .4s;
}


#about .info {
	display: flex;
	flex-direction: row;
}

#about h2 {
	color: #0d2435;
}

#about h2::after {
	border-bottom: 2px dashed #918D8D;
}

#about .info p {
	line-height: 270%;
}

#about .signature {
	font-family: 'Brush Script MT', cursive;
	font-size: 150%;
	float: right;
	color: #0d2435;
	opacity: .9;
}

#skill-set {
	margin-top: 80px;
	padding-bottom: 80px;
}

#skill-set ul {
	overflow: hidden;
}

#web-development-skills {
	background-color: #114190;
}


#automation-skills {
	background-color: #e11a61;
}

#misc-skills {
	background-color: #9d1098;
}

.skills {
	color: white;
}

.skills li {
	padding: 20px;
}

#portfolio {
	background-color: #423a3a;
	padding-bottom: 80px;
}

#portfolio h2 {
	color: #F0F0F0;
	margin-bottom: 140px;
}

#portfolio h2:after {
	border-bottom: 2px dashed #b4b4b4;
}

#portfolio .row {
	margin: 0px;
	box-sizing: border-box;
	padding: 0 60px;
}

#portfolio .heading {
	color: #F0F0F0;
	padding: 15px;
	text-align: center;
	position: absolute;
  font-size: 18px;
  letter-spacing: 2px;
}

#portfolio .heading span {
	color: #635757;
	display: block;
	margin: 40px 0px;
	font-size: 200%;
}

#portfolio .description {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 15px;
}

#portfolio .description > * {
	display: none;
	font-size: 72%;
}

#portfolio p {
	color: #F0F0F0;
	/*display: none;*/
	margin-bottom: 30px;
	line-height: 230%;
}

#portfolio p, .tools {
	width: 100%;
}

.description span {
	margin-left: 10px;
}

.description .tools {
	margin-top: 20px;
	overflow: hidden;
}

.description .tools li {
	margin-top: 5px;
	background-color: #114190;
	margin-right: 10px;
	padding: 10px;
	color: #F0F0F0;
}

#portfolio div section {
	cursor: pointer;
}

#portfolio div:nth-child(odd) section {
	background-color: #483F3F;
	padding: 10px;
	border: 3px solid #4D4343;
}

#portfolio div:nth-child(even) section {
	background-color: #3D3636;
	padding: 10px;
	border: 3px solid #393333;
}

#portfolio img {
	width: 100%;
}

#portfolio section {
	height: 100%;
	margin-bottom: 20px;
}

#portfolio .overlay {
	position: relative;
	padding-bottom: 0px;
	min-height: 550px;
  overflow: auto;
}

#portfolio .description h4 {
	color: white;
}

#portfolio .heading {
	position: relative;
	margin: 0 auto;
}

#portfolio section {
	width: 50%;
	float: left;
}

#portfolio section:hover .overlay img {
	opacity: 0;
	transition: opacity .32s;
}

#portfolio section:hover .description {
	top: 140px;
	transition: top .5s;
}

#portfolio section:hover .overlay .heading span {
	 -webkit-transform: rotate(180deg);
	 position: relative;
	 top: -80px;
	 left: -30px;
	 color: rgba(4,14,22,.83);;
}


#portfolio section:hover .overlay .description > * {
	display: block;
}

#portfolio section:hover .overlay .heading {
	position: absolute;
	top: -60px;
	transition: top .9s;
}


#contact {
	background: url("https://res.cloudinary.com/dj7k0lade/image/upload/v1526689027/codepen/portfolio/map.jpg") no-repeat;
	background-size: cover;
}

#contact .overlay {
	background: rgba(0,0,0,.968);
}

#contact h2 {
	color: white;
}

#contact h2:after {
	border-bottom: 2px dashed white;
}

#contact form {
	position: relative;
}

#contact .form-group label {
	display: block;
	color: white;
	font-weight: normal;
}

#contact .form-group input, #contact .form-group textarea {
	outline: none;
	border: 0;
	border-bottom: 6px solid #114190;
	padding: 9px;
	background-color: #2b2b2b;
	color: white;
}

#contact .form-group input#emailTXT {
	width: 75%;
	border-bottom: 6px solid #e11a61;
}

#contact .form-group input#emailTXT {
	border-bottom: 6px solid #e11a61;
}

#contact .form-group input#subjectTXT {
	width: 55%;
	border-bottom: 6px solid #9d1098;
}

#contact .form-group input#messageTXT {
	border-bottom: 6px solid #9d1098;
}

#contact .form-group #messageTXT {
	border-bottom: 6px solid #9d102b;
	resize: none;
}

#contact #submitBTN {
	color: white;
}

#contact #submitBTN:hover {
	background-color: white;
	color: black;
	transition: background-color .4s;
}

#contact #submitBTN span {
	margin-right: 20px;
}


#contact .social-links li {
	margin-bottom: 20px;
}

/* Media Queries */

@media screen and (max-width: 1200px) {
	#portfolio [class^="col"] section {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 10px;
		min-height: 400px;
	}

	#portfolio .overlay {
		width: 100%;
		height: auto;
	}

	#portfolio img {
		width: 100%;
		height: auto;
	}

	#portfolio section:hover .overlay .heading span {
	 -webkit-transform: rotate(90deg);
	 top: 70px;
	 left: -240px;
	 position: relative;
	}
}

@media screen and (max-width: 790px) {
	body {
		font-size: 18px;
		text-align: center;
	}
  
  h2 {
    margin-top: 80px;
  }

	input {
		text-align: center;
	}

	#about img {
		display: block;
		margin: 0 auto;
		width: 30%;
	}
	
	#about .info {
		flex-direction: column-reverse;
	}

	#skill-set .skills {
		margin-top: 20px;
	}

	form {
		text-align: left;
	}

	#portfolio .description p {
		margin-top: 40px;
	}

	#portfolio section {
		font-size: 10px;
	}

	#portfolio .overlay > * {
		font-size: 200%;
	}

	#portfolio p, h6 {
		text-align: left;
	}

	#contact textarea {
		width: 90%;
	}
}

@media screen and (max-width: 570px) {

	#home nav {
		width: inherit;
	}
	
	#about .signature {
		float: none;
	}

	#portfolio h2 {
		margin-bottom: 0;
	}

	#portfolio section img {
		display: none;
	}

	#portfolio section {
		width: 100%;
	}

	#portfolio .description > *  {
		display: block;
	}

	#portfolio .description {
		display: table-footer-group;
	}

	#portfolio .heading {
		display: table-header-group;
		font-size: 180%;
		text-align: left;
	}

	#portfolio .overlay {
		min-height: auto;
		padding: 20px;
	}

	#portfolio .description {
		top: 100px;
		position: static;
	}

	#portfolio section {
		min-height: auto;
	}

	#portfolio section:hover .overlay .heading {
	 position: relative;
	 top: -0px;
	 color: white;
	 -webkit-transition: none;
	}

	#portfolio .heading span {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	
	.social-links li {
		display: block;
		width: 100%;
	}

	.social-links {
		width: 100%;
	}

	h1 {
		font-size: 300%;
	}

	#about img {
		width: 60%;
	}

	#skill-set #web-development-skills::before {
		display: none;
	}

	#skill-set .skills {
		width: 100%;
		display: block;
	}

	#portfolio .overlay {
		height: 70%;
	}

}
!

JS 

              
                $(document).ready(function(){

	$("nav a").on("click", function(event){
		event.preventDefault();
		$("nav").addClass("fixed");
		id = ($(this).attr("href"));
		scrollVertical = $(id).offset().top;

		$("body, html").animate({scrollTop: scrollVertical});
	});

	$(document).on("scroll", function(){
		secondPage = $("nav li:nth-child(2) a").attr("href");

		if ( $("body").scrollTop() >= $("nav").height() )
		{
			$("nav").addClass("fixed");
		} else {
			$("nav").removeClass("fixed");
		}
	});

});
!
999px

Console