diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a0633c0 --- /dev/null +++ b/contact.html @@ -0,0 +1,179 @@ + + + + + + + + + Gilroy Hacks · Contact + + + + + + + + + + +
+
+
+ +
+
+
+
+
+

Contact Form

+
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..8813690 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,643 @@ +/* + Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) + File: contact.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 { + width: 70%; + position: absolute; + justify-content: center; + display: inline-flex; + top: 16px; + font-size: 20px; + margin: auto; + min-width: 310px; +} + +#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 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: 1400px) { + #banner { + width: 50%; + } +} +@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; + } + #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/Gilroy-Hacks-Logo-icon-tp.ico); + height: 50px; + width: 50px; + } + #logo { + height: 300px; + width: 300px; + } +} + +.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%; + 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; +} + +#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; +} + +#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); +} + +.contact-form { + margin-top: 30px; +} +.contact-form .input-block { + background-color: rgba(255, 255, 255, 0.8); + border: solid 1px #003f88; + width: 100%; + height: 60px; + padding: 25px; + position: relative; + margin-bottom: 20px; + transition: all 0.3s ease-out; +} +.contact-form .input-block.focus { + background-color: #fff; + border: solid 1px #00236e; +} +.contact-form .input-block.textarea { + height: auto; +} +.contact-form .input-block.textarea .form-control { + height: auto; + resize: none; +} +.contact-form .input-block label { + position: absolute; + left: 25px; + top: 25px; + display: block; + margin: 0; + font-weight: 300; + z-index: 1; + color: #333; + font-size: 18px; + line-height: 10px; +} +.contact-form .input-block .form-control { + background-color: transparent; + padding: 0; + border: none; + border-radius: 0; + box-shadow: none; + height: auto; + position: relative; + z-index: 2; + font-size: 18px; + color: #333; +} +.contact-form .input-block .form-control:focus label { + top: 0; +} +.contact-form .square-button { + background-color: rgba(255, 255, 255, 0.8); + color: #006dac; + font-size: 26px; + text-transform: uppercase; + font-weight: 700; + text-align: center; + border-radius: 2px; + transition: all 0.3s ease; + padding: 0 60px; + height: 60px; + border: none; + width: 100%; +} +.contact-form .square-button:hover, .contact-form .square-button:focus { + background-color: white; +} + +@media (min-width: 768px) { + .contact-wrap { + width: 60%; + margin: auto; + } +} + + /* 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 { + 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: 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; + padding-right: 40px; +} + +#socials { + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + margin-top: 10px; +} + +.socials-icon { + margin: 0 10px; +} + +#footer-copyright { + color: rgb(129, 129, 129); +} + +#footer-line { + width: 100%; + margin: 10px auto; +} + +#footer-links { + width: 200px; + margin-top: 7px; + padding-right: 20px; + text-align: left; +} + +footer li { + line-height: 30px; + list-style: none; +} \ No newline at end of file diff --git a/css/general.css b/css/general.css index f831f17..57f13fb 100644 --- a/css/general.css +++ b/css/general.css @@ -1447,6 +1447,7 @@ section { height: 100%; border: 1px solid white; position: relative; + min-width: 375px; } #map { @@ -1927,6 +1928,7 @@ footer { text-align: left; line-height: 25px; font-size: 18px; + margin-right: 40px; } #socials { @@ -1953,7 +1955,7 @@ footer { #footer-links { width: 200px; margin-top: 7px; - padding-left: 40px; + margin-right: 20px; text-align: left; } diff --git a/css/licenses.css b/css/licenses.css index 0fe0f62..781c295 100644 --- a/css/licenses.css +++ b/css/licenses.css @@ -255,16 +255,6 @@ nav ul li { .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; @@ -280,9 +270,6 @@ nav ul li { } } @media (max-width: 500px) { - #event, #rules, #prizes, #team { - transform: scale(0.9); - } section { padding-top: 0 !important; } @@ -293,35 +280,6 @@ nav ul li { 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 { @@ -534,12 +492,6 @@ section { margin: 10px auto; } -#arrow-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; -} - .link { color:rgb(252, 188, 93); text-decoration: none; @@ -588,6 +540,7 @@ footer { text-align: left; line-height: 25px; font-size: 18px; + padding-right: 40px; } #socials { @@ -614,7 +567,7 @@ footer { #footer-links { width: 200px; margin-top: 7px; - padding-left: 40px; + padding-right: 20px; text-align: left; } diff --git a/index.html b/index.html index c903fc9..637f5ba 100644 --- a/index.html +++ b/index.html @@ -121,7 +121,7 @@

Our Mission Statement

-
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.
+
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.
@@ -204,11 +204,11 @@

Projects Due

8/14 | 2:00pm


-

STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.
+

STOP coding! Your 46 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.

@@ -224,7 +224,7 @@
  • Be Creative! Make your product stand out by including a demo or showing its function across multiple sources
  • Presentations will occur in order of team number (i.e. Team 1 will go first)
  • It is advised you have your camera on and that you ensure your microphone and tech work before presenting
    • -
  • =IMPORTANT= Your team's presentation is not allowed to go ABOVE 5 minutes... Use your time wisely.
    • +
  • =IMPORTANT= Your team's presentation is NOT ALLOWED to go above 5 minutes... Use your time wisely.
  • Your team will be graded on both the product and presentation as per the rubric

    • @@ -479,7 +479,7 @@

    Do not plagiarize

    - - You are allowed to use existing libraries and packages with a valid license, but required to give credit when credit is due (which also includes Creative Commons and Open Source Projects) + - You are allowed to use existing libraries and packages with a valid license but required to give credit when credit is due (which also includes Creative Commons and Open Source Projects)
    - You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event

    @@ -718,7 +718,7 @@ +
    + Custom Scroll Bar +
      +
    • License: Unknown
      • +
    • Attribution: w3schools
      • +
    +