janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-10-30 13:17:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Header component to App.js

Browse Source
This commit is contained in:
dertyp7
2024-01-13 16:27:05 +01:00
parent 15a866bbe6
commit b0b71f2c06
6 changed files with 77 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles/Header.scss Normal file
View File

@@ -0,0 +1,47 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid var(--color-border);
padding: 10px 50px;
.logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 2rem;
font-weight: 700;
letter-spacing: 5px;
padding-bottom: 8px;
color: var(--color-font);
span {
color: #7c7d7d;
}
}
nav {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 50ms ease-in-out;
&.current {
border-color: var(--color-accent);
}
&:hover {
border-color: var(--color-accent);
}
}
}
}