Cacher is the code snippet organizer for pro developers

	<ul class="slideshow">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

body {
	background-color: black;
}

#landing-header {
	z-index: 1;
	position: relative;
	text-align: center;
	padding-top: 40vh;
}

#landing-header h1 {
	color: white;
}

.slideshow {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.slideshow li {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: 0;
	animation: imageAnimation 50s linear infinite;
}

.slideshow li:nth-child(1) {
	background-image: url(https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
}
.slideshow li:nth-child(2) {
	background-image: url(https://images.unsplash.com/photo-1508873696983-2dfd5898f08b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
	animation-delay: 10s;
}
.slideshow li:nth-child(3) {
	background-image: url(https://images.unsplash.com/photo-1537565266759-34bbc16be345?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
	animation-delay: 20s;
}
.slideshow li:nth-child(4) {
	background-image: url(https://images.unsplash.com/photo-1525811902-f2342640856e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80);
	animation-delay: 30s;
}
.slideshow li:nth-child(5) {
	background-image: url(https://images.unsplash.com/photo-1546811740-23e671faf31c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);
	animation-delay: 40s;
}

@keyframes imageAnimation {
	0% {
		opacity: 0;
		animation-timing-function: ease-in;
	}
	
	10% {
		opacity: 1;
		animation-timing-function: ease-out;
	}
	
	20% {
		opacity: 1;
	}
	
	30% {
		opacity: 0;
	}
}