Added banners, change buttons

Author: Adrihfu

assets/css/main.css

@@ -27,6 +27,76 @@
 	margin: 0 0 1em 0;
 }
 
+.background-image {
+	background-image: url("../../images/pic01.jpg");
+	background-size: cover;
+	background-position: center center;
+	top: 2em;
+	height: 100vh;
+	width: 100%;
+	position: fixed;
+	z-index: -1;
+	opacity: 0.1;
+}
+
+.banner-still {
+	margin: 0em 0em 2em 0em;
+	height: 20vmax;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	background-image: url("../../images/placeholder2.png");
+	background-size: cover;
+	background-position: center;
+}
+
+/*.banner:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	width: 100%;
+	height: 100%;
+	background: #232029;
+	opacity: 0.7;
+	z-index: -1;
+}*/
+
+.banner-animated {
+	margin: 0em 0em 2em 0em;
+	padding: 0em 0em 0em 0em;
+	box-sizing: border-box;
+	width: 300%;
+	height: 20vmax;
+	overflow: hidden;
+	position: relative;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	animation: slideshow-animation 45s infinite alternate;
+	/*background-image: url("../../images/pic01.jpg");
+	background-color: #848bf2;
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+	opacity: 0.5;*/
+}
+
+.banner-animated-slide {
+	width: calc(100% / 3);
+	display: flex;
+}
+
+@keyframes slideshow-animation {
+	0% { transform: translateX(0); }
+	10% { transform: translateX(0); }
+	30% { transform: translateX(-33.33%); }
+	70% { transform: translateX(-33.33%); }
+	90% { transform: translateX(-66.66%); }
+	100% { transform: translateX(-66.66%); }
+}
+
 html, body, div, span, applet, object,
 iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
 pre, a, abbr, acronym, address, big, cite,
@@ -2592,7 +2662,7 @@ input, select, textarea {
 		-webkit-flex-wrap: wrap;
 		-ms-flex-wrap: wrap;
 		flex-wrap: wrap;
-		postiion: relative;
+		position: relative;
 		margin: -2.5em 0 0 -2.5em;
 	}
 

images/logo.svg

@@ -37,6 +37,12 @@
 								</nav>-->
 
 						</div>
+						<div class="banner-animated">
+							<img class="banner-animated-slide" src="images/placeholder1.png" alt="">
+							<img class="banner-animated-slide" src="images/placeholder2.png" alt="">
+							<img class="banner-animated-slide" src="images/pic03.jpg" alt="">
+						</div>
+						<!--<div class="banner-still"></div>-->
 					</header>
 
 				<!-- Menu -->
@@ -57,7 +63,7 @@ <h1 class="first-text">Level Design Blockout Artist Portfolio</h1>
 								<p>To be honest I'm literally learning HTML & CSS to modify this template.<br>I'm this passionate about been an Blockout Artist :)</p>
 							</header>
 							<section class="tiles">
-								
+
 								<article>
 									<span class="image">
 										<img src="images/pic01.jpg" alt="" />
@@ -123,9 +129,9 @@ <h2>Aliquam</h2>
 										<img src="images/pic06.jpg" alt="" />
 									</span>
 									<a href="generic.html">
-										<h2>Veroeros</h2>
+										<h2>The Vault</h2>
 										<div class="content">
-											<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
+											<p>Old projects</p>
 										</div>
 									</a>
 								</article>