supheader

src/App.tsx

@@ -7,9 +7,13 @@ import "./styles/style.scss";
 // Pages
 import Main from "./pages/Main";
 
+// Static
+import Header from "./components/header/Header";
+
 const App = () => {
   return (
     <div className="App">
+      <Header />
       <Routes>
         <Route path="/" element={<Main />} />
       </Routes>

src/components/header/Header.tsx

@@ -0,0 +1,12 @@
+// Components
+import SupHeader from "./SupHeader";
+
+const Header = () => {
+  return (
+    <div className="header">
+      <SupHeader />
+    </div>
+  );
+};
+
+export default Header;

src/components/header/SupHeader.tsx

@@ -0,0 +1,19 @@
+// Images
+import Logo from "../../assets/images/sup-header.png";
+
+const SupHeader = () => {
+  return (
+    <div className="supheader">
+      <div className="container">
+        <div className="supheader-inner">
+          <h1>Halkara Habarlar Merkezi</h1>
+          <div className="supheader-logo">
+            <img src={Logo} alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SupHeader;

src/styles/_general.scss

@@ -39,3 +39,11 @@ a {
   color: #000;
   text-decoration: none;
 }
+
+.container {
+  height: 100%;
+  width: 100%;
+  max-width: 131rem;
+  padding: 0 4rem;
+  margin: 0 auto;
+}

src/styles/_header.scss

@@ -0,0 +1,31 @@
+.supheader {
+  height: 11rem;
+  background: $main;
+}
+
+.supheader-inner {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 100%;
+  position: relative;
+
+  h1 {
+    font-size: 2rem;
+    color: $white;
+  }
+}
+
+.supheader-logo {
+  max-width: 48.8rem;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

src/styles/style.scss

@@ -1,2 +1,3 @@
 @import "./variables";
 @import "./general";
+@import "./header";