Merge pull request #59 from hack4impact-calpoly/banner-logo

Banner logo
hack4impact-calpoly · Feb 26, 2025 · dc373a0 · dc373a0
2 parents 1a1798b + 10a384b
commit dc373a0
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 2 deletions.
diff --git a/public/Logo_Banner.png b/public/Logo_Banner.png
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,3 +1,9 @@
+import Head from "@/components/headerBar";
+
 export default function Navbar() {
-  return <div>Navbar</div>;
+  return (
+    <div>
+      <Head />
+    </div>
+  );
 }
diff --git a/src/components/headerBar.tsx b/src/components/headerBar.tsx
@@ -0,0 +1,15 @@
+import styles from "@/styles/header.module.css";
+
+export default function Head() {
+  return (
+    <header className={styles.head}>
+      <div className={styles.full_bars}>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+        <div className={styles.bar}></div>
+      </div>
+
+      <img src="Logo_Banner.png" className={styles.banner_img} />
+    </header>
+  );
+}
diff --git a/src/styles/header.module.css b/src/styles/header.module.css
@@ -0,0 +1,28 @@
+.head {
+  background-color: #d29561;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 8vh;
+}
+
+.full_bars {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  cursor: pointer;
+  position: absolute;
+  left: 1rem;
+}
+
+.bar {
+  width: 30px;
+  height: 3px;
+  background-color: #3b3b3b;
+  border-radius: 3px;
+}
+
+.banner_img {
+  height: 75%;
+  width: auto;
+}
diff --git a/src/styles/keyStats.module.css b/src/styles/keyStats.module.css
@@ -102,7 +102,7 @@
   stroke: #f7cba6;
   stroke-width: 10;
   fill: none;
-  stroke-linecap: round;
+  stroke-linecap: square;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
 }