website/styles/header.css

@@ -25,6 +25,11 @@ header {
     padding-left: 48px;
 }
 
+
+#header-search input {
+    border: none;
+}
+
 header div {
     display: inline-block;
 }

website/styles/search.css

@@ -0,0 +1,12 @@
+.search-output {
+    width: calc(50% - 48px);
+    display: inline-flex;
+}
+
+.search-output:nth-child(n) {
+    display: inline-block;
+}
+
+#search-friends-output {
+    margin-right: 10px;
+}

website/views/header.php

@@ -4,8 +4,13 @@
     </div>
     <div id="header-search">
         <form action="search.php" method="get">
-            <input name="search" type="text" placeholder="zoek naar van alles" />
+            <input name="search"
-            <input type="submit" value="Zoek"/>
+                   type="text"
+                   placeholder="Zoek naar wat je wil"
+                   required
+            />
+            <input type="submit"
+                   value="Zoek"/>
         </form>
     </div>
     <div class="right profile-menu">