CodePen Embed - V7 – Final (Flex, Navi, Mobile, Animation)

<a href="#home" class="up">&lsaquo;</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">&nbsp</a>
   <a id="behance" target="_blank" href="http://www.behance.net/kvissers49cf">&nbsp</a>
   <a id="instagram" target="_blank" href="https://www.instagram.com/kunemann">&nbsp</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>&lt <a class="pageLink" href="mailto:k.vissers@me.com">k.vissers@me.com </a>&gt</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();

This Pen is owned by Koen on CodePen.

See more by @Kunemann on CodePen

External CSS

External JavaScript