Added Licenses files

This commit is contained in:
James Dinh 2022-06-23 10:15:05 -10:00
parent 7cf177afb8
commit 403bf697b5
3 changed files with 613 additions and 24 deletions

View File

@ -165,8 +165,6 @@ nav ul li {
#banner-text { #banner-text {
text-align: center; text-align: center;
/* animation: headline 20s infinite;
animation-timing-function: linear; */
} }
#timer { #timer {
@ -187,18 +185,6 @@ nav ul li {
cursor: pointer; cursor: pointer;
background: unset; background: unset;
} }
/*
@keyframes flash {
0% {
background-color: #0d1117;
}
70% {
background-color: #2d2d2d;
}
100% {
background-color: #0d1117;
}
} */
.link:hover { .link:hover {
color:rgba(252, 188, 93, 0.719); color:rgba(252, 188, 93, 0.719);

576
css/licenses.css Normal file
View File

@ -0,0 +1,576 @@
/*
Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com)
File: licenses.css
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
For more info, contact jamesdinh77 (at) protonmail (dot) com
Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved.
*/
html {
scroll-behavior: smooth;
}
/* Nav */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
height: 59px;
width: 100%;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
flex-wrap: nowrap;
z-index: 100;
}
nav * {
padding: 0;
margin: 0px 5px;
list-style: none;
box-sizing: border-box;
z-index: 100;
text-decoration: none;
}
#nav-logo {
margin-top: 5px;
height: 50px;
width: 258px;
}
#nav-logo:hover {
transform: scale(1.03);
transition: 0.5s;
}
#nav-logo-div {
height: 50px;
width: 258px;
margin: none;
display: inline block;
position: fixed;
}
#nav-logo-a {
position: relative;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 30px;
margin: 10px 7px;
padding: 3px 5px;
cursor: pointer;
}
.navlink {
color:rgb(233, 203, 104);
font-size: 18px;
text-decoration: none;
position: relative;
}
.navlink.active,a:hover {
color: rgba(233, 203, 104, 0.774);
transition: .5s;
}
.navlink::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;
}
.navlink:hover::after,
.navlink:focus::after{
transform: scale(1);
}
.checkbtn {
font-size: 23px;
color: white;
float: right;
line-height: 59px;
margin-right: 20px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#nav-links-container {
display: flex;
width: auto;
margin: 0;
padding: 0;
height: 59px;
float: right;
flex-wrap: nowrap;
flex-direction: row-reverse;
align-content: stretch;
}
#sign-up {
padding: 6px 7px;
margin: 14px 15px 14px 4px;
border-radius: 5px;
font-size: 16px;
background-color: rgb(140, 42, 165);
color: bisque;
display: flex;
place-items: center;
}
#sign-up:hover {
transform: scale(1.05);
background-color: blueviolet;
cursor: pointer;
transition: 0.5s;
}
#banner {
height: 100%;
/* width: 50%; */
width: 380px;
margin: auto;
font-size: 20px;
display: inline-flex;
position: relative;
justify-content: left;
overflow: hidden;
align-items: center;
}
#banner-text {
text-align: center;
}
#timer {
color: rgb(184, 184, 184);
animation: blinking 3s infinite;
background-color: rgb(57, 57, 57);
border-radius: 5px;
padding: 2px 5px;
}
.tooltip-nav {
text-decoration: none;
}
#timer-link {
color:rgb(252, 188, 93);
text-decoration: none;
cursor: pointer;
background: unset;
}
.link:hover {
color:rgba(252, 188, 93, 0.719);
}
@keyframes blinking {
0% {
opacity: 1;
}
50% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
/* @keyframes headline {
0% {
transform: translateX(600px);
}
50% {
transform: translateX(-600px);
}
100% {
transform: translateX(-600px);
}
} */
/* .notification {
position: absolute;
text-align: center;
margin: auto;
z-index: 100;
visibility: hidden;
} */
@keyframes dropdown{
0% {
opacity: 0;
transform: translateY(-30px);
}
20% {
transform: translateY(0px);
opacity: 1;
}
40% {
transform: translateY(-7px);
}
100% {
transform: translateY(0px);
}
}
/* Responsive Functions */
@media (max-width: 1150px) {
#banner {
display: none;
}
}
@media (max-width: 800px) {
.checkbtn {
display: inline-block;
}
nav ul {
position: fixed;
width: 100%;
height: 250px;
margin-top: 58px;
margin-right: 0;
background: rgb(24, 24, 24);
visibility: hidden;
text-align: center;
}
nav ul li {
display: block;
margin: 20px 0;
line-height: 30px;
}
#check:checked ~ul {
visibility: visible;
animation: dropdown 0.5s ease;
}
.checkbtn {
display: inline-block;
}
#prize-logo, .podium-label {
transform: scale(0.9);
font-size: 16px !important;
}
#podium-label-1 {
margin-right: 1px !important;
}
#podium-label-2 {
margin-left: 1px !important;
}
#header-background {
background-position: unset !important;
background-size: unset !important;
}
#logo {
height: 300px !important;
width: 300px !important;
}
#banner {
display: inline-flex;
width: 300px;
}
}
@media (max-width: 750px) {
#banner {
display: none;
}
}
@media (max-width: 500px) {
#event, #rules, #prizes, #team {
transform: scale(0.9);
}
section {
padding-top: 0 !important;
}
}
@media (max-width: 470px) {
#nav-logo {
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
height: 50px;
width: 50px;
}
#logo {
height: 300px;
width: 300px;
}
#prizes-container {
transform: scale(0.9);
}
}
@media (max-height: 550px) {
#logo {
transform: scale(0.8);
}
#header-subtitle-date {
transform: translateY(-30px);
}
#spots-container {
transform: translateY(-30px);
}
#line-header {
transform: translateY(-30px);
}
#entrance-arrow {
visibility: hidden;
}
}
@media (max-height: 400px) {
#header {
transform: scale(0.7);
}
}
.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 */
#header-background {
background-image: url(/img/mountains-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 20%;
}
#header {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
/* background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); */
}
#logo {
height: 100px;
width: 100px;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#header-subtitle-date {
padding: 5px;
margin-top: 5px;
border-radius: 10px;
display: flex;
place-items: center;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein ease 1.5s;
}
#spots-container {
display: flex;
place-items: center;
border-radius: 10px;
margin-top: 5px;
padding: 0 7px;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein-2 ease 3s;
}
#header-subtitle-spots {
padding: 5px;
}
#spots-container:hover, #header-subtitle-date:hover {
transform: translateY(-2px);
transition: 0.5s;
}
#entrance-arrow {
width: 50px;
height: 50px;
position: absolute;
bottom: 10px;
float: bottom;
animation: bounce 3s infinite;
}
#entrance-arrow:hover {
font-size: 17px;
transition: 0.1s;
}
#header-gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Utilities */
#line-header {
width: 200px;
margin: 0 auto 5px;
animation: grow-wide ease 2s;
}
@keyframes grow-wide {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tooltip {
text-decoration: underline dotted;
cursor: help;
}
.emphasis-text {
color:rgb(51, 235, 189);
}
.discord-text {
color: rgb(110, 112, 247);
}
.discord-tag {
color: rgb(150, 150, 150);
}
.line {
width: 100px;
margin: 10px auto;
}
#footer-line {
width: 100px;
margin: 10px auto;
}
#arrow-link {
color:rgb(252, 188, 93);
text-decoration: none;
cursor: pointer;
}
.link {
color:rgb(252, 188, 93);
text-decoration: none;
cursor: pointer;
background:
linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)),
linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
background-size: 100% 0.1em, 0 0.1em;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}
.link:hover {
color:rgba(252, 188, 93, 0.719);
background-size: 0 0.1em, 100% 0.1em;
}
footer {
width: auto;
height: 100px;
background-color: rgb(24, 24, 24);
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 20px 20px 20px;
flex-flow: row wrap;
}
footer ul {
float: top;
}
footer li {
display: inline-block;
margin: 0 7px;
}
footer a {
color:rgb(108, 176, 231);
font-size: 16px;
}

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<!-- <!--
Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com) Gilroy Hacks Website Source Code -> HTML (https://gilroyhacks.com)
File: licenses.html
Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS Web-Designed by James Dinh ᓚᘏᗢ from scratch using pure HTML, CSS, and JS
For more info, contact jamesdinh77 (at) protonmail (dot) com For more info, contact jamesdinh77 (at) protonmail (dot) com
@ -13,10 +14,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gilroy Hacks</title> <title>Gilroy Hacks Liscences</title>
<link href="css/general.css" rel="stylesheet" type="text/css" media="all"> <link href="css/licenses.css" rel="stylesheet" type="text/css" media="all">
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all"> <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="css/leaflet.css"/>
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico"> <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
<link rel="apple-touch-icon" href="img/Gilroy Hacks Logo (app).png"> <link rel="apple-touch-icon" href="img/Gilroy Hacks Logo (app).png">
@ -50,22 +50,42 @@
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/> <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
</a> </a>
<div id="nav-links-container"> <div id="nav-links-container">
<input type="checkbox" id="check"> <input onclick="btnToggle()" type="checkbox" id="check">
<label for="check" class="checkbtn"> <label for="check" class="checkbtn">
<img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/> <img src="img/bars.png" loading="lazy" height="17" width="25" alt="Bars"/>
</label> </label>
<a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a> <a onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7"><div id="sign-up">SIGN UP</div></a>
<ul> <ul id="navList">
<li><a onclick="uncheck('check')" href="#event">Event</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#event">Event</a></li>
<li><a onclick="uncheck('check')" href="#rules">Rules</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#rules">Rules</a></li>
<li><a onclick="uncheck('check')" href="#prizes">Prizes</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a onclick="uncheck('check')" href="#team">Team</a></li> <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
</ul> </ul>
<div id="banner"> <div id="banner">
<p id="banner-text">Next event:<br>Opening Ceremony <abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p> <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
</div> </div>
</div> </div>
</nav> </nav>
<header>
<div id="header-background">
<div id="header-gradient">
<div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
<hr id="line-header">
<h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">35 spots remaining</h2>
</div>
</div>
</div>
</div>
</header>
<main>
<section>
hi
</section>
</main>
<!--Footer--> <!--Footer-->
<footer> <footer>
<ul> <ul>
@ -77,5 +97,12 @@
© 2022 Gilroy Hacks <br> © 2022 Gilroy Hacks <br>
All Rights Reserved All Rights Reserved
</footer> </footer>
<!-- JavaScript Refs -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/data_checkbox.js"></script>
<script src="js/map.js"></script>
</body> </body>
</html> </html>