Updated wireframe & small fixes

feedback/css.css

@@ -25,12 +25,18 @@
   margin-left: calc(50% - 4rem);
   margin-bottom: 2rem;
 }
+.userFeedback::-webkit-scrollbar {
+  display: none;
+}
 .userFeedback {
   font-family: 'Open Sans';
   display: inline-block;
   vertical-align: top;
   margin-left: 2rem;
   padding-left: 1rem;
+  height: 11.7rem;
+  overflow: scroll;
+  overflow-x: hidden;
   border-left: #ededed 2px solid;
   width: 30rem;
   word-wrap: break-word;

feedback/index.html

@@ -24,19 +24,19 @@
 				<img src="/resources/img/user.png" alt="" class="userImg">
 				<h3>Peer Droog</h3>
 			</div>
-			<h2 class="userFeedback">"Een goede en overzichtelijk website met een handige klok, wel mist er de mogelijkheid om je eigen plaatjes toe te voegen aan de shortcuts."</h2>
+			<h2 class="userFeedback">"duidelijke wireframe, de website doet erg goed wat het probeert te bereiken behalve dat er in de gallerij asymmetrie te vinden is en de foto links onderin iets te groot is"</h2>
 		</div><div class="feedback">
 			<div class="user">
 				<img src="/resources/img/user.png" alt="" class="userImg">
 				<h3>Jonathan Bos</h3>
 			</div>
-			<h2 class="userFeedback">De website ziet er goed uit. Ik zou misschien wat informatie geven bij de minifier. Het is namelijk nogal onduidelijk.</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">
-				<h3>User</h3>
+				<h3>Dyme Zevenhuizen</h3>
 			</div>
-			<h2 class="userFeedback"></h2>
+			<h2 class="userFeedback">"Het is een mooie website met een aantal leuke mogelijkheden. Wel jammer dat de feedback niet echt bij je aankomt, maar ik begrijp dat je dan een andere hosting nodig hebt."</h2>
 		</div><div class="feedback">
 			<div class="user">
 				<img src="/resources/img/user.png" alt="" class="userImg">

gallery/css.css

@@ -20,6 +20,7 @@
 }
 .hideHeadsUp {
   height: 3rem;
+
 }
 .removeHeadsUp {
   cursor: pointer;
@@ -33,7 +34,7 @@
 body {
   background-color: #212126!important;
 }
-button {
+.rowImg button {
   border: 0;
   padding: 0;
   margin-top: 8px!important;
@@ -45,6 +46,7 @@ button {
 }
 .rowImg {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
   padding: 0 4px;
   margin-top: 3rem;

gallery/index.html

@@ -30,14 +30,14 @@
 <div class="rowImg">
   <div class="columnImg">
     <button onclick="window.open('https://www.pexels.com/photo/scenic-view-of-rocky-mountain-during-evening-1624438/', '_self')"><img src="/resources/img/mountain.jpg" alt="img"></button>
-    <button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')"><img src="/resources/img/leaves.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')" class="wide"><img src="/resources/img/leaves.jpg" alt="img"></button>
   </div>
   <div class="columnImg">
     <button onclick="window.open('https://www.pexels.com/photo/landscape-photo-of-riverand-pine-trees-2217365/', '_self')"><img src="/resources/img/riverwoods.jpg" alt="img"></button>
-    <button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')" class="wide"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
   </div>
   <div class="columnImg">
-    <button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button>
+    <button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')" class="wide"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button>
     <button onclick="window.open('https://www.pexels.com/photo/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button>
   </div>
 </div>

resources/js/insertNavbar.js

@@ -10,43 +10,11 @@ var navbarList = c("ul")
   navigation.appendChild(navbarList)
   document.body.appendChild(navigation)
 
-
-// // Opacity
-// var opacity = c("div")
-// opacity.className = "opacityMenu lowerIndex menu"
-// document.body.appendChild(opacity)
-
 // Hamburger Menu
 var hamburger = c("i")
 hamburger.className = "fas fa-bars fa-2x"
 navigation.prepend(hamburger)
 
-// // Search
-// var search = c("input")
-// search.className = "searchBar"
-// search.placeholder = "Enter a searchterm or url"
-// search.type = "text"
-// navigation.appendChild(search)
-//
-// g(".searchBar").addEventListener("keyup",searchEnter)
-// function searchEnter(key) {
-//   if(key.key == "Enter") {
-//     var search = g(".searchBar").value;
-//     var containsDot = search.indexOf(".");
-//     if (search !== "") {
-//       if (containsDot > -1) {
-//         open("http://" + search);
-//       }
-//       else {
-//         open("https://www.google.com/search?q=" + search);
-//       }
-//     }
-//   }
-//   if (key.key == "Escape") {
-//     closeSearch()
-//   }
-// }
-
 // Create Navbar
 Navbar.forEach(i=>{
   var navList = c("li")

resources/js/javall.js

@@ -3,5 +3,4 @@ console.log('%cDoor Guus van Meerveld', "color:#9c9c9c; font-size:30px;");
 
 // Head tag
 var shortcon = $("<link>", {rel :'shortcut icon',href:'/resources/img/favicon.ico'})
-
 $('head').append(shortcon)