/index.html /css/style.css /css/superslides.css /css/owl.carousel.min.css /img/about.jpeg /img/slide1.jpeg /img/slide2.jpeg /img/slide3.jpeg /img/loader.gif /img/icons/menu.png /img/icons/next.png /img/icons/prev.png /img/portfolio/dog.jpeg /img/portfolio/thumbnails/dog-square.jpeg /js/countUp.js /js/countUp-jquery.js /js/jquery.easypiechart.min.js /js/jquery.superslides.min.js /js/owl.carousel.min.js /js/script.js /js/typed.min.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css>" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="<https://use.fontawesome.com/releases/v5.0.8/css/all.css>" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css>" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>"></script>
</head>
<body>
<div class="loader">
<div class="inner"></div>
</div>
<div id="slides">
<div class="overlay"></div>
<div class="slides-container">
<img src="img/slide1.jpg" alt="">
<img src="img/slide2.jpeg" alt="">
<img src="img/slide3.jpeg" alt="">
</div>
<div class="titleMessage">
<div class="heading">
<p class="main">Hier komt een titel</p>
<p class="sub typed"></p>
</div>
</div>
<nav class="slides-navigation">
<a href="#" class="next"></a>
<a href="#" class="prev"></a>
</nav>
</div>
<nav id="navigation" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#about">Over mij <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Vaardigheden</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="about" class="section">
<div class="container">
<div class="row">
<div class="col-md-5">
<img class="aboutImage" src="img/about.jpeg">
</div>
<div class="col-md-7">
<h4>Over mij</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis erat tempor eros accumsan, ut ornare orci commodo. Phasellus gravida tincidunt elit, non maximus magna mollis id. Nam bibendum ligula nec rutrum accumsan. Quisque fringilla, dolor a commodo porta, mi nibh ullamcorper ante, et sodales massa dolor commodo nisl. Nunc vitae nisl et lorem placerat lobortis et at massa. Cras dignissim hendrerit diam at pulvinar. Vivamus luctus sodales ex, in fermentum turpis volutpat nec. In fringilla condimentum dolor quis molestie. Vivamus fermentum ultricies lorem et porttitor. Fusce scelerisque sapien bibendum, volutpat neque nec, fermentum nisl. </p>
<p>Mauris turpis lacus, sodales in dictum quis, luctus quis eros. Duis sagittis arcu orci, sit amet imperdiet nulla sagittis ut. Maecenas gravida diam ac enim viverra, a volutpat quam congue. Sed ultrices nibh lectus, quis dapibus tortor pharetra vitae. Integer eleifend ultricies tincidunt. In auctor odio non nulla ultrices, id euismod nunc feugiat. Suspendisse dictum nulla porttitor tortor bibendum aliquet. Duis feugiat orci sit amet ultricies ultrices. Nunc eget risus urna. Maecenas non pharetra dui. Nunc consequat porttitor risus, ut placerat elit mattis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec elementum diam. Sed ut leo id libero condimentum mollis sed at nisl. Pellentesque hendrerit lorem vitae tortor blandit lobortis. </p>
</div>
</div>
</div>
</div>
<div id="skills" class="skillsSection section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Mijn vaardigheden</h2>
<p>Mijn kennis in vaardigheden (drag to scroll)</p>
</div>
<div class="owl-carousel owl-theme">
<div class="skill">
<span class="chart" data-percent="67">
<span class="percent">67</span>
<canvas height="152" width="152"></canvas>
</span>
<h4>PHP</h4>
<p>Toegepast in de meeste websites</p>
</div>
<div class="skill">
<span class="chart" data-percent="72">
<span class="percent">72</span>
<canvas height="152" width="152"></canvas>
</span>
<h4>CSS</h4>
<p>Veel toegepast in de gemaakte websites</p>
</div>
<div class="skill">
<span class="chart" data-percent="14">
<span class="percent">14</span>
<canvas height="152" width="152"></canvas>
</span>
<h4>Vue</h4>
<p>Een nieuwe vaardigheid die ik aan het leren ben</p>
</div>
<div class="skill">
<span class="chart" data-percent="90">
<span class="percent">90</span>
<canvas height="152" width="152"></canvas>
</span>
<h4>HTML</h4>
<p>Veel toegepast in de gemaakte websites</p>
</div>
<div class="skill">
<span class="chart" data-percent="60">
<span class="percent">60</span>
<canvas height="152" width="152"></canvas>
</span>
<h4>Javascript</h4>
<p>Toegepast in de meeste websites</p>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio" class="section">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><a href="#" data-filter="*" class="current">Alles</a></li>
<li><a href="#" data-filter=".apps">Logo's</a></li>
<li><a href="#" data-filter=".websites">Websites</a></li>
<li><a href="#" data-filter=".me">Overig</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li class="apps col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="websites col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="me col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="apps col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="apps col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="websites col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="websites col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="websites col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="apps col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="websites col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="me col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
<li class="me col-xs-6 col-sm-4 col-md-3 col-lg-3">
<div class="item">
<img src="img/portfolio/thumbnails/dog-square.jpeg">
<div class="icons">
<a href="img/portfolio/dog.jpeg" title="View image" class="openButton" data-fancybox data-caption="This is a cute dog">
<i class="fa fa-search"></i>
</a>
<a href="<http://www.lpwebdesign.nl>" target="_blank" class="projectLink">
<i class="fa fa-link"></i>
</a>
</div>
<div class="imageOverlay"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="stats" class="statsSection section">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="squareItem">
<div class="squareInnerContainer">
<div class="squareIcon">
<i class="fa fa-clock"></i>
</div>
<div class="squareContent">
<h2 class="counter">4</h2>
<h3>Jaar ervaring</h3>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="squareItem">
<div class="squareInnerContainer">
<div class="squareIcon">
<i class="fa fa-calendar"></i>
</div>
<div class="squareContent">
<h2 class="counter">37</h2>
<h3>Klanten</h3>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="squareItem">
<div class="squareInnerContainer">
<div class="squareIcon">
<i class="fa fa-bolt"></i>
</div>
<div class="squareContent">
<h2 class="counter">28</h2>
<h3>Logo's</h3>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="squareItem">
<div class="squareInnerContainer">
<div class="squareIcon">
<i class="fa fa-cloud"></i>
</div>
<div class="squareContent">
<h2 class="counter">58</h2>
<h3>Websites</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="contactSection section">
<div class="col-md-12 text-center">
<h2>Voor vragen of informatie</h2>
<a href="mailTo:[email protected]" class="contactButton">Neem contact op</a>
</div>
</div>
<div class="copyrightSection">
<div class="col-md-12 text-center">
<p>© Copyright Laurens Post 2020</p>
</div>
</div>
<script src="js/countUp.js"></script>
<script src="js/countUp-jquery.js"></script>
<script src="js/jquery.superslides.min.js"></script>
<script src="js/jquery.easypiechart.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/typed.min.js"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js>" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js>" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="<https://unpkg.com/[email protected]/dist/isotope.pkgd.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js>"></script>
<script src="js/script.js"></script>
</body>
</html>
css/style.css
body {
font-size: 14px;
color: #333;
background-color: #fff;
letter-spacing: 1px;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
background-color: rgba(0, 0, 0, 0.4);
}
.slides-navigation {
z-index: 6;
}
.slides-navigation .prev,
.slides-navigation .next {
width: 47px;
height: 47px;
background-size: cover;
background-repeat: no-repeat;
}
.slides-navigation a.prev {
left: 20px;
background-image: url(../img/icons/prev.png);
}
.slides-navigation a.next {
right: 20px;
background-image: url(../img/icons/next.png);
}
.titleMessage {
position: absolute;
width: 100%;
height: 250px;
top: 50%;
z-index: 5;
text-align: center;
margin-top: -125px;
}
.titleMessage .heading p {
color: #fff;
text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
font-weight: 100;
letter-spacing: 7px;
}
.titleMessage .heading .main {
font-size: 50px;
}
.titleMessage .heading .sub {
font-size: 23px;
}
.section {
padding: 100px 0;
}
.aboutImage {
max-width: 100%;
}
.skillsSection,
.contactSection {
background-color: #3b86e6;
color: #fff;
}
.skill {
text-align: center;
margin-left: 10px;
}
.chart {
position: relative;
width: 152px;
height: 152px;
display: inline-block;
text-align: center;
}
.chart canvas {
position: absolute;
left: 0;
top: 0;
}
.chart .percent {
color: #000;
line-height: 152px;
display: inline-block;
font-size: 35px;
}
.chart .percent:after {
content: '%';
}
.squareItem {
margin-top: 30px;
position: relative;
}
.squareInnerContainer {
position: relative;
padding: 50px 15px 35px;
text-align: center;
border: 2px solid #444;
border-top: none;
}
.squareInnerContainer:before,
.squareInnerContainer:after {
content: '';
position: absolute;
top: 0px;
width: 30%;
border-bottom: 2px solid #444;
}
.squareInnerContainer:before {
right: 0px;
}
.squareInnerContainer:after {
left: 0px
}
.squareContent h2 {
font-size: 56px;
margin-bottom: 10px;
font-weight: 400;
color: #3b86e6;
}
.squareContent h3 {
font-size: 13px;
font-weight: 600;
margin: 0;
}
.squareIcon {
position: absolute;
left: 50%;
top: -30px;
width: 40%;
height: 60px;
font-size: 45px;
margin-left: -20%;
color: #444;
}
.contactButton {
color: #fff;
padding: 15px 20px;
display: inline-block;
margin-top: 20px;
border: 1px solid #fff;
border-radius: 2px;
}
.contactButton:hover {
text-decoration: none;
color: #3b86e6;
background-color: #fff;
}
.filter a {
color: #bdc3c7;
border: 1px solid #bdc3c7;
padding: 10px 18px;
display: block;
}
.filter li {
display: inline-block;
padding: 5px
}
.filter .current {
background-color: #3b86e6;;
border-color: #3b86e6;
color: #fff;
}
.filter {
text-align: center;
width: 100%;
}
.section .heading {
text-align: center;
padding-bottom: 40px;
width: 100%;
}
.items li {
display: inline-block;
padding: 5px;
}
.itemsContainer {
width: 100%;
}
.items li img {
width: 100%;
-webkit-transition: all 0.2s linear, 1s;
-moz-transition: all 0.2s linear, 1s;
-o-transition: all 0.2s linear, 1s;
-ms-transition: all 0.2s linear, 1s;
-transition: all 0.2s linear, 1s;
}
.items .item {
position: relative;
display: block;
overflow: hidden;
}
.items .icons {
position: absolute;
width: 90px;
height: 40px;
left: 50%;
top: 50%;
margin: -20px auto 0 -47px;
text-align: center;
z-index: 3;
}
.items .icons i {
color: #fff;
font-size: 20px;
margin-top: 9px;
}
.items a {
width: 40px;
height: 40px;
background-color: #3b86e6;
position: relative;
display: inline-block;
-webkit-transition: all 0.2s linear, 0.2s;
-moz-transition: all 0.2s linear, 0.2s;
-o-transition: all 0.2s linear, 0.2s;
-ms-transition: all 0.2s linear, 0.2s;
-transition: all 0.2s linear, 0.2s;
}
.items .imageOverlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
-webkit-transition: all 0.2s linear, 1s;
-moz-transition: all 0.2s linear, 1s;
-o-transition: all 0.2s linear, 1s;
-ms-transition: all 0.2s linear, 1s;
-transition: all 0.2s linear, 1s;
}
.items .item:hover .imageOverlay {
opacity: 1;
}
.items .openButton {
float: left;
left: -200px;
}
.items .projectLink {
float: right;
right: -200px;
}
.items .item:hover .openButton {
left: 0px;
}
.items .item:hover .projectLink {
right: 0px;
}
.items .item:hover img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-transform: scale(1.05, 1.05);
}
.items {
padding: 0;
}
.copyrightSection {
background-color: #000;
color: #fff;
padding: 30px 5px;
}
.copyrightSection p {
margin: 0;
}
#navigation {
background-color: #3b86e6;
padding: 20px 10px;
z-index: 100;
width: 100%;
}
#navigation li {
padding: 0 10px;
}
#navigation li a {
color: #fff;
}
.navbar-brand,
.navbar-brand:hover {
color: #fff;
}
.navbar-toggler-icon {
background: url(../img/icons/menu.png);
background-size: 100%;
}
.fixedNav #navigation {
position: fixed;
top: 0;
}
.loader {
width: 100%;
height: 100%;
background-color: #fff;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
}
.loader .inner {
width: 100%;
height: 100%;
background: url(../img/loader.gif) center center no-repeat;
}
Plaats de .css bestanden in '/css'.