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

20
src/style.css
View File

@ -103,16 +103,32 @@ header a:hover {
grid-template-columns: repeat(auto-fit,minmax(300px,450px)); grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
}
.main {
margin: 0 10px; margin: 0 10px;
} }
header { header {
background-color: rgba(0,0,0,0.66);
backdrop-filter: blur(10px);
text-align: left; text-align: left;
margin: 0;
} }
header > div { 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; display: inline-block;
margin-left: 20px;;
}
.navigation2 {
text-align: right;
} }
.box { .box {
/*color: #97e2fc;*/ /*color: #97e2fc;*/