diff --git a/css/general.css b/css/general.css index b46c56e..e4ed4c6 100644 --- a/css/general.css +++ b/css/general.css @@ -5,40 +5,40 @@ For more info, contact jamesdinh77 (at) protonmail (dot) com */ html { - scroll-behavior: smooth; + scroll-behavior: smooth; } /* Nav */ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } nav { - height: auto; - width: 100%; - overflow: hidden; - top: 0; - left: 0; - position: fixed; - flex-wrap: nowrap; - z-index: 100; + height: auto; + 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; + 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; + margin-top: 5px; + height: 50px; + width: 258px; } #nav-logo-div { @@ -50,96 +50,95 @@ nav * { } #nav-logo-a { - position: relative; + position: relative; } nav ul { - float: right; - margin-right: 20px; + float: right; + margin-right: 20px; } nav li { - display: inline-block; - line-height: 30px; - margin: 10px 7px; - padding: 3px 5px; - cursor: pointer; + display: inline-block; + line-height: 30px; + margin: 10px 7px; + padding: 3px 5px; + cursor: pointer; } nav li a { - color:rgb(233, 203, 104); - font-size: 18px; - text-decoration: none; - position: relative; + color:rgb(233, 203, 104); + font-size: 18px; + text-decoration: none; + position: relative; } nav li a.active,a:hover { - color: rgba(233, 203, 104, 0.774); - transition: .5s; + 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; + 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); + transform: scale(1); } .checkbtn { - font-size: 23px; - color: white; - float: right; - line-height: 59px; - margin-right: 20px; - cursor: pointer; - display: none; - + font-size: 23px; + color: white; + float: right; + line-height: 59px; + margin-right: 20px; + cursor: pointer; + display: none; } #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; + display: flex; + 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; + 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; + 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.1); - background-color: blueviolet; - cursor: pointer; - transition: 0.5s; + transform: scale(1.1); + background-color: blueviolet; + cursor: pointer; + transition: 0.5s; } /* .notification { @@ -153,54 +152,57 @@ nav li a:focus::after{ @keyframes dropdown{ 0% { opacity: 0; - } - 30% { transform: translateY(-30px); - opacity: 0; + } + 40% { + transform: translateY(0px); + opacity: 1; + } + 60% { + transform: translateY(-7px); } 100% { transform: translateY(0px); - opacity: 1; } } /* Responsive Functions */ @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 1s 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; - } + .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; + } } @media (max-width: 500px) { #event, #rules, #prizes, #team { @@ -211,92 +213,111 @@ nav li a:focus::after{ } } @media (max-width: 470px) { - /* .checkbtn { - display: none; - } */ - #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: 700px) { + #nav-logo { + content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico); + height: 50px; + width: 50px; + } #logo { - height: 300px; - width: 300px; + height: 300px; + width: 300px; + } + #prizes-container { + transform: scale(0.9); + } +} +@media (max-height: 500px) { + #logo { + height: 200px !important; + width: 200px !important; + } + #header-subtitle-date { + height: 25px; + font-size: 15px; + } + #header-subtitle-spots { + height: 25px; + font-size: 15px; + padding: 3px !important; + } + #entrance-arrow { + visibility: hidden; } } .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; - } + 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; - } + 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); - } + 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: 100vh; + background-image: url(/img/mountains-1.jpg); + /* background-position: center; */ + /* background-size: cover; */ + background-repeat: no-repeat; + background-attachment: fixed; + height: 100vh; } #header { - width: 100%; - height: 100%; - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; + 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%); + text-align: center; + position: relative; + background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); +} + +#logo { + height: 400px; + width: 400px; + animation: fadeInAnimation ease 3s; + animation-iteration-count: 1; + animation-fill-mode: forwards; } #header-subtitle-date { - padding: 5px; - margin-top: 5px; - border-radius: 10px; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); - animation: slidein ease 1.5s; + 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 { @@ -311,49 +332,41 @@ nav li a:focus::after{ } #header-subtitle-spots { - padding: 5px; + padding: 5px; } #entrance-arrow { - width: 50px; - height: 50px; - position: absolute; - bottom: 10px; - float: bottom; - animation: bounce 3s infinite; + width: 50px; + height: 50px; + position: absolute; + bottom: 10px; + float: bottom; + animation: bounce 3s infinite; } #entrance-arrow:hover { - font-size: 17px; - transition: 0.1s; + font-size: 17px; + transition: 0.1s; } @keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-5px); - } - 60% { - transform: translateY(-3px); - } -} - -#logo { - min-height: 300px; - min-width: 300px; - animation: fadeInAnimation ease 3s; - animation-iteration-count: 1; - animation-fill-mode: forwards; + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-3px); + } } @keyframes fadeInAnimation { 0% { - opacity: 0; + opacity: 0; } 100% { - opacity: 1; + opacity: 1; } } @keyframes slidein { @@ -679,6 +692,79 @@ section { cursor: pointer; } +/* Bracket */ +.bracket { + display: inline-flex; + width: 105%; + margin-left: -20px; +} +.bracket>div { + width: 50%; + height: 1px; + background: rgb(255, 255, 255); + margin: 0px 30px 20px; + position: relative; +} +#bracket-1 > .left { + width: 2%; +} +#bracket-1 > .right { + width: 98%; +} +#bracket-2 > .left { + width: 24%; +} +#bracket-2 > .right { + width: 76%; +} +#bracket-3 > .left { + width: 46%; +} +#bracket-3 > .right { + width: 54%; +} +#bracket-4 > .left { + width: 68%; +} +#bracket-4 > .right { + width: 32%; +} +#bracket-5 > .left { + width: 89%; +} +#bracket-5 > .right { + width: 11%; +} +.bracket>div:before, +.bracket>div:after { + content: ''; + position: absolute; + width: 30px; + height: 30px; + border-top-left-radius: 200px; + border: 1px solid rgb(255, 255, 255); + border-right: none; + border-bottom: none; +} +.bracket>div:after { + right: -30px; +} +.left:after { + transform: rotate(-180deg); + top: -30px; +} +.right:before { + transform: rotate(-90deg); + top: -30px; + left: -30px; +} +.right:after { + transform: rotate(90deg); +} +.left:before { + left: -30px; +} + #timeline-descriptions-wrapper { width: 100%; margin-top: 70px; @@ -686,7 +772,7 @@ section { font-weight: 400; text-align: left; } -#timeline-descriptions-wrapper div { +.timeline-desc { margin-top: 0; display: none; } @@ -1241,10 +1327,10 @@ section { } #rules-container { - display: flex; - flex-wrap: wrap; - margin-top: 20px; - justify-content: center; + display: flex; + flex-wrap: wrap; + margin-top: 20px; + justify-content: center; } #guidelines { @@ -1337,12 +1423,12 @@ section { } #prizes-container { - display: grid; - margin: 50px auto 0; - width: 80%; - height: 280px; - justify-content: center; - grid-template-columns: repeat(3, 1fr); + display: grid; + margin: 50px auto 0; + width: 80%; + height: 280px; + justify-content: center; + grid-template-columns: repeat(3, 1fr); } .podium-description { @@ -1612,60 +1698,60 @@ abbr[title] { } .line { - width: 100px; - margin: 10px auto; + width: 100px; + margin: 10px auto; } #footer-line { - width: 100px; - margin: 10px auto; + width: 100px; + margin: 10px auto; } #arrow-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; + 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; + 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; + 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; + 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; + float: top; } footer li { - display: inline-block; - margin: 0 7px; + display: inline-block; + margin: 0 7px; } footer a { - color:rgb(108, 176, 231); - font-size: 16px; + color:rgb(108, 176, 231); + font-size: 16px; } \ No newline at end of file diff --git a/font/GlacialIndifference-Bold.otf b/font/GlacialIndifference-Bold.otf deleted file mode 100644 index b88fd16..0000000 Binary files a/font/GlacialIndifference-Bold.otf and /dev/null differ diff --git a/font/GlacialIndifference-Italic.otf b/font/GlacialIndifference-Italic.otf deleted file mode 100644 index 71fa451..0000000 Binary files a/font/GlacialIndifference-Italic.otf and /dev/null differ diff --git a/index.html b/index.html index 6b3eb62..d448409 100644 --- a/index.html +++ b/index.html @@ -15,12 +15,13 @@ - + +