wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated NavBar

Browse Source
This commit is contained in:
James Dinh 2022-05-29 22:39:53 -07:00
parent 34fd5607db
commit 5bdfd9aac8
2 changed files with 125 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
css/general.css
View File

@ -26,12 +26,20 @@ nav {
nav * { nav * {
padding: 0; padding: 0;
margin: 2px 5px; margin: 0px 5px;
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
z-index: 100; z-index: 100;
} }
#nav-logo {
margin-top: 5px;
}
#nav-logo-a {
position: relative;
}
nav ul { nav ul {
float: right; float: right;
margin-right: 20px; margin-right: 20px;
@ -78,36 +86,126 @@ nav li a:focus::after{
} }
.checkbtn { .checkbtn {
font-size: 30px; font-size: 23px;
color: white; color: white;
float: right; float: right;
line-height: 60px; line-height: 59px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
#check { #check {
display: none; display: none;
} }
#nav-links-container {
display: flex;
margin: 0;
padding: 0;
height: 59px;
float: right;
flex-wrap: nowrap;
flex-direction: row-reverse;
align-content: stretch;
}
#sign-up { #sign-up {
padding: 3px 5px; padding: 3px 7px;
margin: 14px 7px 14px 5px;
border-radius: 5px; border-radius: 5px;
line-height: 30px; font-size: 16px;
background-color: rgb(140, 42, 165); background-color: rgb(140, 42, 165);
color: bisque; color: bisque;
display: flex;
place-items: center;
} }
#sign-up:hover { #sign-up:hover {
background-color: blueviolet; background-color: blueviolet;
transition: 0.5s; transition: 0.5s;
cursor: pointer; cursor: pointer;
padding: 4px 6px; padding: 4px 8px;
margin: 0px 4.5px; margin: 13px 7px 13px 0;
font-size: 17px; font-size: 17px;
} }
@media (max-width: 800px) {
.checkbtn {
display: inline-block;
}
nav ul {
position: fixed;
width: 100%;
height: 250px;
margin-top: 60px;
margin-right: 0;
background: rgb(24, 24, 24);
top: -100%;
text-align: center;
/*animation: growOut 300ms ease-in-out forwards*/
}
nav ul li {
display: block;
margin: 20px 0;
line-height: 30px;
}
#check:checked ~ul {
top: 0;
}
.checkbtn {
display: inline-block;
}
#card-container {
grid-template-columns: repeat(1, 1fr) !important;
}
}
@media (max-width: 500px) {
.checkbtn {
display: none;
}
}
#spots-container {
display: flex;
place-items: center;
}
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
margin: 10px 4px;
height: 10px;
width: 10px;
transform: scale(1);
animation: pulse-black 2s infinite;
position: relative;
}
.blob.green {
background: rgba(51, 217, 178, 1);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
}
}
#header-background { #header-background {
background-image: none; background-image: none;
background-position: center; background-position: center;

35
index.html
View File

@ -38,29 +38,34 @@
<body></body> <body></body>
<!--Nav--> <!--Nav-->
<nav id="navBar"> <nav id="navBar">
<a href="./"> <a id="nav-logo-a" href="./">
<img src="img/Gilroy Hacks Logo [Summer-wide].png" loading="lazy" height="55" width="auto" alt="logo"/> <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide].png" loading="lazy" height="50" width="auto" alt="logo"/>
</a> </a>
<input type="checkbox" id="check"> <div id="nav-links-container">
<label for="check" class="checkbtn"> <input type="checkbox" id="check">
<img src="img/bars.png" loading="lazy" height="20" width="25" alt="Bars"/> <label for="check" class="checkbtn">
</label> <img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
<ul> </label>
<li><a href="event">Event</a></li> <a href=""></a><div id="sign-up">SIGN UP</div></a>
<li><a href="rules">Rules</a></li> <ul>
<li><a href="prizes">Prizes</a></li> <li><a href="#event">Event</a></li>
<li><a href="teams">Teams</a></li> <li><a href="#rules">Rules</a></li>
<a href=""></a><li id="sign-up">SIGN UP</li></a> <li><a href="#prizes">Prizes</a></li>
</ul> <li><a href="#teams">Teams</a></li>
</ul>
</div>
</nav> </nav>
<!--Front Page--> <!--Front Page-->
<header> <header>
<div id="header-background"> <div id="header-background">
<div id="header"> <div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="300" width="300" loading="lazy" alt="logo"/> <img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" loading="lazy" alt="logo"/>
<hr class="line"> <hr class="line">
<h2 id="header-subtitle-date">Aug 12 - 14</h2> <h2 id="header-subtitle-date">Aug 12 - 14</h2>
<h2 id="header-subtitle-spots">40 spots Left</h2> <div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">40 spots Left</h2>
</div>
<div id="entrance-arrow"> <div id="entrance-arrow">
<a href="#event" class="link"> <a href="#event" class="link">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>