a

static/css/auth_header.css

@@ -0,0 +1,34 @@
+/* Header */
+.auth-header {
+    width: 100%;
+    display: block;
+    height: 50px;
+    background-color: rgb(97, 102, 141);
+    margin-top: 0px;
+    padding: 0px;
+}
+
+.auth-header p{
+    float:left;
+    color:white;
+    font-weight: bold;
+    font-size: 14pt;
+    padding:0;
+    margin-left: 10px;
+    margin-top: 14px;
+}
+
+.auth-header .auth-header-image-container{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 45px;
+    width: 45px;
+    background-color: red;
+    padding-top: 2px;
+}
+
+.auth-header .auth-header-image-container img{
+    width: 100%;
+    height: 100%;
+}

static/css/header.css

@@ -6,10 +6,6 @@
     transform: translateY(-50%);
 }
 
-body {
-    margin: 0;
-}
-
 /* BACKGROUND */
 .headerDIV > div {
     height: 100%;
@@ -20,13 +16,17 @@ body {
 
 /* LOGO PART */
 .headerDIVLogo {
-    width: 35px;
+    width: 75px;
 }
-.headerDIVLogo > img {
+
+.headerDIVLogo a {
+    width: 100%;
+    height: 100%;
+}
+.headerDIVLogo a img {
+    margin-top: 10px;
     float: left;
-    height: 80%;
+    width: 100%;
-    position: relative;
-    top: 10%;
 }
 
 /* SEARCH PART */
@@ -91,6 +91,7 @@ body {
     height: 65px;
     background-color: #414854;
     margin: 0;
+    display: block;
 }
 
 @media only screen and (max-width: 800px) {

static/css/product.css

@@ -1,14 +1,3 @@
-*{
-    padding:0;
-}
-
-h1, h2{
-    margin-left: 0px;
-    text-align: left;
-    padding-bottom: 0;
-    margin-bottom: 0px;
-}
-
 .seller{
     display: block;
     height: 30px;
@@ -34,13 +23,7 @@ h1, h2{
     border: 2px solid rgb(143, 143, 143);
     float:left;
 }
-#content
+
-{
-    width: 1000px;
-    background-color: rgb(244, 244, 244);
-    margin:auto;
-    padding-top: 10px;
-}
 #productPicture
 {
     width: 40%;
@@ -110,7 +93,6 @@ h1, h2{
 }
 #reviews{
     width: 100%;
-    height: 1600px;
     display: block;
     float: left;
     background-color: rgba(39, 39, 39, 0);
@@ -122,15 +104,6 @@ h1, h2{
     float: left;
     margin-bottom: 20px;
 }
-#reviewTemplatePicture
-{
-    width: 200px;
-    height: 200px;
-    display: block;
-    float: left;
-    background-color: rgb(85, 158, 255);
-}
-
 
 #data
 {
@@ -154,14 +127,14 @@ h1, h2{
     background-color: rgb(235, 196, 228);
 }
 
-form{
+.form{
     display:block;
     margin-left: auto;
     margin-right: auto;
     width: 500px;
 }
 
-form label{
+.form label{
     display:block;
     margin-left: auto;
     margin-right: auto;
@@ -169,7 +142,7 @@ form label{
     margin-top: 20px;
 }
 
-form label p{
+.form label p{
     width: 100%;
     display:block;
     margin-left: auto;
@@ -178,7 +151,7 @@ form label p{
     font-weight: bold;
     letter-spacing: 1.5px;
 }
-form label input{
+.form label input{
     width: 100%;
     display:block;
     margin-left: auto;
@@ -192,7 +165,7 @@ form label input{
     outline: none !important;
 }
 /* Submit button with blue background horizontal center*/
-form input[type="submit"]{
+.form input[type="submit"]{
     color: rgb(255, 255, 255);
     font-weight: bold;
     letter-spacing: 1.5px;
@@ -214,21 +187,21 @@ form input[type="submit"]{
 
 /* Hover */
 
-form label input:hover{
+.form label input:hover{
     border: 2px solid rgb(1, 197, 246);
 }
 
-form label input:focus{
+.form label input:focus{
     border: 2px solid rgb(1, 197, 246);
     box-shadow: 0 0 5px #719ece62;
 }
 
-form input[type="submit"]:hover{
+.form input[type="submit"]:hover{
     border: 2px solid rgb(7, 130, 200);
     background-color: rgb(7, 130, 200);
 }
 
-textarea{
+.form textarea{
     resize: vertical;
     width: 100%;
     display:block;
@@ -237,9 +210,3 @@ textarea{
 }
 
 
-@media only screen and (max-width: 1030px) {
-    #content
-    {
-        width: 100%; 
-    }
-  }

static/css/style.css

@@ -1,18 +1,26 @@
 *{
     font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+    padding: 0;
 }
 
 html,body{
     min-height: 100% !important;
-    height: 100%;
+    height: 100% !important;
+    width: 100%;
 }
 
-h1{
+h1, h2{
+    margin-left: 0px;
+    text-align: left;
+    padding-bottom: 0;
+    margin-bottom: 0px;
+}
+
+.text-center{
     text-align: center;
 }
 
-
-
 #error-text{
     color: red;
     font-weight: bold;
@@ -36,3 +44,20 @@ h1{
     display: block;
     padding-top: 10px;
 }
+
+#content
+{
+    width: 1000px;
+    background-color: rgb(244, 244, 244);
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 10px;
+    padding-bottom: 20px;
+}
+
+@media only screen and (max-width: 1030px) {
+    #content
+    {
+        width: 100%; 
+    }
+}

views/partials/auth_header.ejs

@@ -0,0 +1,6 @@
+<header class="auth-header">
+    <p>OnlineShop | <%= title %></p>
+    <div class="auth-header-image-container">
+        <img src="/images/logo.png">
+    </div>
+</header>

views/partials/head.ejs

@@ -5,3 +5,4 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="/css/header.css">
 <link rel="stylesheet" href="/css/style.css">
+<link rel="stylesheet" href="/css/auth_header.css">

views/partials/header.ejs

@@ -1,6 +1,8 @@
 <div class="headerDIV">
     <div class="headerDIVLogo">
+        <a href="/">   
             <img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
+        </a>
     </div><div class="headerDIVSearch">
         <input placeholder="Suche" class="vertical-center"></input
         ><button class="vertical-center"><i class="material-icons">search</i></button>

views/product.ejs

@@ -11,8 +11,6 @@
     </header>
 
     <div id="content">
-
-        <div id="top">
         <div id="productPicture">
             <img src="/images/examples.jpg" alt="">
         </div>
@@ -42,7 +40,7 @@
                     <% } %>
             </div>
         </div>
-        </div>
+        
 
         <div id="description">
             <h2>Beschreibung</h2>
@@ -51,7 +49,7 @@
         <% if(loggedIn){ %>
         <div id="newReview">
             <h2 style="padding-left: 30px;">Rezensionen</h2>
-            <form action="/review/create/<%= product.id %>" method="post">
+            <form class="form" action="/review/create/<%= product.id %>" method="post">
                 <label for="title">
                     <p>Titel: </p>
                     <input type="text" name="title">

views/register.ejs

@@ -5,6 +5,8 @@
     <link rel="stylesheet" href="/css/auth.css">
 </head>
 <body>
+    <%- include('partials/auth_header'); %>
+    <div class="content">
         <h1>Register</h1>
 
         <form action="/auth/register" method="POST">
@@ -78,5 +80,6 @@
             <!-- Already have an account?-->
             <a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
         </form>
+    </div>
 </body>
 </html>