<a href="#home" class="up">‹</a>
<a name="home"> </a>
<div class="nav-container">
<div class="menu">
<input type="checkbox" id="showMenu" onClick="javascript:check(this);" />
<label for="showMenu">
<a class="home"></a>
<a href="#about" class="Item">About Me</a>
<a href="#projects" class="Item">Projects</a>
<a href="#contact" class="Item">Contact</a>
</label>
</div>
</div>
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
</div>
</div>
<div class="slide slide4">
<div class="slide-content">
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<div class="container-1">
<a name="about"></a>
<div class="box-1">
<h1>About Me</h1>
<p>My Name is <b>Koen Vissers</b> and I'm a Graphic Designer/Digital Design Student from Germany.
<br>
<br> At the moment I'm studying at the University of applied sciences in Weingarten-Ravensburg, Germany.</p>
</div>
<div class="box-2">
</div>
</div>
<div class="container-2">
<a name="projects"></a>
<div class="box-3">
<h1>Projects</h1>
<p>Here you can see some of my recent projects.<br><br>For more references to my work, please visit my profile on Behance, Instagram or my private website.</p>
<div class="icons">
<a id="web" target="_blank" href="http://koen.work"> </a>
<a id="behance" target="_blank" href="http://www.behance.net/kvissers49cf"> </a>
<a id="instagram" target="_blank" href="https://www.instagram.com/kunemann"> </a>
</div>
</div>
<div class="box-4"> </div>
</div>
<div class="container-3">
<a name="contact"></a>
<div class="box-5">
<h1>Contact</h1>
<p>Please, do not hesitate to contact me if you require further information. Simply send a mail to <br><br>< <a class="pageLink" href="mailto:k.vissers@me.com">k.vissers@me.com </a>></p>
<span>Or send me a direct message</span>
<textarea rows="3" cols="40em"></textarea><br>
<input type="submit" value="Submit"></p>
</div>
<div class="box-6">
</div>
</div>
<div class="footer">
<footer><span>Copyright © Koen Vissers 2017</span></footer>@import "https://fonts.googleapis.com/css?family=Rubik:300, 500, 900";
html,
body {
height: 100%;
letter-spacing: 1px;
font-family: rubik;
display: block;
margin: 0;
@import url("https://fonts.googleapis.com/css?family=rubik:300, 500, 900");
}
h1 {
font-weight: 800;
}
p {
font-weight: 300;
}
a {
color: black;
text-decoration: none;
}
.icons {
display: flex;
flex-direction: row;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
#web,
#behance,
#instagram {
margin-left: 5px;
margin-right: 5px;
width: 3em;
height: auto;
}
#web {
order: 1;
background: url(https://image.flaticon.com/icons/svg/12/12195.svg) no-repeat;
}
#behance {
order: 2;
background: url(https://image.flaticon.com/icons/svg/87/87380.svg) no-repeat;
}
#instagram {
order: 3;
background: url(https://image.flaticon.com/icons/svg/462/462987.svg) no-repeat;
}
#web:hover,
#behance:hover,
#instagram:hover {
transition: 0.3s;
opacity: 0.3;
}
a:visited {
color: black;
}
.nav-container {
display: flex;
background-color: white;
max-width: 100%;
flex-direction: column;
padding: 30px;
}
.menu {
flex-grow: 0;
padding: 10px;
letter-spacing: 4px;
font-family: rubik;
font-weight: 100;
font-size: 12px;
text-transform: uppercase;
max-width: 100%;
}
.home {
padding: 10px;
cursor: pointer;
background: url(https://image.flaticon.com/icons/svg/263/263115.svg) no-repeat
center center;
}
.Item {
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
margin-left: 3em;
transition: all ease-out 1s;
/*cursor: pointer;*/
}
.Item:hover {
font-weight: 900;
box-shadow: 0px 10px 30px lightgray;
transition: all ease-in 500ms;
}
.Item:active {
background-color: black;
color: white;
}
.container-1,
.container-2,
.container-3 {
display: flex;
margin-left: 30px;
margin-right: 30px;
min-height: 350px;
margin-bottom: 30px;
}
.box-1 {
flex: 4;
order: 1;
margin-top: 30px;
padding: 30px;
background: rgb(250, 250, 250);
}
.box-2 {
flex: 4;
order: 2;
margin-top: 30px;
padding: 30px;
background: url("http://kdkl.bplaced.net/Codepen/_D_26283_ret.jpg")
no-repeat center center;
background-size: cover;
height: auto;
}
.box-3 {
flex: 4;
order: 2;
padding: 30px;
background: rgb(250, 250, 250);
}
.box-4 {
flex: 4;
order: 1;
padding: 30px;
background: url("http://kdkl.bplaced.net/Codepen/130319_bewerbung_210x210mm_FINAL.jpg")
no-repeat right center;
background-size: cover;
height: auto;
}
.box-5 {
flex: 4;
order: 1;
padding: 30px;
background: rgb(250, 250, 250);
}
.box-6 {
flex: 4;
order: 2;
padding: 30px;
background: url("http://kdkl.bplaced.net/Codepen/2awesome_MockUp.jpg")
no-repeat center center;
background-size: cover;
height: auto;
}
textarea {
width: 80%;
font-size: 12px;
color: gray;
}
footer {
padding: 20px;
height: 30px;
color: #999;
text-align: right;
}
span {
font-size: 7pt;
margin-right: 20px;
}
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 350px;
overflow-x: hidden;
overflow-y: hidden;
}
.wrap {
position: relative;
background: black;
}
@keyframes fadeIn {
from {opacity: 0.3; filter: blur(5px);}
to {opacity: 1; filter: blur(0px);}
}
.slide {
animation-name: fadeIn;
animation-duration: 1.5s;
animation-timing-function: ease;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-position: left;
background-image: url("http://kdkl.bplaced.net/vn/1.jpg");
}
.slide2 {
background-image: url("http://kdkl.bplaced.net/vn/2.jpg");
}
.slide3 {
background-image: url("http://kdkl.bplaced.net/vn/3.jpg");
}
.slide4 {
background-image: url("http://kdkl.bplaced.net/vn/4.jpg");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow:hover {
transition-duration: 0.5s;
opacity: 0.3;
}
.arrow {
mix-blend-mode: difference;
cursor: pointer;
position: absolute;
top: 55%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 40px;
}
#arrow-right {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 40px;
}
.up {
transform: rotate(90deg);
display: block;
background-color: RGBA(211, 211, 211, 1);
text-align: center;
line-height: 50px;
opacity: 0.8;
width: 3em;
height: 3em;
border-radius: 50px;
position: fixed;
right: 50px;
bottom: 50px;
cursor: pointer;
transition: all ease 0.5s;
}
.up:hover {
mix-blend-mode: difference;
background-color: gray;
border-radius: 0px;
bottom: 55px;
position: fixed;
transition: all ease 0.5s;
}
input[type="checkbox"] {
display: none;
}
@media only screen and (max-width: 40em) {
.home {
padding: 10px;
/*cursor: pointer;*/
transition: all ease-in 1.5s;
background: url(https://image.flaticon.com/icons/svg/462/462998.svg) no-repeat
center center;
}
.container-1,
.container-2,
.container-3 {
max-width: 100%;
display: inline;
padding: 8em;
}
.nav-container {
z-index: 1;
top: 20px;
right: 20px;
position: fixed;
font-size: 14px;
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0px 2px 80px rgba(0, 0, 0, 0.1);
}
.box-1 {
margin-top: 10px;
}
.box-2 {
margin-top: 0;
}
.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6 {
padding: 30px;
margin-left: 30px;
margin-right: 30px;
min-height: 200px;
min-width: 50px;
}
.Item {
display: none;
padding-left: 5px;
margin-top: -1px;
margin-bottom: 1em;
}
#showMenu:checked + label > .Item {
margin-left: 0px;
display: flex;
}
#showMenu:checked + label > .home {
display: none;
}
.up {
transform: rotate(90deg);
display: block;
background-color: RGBA(211, 211, 211, 1);
text-align: center;
line-height: 50px;
opacity: 1;
width: 1em;
height: 3em;
border-radius: 50px;
position: fixed;
left: 50%;
right: 50%;
bottom: 20px;
cursor: pointer;
transition: all ease 0.5s;
}
.up:hover {
mix-blend-mode: difference;
background-color: gray;
border-radius: 0px;
bottom: 22px;
position: fixed;
transition: all ease 0.5s;
}
}
@media only screen and (min-width: 1440px) {
.slide {
background-size: cover;
background-position: auto;
background-repeat: no-repeat;
}
.container-1,
.container-2,
.container-3 {
display: flex;
margin-left: 4em;
margin-right: 4em;
min-height: 350px;
margin-top: 2em;
margin-bottom: 4em;
}
.box-1 {
flex: 1;
order: 1;
margin-top: 30px;
padding: 30px;
background: rgb(250, 250, 250);
}
.box-2 {
flex: 4;
background-size: cover;
}
.box-3 {
flex: 1;
}
.box-4 {
flex: 4;
background-position: top;
height: auto;
}
.box-5 {
flex: 1;
}
.box-6 {
flex: 4;
background-size: cover;
height: center;
}
.up {
transform: rotate(90deg);
display: block;
background-color: RGBA(211, 211, 211, 1);
text-align: center;
line-height: 50px;
opacity: 0.8;
width: 3em;
height: 3em;
border-radius: 50px;
position: fixed;
right: 100px;
bottom: 50px;
cursor: pointer;
transition: all ease 0.5s;
}
.up:hover {
mix-blend-mode: difference;
background-color: gray;
border-radius: 0px;
bottom: 55px;
position: fixed;
transition: all ease 0.5s;
}
}
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
function autoSlide() {
setInterval(slideRight, 4000);
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
autoSlide();
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
if (current == sliderImages.length -1){
current = 0;
} else {
current++;
}
reset();
sliderImages[current].style.display = "block";
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//check if menu is clicked
function check(obj)
{
if (obj.checked == 1);
{
setTimeout(uncheck, 4000);
}
}
//uncheck the menu after 4 seconds (see function *check)
function uncheck(obj)
{
document.getElementById("showMenu").checked = 0;
}
startSlide();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.