further sorting

css/projects.css

@@ -170,7 +170,7 @@ header {
     background-color: #f9f9ed  ;
     height: 500px;
     position: relative;
-    margin-top: 100px;
+    justify-content: center;
 }
 
 .hero-text {
@@ -232,6 +232,92 @@ header {
     }
 }
 
+/* portfolio
+=================== */
+
+/* .portfolio {
+    margin: 3em 0 0;
+} */
+
+.port-item {
+    margin: 0;
+    position: relative;
+}
+
+.port-item img {
+    display: block;
+}
+
+.port-desc {
+    position: absolute;
+    z-index: 100;
+    bottom: 0em;
+    left: 0em;
+    right: 0em;
+    color: white;
+    background: rgba(0, 0, 0, 0.6);
+    padding-bottom: 2em;
+}
+
+.port-desc p {
+    margin: 1em;
+}
+
+@media (min-width: 37rem) {
+    .port-item {
+        width: 50%;
+        float: left;
+    }
+}
+
+@media (min-width: 60rem) {
+    .port-item {
+        width: 33.3333334%;
+        overflow: hidden;
+    }
+
+    .port-desc {
+        transform: translateY(150%);
+    }
+
+    .port-item:hover .port-desc {
+        transform: translateY(0%);
+    }
+}
+
+/* Images Instagram 
+=======================*/
+
+.images {
+    filter: grayscale(100%);
+    transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
+    height: 200px;
+    width: 200px;
+    cursor:pointer;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+.images:hover {
+    -webkit-filter: grayscale(0%);
+    filter: grayscale(0%);
+    transition: filter 0.8s ease-out;
+}
+
+/* About
+=============== */
+
+video {
+    width: 100%;
+    height: auto;
+  }
+
+/* Jewellery
+=============== */
+
+
+
 /* Collection 
 ================*/
 
@@ -322,28 +408,33 @@ div.collection div.col-desc {
     text-align: center;
 } */
 
-/* Images Instagram 
+/* Contacts
-=======================*/
+================== */
 
-.images {
+.contact-bg {
-    filter: grayscale(100%);
+    align-items: center;
-    transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
+    background: url('../img/who-we-are.jpg');
-    height: 200px;
+    background-position: center center;
-    width: 200px;
+    background-repeat: no-repeat;
-    cursor:pointer;
+    background-size: cover;
-    margin-left: 5px;
+    display: flex;
-    margin-right: 5px;
+    justify-content: center;
-    margin-bottom: 5px;
 }
 
-.images:hover {
+.contact-info {
-    -webkit-filter: grayscale(0%);
+    background: #80808090;
-    filter: grayscale(0%);
+    margin: 25vmin 0;
-    transition: filter 0.8s ease-out;
+    padding: 1.5rem;
+}
+
+@media screen and (max-width: 1000px) {
+    .contact-info h2 {
+        font-size: 14px;
+    }
 }
 
 /* buttons 
-=======================*/                            /* Noch ordnen */
+================== */                            /* Noch ordnen */
 
 .button {
     display: inline-block;

css/styles.css

@@ -21,10 +21,7 @@ footer::after {
     clear: both;
 }
 
-video {
+
-    width: 100%;
-    height: auto;
-  }
 
 /* typography
 =================== */
@@ -110,58 +107,6 @@ p:last-of-type {
 
 
 
-/* portfolio
-=================== */
-
-/* .portfolio {
-    margin: 3em 0 0;
-} */
-
-.port-item {
-    margin: 0;
-    position: relative;
-}
-
-.port-item img {
-    display: block;
-}
-
-.port-desc {
-    position: absolute;
-    z-index: 100;
-    bottom: 0em;
-    left: 0em;
-    right: 0em;
-    color: white;
-    background: rgba(0, 0, 0, 0.6);
-    padding-bottom: 2em;
-}
-
-.port-desc p {
-    margin: 1em;
-}
-
-@media (min-width: 37rem) {
-    .port-item {
-        width: 50%;
-        float: left;
-    }
-}
-
-@media (min-width: 60rem) {
-    .port-item {
-        width: 33.3333334%;
-        overflow: hidden;
-    }
-
-    .port-desc {
-        transform: translateY(150%);
-    }
-
-    .port-item:hover .port-desc {
-        transform: translateY(0%);
-    }
-}
 
 /* display flex */
 
@@ -188,27 +133,7 @@ p:last-of-type {
 
 /* Contact
 =================== */
-.contact-bg {
-    align-items: center;
-    background: url('../img/who-we-are.jpg');
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    display: flex;
-    justify-content: center;
-}
 
-.contact-info {
-    background: #80808090;
-    margin: 25vmin 0;
-    padding: 1.5rem;
-}
-
-@media screen and (max-width: 1000px) {
-    .contact-info h2 {
-        font-size: 14px;
-    }
-}
 
 .gallery-description {
     display: none;

index.php

@@ -1,7 +1,9 @@
 <?php include('header.tpl'); ?>
 
-<div class="hero-image">
+<div id="content_padding">
-	Logo
+	<div class="hero-image">
+		<img src="images/logo_button/title_ivory.png" alt="bricabracomania metalworks logo">
+	</div>
 </div>
 
 <div class="container">