Portfolio Joost Jansen 2016

Developer
Joost Jansen
Size
5,671 Kb
Views
12,144
  1. Portfolio Joost Jansen 2016 Previews
  2. Portfolio Joost Jansen 2016 HTML Codes
  3. Portfolio Joost Jansen 2016 CSS Codes
  4. Portfolio Joost Jansen 2016 JS Codes

How do I make an portfolio joost jansen 2016?

What is a portfolio joost jansen 2016? How do you make a portfolio joost jansen 2016? This script and codes were developed by Joost Jansen on 19 November 2022, Saturday.

Portfolio Joost Jansen 2016 Previews
IQ Test

Portfolio Joost Jansen 2016 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Joost Jansen 2016</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fira+Sans|Open+Sans'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="flo-rida"> <div class="navigation"><a href="#"><img class="logo" src="http://jfolio.website/images/Joost_Logo.png"/></a> <ul> <li><a class="intro" href="#">Home</a></li> <li><a class="projects" href="#">Projects</a></li> <li><a class="skills" href="#">Jobs</a></li> <li><a class="social" href="#">Social</a></li> </ul><a class="email" href="mailto:[email protected]">Email me</a> </div> <div class="eminem"> <div class="box-outer intro"> <div class="box-inner"> <h2>Joost is trying to grow up,</h2> <p>but instead spends his time ...</p> </div> </div> <div class="box-outer projects"> <div class="box-inner"> <h2>... updating his portfolio website</h2> <p>and doing other cool projects ...</p> <div class="content"></div><a class="button" href="#">Check out my CodePen <i class="fa fa-codepen fa-1x"></i></a> </div> </div> <div class="box-outer skills"> <div class="box-inner"> <h2>... gaining experience in the field</h2> <p>at a few different companies ...</p> <div class="content"> <div class="skill-outer"> <div class="skill-inner"><span class="skill-name">HTML</span></div> </div> <div class="skill-outer"> <div class="skill-inner"><span class="skill-name">CSS</span></div> </div> <div class="skill-outer"> <div class="skill-inner"><span class="skill-name">JS</span></div> </div> </div><a class="button" href="#">Contact me on LinkedIn <i class="fa fa-linkedin fa-1x"></i></a> </div> </div> <div class="box-outer social"> <div class="box-inner"> <h2>... discussing the hottest of topics</h2> <p>in awesome communities ...</p><a class="button" href="#">Join them too! <i class="fa fa-slack fa-1x"></i></a> </div> </div> </div>
</div> <script src='https://production-assets.codepen.io/assets/embed/ei.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Joost Jansen 2016 - Script Codes CSS Codes

/* Base/Reset
------------------------------------- */
html,
body,
.flo-rida { height: 100%;
}
body { -webkit-font-smoothing: antialiased;
}
ul { list-style: none;
}
h2,
p { margin: 0 0 10px;
}
h2 { font-size: 48px; font-family: 'Fira Sans', sans-serif;
}
p { font-size: 27px; font-family: 'Fira Sans', sans-serif;
}
a { font-size: 20px; font-family: 'Fira Sans', sans-serif; text-decoration: none; color: #aaa;
}
a:hover { color: #000;
}
a.button { background-color: #fff; padding-left: 20px; -webkit-transition: all 100ms linear; transition: all 100ms linear; box-shadow: 0 5px 10px -5px rgba(0,0,0,0.3);
}
a.button:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 25px 20px -15px rgba(0,0,0,0.2);
}
a.button .fa { padding: 20px; margin-left: 10px;
}
/* Variables
------------------------------------- */
/* Mixins
------------------------------------- */
/* Outer Rapper (huehue)
------------------------------------- */
.flo-rida { display: -webkit-box; display: -ms-flexbox; display: flex;
}
/* Side/Mobile Navigation
------------------------------------- */
.navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 135px; padding: 20px 0; background-color: #fff;
}
@media screen and (max-width: 550px) { .navigation { display: none; }
}
.navigation .email { -ms-flex-item-align: end; align-self: flex-end; padding-right: 15px;
}
.navigation ul { text-align: right; padding-left: 30px;
}
.navigation ul li { margin-bottom: 10px;
}
/* Inner Rapper (hihi) + Boxes
------------------------------------- */
.eminem { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: scroll;
}
.box-outer { height: 700px; color: #fff;
}
.box-outer .box-inner { position: relative; height: 100%; padding: 0 60px;
}
.box-outer .box-inner h2 { padding-top: 40px;
}
.box-outer .box-inner a.button { position: absolute; bottom: 40px;
}
.box-outer .box-inner .content { margin-top: 40px;
}
.box-outer.intro { background-color: #df405a;
}
.box-outer.intro a.button { color: #df405a;
}
.box-outer.intro .fa { background-color: #efa0ad;
}
.box-outer.projects { background-color: #87314e;
}
.box-outer.projects a.button { color: #87314e;
}
.box-outer.projects .fa { background-color: #d487a1;
}
.box-outer.skills { background-color: #512645;
}
.box-outer.skills a.button { color: #512645;
}
.box-outer.skills .fa { background-color: #c17aad;
}
.box-outer.social { background-color: #311e3e;
}
.box-outer.social a.button { color: #311e3e;
}
.box-outer.social .fa { background-color: #9d72bb;
}
.box-outer.intro { background-image: url("http://jfolio.website/images/Joost_Head_Grayscale.png"); background-blend-mode: multiply; background-repeat: no-repeat; background-position: center bottom; background-size: cover;
}
.skill-outer { width: 100%; height: 25px; margin: 20px 0; background-color: #eee;
}
.skill-outer .skill-inner { width: 80%; height: 25px;
}
.skill-outer .skill-inner background-color sectionColors['skills'],
.skill-outer .skill-inner span.skill-name { line-height: 1.5; padding-left: 10px;
}

Portfolio Joost Jansen 2016 - Script Codes JS Codes

'use strict';
var innerRapper = document.querySelector('.eminem');
var rapperBoxes = innerRapper.querySelectorAll('.box-outer');
var sidenavLinks = document.querySelectorAll('.navigation ul li a');
[].forEach.call(sidenavLinks, function (link, refIndex) {	link.addEventListener("click", function (event) {	return smoothScroll(event, refIndex);	});
});
function smoothScroll(event, refIndex) {	event.preventDefault();	// TODO: implement vanilla js smooth scroll?	innerRapper.scrollTop = rapperBoxes.item(refIndex).clientHeight * refIndex;
}
Portfolio Joost Jansen 2016 - Script Codes
Portfolio Joost Jansen 2016 - Script Codes
Home Page Home
Developer Joost Jansen
Username DevItWithDavid
Uploaded November 19, 2022
Rating 3
Size 5,671 Kb
Views 12,144
Do you need developer help for Portfolio Joost Jansen 2016?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joost Jansen (DevItWithDavid) Script Codes
Name
Flexbox is AWESOME
Overwatch cards, three styles
React CSSTransitionGroup
Personal Website Redesign v2.0
React Close Dialog with Animation
DevWars Objectives Template
Flexbox Layout - One page website
CSGO image overlay using clip path
Star Wars Battlefront I 2016 Interface
IPhone
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!