diff --git a/contact.html b/contact.html index 0b92d14..2c6a626 100644 --- a/contact.html +++ b/contact.html @@ -91,8 +91,8 @@
-

Apr 15 - 16

- +

Apr 15 - 16

 +

Signup Form

diff --git a/css/general.css b/css/general.css index c0e022e..c04b27c 100644 --- a/css/general.css +++ b/css/general.css @@ -740,6 +740,22 @@ nav * { color: rgb(252, 188, 93); } +#header-tooltip-second::after { + content: '← Add to Calendar'; + top: 12px; + right: -110px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#spots-tooltip-second::after { + content: '← Sign up here'; + top: 12px; + right: -130px; + transform-origin: left; + color: rgb(252, 188, 93); +} + #map-tooltip::after { content: '← Open map'; top: 12px; diff --git a/css/second.css b/css/second.css deleted file mode 100644 index e9b1963..0000000 --- a/css/second.css +++ /dev/null @@ -1,968 +0,0 @@ -/* - Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) - File: second.css - - Web-Designed by James Dinh ᓚᘏᗢ from scratch using 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%; - 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 { - height: 50px; - width: 258px; - margin: 5px 0 0; -} - -#nav-logo:hover { - transform: scale(1.01); - transition: 0.5s; -} - -#nav-logo-a { - position: relative; - margin: 0; - margin-left: 10px; -} - -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; -} - -#nav-icon { - margin: 0 0 0 5px; -} - -#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 { - width: 70%; - position: absolute; - justify-content: center; - display: inline-flex; - top: 16px; - font-size: 20px; - margin: auto; - min-width: 310px; -} - -#event-name { - margin: 0px; -} - -#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; - position: relative; -} - -#timer::after { - content: 'Spring 2023?'; - position: absolute; - text-align: center; - align-items: center; - top: 30px; - right: calc(100% / 2); - padding: 2px 7px; - width: max-content; - opacity: 1; - background-color: #222429; - border-radius: 10px; - transition: opacity 300ms, transform 300ms; - transform: scale(0); - transform-origin: top; - } - - #timer:hover::after, - #timer:focus::after{ - transform: scale(1); -} - -.tooltip-nav { - text-decoration: none; - margin: 0; -} - -#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% { - filter: brightness(1); - } - 50% { - filter: brightness(0.8); - } - 100% { - filter: brightness(1); - } -} - -@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: 1600px) { - #banner { - width: 50%; - } -} -@media (max-width: 1330px) { - #banner { - width: 30%; - } -} -@media (max-width: 1200px) { - #banner { - display: none; - } -} -@media (max-width: 900px) { - .checkbtn { - display: inline-block; - } - nav ul { - position: fixed; - width: 100%; - height: 300px; - 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; - } - .header-background { - background-position: unset !important; - background-size: unset !important; - } - #banner { - display: inline-flex; - width: 310px; - } -} -@media (max-width: 750px) { - #banner { - display: none; - } -} -@media (max-width: 500px) { - section { - padding-top: 0 !important; - } -} -@media (max-width: 470px) { - #nav-logo { - content: url(/img/logo_mini.png); - height: 50px; - width: 50px; - } -} - -.blob { - background: black; - border-radius: 50%; - box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); - margin: 11px 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; -} - -.blob.gold { - background: rgb(254, 228, 84); - box-shadow: 0 0 0 0 rgba(254, 228, 84, 1); - animation: pulse-gold 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/background.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-attachment: fixed; - height: 20%; -} - -.header { - width: 100%; - height: 100%; - padding: 70px 0 50px; - display: flex; - flex-flow: row nowrap; - justify-content: center; - - text-align: center; - position: relative; -} - -#logo { - height: 100px; - width: 100px; -} - -#header-info { - display: flex; - flex-flow: column nowrap; - align-items: left; - margin-top: 10px; -} - -.header-subtitle-date { - font-size: 18px; - padding: 5px 7px; - width: fit-content; - margin-top: 5px; - border-radius: 10px; - display: flex; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); - animation: slidein ease 1.5s; -} - -.header-link { - background: unset !important; - color: white !important; -} - -#header-tooltip::after { - content: '← Add to Calendar'; - top: 8px; - right: -90px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#spots-tooltip::after { - content: '← Signups Closed'; - top: 8px; - right: -150px; - transform-origin: left; - color: rgb(252, 93, 93); -} - -@media (max-width: 700px) { - #header-tooltip::after, #spots-tooltip::after { - display: none; - } -} - -.header-icon { - margin-right: 6px; -} - -.spots-container { - display: flex; - 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 { - font-size: 18px; - padding: 5px; -} - -.spots-container:hover, #header-subtitle-date:hover { - transform: translateY(-2px); - transition: 0.5s; -} - -#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); - } -} - -/* Main Section */ -main { - width: 100%; - align-items: center; - justify-content: center; - text-align: center; - position: relative; - margin: auto; - display: grid; - padding-bottom: 30px; -} - -section { - width: auto; - padding-top: 50px; - text-align: center; - justify-content: center; - align-items: center; - max-width: 1500px; - min-width: 200px; -} - -.topic { - width: auto; - font-size: 35px; - padding: 0 20px 0 20px; - color:rgb(255, 243, 205); -} - -#license-list { - display: flex; - flex-flow: column wrap; - width: 100%; - height: auto; - margin: auto; - padding-left: 10px; -} - -#license-list ul { - margin-left: 20px; -} - -.license-entry { - width: 100%; - height: auto; - padding: 10px; - text-align: left; - overflow-wrap: break-word; -} - -/* Contact */ -.contact-form { - margin-top: 30px; - min-width: 300px; - width: 40vw; -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -input:-webkit-autofill:active { - transition: background-color 5000s ease-in-out 0s; - -webkit-text-fill-color: #fff !important; - caret-color: #fff; -} - -.input-block { - background-color: #202329; - border-radius: 10px; - width: 100%; - height: 60px; - padding: 25px; - position: relative; - margin-bottom: 20px; - transition: all 0.3s ease-out; -} -.input-block.focus { - background-color: #282c33; - transition: 0.5s; -} -.input-block.textarea { - height: auto; - font-size: 18px; -} -.form-control { - height: auto; - width: 100%; - resize: vertical; - font-family: "Glacial Indifference"; -} -.input-block label { - position: absolute; - left: 25px; - top: 25px; - display: block; - margin: 0; - font-weight: 300; - z-index: 1; - color: rgb(199, 199, 199); - font-size: 18px; - line-height: 10px; -} -.input-block .form-control { - background-color: transparent; - padding: 5px; - border: none; - border-radius: 0; - box-shadow: none; - height: auto; - position: relative; - z-index: 2; - font-size: 18px; - color: #fff; -} -option { - background-color: #343942; -} -.input-block .form-control:focus label { - top: 0; -} -.square-button { - background-color: #383e49; - color: #f3bc6a; - font-size: 26px; - text-transform: uppercase; - font-weight: 700; - text-align: center; - border-radius: 6px; - transition: all 0.3s ease; - height: 60px; - border: none; - width: 30%; -} -.square-button:hover, .square-button:focus { - filter: brightness(0.8); - cursor: pointer; -} - -@media (min-width: 768px) { - .contact-wrap { - width: 60%; - margin: auto; - } -} - -/* Rules */ -.signup-container { - margin: 20px auto; -} - -#rules-description { - margin: 10px 20px; - font-size: 18px; -} - -#photo-description { - margin: 10px 20px; -} - -.rules-box { - border-radius: 10px; - border: 1px solid white; - background-color: #272b1f; - margin: 10px auto; - width: 90%; - max-width: 850px; - min-width: 350px; - padding: 10px; -} - -#disclaimer { - background-color: #2b1f20; -} - -#rules-container { - display: flex; - flex-wrap: wrap; - margin-top: 20px; - justify-content: center; -} - -#guidelines { - margin: 20px; -} - -#code-of-conduct { - margin: 20px; -} - -.rules-card { - position: relative; - padding: 10px; - margin: 0 0 20px 20px; - background: rgb(47, 55, 70); - color: rgb(179, 179, 179); - border-radius: 8px; - max-width: 400px; -} - -.code-card { - background: rgb(40, 63, 52); -} - -#rules-main-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #131d29; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -#code-main-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #15271b; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -#rules-header { - padding-top: 10px; -} - -.tooltip-rules { - text-decoration: underline dotted; - cursor: help; -} - -.tooltip.email-link::after { - content: 'Email'; - right: calc((100%/2) - 25px); -} - -@media (max-width: 500px) { - #event, #rules, #prizes, #team { - transform: scale(0.9); - } - section { - padding-top: 0 !important; - } -} - -/* Title of the card */ -.rules-title { - color: rgb(253, 103, 103); - position: relative; - font-size: 17px; -} - -.code-title { - color: rgb(212, 100, 223); -} - -.rules-card::before { - content: ""; - font-size: 30px; - position: absolute; - width: 10px; - height: 10px; - left: -28px; -} - -.rules-1::before { - content: "1"; -} -.rules-2::before { - content: "2"; -} -.rules-3::before { - content: "3"; -} -.rules-4::before { - content: "4"; -} -.rules-5::before { - content: "5"; -} - -.rules-card:hover { - filter: brightness(1.2); - transition: 0.5s; -} - -#prizes-container { - display: grid; - margin: 50px auto 0; - width: 80%; - height: auto; - justify-content: center; - grid-template-columns: repeat(3, 1fr); -} - - /* Utilities */ -.vertical-line { - width: 2px; - margin: 0 10px; - background-color: rgb(255, 255, 255); -} - -@keyframes grow-wide { - 0% { - transform: scale(0); - opacity: 0; - } - 100% { - transform: scale(1); - opacity: 1; - } -} - -.tooltip { - position: relative; -} - -.tooltip::after { - content: ''; - position: absolute; - text-align: center; - align-items: center; - top: 22px; - right: -35px; - padding: 3px 7px; - width: max-content; - opacity: 1; - z-index: 1; - background-color: #222429; - border-radius: 10px; - transition: opacity 300ms, transform 300ms; - transform: scale(0); - transform-origin: top; - } - -.tooltip:hover::after { - transform: scale(1); -} - -#facebook::after { - content: 'Facebook'; - right: -34px; - color: rgb(255, 208, 137) -} - -#instagram::after { - content: 'Instagram'; - right: -35px; - color: rgb(255, 208, 137) -} - -#youtube::after { - content: 'Youtube'; - right: -25px; - color: rgb(255, 208, 137) -} - -.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; -} - -.new-tab-icon { - fill: white; - height: 10px; - margin-left: 5px; -} - -#footer-line { - width: 100px; - margin: 10px auto; -} - -.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; -} - -@media (max-width: 869px) { - #footer-desc { - margin-bottom: 20px; - } -} - -@media (max-width: 565px) { - footer * { - text-align: center; - justify-content: center; - } - .footer-title { - margin-bottom: 0 !important; - } - #footer-desc, #footer-links, #footer-location { - margin-right: 0 !important; - margin-bottom: 20px; - } -} - -footer { - width: auto; - height: auto; - background-color: rgb(24, 24, 24); - justify-content: center; - align-items: left; - text-align: center; - padding: 20px; - flex-flow: row wrap; -} - -#footer-container { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: stretch; -} - -#footer-logo { - height: 45px; - width: 232px; - margin-left: -5px; -} - -#footer-desc { - width: 350px; - text-align: left; - line-height: 25px; - font-size: 18px; - margin-right: 40px; -} - -#socials { - display: flex; - flex-wrap: wrap; - margin-top: 10px; -} - -.socials-icon { - margin-right: 10px; -} - -#footer-copyright { - color: rgb(129, 129, 129); -} - -#footer-line { - width: 100%; - margin: 10px auto; -} - -#footer-links { - width: 180px; - margin-top: 7px; - margin-right: 20px; - text-align: left; -} - -.footer-title { - margin-bottom: 19px; -} - -#footer-location { - width: 220px; - margin-top: 7px; - margin-right: 20px; - text-align: left; -} - -footer li { - line-height: 30px; - list-style: none; -} \ No newline at end of file diff --git a/index.html b/index.html index ea096ac..d1a6e6d 100644 --- a/index.html +++ b/index.html @@ -269,7 +269,7 @@