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 @@
-
+
+