mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add Header

Browse source
This commit is contained in:
Niklas 2025-05-14 18:42:12 +02:00 • committed by BlankAccountsUsername
parent 8e3ba1afab
commit 583115d505
2 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
code/frontend/src/header.css Normal file
View file

@ -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;
}

17
code/frontend/src/header.tsx Normal file
View file

@ -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;