Updated Nav

This commit is contained in:
James Dinh 2022-05-29 14:13:10 -07:00
parent 02ee756ca3
commit 5fe32ff2c2
5 changed files with 48 additions and 10 deletions

View File

@ -14,7 +14,7 @@ html {
}
nav {
background: rgb(31, 33, 35);;
/*background: rgb(31, 33, 35);*/
height: auto;
width: 100%;
overflow: hidden;
@ -23,13 +23,12 @@ nav {
position: fixed;
flex-wrap: nowrap;
z-index: 100;
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
/*box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);*/
}
nav * {
padding: 0;
margin: 1px 1px;
text-decoration: none;
list-style: none;
box-sizing: border-box;
z-index: 100;
@ -42,20 +41,44 @@ nav ul {
nav li {
display: inline-block;
line-height: 58px;
margin: 0 7px;
line-height: 30px;
margin: 10px 7px;
padding: 3px 5px;
cursor: pointer;
}
nav a {
color:rgb(136, 180, 231);
nav li a {
/*color:rgb(136, 180, 231);*/
color:rgb(233, 203, 104);
font-size: 18px;
text-decoration: none;
position: relative;
}
nav a.active,a:hover {
color: rgb(111, 129, 138);
nav li a.active,a:hover {
color: rgba(233, 203, 104, 0.774);
transition: .5s;
}
nav li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.1em;
background-color: hotpink;
opacity: 1;
transition: opacity 300ms, transform 300ms;
transform: scale(0);
transform-origin: center;
}
nav li a:hover::after,
nav li a:focus::after{
transform: scale(1);
}
.checkbtn {
font-size: 30px;
color: white;
@ -70,7 +93,22 @@ nav a.active,a:hover {
display: none;
}
#sign-up {
padding: 3px 5px;
border-radius: 5px;
line-height: 30px;
background-color: rgb(140, 42, 165);
color: bisque;
}
#sign-up:hover {
background-color: blueviolet;
transition: 0.5s;
cursor: pointer;
padding: 4px 6px;
margin: 0px 4.5px;
font-size: 17px;
}
.header-background {
background-image: none;

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -50,7 +50,7 @@
<li><a href="">Rules</a></li>
<li><a href="">Prizes</a></li>
<li><a href="">Teams</a></li>
<li id="sign-up"><a href="">SIGN UP</a></li>
<a href=""></a><li id="sign-up">SIGN UP</li></a>
</ul>
</nav>
</div>