Finishing Header

Author: coder-abdo

css/style.css

@@ -24,6 +24,11 @@ body {
   font-family: "Josefin Sans", sans-serif;
   font-weight: 400; }
 
+.heading-1 {
+  font-size: 4.5rem;
+  line-height: 1;
+  color: #f9f7f6; }
+
 .heading-2 {
   font-size: 4rem;
   font-style: italic;
@@ -97,8 +102,43 @@ body {
     transform: translateY(1.3rem); }
 
 .header {
-  background-color: violet;
-  grid-column: full-start / col-end 6; }
+  background-color: #54483A;
+  background-image: linear-gradient(rgba(16, 29, 44, 0.93), rgba(16, 29, 44, 0.93)), url(../images/hero.jpeg);
+  background-size: cover;
+  background-position: center;
+  grid-column: full-start / col-end 6;
+  padding: 4rem;
+  display: grid;
+  grid-template-rows: 1fr min-content 6rem 1fr;
+  grid-template-columns: max-content;
+  grid-row-gap: 1.5rem;
+  justify-content: center; }
+  .header__logo {
+    height: 3rem;
+    justify-self: center; }
+  .header__btn {
+    align-self: start;
+    justify-self: start; }
+  .header__seenon-text {
+    display: grid;
+    grid-template-columns: 1fr max-content 1fr;
+    grid-column-gap: 1.5rem;
+    align-items: center;
+    font-size: 1.6rem;
+    color: #aaa; }
+    .header__seenon-text::before, .header__seenon-text::after {
+      content: "";
+      display: block;
+      height: 1px;
+      background-color: currentColor; }
+  .header__seenon-logos {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: 3rem;
+    justify-items: center; }
+    .header__seenon-logos img {
+      height: 2.5rem;
+      filter: brightness(70%); }
 
 .realtors {
   background-color: royalblue;

index.html

@@ -16,7 +16,17 @@
             <button class="nav-btn"></button>
         </div>
         <header class="header">
-            Header
+            <img src="images/logo.png" alt="Nexter Logo" class="header__logo">
+            <h3 class="heading-3">Your Own Home</h3>
+            <h1 class="heading-1">The Ultimate Personal Freedom</h1>
+            <button class="btn header__btn">View our properties</button>
+            <p class="header__seenon-text">Seen On</p>
+            <div class="header__seenon-logos">
+                <img src="images/logo-bbc.png" alt="bbc">
+                <img src="images/logo-forbes.png" alt="forbes">
+                <img src="images/logo-techcrunch.png" alt="tech">
+                <img src="images/logo-bi.png" alt="business">
+            </div>
         </header>
         <div class="realtors">
             Top 3 Realtors 

sass/_header.scss

@@ -1,4 +1,52 @@
 .header {
-    background-color: violet;
+    background-color: $color-grey-dark-1;
+    background-image: linear-gradient(rgba($color-secondary, .93), 
+                                      rgba($color-secondary, .93)), 
+                      url(../images/hero.jpeg);
+    background-size: cover;
+    background-position: center;
     grid-column: full-start / col-end 6;
+    padding: 4rem;
+    display: grid;
+    grid-template-rows: 1fr min-content 6rem 1fr;
+    grid-template-columns: max-content;
+    grid-row-gap: 1.5rem;
+    justify-content: center;
+    &__logo {
+        height: 3rem;
+        justify-self: center;
+    }
+
+    &__btn {
+        align-self: start;
+        justify-self: start;
+    }
+
+    &__seenon-text {
+        display: grid;
+        grid-template-columns: 1fr max-content 1fr;
+        grid-column-gap: 1.5rem;
+        align-items: center;
+        font-size: 1.6rem;
+        color: $color-grey-light-2;
+
+        &::before,
+        &::after {
+            content: "";
+            display: block;
+            height: 1px;
+            background-color: currentColor;
+        }
+    }
+
+    &__seenon-logos {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-column-gap: 3rem;
+        justify-items: center;
+        img {
+            height: 2.5rem;
+            filter: brightness(70%);
+        }
+    }
 }

sass/_typography.scss

@@ -4,6 +4,9 @@
 }
 .heading-1 {
     @extend %heading;
+    font-size: 4.5rem;
+    line-height: 1;
+    color: $color-grey-light-1;
 }
 .heading-2 {
     @extend %heading;