add header component

2025-10-30 13:17:10 +01:00 · 2023-10-09 16:11:08 +02:00
parent 43f717f9a0
commit 448a4f137f
7 changed files with 81 additions and 8 deletions
--- a/src/styles/Header.scss
+++ b/src/styles/Header.scss
@@ -0,0 +1,42 @@
+.header {
+	padding: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 5rem;
+	flex-direction: row;
+
+	.logo {
+		flex: 0.5;
+	}
+
+	.links {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+
+		a {
+			margin-left: 1rem;
+			text-decoration: none;
+			color: #323232;
+			font-weight: 600;
+			font-size: 1.2rem;
+			transition: all 0.1s ease-in-out;
+			border-bottom: 3px solid transparent;
+
+			&:hover {
+				color: #000000;
+				border-color: #000000;
+			}
+		}
+	}
+
+	.control {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex: 0.5;
+	}
+}