From c28b7d9c184448d53eac704bfb420274f68a8f0d Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Sat, 15 May 2021 10:09:29 +0300
Subject: [PATCH] created and styled header section

---
 src/commons/header.jsx    | 22 ++++++++++++++-
 src/sass/_header.scss     | 57 ++++++++++++++++++++++++++++++++++++++-
 src/sass/_typography.scss |  3 +++
 3 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/commons/header.jsx b/src/commons/header.jsx
index 75111f9..a9fa1bd 100644
--- a/src/commons/header.jsx
+++ b/src/commons/header.jsx
@@ -1,3 +1,23 @@
+import logo from "./img/logo.png";
+import bbclogo from "./img/logo-bbc.png";
+import forbeslogo from "./img/logo-forbes.png";
+import techcrunchlogo from "./img/logo-techcrunch.png";
+import bilogo from "./img/logo-bi.png";
+
 export default function Header() {
-  return <header className="header">Header</header>;
+  return (
+    <header className="header">
+      <img src={logo} alt="Nexter Logo" className="header__logo" />
+      <h3 className="heading-3">Your own home:</h3>
+      <h1 className="heading-1">The ultimate personal freedom</h1>
+      <button className="btn header__btn">View our poperties</button>
+      <div className="header__seenon-text">Seen On</div>
+      <div className="header__seenon-logos">
+        <img src={bbclogo} alt="BBC Logo" />
+        <img src={forbeslogo} alt="Forbes Logo" />
+        <img src={techcrunchlogo} alt="Techcrunch Logo" />
+        <img src={bilogo} alt="Business Insider Logo" />
+      </div>
+    </header>
+  );
 }
diff --git a/src/sass/_header.scss b/src/sass/_header.scss
index b21c2eb..c1388fd 100644
--- a/src/sass/_header.scss
+++ b/src/sass/_header.scss
@@ -1,4 +1,59 @@
 .header {
-  background-color: $color-grey-dark-1;
   grid-column: full-start / col-end 6;
+  background-image: linear-gradient(
+      rgba($color-secondary, 0.93),
+      rgba($color-secondary, 0.93)
+    ),
+    url(../commons/img/hero.jpeg);
+  background-size: cover;
+  background-position: center;
+  padding: 8rem;
+  padding-top: 4rem;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-rows: 1fr min-content 6rem 1fr;
+  grid-template-columns: max-content;
+  row-gap: 1.5rem;
+  justify-content: center;
+
+  &__logo {
+    height: 3rem;
+    justify-self: center;
+  }
+
+  &__btn {
+    align-self: start;
+    justify-self: start;
+  }
+
+  &__seenon-text {
+    display: grid;
+
+    font-size: 1.6rem;
+    color: $color-grey-light-2;
+    grid-template-columns: 1fr max-content 1fr;
+    column-gap: 1.5rem;
+    align-items: center;
+
+    &::before,
+    &::after {
+      content: "";
+      height: 1px;
+      display: block;
+      background-color: currentColor;
+    }
+  }
+
+  &__seenon-logos {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 3rem;
+    justify-items: center;
+
+    img {
+      height: 2.5rem;
+      filter: brightness(70%);
+    }
+  }
 }
diff --git a/src/sass/_typography.scss b/src/sass/_typography.scss
index 3f91523..2ba983e 100644
--- a/src/sass/_typography.scss
+++ b/src/sass/_typography.scss
@@ -5,6 +5,9 @@
 
 .heading-1 {
   @extend %heading;
+  font-size: 4.5rem;
+  color: $color-grey-light-1;
+  line-height: 1;
 }
 
 .heading-2 {