sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Header

Browse Source
This commit is contained in:
dudleycu 2021-08-29 23:46:02 +00:00
parent c5a004ea4a
commit 3b62b7fa53
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/TestHeader.js
View File

@ -4,13 +4,14 @@ function TestHeader() {
return (
<header>
<div style={{gridArea:"1 / span 3"}}>
<ul>
<li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li>
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
<div className="navigation"> <ul>
<li className="headerMenuItem"><a href=".">Build Planner</a></li>
<li className="headerMenuItem"><a href=".">Guides</a></li>
<li className="headerMenuItem"><a href=".">Blog</a></li>
<li className="headerMenuItem"><a href=".">About</a></li>
</ul>
</ul></div>
<div className="navigation2">lol</div>
</div>
</header>
)

20
src/style.css
View File

@ -103,16 +103,32 @@ header a:hover {
grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center;
gap: 10px;
}
.main {
margin: 0 10px;
}
header {
background-color: rgba(0,0,0,0.66);
backdrop-filter: blur(10px);
text-align: left;
margin: 0;
}
header > div {
background-color: rgba(0,0,0,0.33);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
header li {
.navigation {
text-align: center;
font-size: 17px;
font-family: "ngs2";
align-items: stretch;
}
.navigation li {
display: inline-block;
margin-left: 20px;;
}
.navigation2 {
text-align: right;
}
.box {
/*color: #97e2fc;*/