From 79cce86d462a47226626ccb0faf5dc352dd2bf10 Mon Sep 17 00:00:00 2001 From: James Dinh Date: Mon, 4 Jul 2022 23:22:07 -0700 Subject: [PATCH] Changed Footer Styles --- contact.html | 179 +++++++++++++ css/contact.css | 643 +++++++++++++++++++++++++++++++++++++++++++++++ css/general.css | 4 +- css/licenses.css | 51 +--- index.html | 14 +- js/form.js | 38 +++ js/scroll_nav.js | 2 +- licenses.html | 36 ++- 8 files changed, 901 insertions(+), 66 deletions(-) create mode 100644 contact.html create mode 100644 css/contact.css create mode 100644 js/form.js 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.
  • Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind: @@ -193,7 +193,7 @@ Now's your time to shine! Start working with your team to build your project. No strings attached!
    • =IMPORTANT= Your project must follow one of the given prompts and guidelines; otherwise, your team may lose a lot of points for unrelated topic deductions
      • -
    • Remember, you only have 44 hours to complete your project... Use your time wisely
      • +
    • Remember, you only have 46 hours to complete your project... Use your time wisely

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