From 583115d505e153231fd7c03b7c3d8d0edf526dd4 Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Wed, 14 May 2025 18:42:12 +0200
Subject: [PATCH] add Header

---
 code/frontend/src/header.css | 46 ++++++++++++++++++++++++++++++++++++
 code/frontend/src/header.tsx | 17 +++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 code/frontend/src/header.css
 create mode 100644 code/frontend/src/header.tsx

diff --git a/code/frontend/src/header.css b/code/frontend/src/header.css
new file mode 100644
index 0000000..761c5ce
--- /dev/null
+++ b/code/frontend/src/header.css
@@ -0,0 +1,46 @@
+:root {
+  --Rotkehlchen-gray: #e7ecf2;
+  --Rotkehlchen-brown1: #a28d7a;
+  --Rotkehlchen-orange-default: #e79a0e;
+}
+
+.base-header {
+  width: 100vw;
+  display: flex;
+  height: 76px;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  border-bottom: 3px solid var(--Rotkehlchen-brown1);
+  background: var(--Rotkehlchen-gray);
+}
+.base-header-title {
+  display: flex;
+  width: 162px;
+  height: 63px;
+  flex-direction: column;
+  justify-content: center;
+  flex-shrink: 0;
+
+  color: var(--Rotkehlchen-orange-default);
+  text-align: center;
+
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px;
+}
+
+.base-header-icon {
+  margin: 40px;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
diff --git a/code/frontend/src/header.tsx b/code/frontend/src/header.tsx
new file mode 100644
index 0000000..7301306
--- /dev/null
+++ b/code/frontend/src/header.tsx
@@ -0,0 +1,17 @@
+import "./header.css";
+
+
+function Header() {
+
+  return (
+      <header className="base-header">
+        <div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
+        <p className="base-header-title">
+          Feather Feed
+        </p>
+        <div className="base-header-icon"> <img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" /> </div>
+      </header>
+  );
+}
+
+export default Header;