changes to navbar

This commit is contained in:
th3keyboard 2024-11-06 18:16:21 -06:00
parent 32461b6fb6
commit 86746df59b
3 changed files with 46 additions and 2 deletions

View file

@ -15,12 +15,45 @@ html, body {
} }
.navbarCont { .navbarCont {
background-color: grey; position: relative;
background-color: #2c3e50;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.navbarCont a {
float: left;
text-align: center;
padding: 12px;
text-decoration: none;
color: #e67e22;
}
.navbarCont a.icon {
padding: 0px;
}
.navbarCont a.title {
font-size: 26.5px;
}
.navbarCont a.rightB {
float: right;
display: inline-block;
padding: 20px;
margin: 0;
color: #ecf0f1;
}
.navbarCont a.rightB:hover {
background-color: #34495e
}
.navbarCont img {
float: left;
}
.canvasCont { .canvasCont {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -68,3 +101,10 @@ canvas {
margin: 20px; margin: 20px;
image-rendering: pixelated; image-rendering: pixelated;
} }
@media screen and (max-width: 600px) {
.navbarCont a {
/* possible hamburger menu for moblie users*/
position: absolute
}
}

View file

@ -13,7 +13,11 @@
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="navbarCont"> <div class="navbarCont">
<h1>ThePlaceHolders</h1> <a class="icon" href="./index.html"><img src="navbarlogo.png"></img></a>
<a class="title" href="./index.html">ThePlaceHolders</a>
<a class="rightB" href="./contact.html">Contact</a>
<a class="rightB">Login</a>
<a class="rightB">Settings</a>
</div> </div>
<!--note to self: below IS the canvas--> <!--note to self: below IS the canvas-->
<div class="canvasCont"> <div class="canvasCont">

BIN
static/navbarlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1,020 B