More/Better info on home page

css.css

@@ -14,6 +14,7 @@
 }
 .quickButtons {
   margin: 0 auto;
+  margin-top: 8rem;
   width: 50%;
   display: flex;
   justify-content: center;
@@ -21,48 +22,57 @@
 .goButton {
   background-color: #33353d;
   border: 0;
-  margin-top: 8rem;
+  min-width: 25rem;
+  text-align: center;
+  cursor: pointer;
   border-radius: .3rem;
+  margin: 2rem;
   color: white;
   border-bottom: #26282f 5px solid;
   padding: 2rem;
   font-size: 2rem;
 }
+.goButton:hover {
+  color: white!important;
+}
 .goButton:active {
   border: 0;
   border-top: #26282f 5px solid;
 }
-.slideUp {
+.slideDown {
   position: absolute;
-  padding: .7rem;
+  padding: .8rem;
   width: 4rem;
   height: 4rem;
   border-radius: 50%;
   border: 2px solid white;
   text-align: center;
   left: calc(50% - 2rem);
-  top: 90vh;
+  top: 85vh;
 }
-.slideUp:hover {
+.slideDown:hover {
   color: white!important;
 }
-/* .name:hover + #rocket {
+/* About Me*/
-  animation-name: launchRocket;
+.about {
-  animation-duration: 2.5s;
+  position: relative;
-  animation-timing-function: ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  float: left;
+  height: 30vh;
+  background-color: #454752;
 }
-@keyframes launchRocket {
+.infoBlockMe {
-  from {top: 100vh}
+  padding: 1rem;
-  to {top: -20vh}
+  text-align: center;
+  display: inline-block;
+  height: 10rem;
+  width: 25rem;
+  border-right: 3px solid white;
 }
-#rocket {
+/* About Website */
-  position: absolute;
-  top: 100vh;
-  z-index: -1;
-  left: calc(50% - 7rem);
-  width: 12rem;
-  height: 14rem;
-} */
 .aboutPages {
   height: 30vh;
   float: left;
@@ -72,38 +82,21 @@
 }
 .infoBlockPages {
   width: 50%;
-  border-right: #454752 5px solid;
+  border-right: #454752 2px solid;
   display: flex;
   align-items: center;
   height: 100%;
   float: left;
 }
 .infoHeadPages {
+  width: 40%;
   margin-left: 1rem;
   padding-right: 1rem;
-  border-right: 5px solid white;
+  border-right: 3px solid white;
 }
 .infoTextPages {
   margin-left: 2rem;
-}
+  width: 50%;
-/* About */
-.about {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  float: left;
-  height: 30vh;
-  background-color: #454752;
-}
-.infoBlockMe {
-  padding: 1rem;
-  text-align: center;
-  display: inline-block;
-  height: 10rem;
-  width: 25rem;
-  border-right: 4px solid white;
 }
 /* Mobile support */
 @viewport {

feedback/index.html

@@ -28,9 +28,9 @@
 		</div><div class="feedback">
 			<div class="user">
 				<img src="/resources/img/user.png" alt="" class="userImg">
-				<h3>User</h3>
+				<h3>Jonathan Bos</h3>
 			</div>
-			<h2 class="userFeedback"></h2>
+			<h2 class="userFeedback">De website ziet er goed uit. Ik zou misschien wat informatie geven bij de minifier. Het is namelijk nogal onduidelijk.</h2>
 		</div><div class="feedback">
 			<div class="user">
 				<img src="/resources/img/user.png" alt="" class="userImg">

index.html

@@ -22,14 +22,14 @@
 	<div class="mainContent">
 		<h1 class="name">Guus van Meerveld</h1>
 		<div class="quickButtons">
-			<button class="goButton">Ga naar Playground</button>
+			<a class="goButton" title="Playground" href="/playground">Creër je eigen website</a>
-			<button class="goButton" style="margin-left: 5rem;">Ga naar Minify</button>
+			<a class="goButton" title="Minify" href="/minify">Maak je code korter</a>
 		</div>
-		<a class="slideUp" href="#2" id="2"><i class="fas fa-caret-up fa-2x"></i></a>
+		<a class="slideDown" href="#2" id="2"><i class="fas fa-caret-down fa-2x"></i></a>
 		<!-- <img src="/resources/img/rocket.png" alt="rocket" id="rocket"> -->
 	</div>
 
-	<!-- About -->
+	<!-- About Me-->
 	<div class="about">
 		<h1 class="infoBlockMe">Mijn naam is Guus van Meerveld</h1>
 		<h1 class="infoBlockMe">Ik ben 15 jaar oud en heb deze website gebouwd</h1>
@@ -43,14 +43,14 @@
 				<h2>Het doel van deze website is om handig tools aan te bieden.</h2>
 			</div>
 			<div class="infoTextPages">
-				<h2></h2>
+				<h2>Zoals playground, waar je je eigen website kan bouwen met HTML, CSS en JavaScript</h2>
 			</div>
 		</div><div class="infoBlockPages">
 			<div class="infoHeadPages">
-				<h2>Yeet</h2>
+				<h2></h2>
 			</div>
 			<div class="infoTextPages">
-				<h2>Yote</h2>
+				<h2></h2>
 			</div>
 		</div>
 	</div>

js.js

@@ -1,5 +1,5 @@
 $(document).ready(function(){
-  $(".slideUp").on('click', function(event) {
+  $(".slideDown").on('click', function(event) {
     if (this.hash !== "") {
       var hash = this.hash;
       $('html, body').animate({