From 11aa7ca850e09ca9fc419edd5972d1f2af36479d Mon Sep 17 00:00:00 2001 From: James Dinh Date: Tue, 14 Mar 2023 01:40:10 -0700 Subject: [PATCH] Updated stats --- .DS_Store | Bin 8196 -> 8196 bytes css/general.css | 6155 ++++++++++++++++++++++++----------------------- img/.DS_Store | Bin 10244 -> 10244 bytes index.html | 1798 +++++++------- js/general.js | 5 + 5 files changed, 3982 insertions(+), 3976 deletions(-) diff --git a/.DS_Store b/.DS_Store index 4ee152314c67429ce78d14a087f69cc7b15e1148..f1c2cc7eb3d936511984078c4969d3e3ee2ff8a6 100644 GIT binary patch delta 535 zcmZp1XmOa}&nUVvU^hRb=w=>)`7BIQQj^z;h;v3{Cg zAY%|?2xBB;)MR-v>tH>GOolv$6oyoW3I+uR4TfZfd>}uKAqOa)%uoUpPXUU9L<<-y zfh;2i10XhL&;`;E(i|vi$Y2V@mJB99InBvdg0h_R{(}Jn!{%@?6UNQ#65m)Rvx#<% JIKLY*0sy(xdG7!K delta 372 zcmZp1XmOa}&nU7nU^hRb$Yvga`7BIA(v#PUhzrFF@E2#~mwP7X=LHm{mSv`vPd+QM zt3DzVC=i@kl^UI1l$jD-keHmAm#%F8fdLFSl^rx7ECB{(2!nw^*`e73%;pea49UyS zO9iS5fJiDkctcfjFlaM4G6XZkFcdO0FidAy%&?W=Aj3I^#|&Q?{xkA2iZLoNYBTBx vFq$%&GdeJOGI}xkFa|OPO_mq4-h55Wka1#p&1QCqZ!D9)h)f>LuB-$Ag~3wz diff --git a/css/general.css b/css/general.css index 85e2661..ee36a07 100644 --- a/css/general.css +++ b/css/general.css @@ -1,3078 +1,3079 @@ -/* - Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) - - 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-container { - box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); - position: fixed; - width: 100%; - z-index: 3; -} - -/* menu */ - -.nav-container .nav-menu { - margin: 0; - padding: 0; - list-style: none; - overflow: hidden; - clear: none; - float: right; - max-height: none; - margin-right: 110px; -} - -.nav-container .nav-menu li { - display: inline-block; - line-height: 30px; - margin: 10px 7px; - padding: 3px 11px; - cursor: pointer; -} - -/* menu icon */ - -.nav-container .menu-icon { - display: none; -} - -.nav-container .menu-icon .navicon { - background: rgb(123, 123, 123); - display: block; - height: 2px; - position: relative; - transition: background .2s ease-out; - width: 18px; -} - -.nav-container .menu-icon .navicon:before, -.nav-container .menu-icon .navicon:after { - background: rgb(123, 123, 123); - content: ''; - display: block; - height: 100%; - position: absolute; - transition: all .2s ease-out; - width: 100%; -} - -.nav-container .menu-icon .navicon:before { - top: 5px; -} - -.nav-container .menu-icon .navicon:after { - top: -5px; -} - -/* menu btn */ - -.nav-container .menu-btn { - display: none; -} - -.nav-container .menu-btn:checked ~ .nav-menu { - max-height: 300px; - background-color: rgba(24, 24, 24, 0.988); - transition: 0.5s; -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon { - background: transparent; -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon:before { - transform: rotate(-45deg); -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon:after { - transform: rotate(45deg); -} - -.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, -.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { - top: 0; -} - -@keyframes slow-fade { - 0% { - background-color: rgb(24, 24, 24); - } - 90% { - background-color: unset; - } -} - -@media (max-width: 1050px) { - .nav-container .nav-menu { - clear: both; - max-height: 0; - transition: max-height .2s ease-out; - text-align: center; - width: 100%; - margin-right: 0; - } - .nav-container .nav-menu li { - display: block; - } - .nav-container .menu-icon { - cursor: pointer; - display: block; - float: right; - padding: 28px 20px; - position: relative; - user-select: none; - } - #sign-up { - right: 50px !important; - } - .nav-container .menu-btn:not(:checked) ~ .nav-menu { - animation: slow-fade 1s ease; - } -} - -nav { - height: 59px; - width: 100%; - top: 0; - left: 0; - position: fixed; - flex-wrap: nowrap; - z-index: 100; -} - -nav * { - padding: 0; - 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; -} - -.navlink { - color:rgb(233, 203, 104); - font-size: 18px; - text-decoration: none; - position: relative; -} - -.navlink.active,.link: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-direction: row-reverse; - align-content: stretch; -} - -#nav-icon { - margin: 0 0 0 5px; -} - -#sign-up { - padding: 6px 7px; - margin: 14px 15px 14px 4px; - width: 72px; - border-radius: 5px; - font-size: 16px; - background-color: rgb(140, 42, 165); - color: bisque; - position: fixed; - display: inline-flex; - right: 10px; -} - -#sign-up:hover { - transform: scale(1.03); - filter: brightness(1.05); - 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; -} - -.header-info { - display: flex; - flex-flow: row wrap; - max-width: 420px; - padding: 0 10px; - min-width: none; - justify-content: center; -} - -.header-info a { - margin: 0 5px; -} - -#timer { - color: rgb(184, 184, 184); - animation: blinking 3s infinite; - background-color: rgb(57, 57, 57); - border-radius: 5px; - padding: 2px 5px; - margin-left: 5px; - position: relative; - width: fit-content -} - -#timer::after { - content: 'Apr 15, 10am'; - 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); -} - -#winners { - text-align: center; - position: absolute; - top: 59px; - background-color: #2c9643; - width: 100%; - font-size: 20px; - padding: 3px 5px; - animation: fadeInAnimation ease 2s; - animation-iteration-count: 1; - animation-fill-mode: forwards; -} - -#chart { - max-width: 650px; - margin: 35px auto; -} - -#team-emphasis { - color:rgb(180, 213, 253); -} - -.tooltip-nav { - text-decoration: none; - margin: 0; -} - -#timer-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; - background: unset; - margin-right: 10px; -} - -.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: block; - top: 1px; - max-width: 200px; - min-width: 150px; - width: auto; - margin-left: 300px; - } - #timer-container { - display: block; - text-align: center; - } - #timer { - display: inline-block; - position: relative; - margin: 3px auto 0; - padding: 0px 5px; - } - #timer::after { - right: -15px; - } -} -@media (max-width: 900px) { - #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; - } - #logo { - height: 180px !important; - width: 180px !important; - } - header .waviy { - font-size: 45px; - } -} -@media (max-width: 700px) { - .header-link.tooltip::after { - display: none; - } -} -@media (max-width: 620px) { - #banner { - display: none; - } -} -@media (max-width: 500px) { - #signup-article, #rules, #prizes, #team { - transform: scale(0.9); - } - section { - padding-top: 0 !important; - } -} -@media (max-width: 470px) { - #nav-logo { - content: url(/img/logo_mini.png); - height: 45px; - width: 45px; - margin: 7px 0 0 5px; - } - #logo { - height: 2300px; - width: 230px; - } - #prizes-container, #banner { - transform: scale(0.9); - } - #banner { - display: block; - margin-left: 75px; - } -} -@media (max-width: 400px) { - #nav-logo { - content: url(/img/logo_mini.png); - height: 45px; - width: 45px; - margin: 7px 0 0 5px; - } - #logo { - height: 2300px; - width: 230px; - } - #prizes-container { - transform: scale(0.9); - } -} -@media (max-width: 370px) { - #banner { - display: none; - } -} -@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 { - 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; -} - -.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); - } -} - -@keyframes pulse-gold { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(254, 228, 84); - } - 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: 100vh; -} - -.header-background.second { - height: 20%; -} - -.header { - width: 100%; - height: 100%; - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - text-align: center; - position: relative; -} - -.header.second { - padding: 70px 0 50px; - flex-flow: row nowrap; -} - -#second-logo { - height: 100px; - width: 100px; -} - -.header-container { - width: 100%; - height: 100%; - display: flex; - flex-flow: row nowrap; - justify-content: center; - - text-align: center; -} - -.header-logo-parent { - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -#logo { - height: 230px; - width: 230px; - animation: fadeInAnimation ease 3s; - animation-iteration-count: 1; - animation-fill-mode: forwards; -} - -.waviy { - position: relative; - display: flex; - font-size: 60px; -} -.waviy span { - font-family: "Norwester"; - font-weight: lighter; - margin: 0 1.4px; - position: relative; - display: inline-block; - left: 0%; - - animation: waviy 1s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.waviy span:hover { - padding-left: -20px; -} - -#top-logo-text { - color: #7ed957; -} - -#bottom-logo-text { - color: #72FFAF; -} - -@keyframes waviy { - 0% { - transform: translateY(-100px); - opacity: 0; - } - 10% { - opacity: 0; - } - 30% { - transform: translateY(0px); - opacity: 1; - } - 50% { - transform: translateY(-10px); - } - 100% { - transform: translateY(0px); - } -} - -.header-subtitle { - padding: 5px 7px; - margin-top: 5px; - border-radius: 10px; - display: flex; - width: fit-content; - place-items: center; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); -} - -.header-subtitle.donate { - background: rgb(98,0,255); - background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%); -} - -.header-link.left { - animation: slideinleft ease 1.5s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.header-link.right { - animation: slideinright ease 1.5s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.header-link { - background: unset !important; - color: white !important; - text-decoration: none; -} - -.header-link.second { - animation: none; -} - -#header-tooltip::after { - content: 'Add to Calendar →'; - top: 12px; - right: 160px; - transform-origin: right; - 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; - right: -120px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#donate-tooltip::after { - content: '← Donate Page 💝'; - top: 12px; - right: -160px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#spots-tooltip::after { - content: 'Sign up here →'; - top: 12px; - right: 205px; - transform-origin: right; - color: rgb(252, 188, 93); -} - -.header-info-container { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - justify-content: center; -} - -@media (max-width: 610px) { - #header-tooltip::after, #spots-tooltip::after { - display: none; - } -} - -.header-icon { - margin-right: 6px; -} - -.spots-container { - display: flex; - place-items: center; - border-radius: 10px; - margin-top: 5px; - padding: 0 7px; - width: fit-content; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); - background: rgb(20,48,10); - background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%); -} - -#header-subtitle-spots { - padding: 5px; -} - -.spots-container:hover, .header-subtitle:hover { - transform: translateY(-2px); - transition: 0.5s; -} - -#entrance-arrow { - width: 50px; - height: 50px; - position: absolute; - bottom: 10px; - float: bottom; - animation: bounce 3s infinite; -} - -#entrance-arrow:hover { - font-size: 17px; - transition: 0.1s; -} - -#header-gradient { - width: 100%; - height: 100%; - background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); -} - -.header-parent { - height: 100%; - display: flex; - flex-flow: row wrap; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-5px); - } - 60% { - transform: translateY(-3px); - } -} - -@keyframes fadeInAnimation { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes slideinleft { - 0% { - transform: translateX(-20px); - opacity: 0; - } - 60% { - opacity: 0; - transform: translateX(-20px); - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slideinright { - 0% { - transform: translateX(20px); - opacity: 0; - } - 60% { - transform: translateX(20px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -/* @keyframes slidein-2 { - 0% { - transform: translateY(20px); - opacity: 0; - } - 80% { - transform: translateY(20px); - opacity: 0; - } - 100% { - transform: translateY(0px); - opacity: 1; - } -} */ -@keyframes slidein-side { - 0% { - transform: translateX(-100px); - opacity: 0; - } - 40% { - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slidein-prize-2 { - 0% { - opacity: 0; - } - 40% { - transform: translateX(-30px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slidein-prize-1 { - 0% { - opacity: 0; - } - 30% { - transform: translateY(-30px); - opacity: 0; - } - 100% { - transform: translateY(0px); - opacity: 1; - } -} -@keyframes slidein-prize-3 { - 0% { - opacity: 0; - } - 60% { - transform: translateX(30px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} - -@keyframes modal-fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@media (prefers-reduced-motion: no-preference) { - .slide-animation { - animation: slidein-side ease 1s; - } - .slide-animation-prize-2 { - animation: slidein-prize-2 ease 3s; - } - .slide-animation-prize-1 { - animation: slidein-prize-1 ease 2s; - } - .slide-animation-prize-3 { - animation: slidein-prize-3 ease 3s; - } - .slide-animation-card-img { - animation: card-img-pullout ease 2s; - } - .slide-animation-card-desc { - animation: card-desc-pullout ease 2s; - } - .modal-animation { - animation: modal-fade-in ease 0.5s; - } -} - -/* Main Section */ -main { - width: 100%; - align-items: center; - justify-content: center; - text-align: center; - position: relative; - margin: auto; - display: grid; - padding-bottom: 70px; -} - -section { - width: auto; - padding-top: 70px; - 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); -} - -#event-container { - display: flex; - flex-wrap: wrap; - margin-top: 20px; - justify-content: center; -} - -#event-description { - margin: 0 20px; - max-width: 700px; - min-width: 200px; - font-size: 18px; - text-align: left; -} - -.description-heading { - text-align: center; - margin-bottom: 10px; -} - -#description-content { - text-align: center; - border-radius: 10px; - background-color: #202329; - padding: 15px 10px; - margin: auto; -} - -.desc-title { - margin-top: 15px; -} - -/* Splash text */ -.splash-container { - padding: 15px 20px; - border-radius: 10px; - border: 1px solid rgb(68, 68, 68); - margin: 10px 0; -} - -.splash-group { - display: flex; - flex-flow: row wrap; - justify-content: center; -} - -#why-GilroyHacks { - width: 100%; - min-width: 300px; - max-width: 315px; - margin: 15px; -} - -#who-GilroyHacks { - width: 100%; - min-width: 300px; - max-width: 315px; - margin: 15px; -} - -.splash-title { - color:rgb(51, 235, 189); - margin-bottom: 10px; -} - -.splash-desc { - line-height: 25px; -} - -#headline-recap { - color: #fbc334; -} - -.splide { - margin: 20px auto; -} - -.slide-content { - margin-bottom: 10px; - text-align: center; - max-width: fit-content; -} - -.splide, .splide__track, .splide__list, .splide__slide, .slide-content, .slide-img { - border-radius: 5px; -} - -.slide-caption { - position: relative; - bottom: 35px; - background-color: #232323b8; - padding: 2px 5px; - border-radius: 5px; -} - -.slide-img { - width: 100%; - height: auto; -} - -.splide__slide, .splide__slide:focus, .splide.is-focus-in, .splide__pagination__page:focus-visible { - border: none !important; - outline: none !important; -} - -li .splide__pagination__page.is-active { - background: #545454; -} - -.list { - padding-left: 20px; -} - -.desc-list { - margin-left: 25px; -} - -.list li{ - margin: 10px 0; -} - -.tooltip.zoom-tooltip::after { - content: 'Zoom Link'; - font-size: 16px; - top: 40px; - right: 12px; - color: rgb(45, 140, 255); -} - -.tooltip.zoom-tooltip-link::after { - content: 'Zoom Link'; - font-size: 16px; - top: 22px; - right: -22px; - color: rgb(45, 140, 255); -} - -#submit-tooltip:after { - content: 'Submission Form'; - right: -20px; -} - -#git-tooltip::after { - content: 'Git'; - color:#a6e2fa; - right: -3px; - top: 33px; -} - -#html-tooltip::after { - content: 'HTML'; - color:#a6e2fa; - right: -10px; - top: 33px; -} - -#python-tooltip::after { - content: 'Python'; - color:#a6e2fa; - right: -15px; - top: 33px; -} - -/* Signup Container */ -.signup-container { - margin: 20px auto; - } - -#steps-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #181a1d; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 0px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -/* Outer Layer with the steps border */ -.outer { - border-left: 2px solid #333; -} - -/* Card container */ -.card { - position: relative; - margin: 0 0 20px 20px; - padding: 10px; - background: rgb(49, 48, 48); - color: gray; - border-radius: 8px; - max-width: 400px; -} - -.card:hover { - filter: brightness(120%); - transition: 0.5s; -} - -/* Title of the card */ -.title { - color: rgb(255, 255, 255); - position: relative; - font-size: 16px; -} - -.step-desc { - color: gray; - width: 298px; -} - -/* Steps dot */ -.title::before { - content: ""; - position: absolute; - width: 10px; - height: 10px; - background: rgb(49, 48, 48); - border-radius: 50%; - margin-top: 3px; - left: -38px; - border: 2px solid rgb(255, 255, 255); -} - -.caption { - color: #8d8d8d; -} - -/* Signup Checklist */ -.checklist { - --text: #414856; - --check: #00ff37; - --disabled: #C3C8DE; - --border-radius: 10px; - background: var(--background); - position: relative; - display: grid; - grid-template-columns: 0px auto; - align-items: center; -} -.checklist label { - color: var(--text); - position: relative; - cursor: pointer; - display: grid; - align-items: center; - width: fit-content; - transition: color 0.3s ease; -} -.checklist label::before, .checklist label::after { - content: ""; - position: absolute; -} -.checklist label::before { - height: 2px; - width: 8px; - left: -35px; - border-radius: 2px; -} -.checklist label:after { - height: 4px; - width: 4px; - top: 8px; - left: -35px; - border-radius: 50%; -} -.checklist input[type=checkbox] { - appearance: none; - position: relative; - height: 15px; - width: 15px; - outline: none; - border: 0; - margin: 0 15px 0 0; - cursor: pointer; - background: var(--background); - display: grid; - align-items: center; -} -.checklist input[type=checkbox]::before, .checklist input[type=checkbox]::after { - content: ""; - position: absolute; - height: 2px; - top: auto; - background: var(--check); - border-radius: 2px; -} -.checklist input[type=checkbox]::before { - width: 0px; - transform-origin: right bottom; - z-index: 2; -} -.checklist input[type=checkbox]::after { - width: 0px; - transform-origin: left bottom; - z-index: 2; -} -.checklist input[type=checkbox]:checked::before { - animation: check-01 0.4s ease forwards; - left: -36px; -} -.checklist input[type=checkbox]:checked::after { - animation: check-02 0.4s ease forwards; - left: -31px; -} -.checklist input[type=checkbox]:checked + label { - color: var(--disabled); - animation: move 0.3s ease 0.1s forwards; -} -.checklist input[type=checkbox]:checked + label::before { - background: var(--disabled); - animation: slice 0.4s ease forwards; -} -.checklist input[type=checkbox]:checked + label::after { - animation: firework 0.5s ease forwards 0.1s; - left: -33px; -} - -@keyframes move { - 50% { - padding-left: 8px; - padding-right: 0px; - } - 100% { - padding-right: 4px; - } -} -@keyframes slice { - 60% { - width: 100%; - left: 4px; - } - 100% { - width: 100%; - left: -2px; - padding-left: 0; - } -} -@keyframes check-01 { - 0% { - width: 4px; - top: auto; - transform: rotate(0); - } - 50% { - width: 0px; - top: auto; - transform: rotate(0); - } - 51% { - width: 0px; - top: 8px; - transform: rotate(45deg); - } - 100% { - width: 5px; - top: 8px; - transform: rotate(45deg); - } -} -@keyframes check-02 { - 0% { - width: 4px; - top: auto; - transform: rotate(0); - } - 50% { - width: 0px; - top: auto; - transform: rotate(0); - } - 51% { - width: 0px; - top: 8px; - transform: rotate(-45deg); - } - 100% { - width: 10px; - top: 8px; - transform: rotate(-45deg); - } -} -@keyframes firework { - 0% { - opacity: 1; - box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; - } - 30% { - opacity: 1; - } - 100% { - opacity: 0; - box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; - } -} - -.card-info-container { - display: flex; - flex-flow: row wrap; - max-width: 400px; - min-width: 200px; - justify-content: space-around; - margin: 20px 0; -} - -.info-card { - min-width: 180px; - max-width: 400px; - padding: 10px 20px; - margin: 10px 0; - background-color: #197e47; - border-radius: 5px; -} - -.info-card.green { - background-color: #197e47; -} - -.info-card.blue { - background-color: #188592; -} - -.info-card.red { - background-color: #a83e32; -} - -.card-heading { - font-size: 30px; -} - -.apexcharts-menu { - background-color: #27293d!important; - border: 0px; - text-align: center; -} - -.apexcharts-menu-item:hover { - background-color: #3f3f3f!important; -} - -.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); -} - -#signup-link::after { - content: 'Signup Form'; -} - -.email-link::after { - content: 'Email'; - right: calc((100%/2) - 25px); -} - -#discord-link::after { - content: 'Discord Invite Link'; - right: -40px; -} - -#website::after { - content: 'Check out my website!'; - top: 100px; - color: rgb(255, 208, 137) -} - -.tooltip.discord::after { - content: 'Discord'; - color: rgb(128, 130, 245); - right: -70px; - top: -5px; - transform-origin: left; -} - -#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) -} - -#sponsors { - margin-bottom: 10px; - padding-top: 30px; -} - -.wolfram-logo { - align-items: center; - justify-content: center; - display: flex; - width: 300px; -} - -#wolfram-star { - max-height: 60px !important; -} - -#wolfram-letters { - margin-left: 5px !important; - max-height: 35px !important; -} - -#sponsor-container { - display: flex; - flex-flow: row wrap; - padding: 20px 15px; - margin: 0 50px; - max-width: 1500px; - justify-content: space-evenly; -} - -#sponsor-container a { - padding: 7px 0px; - margin: 5px 20px; - align-content: center; -} - -#sponsor-container img { - max-height: 80px; - max-width: 370px; -} - -#sponsor-container a:hover { - animation: 0.3s ease shake; -} - -@keyframes shake { - 0% { - transform:rotate(0.5deg); - } - 33% { - transform:rotate(-0.5deg); - } - 66% { - transform:rotate(0.5deg); - } - 100% { - transform:rotate(0deg); - } -} - -#sponsor-container img { - margin: 10px 0; -} - -#gilroy-library-logo { - height: 120px; - width: 352px; -} - -#gavilan-college-logo { - height: 102px; - width: 352px; -} - -#gear-club-logo { - height: 60px; - width: 352px; -} - -/* Schedule */ -#schedule { - padding-top: 70px; - margin-bottom: 30px; -} - -.schedule-parent { - display: flex; - flex-flow: row wrap; - justify-content: center; - max-width: 1300px; - width: 95%; - margin: auto; -} - -.schedule-element { - padding: 20px 20px; - margin-top: 20px; - width: 95%; - min-width: 370px; - max-width: 650px; - background-color: rgb(29, 27, 36); - border-radius: 10px; -} - -.time-column-header { - margin-bottom: 20px; - font-size: 30px; - text-decoration: underline; -} - -.schedule-container { - display: grid; - margin: auto; - grid-gap: 0.2rem; - grid-template-columns: 4rem repeat(4, 1fr); - grid-template-rows: repeat(14, 1fr); - grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage"; -} - -.modal { - border: 1px solid rgb(142, 102, 177); - background-color: #23262a; - min-width: 350px; - max-width: 500px; - position: fixed; - margin: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: none; - text-align: left; - border-radius: 5px; - overflow: hidden; - z-index: 2; -} - -.modal-header { - background-color: rgb(147, 29, 141); - padding: 5px 10px; -} - -.modal-desc { - padding: 8px 10px 15px; -} - -.button-close-modal { - display: block; - float: right; - background-color: unset; - border: none; - cursor: pointer; - margin-right: 5px; - display: block; - height: 2px; - position: relative; - width: 20px; - height: 20px; - padding: 15px 20px 10px 10px; - cursor: pointer; -} - -.button-close-modal:before, -.button-close-modal:after { - background: rgb(200, 200, 200); - content: ''; - display: block; - height: 2px; - position: absolute; - transition: all .2s ease-out; - width: 13px; -} - -.button-close-modal:hover { - transform: scale(1.05); - filter: brightness(1.1); - transition: 0.3s; -} - -.button-close-modal:before { - transform: rotate(-45deg); -} - -.button-close-modal:after { - transform: rotate(45deg); -} - -#modal-overlay { - width: 100%; - height: 100%; - display: none; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0, 0, 0, .5); - opacity: 0; - transition: opacity .2s ease; -} - -.timeline-description { - font-size: 16px; - font-weight: normal; -} - -.timeline-description-list li { - margin: 10px 40px; - font-size: 16px; -} - -.important-text { - color: rgb(255, 126, 126); -} - -.timeline-links { - display: flex; - flex-flow: row wrap; - justify-content: center; - text-align: center; - text-decoration: none !important; - margin-top: 15px; -} - -.timeline-icon { - height: 23px; - width: 75px; - float: left; -} - -.timeline-button { - color: rgb(233, 203, 104); - text-decoration: none; - border-radius: 5px; - font-size: 18px; - border: 1px solid rgb(192, 168, 88); - padding: 5px; - display: inline-block; - margin: 0 10px; -} - -.zoom-link { - border: 1px solid rgb(45, 140, 255); -} - -.timeline-button.zoom-link:hover { - background-color: rgb(45, 140, 255); -} - -.timeline-button.zoom-link:hover > .timeline-icon{ - filter:hue-rotate(60deg); -} - -.timeline-button:hover { - color: white; - background-color: rgb(192, 168, 88); - transition: 0.5s; -} - -/** - * Time - */ -.time { - display: flex; - justify-content: flex-end; - height: 100%; - padding: 0 0.5rem; -} - -.time span { - position: relative; - bottom: 10px; -} - -.time.start-800 { - grid-area: time800; -} -.time.start-900 { - grid-area: time900; -} -.time.start-1000 { - grid-area: time1000; -} -.time.start-1100 { - grid-area: time1100; -} -.time.start-1200 { - grid-area: time1200; -} -.time.start-1300 { - grid-area: time1300; -} -.time.start-1400 { - grid-area: time1400; -} -.time.start-1500 { - grid-area: time1500; -} -.time.start-1600 { - grid-area: time1600; -} -.time.start-1700 { - grid-area: time1700; -} -.time.start-1800 { - grid-area: time1800; -} -.time.start-1900 { - grid-area: time1900; -} -.time.start-2000 { - grid-area: time2000; -} -.time.start-2100 { - grid-area: time2100; -} - -/** - * Event - */ -.event { - display: flex; - justify-content: center; - flex-direction: column; - padding: 0.2rem 1rem; - background-color: rgb(157, 0, 149); - border-radius: 0.2rem; - font-size: 18px; - border-top: thin solid rgb(68, 68, 68); - cursor: pointer; - position: relative; -} -.event span { - display: block; - width: 100%; - font-size: 14px; - color: rgb(177, 177, 177); -} -.event.empty { - background-color: unset; - cursor: unset; -} - -.event:hover:not(.empty) { - filter: brightness(1.1); - transform: translateY(-2px); - transition: 0.3s; -} - -.event.start-800 { - grid-row-start: time800; -} -.event.start-900 { - grid-row-start: time900; -} -.event.start-1000 { - grid-row-start: time1000; -} -.event.start-1100 { - grid-row-start: time1100; -} -.event.start-1200 { - grid-row-start: time1200; -} -.event.start-1300 { - grid-row-start: time1300; -} -.event.start-1400 { - grid-row-start: time1400; -} -.event.start-1500 { - grid-row-start: time1500; -} -.event.start-1600 { - grid-row-start: time1600; -} -.event.start-1700 { - grid-row-start: time1700; -} -.event.start-1800 { - grid-row-start: time1800; -} -.event.start-1900 { - grid-row-start: time1900; -} -.event.start-2000 { - grid-row-start: time2000; -} -.event.start-2100 { - grid-row-start: time2100; -} -.event.end-800 { - grid-row-end: time800; -} -.event.end-900 { - grid-row-end: time900; -} -.event.end-1000 { - grid-row-end: time1000; -} -.event.end-1100 { - grid-row-end: time1100; -} -.event.end-1200 { - grid-row-end: time1200; -} -.event.end-1300 { - grid-row-end: time1300; -} -.event.end-1400 { - grid-row-end: time1400; -} -.event.end-1500 { - grid-row-end: time1500; -} -.event.end-1600 { - grid-row-end: time1600; -} -.event.end-1700 { - grid-row-end: time1700; -} -.event.end-1800 { - grid-row-end: time1800; -} -.event.end-1900 { - grid-row-end: time1900; -} -.event.end-2000 { - grid-row-end: time2000; -} -.event.end-2100 { - grid-row-end: time2100; -} -.event.length-1 { - grid-column-end: span 1; -} -.event.length-2 { - grid-column-end: span 2; -} -.event.length-3 { - grid-column-end: span 3; -} -.event.length-4 { - grid-column-end: span 4; -} -.event.small { - font-size: 16px; -} - -.logistics { - background-color: rgb(147, 29, 141); -} -.hacking { - background-color: rgb(53, 53, 199); -} -.food { - background-color: #03833b; -} -.workshop { - background-color: rgb(109, 40, 194); -} -.game { - background-color: rgb(105, 94, 139); -} - -.logistics-border { - border: 1px solid rgb(147, 29, 141); -} -.hacking-border { - border: 1px solid rgb(53, 53, 199); -} -.food-border { - border: 1px solid #03833b; -} -.workshop-border { - border: 1px solid rgb(109, 40, 194); -} -.game-border { - border: 1px solid rgb(105, 94, 139); -} - - -#map-article { - margin: 20px auto 0; - width: 90%; - max-width: 1100px; -} - -#cal-parent { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -#cal-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - width: 440px; - min-width: 400px !important; - height: auto; - justify-content: center; -} - -.cal-card { - width: 100%; - border-radius: 7px; - border: 1px solid white; -} - -.cal-card:hover { - transform: translateY(-5px); - background-color: #0f1318; - transition: 0.5s; -} - -/* .cal-card:hover > #community-room { - visibility: visible !important; -} */ - -#fri { - background-color: #18b14b65; -} - -#sat { - background-color: #cc1b1b65; -} - -#sun { - background-color: #cc83148a; -} - -.cal-entry { - display: flex; - align-content: stretch; - width: 100%; - height: 100%; - padding: 10px; - border-radius: 10px; -} - -.day-of-week { - font-size: 35px; -} - -.cal-date { - display: flex; - flex-direction: column; - padding: 5px 10px; - width: 110px; - height: 75px; - border-radius: 10px; -} - -.cal-subtitle { - color: rgb(150, 150, 150); -} - -.cal-title { - text-align: center; - text-decoration: underline; - margin-bottom: 10px; -} - -.vertical-line { - width: 2px; - margin: 0 10px; - background-color: rgb(88, 88, 88); -} - -.cal-desc { - justify-content: center; - width: 100%; -} - -.event-list { - display: flex; - flex-direction: column; - flex-wrap: wrap; -} - -.event-entry { - display: flex; - flex: row nowrap; - height: 30px; - margin-bottom: 7px; -} - -@media (max-width: 487px) { - .event-entry { - height: auto; - } -} - -.time-column { - width: 35%; - height: 100%; - text-align: right; -} - -.event-column { - width: 75%; - height: 100%; - text-align: left; - padding-left: 15px; -} - -.event-time { - color: gray; -} - -.map-title { - font-size: 25px; - margin: 10px 0; -} - -#map-div { - width: 660px; - height: 462px; -} - -#map-container { - border-radius: 10px; - padding: 3px; - width: 100%; - height: 100%; - border: 1px solid white; - position: relative; - min-width: 375px; -} - -#map { - height: 100%; - width: 100%; - - border-radius: 10px; - position: relative; - z-index: 1; - - display: flex; - align-items: center; - justify-content: center; -} - -/* Workshops */ -.flex-container { - display: flex; - flex-flow: row wrap; - margin-top: 20px; - justify-content: center; - align-items: flex-start; - width: 90%; - margin: 20px auto 0; -} - -.workshop-entry { - margin: 20px; - min-width: 350px; - max-width: 500px; - border-radius: 10px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; - overflow: hidden; -} - -.workshop-entry:hover { - transform: translateY(-4px); - transition: 0.5s; -} - -#webdev-workshop { - background-image: - linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), - url(/img/webdev.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-color: rgb(102, 85, 61); - background-blend-mode: multiply; - /* Photo by Tranmautritam: https://www.pexels.com/photo/information-sign-on-shelf-251225/ */ -} - -#python-workshop { - background-image: - linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), - url(/img/python_code.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-color: rgb(53, 79, 110); - background-blend-mode: multiply; - /* Photo SRC: https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink */ -} - -.workshop-header { - padding: 10px 30px 15px; - display: grid; - grid-template-columns: auto auto; - background-color: rgb(19, 29, 41); -} - -.workshop-title { - display: flex; - flex-flow: column nowrap; -} - -.title-font-weight { - font-size: 25px; -} - -.workshop-subtitle { - margin-top: 3px; - font-size: 15px; - color: rgb(168, 168, 168); -} - -.workshop-topics { - float: right; - display: flex; - flex-flow: row-reverse; -} - -.workshop-img { - height: 30px; - width: 30px; - margin-left: 10px; -} - -.workshop-desc { - padding: 10px 35px; - background-color: #1b1c20; -} - -.workshop-date { - padding: 7px 20px; - text-align: center; - background-color: #3a3344; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - font-size: 20px; - align-items: center; -} - -.workshop-date div { - margin: 0 10px; -} - -.cal-tooltip::after { - content: 'Add to Calendar'; - font-size: 16px; - top: 30px; - right: -20px; -} - -.link.workshop-link { - background: unset; -} - -.workshop-icon { - float: left; - margin-top: 2px; - margin-right: 5px; -} - -.workshop-instructor { - width: 20px; - height: 20px; - margin: 0 5px 0 10px; -} - -.instructor-img { - width: 20px; - height: 20px; - border-radius: 50%; - border-radius: 50%; - border: 1px solid rgb(161, 161, 161); -} - -.workshop-slides { - display: flex; - flex-flow: row nowrap; - width: 100%; -} - -.workshop-topics-covered { - width: 50%; - min-width: 150px; -} - -.workshop-presentation { - text-align: center; - justify-content: center; - float: right; - width: 50%; -} - -.slides-thumbnail { - padding: 10px 15px; -} - -.slides-thumbnail:hover { - transform: scale(1.05); - transition: 0.5s; -} - -.slides-element { - width: 100%; - height: 100%; - border-radius: 5px; - border: 1px solid rgb(102, 102, 102); -} - -.tooltip#python-slides-tooltip::after { - content: 'Intro to Python Programming'; - color: rgb(252, 188, 93); - right: -11px; -} - -.tooltip#webdev-slides-tooltip::after { - content: 'Web Dev & Git Version Control'; - color: rgb(252, 188, 93); - right: -17px; -} - -.tooltip#python-slides-tooltip::after { - content: 'Intro to Python Programming'; - color: rgb(252, 188, 93); - right: -11px; -} - -.workshop-difficulty { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - background-color: #176e2a; - padding: 3px 30px; - justify-content: space-around; -} - -.workshop-status { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - background-color: #963c3c; - padding: 3px 30px; - justify-content: space-around; -} - -.workshop-footer { - padding: 10px 30px; - text-align: center; - background-color: #151618; - display: flex; - justify-content: center; - align-items: center; -} - -#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 */ -#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; -} - -/* 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); -} - -.podium-description { - width: 100%; - height: auto; - - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -.prize-desc { - width: 100%; - height: auto; - - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -.prize-desc:hover > .prize-text { - transform: rotate3d(0, 1, 0, 360deg); - transition: ease-in-out 0.5s; -} - -.prize-laurel { - height: 150px; - width: 150px; - position: relative; -} - -.prize-text { - position: absolute; - color: rgb(167, 146, 234); - font-size: 25px; - margin-bottom: 160px; - line-height: 25px; - z-index: 1; -} - -#first-prize-title { - margin-bottom: 180px; -} - -.prize-title { - color: rgb(167, 146, 234); - font-size: 30px; -} - -.prize-subtitle { - margin: 10px 0; -} - -.prize-column { - display: flex; - flex-flow: column-reverse; -} - -#second-podium { - width: 100%; - height: 50px; - background-color: #333; -} - -#first-podium { - width: 100%; - height: 90px; - background-color: #333; - align-items: center; - text-align: center; - display: flex; - justify-content: center; -} - -#third-podium { - width: 100%; - height: 40px; - background-color: #333; -} - -.podium-edge { - width: 105%; - height: 10px; - background-color: #24282e; - border-radius: 4px; - z-index: 1; -} - -#prize-logo { - height: 50px; - width: 50px; - border-radius: 50%; - border: 1px solid rgb(119, 119, 119); -} - -.podium-label { - position: relative; - font-size: 20px; -} - -#podium-label-1 { - margin-right: 7px; - color: #7ed856; -} - -#podium-label-2 { - margin-left: 7px; - color: #018036; -} - -.prize-img { - height: 85px; -} - -#prize-box { - border-radius: 10px; - border: 1px solid white; - background-color: #2c2c2c; - margin: 30px auto 10px; - width: 70%; - max-width: 850px; - min-width: 350px; - padding: 10px; -} - -#prize-list { - list-style: none; -} - -/* Team */ -#team-container { - width: 100%; - height: auto; - display: flex; - flex-wrap: wrap; - justify-content: center; - text-align: center; -} - -#team-container article { - padding: 20px 35px; - width: 430px; -} - -.team-title { - font-size: 25px; - color:rgb(161, 245, 150); - margin-bottom: 10px; -} - -.team-entry { - display: flex; - align-content: stretch; - padding: 15px; - border-radius: 10px; - width: 357px; - border: 0px solid rgb(54, 54, 54); -} - -@keyframes card-img-pullout { - 0% { - transform: translateX(110px); - } - 50% { - transform: translateX(110px); - } - 100% { - transform: translateX(0px); - } -} -@keyframes card-desc-pullout { - 0% { - transform: translateX(-110px); - opacity: 0; - } - 50% { - transform: translateX(-110px); - } - 80% { - opacity: 0; - } - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -.team-entry:hover { - transform: scale(1.01); - border: 1px solid rgb(54, 54, 54); - transition: 0.5s; -} - -.team-picture { - width: auto; - height: auto; -} - -.team-picture img { - height: 100px; - width: 100px; - border-radius: 50%; - border: 1px solid rgb(161, 161, 161); -} - -#jd { - border: 0px; -} - -.team-description { - text-align: left; - width: auto; - display: block; - margin-left: 18px; -} - -.person-name { - font-size: 20px; - color:rgb(99, 169, 250); - padding-bottom: 2px; -} - -.person-subtitle { - font-size: 15px; - color: rgb(129, 129, 129); -} - -.person-contact { - font-size: 15px; - padding-top: 16px; - font-style: normal; -} - -/* Utilities */ -#line-header { - width: 200px; - margin: 10px 0; - animation: grow-wide ease 2s; -} - -.vertical-line.second { - width: 2px; - margin: 0 10px; - background-color: rgb(255, 255, 255); -} - -@keyframes grow-wide { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -.tooltip-rules { - 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; -} - -#arrow-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; -} - -.bottom-text { - margin: 10px 5px; -} - -.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; -} - -.new-tab-icon { - fill: white; - height: 10px; - margin-left: 5px; -} - -.new-tab-icon.sub-icon { - height: 15px; - margin-left: 8px; -} - -.discord-icon { - width: 16px; - height: 16px; - fill: rgb(110, 112, 247); - float: left; - margin-right: 5px; -} - -@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; - } -} - -.donate-button { - color: white; - text-decoration: none; -} - -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; -} - -/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and -coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? -Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to +/* + Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) + + 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-container { + box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); + position: fixed; + width: 100%; + z-index: 3; +} + +/* menu */ + +.nav-container .nav-menu { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + clear: none; + float: right; + max-height: none; + margin-right: 110px; +} + +.nav-container .nav-menu li { + display: inline-block; + line-height: 30px; + margin: 10px 7px; + padding: 3px 11px; + cursor: pointer; +} + +/* menu icon */ + +.nav-container .menu-icon { + display: none; +} + +.nav-container .menu-icon .navicon { + background: rgb(123, 123, 123); + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; +} + +.nav-container .menu-icon .navicon:before, +.nav-container .menu-icon .navicon:after { + background: rgb(123, 123, 123); + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; +} + +.nav-container .menu-icon .navicon:before { + top: 5px; +} + +.nav-container .menu-icon .navicon:after { + top: -5px; +} + +/* menu btn */ + +.nav-container .menu-btn { + display: none; +} + +.nav-container .menu-btn:checked ~ .nav-menu { + max-height: 300px; + background-color: rgba(24, 24, 24, 0.988); + transition: 0.5s; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; +} + +@keyframes slow-fade { + 0% { + background-color: rgb(24, 24, 24); + } + 90% { + background-color: unset; + } +} + +@media (max-width: 1050px) { + .nav-container .nav-menu { + clear: both; + max-height: 0; + transition: max-height .2s ease-out; + text-align: center; + width: 100%; + margin-right: 0; + } + .nav-container .nav-menu li { + display: block; + } + .nav-container .menu-icon { + cursor: pointer; + display: block; + float: right; + padding: 28px 20px; + position: relative; + user-select: none; + } + #sign-up { + right: 50px !important; + } + .nav-container .menu-btn:not(:checked) ~ .nav-menu { + animation: slow-fade 1s ease; + } +} + +nav { + height: 59px; + width: 100%; + top: 0; + left: 0; + position: fixed; + flex-wrap: nowrap; + z-index: 100; +} + +nav * { + padding: 0; + 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; +} + +.navlink { + color:rgb(233, 203, 104); + font-size: 18px; + text-decoration: none; + position: relative; +} + +.navlink.active,.link: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-direction: row-reverse; + align-content: stretch; +} + +#nav-icon { + margin: 0 0 0 5px; +} + +#sign-up { + padding: 6px 7px; + margin: 14px 15px 14px 4px; + width: 72px; + border-radius: 5px; + font-size: 16px; + background-color: rgb(140, 42, 165); + color: bisque; + position: fixed; + display: inline-flex; + right: 10px; +} + +#sign-up:hover { + transform: scale(1.03); + filter: brightness(1.05); + 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; +} + +.header-info { + display: flex; + flex-flow: row wrap; + max-width: 420px; + padding: 0 10px; + min-width: none; + justify-content: center; +} + +.header-info a { + margin: 0 5px; +} + +#timer { + color: rgb(184, 184, 184); + animation: blinking 3s infinite; + background-color: rgb(57, 57, 57); + border-radius: 5px; + padding: 2px 5px; + margin-left: 5px; + position: relative; + width: fit-content +} + +#timer::after { + content: 'Apr 15, 10am'; + 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); +} + +#winners { + text-align: center; + position: absolute; + top: 59px; + background-color: #2c9643; + width: 100%; + font-size: 20px; + padding: 3px 5px; + animation: fadeInAnimation ease 2s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +#chart { + max-width: 650px; + margin: 35px auto; +} + +#team-emphasis { + color:rgb(180, 213, 253); +} + +.tooltip-nav { + text-decoration: none; + margin: 0; +} + +#timer-link { + color:rgb(252, 188, 93); + text-decoration: none; + cursor: pointer; + background: unset; + margin-right: 10px; +} + +.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: block; + top: 1px; + max-width: 200px; + min-width: 150px; + width: auto; + margin-left: 300px; + } + #timer-container { + display: block; + text-align: center; + } + #timer { + display: inline-block; + position: relative; + margin: 3px auto 0; + padding: 0px 5px; + } + #timer::after { + right: -15px; + } +} +@media (max-width: 900px) { + #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; + } + #logo { + height: 180px !important; + width: 180px !important; + } + header .waviy { + font-size: 45px; + } +} +@media (max-width: 700px) { + .header-link.tooltip::after { + display: none; + } +} +@media (max-width: 620px) { + #banner { + display: none; + } +} +@media (max-width: 500px) { + #signup-article, #rules, #prizes, #team { + transform: scale(0.9); + } + section { + padding-top: 0 !important; + } +} +@media (max-width: 470px) { + #nav-logo { + content: url(/img/logo_mini.png); + height: 45px; + width: 45px; + margin: 7px 0 0 5px; + } + #logo { + height: 2300px; + width: 230px; + } + #prizes-container, #banner { + transform: scale(0.9); + } + #banner { + display: block; + margin-left: 75px; + } +} +@media (max-width: 400px) { + #nav-logo { + content: url(/img/logo_mini.png); + height: 45px; + width: 45px; + margin: 7px 0 0 5px; + } + #logo { + height: 2300px; + width: 230px; + } + #prizes-container { + transform: scale(0.9); + } +} +@media (max-width: 370px) { + #banner { + display: none; + } +} +@media (max-height: 550px) { + /* #logo { + transform: scale(0.8); + } */ + #entrance-arrow { + visibility: hidden; + } + .header { + transform: scale(0.8); + } +} +@media (max-height: 450px) { + .header { + transform: scale(0.7); + } +} + +.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; +} + +.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); + } +} + +@keyframes pulse-gold { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(254, 228, 84); + } + 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: 100vh; +} + +.header-background.second { + height: 20%; +} + +.header { + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + text-align: center; + position: relative; +} + +.header.second { + padding: 70px 0 50px; + flex-flow: row nowrap; +} + +#second-logo { + height: 100px; + width: 100px; +} + +.header-container { + width: 100%; + height: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: center; + + text-align: center; +} + +.header-logo-parent { + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +#logo { + height: 230px; + width: 230px; + animation: fadeInAnimation ease 3s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +.waviy { + position: relative; + display: flex; + font-size: 60px; +} +.waviy span { + font-family: "Norwester"; + font-weight: lighter; + margin: 0 1.4px; + position: relative; + display: inline-block; + left: 0%; + + animation: waviy 1s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.waviy span:hover { + padding-left: -20px; +} + +#top-logo-text { + color: #7ed957; +} + +#bottom-logo-text { + color: #72FFAF; +} + +@keyframes waviy { + 0% { + transform: translateY(-100px); + opacity: 0; + } + 10% { + opacity: 0; + } + 30% { + transform: translateY(0px); + opacity: 1; + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0px); + } +} + +.header-subtitle { + padding: 5px 7px; + margin-top: 5px; + border-radius: 10px; + display: flex; + width: fit-content; + place-items: center; + border: 1px solid rgb(73, 73, 73); + background-color: rgb(22, 22, 22); +} + +.header-subtitle.donate { + background: rgb(98,0,255); + background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%); +} + +.header-link.left { + animation: slideinleft ease 1.5s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.header-link.right { + animation: slideinright ease 1.5s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.header-link { + background: unset !important; + color: white !important; + text-decoration: none; +} + +.header-link.second { + animation: none; +} + +#header-tooltip::after { + content: 'Add to Calendar →'; + top: 12px; + right: 160px; + transform-origin: right; + 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; + right: -120px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#donate-tooltip::after { + content: '← Donate Page 💝'; + top: 12px; + right: -160px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#spots-tooltip::after { + content: 'Sign up here →'; + top: 12px; + right: 205px; + transform-origin: right; + color: rgb(252, 188, 93); +} + +.header-info-container { + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + justify-content: center; +} + +@media (max-width: 610px) { + #header-tooltip::after, #spots-tooltip::after { + display: none; + } +} + +.header-icon { + margin-right: 6px; +} + +.spots-container { + display: flex; + place-items: center; + border-radius: 10px; + margin-top: 5px; + padding: 0 7px; + width: fit-content; + border: 1px solid rgb(73, 73, 73); + background-color: rgb(22, 22, 22); + background: rgb(20,48,10); + background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%); +} + +#header-subtitle-spots { + padding: 5px; +} + +.spots-container:hover, .header-subtitle:hover { + transform: translateY(-2px); + transition: 0.5s; +} + +#entrance-arrow { + width: 50px; + height: 50px; + position: absolute; + bottom: 10px; + float: bottom; + animation: bounce 3s infinite; +} + +#entrance-arrow:hover { + font-size: 17px; + transition: 0.1s; +} + +#header-gradient { + width: 100%; + height: 100%; + background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); +} + +.header-parent { + height: 100%; + display: flex; + flex-flow: row wrap; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-3px); + } +} + +@keyframes fadeInAnimation { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes slideinleft { + 0% { + transform: translateX(-20px); + opacity: 0; + } + 60% { + opacity: 0; + transform: translateX(-20px); + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slideinright { + 0% { + transform: translateX(20px); + opacity: 0; + } + 60% { + transform: translateX(20px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +/* @keyframes slidein-2 { + 0% { + transform: translateY(20px); + opacity: 0; + } + 80% { + transform: translateY(20px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} */ +@keyframes slidein-side { + 0% { + transform: translateX(-100px); + opacity: 0; + } + 40% { + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slidein-prize-2 { + 0% { + opacity: 0; + } + 40% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slidein-prize-1 { + 0% { + opacity: 0; + } + 30% { + transform: translateY(-30px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} +@keyframes slidein-prize-3 { + 0% { + opacity: 0; + } + 60% { + transform: translateX(30px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes modal-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@media (prefers-reduced-motion: no-preference) { + .slide-animation { + animation: slidein-side ease 1s; + } + .slide-animation-prize-2 { + animation: slidein-prize-2 ease 3s; + } + .slide-animation-prize-1 { + animation: slidein-prize-1 ease 2s; + } + .slide-animation-prize-3 { + animation: slidein-prize-3 ease 3s; + } + .slide-animation-card-img { + animation: card-img-pullout ease 2s; + } + .slide-animation-card-desc { + animation: card-desc-pullout ease 2s; + } + .modal-animation { + animation: modal-fade-in ease 0.5s; + } +} + +/* Main Section */ +main { + width: 100%; + align-items: center; + justify-content: center; + text-align: center; + position: relative; + margin: auto; + display: grid; + padding-bottom: 70px; +} + +section { + width: auto; + padding-top: 70px; + 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); +} + +#event-container { + display: flex; + flex-wrap: wrap; + margin-top: 20px; + justify-content: center; +} + +#event-description { + margin: 0 20px; + max-width: 700px; + min-width: 200px; + font-size: 18px; + text-align: left; +} + +.description-heading { + text-align: center; + margin-bottom: 10px; +} + +#description-content { + text-align: center; + border-radius: 10px; + background-color: #202329; + padding: 15px 10px; + margin: auto; +} + +.desc-title { + margin-top: 15px; +} + +/* Splash text */ +.splash-container { + padding: 15px 20px; + border-radius: 10px; + border: 1px solid rgb(68, 68, 68); + margin: 10px 0; +} + +.splash-group { + display: flex; + flex-flow: row wrap; + justify-content: center; +} + +#why-GilroyHacks { + width: 100%; + min-width: 300px; + max-width: 315px; + margin: 15px; +} + +#who-GilroyHacks { + width: 100%; + min-width: 300px; + max-width: 315px; + margin: 15px; +} + +.splash-title { + color:rgb(51, 235, 189); + margin-bottom: 10px; +} + +.splash-desc { + line-height: 25px; +} + +#headline-recap { + color: #fbc334; +} + +.splide { + margin: 20px auto; +} + +.slide-content { + margin-bottom: 10px; + text-align: center; + max-width: fit-content; +} + +.splide, .splide__track, .splide__list, .splide__slide, .slide-content, .slide-img { + border-radius: 5px; +} + +.slide-caption { + position: relative; + bottom: 35px; + background-color: #232323b8; + padding: 2px 5px; + border-radius: 5px; +} + +.slide-img { + width: 100%; + height: auto; +} + +.splide__slide, .splide__slide:focus, .splide.is-focus-in, .splide__pagination__page:focus-visible { + border: none !important; + outline: none !important; +} + +li .splide__pagination__page.is-active { + background: #545454; +} + +.list { + padding-left: 20px; +} + +.desc-list { + margin-left: 25px; +} + +.list li{ + margin: 10px 0; +} + +.tooltip.zoom-tooltip::after { + content: 'Zoom Link'; + font-size: 16px; + top: 40px; + right: 12px; + color: rgb(45, 140, 255); +} + +.tooltip.zoom-tooltip-link::after { + content: 'Zoom Link'; + font-size: 16px; + top: 22px; + right: -22px; + color: rgb(45, 140, 255); +} + +#submit-tooltip:after { + content: 'Submission Form'; + right: -20px; +} + +#git-tooltip::after { + content: 'Git'; + color:#a6e2fa; + right: -3px; + top: 33px; +} + +#html-tooltip::after { + content: 'HTML'; + color:#a6e2fa; + right: -10px; + top: 33px; +} + +#python-tooltip::after { + content: 'Python'; + color:#a6e2fa; + right: -15px; + top: 33px; +} + +/* Signup Container */ +.signup-container { + margin: 20px auto; + } + +#steps-card { + width: 400px; + min-width: 300px; + border-radius: 10px; + background-color: #181a1d; + margin: 10px auto; + padding: 10px 30px; + box-shadow: 0px 5px 10px rgb(0 0 0 / 20%); + text-align: left; +} + +/* Outer Layer with the steps border */ +.outer { + border-left: 2px solid #333; +} + +/* Card container */ +.card { + position: relative; + margin: 0 0 20px 20px; + padding: 10px; + background: rgb(49, 48, 48); + color: gray; + border-radius: 8px; + max-width: 400px; +} + +.card:hover { + filter: brightness(120%); + transition: 0.5s; +} + +/* Title of the card */ +.title { + color: rgb(255, 255, 255); + position: relative; + font-size: 16px; +} + +.step-desc { + color: gray; + width: 298px; +} + +/* Steps dot */ +.title::before { + content: ""; + position: absolute; + width: 10px; + height: 10px; + background: rgb(49, 48, 48); + border-radius: 50%; + margin-top: 3px; + left: -38px; + border: 2px solid rgb(255, 255, 255); +} + +.caption { + color: #8d8d8d; +} + +/* Signup Checklist */ +.checklist { + --text: #414856; + --check: #00ff37; + --disabled: #C3C8DE; + --border-radius: 10px; + background: var(--background); + position: relative; + display: grid; + grid-template-columns: 0px auto; + align-items: center; +} +.checklist label { + color: var(--text); + position: relative; + cursor: pointer; + display: grid; + align-items: center; + width: fit-content; + transition: color 0.3s ease; +} +.checklist label::before, .checklist label::after { + content: ""; + position: absolute; +} +.checklist label::before { + height: 2px; + width: 8px; + left: -35px; + border-radius: 2px; +} +.checklist label:after { + height: 4px; + width: 4px; + top: 8px; + left: -35px; + border-radius: 50%; +} +.checklist input[type=checkbox] { + appearance: none; + position: relative; + height: 15px; + width: 15px; + outline: none; + border: 0; + margin: 0 15px 0 0; + cursor: pointer; + background: var(--background); + display: grid; + align-items: center; +} +.checklist input[type=checkbox]::before, .checklist input[type=checkbox]::after { + content: ""; + position: absolute; + height: 2px; + top: auto; + background: var(--check); + border-radius: 2px; +} +.checklist input[type=checkbox]::before { + width: 0px; + transform-origin: right bottom; + z-index: 2; +} +.checklist input[type=checkbox]::after { + width: 0px; + transform-origin: left bottom; + z-index: 2; +} +.checklist input[type=checkbox]:checked::before { + animation: check-01 0.4s ease forwards; + left: -36px; +} +.checklist input[type=checkbox]:checked::after { + animation: check-02 0.4s ease forwards; + left: -31px; +} +.checklist input[type=checkbox]:checked + label { + color: var(--disabled); + animation: move 0.3s ease 0.1s forwards; +} +.checklist input[type=checkbox]:checked + label::before { + background: var(--disabled); + animation: slice 0.4s ease forwards; +} +.checklist input[type=checkbox]:checked + label::after { + animation: firework 0.5s ease forwards 0.1s; + left: -33px; +} + +@keyframes move { + 50% { + padding-left: 8px; + padding-right: 0px; + } + 100% { + padding-right: 4px; + } +} +@keyframes slice { + 60% { + width: 100%; + left: 4px; + } + 100% { + width: 100%; + left: -2px; + padding-left: 0; + } +} +@keyframes check-01 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + 51% { + width: 0px; + top: 8px; + transform: rotate(45deg); + } + 100% { + width: 5px; + top: 8px; + transform: rotate(45deg); + } +} +@keyframes check-02 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + 51% { + width: 0px; + top: 8px; + transform: rotate(-45deg); + } + 100% { + width: 10px; + top: 8px; + transform: rotate(-45deg); + } +} +@keyframes firework { + 0% { + opacity: 1; + box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; + } + 30% { + opacity: 1; + } + 100% { + opacity: 0; + box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; + } +} + +.card-info-container { + display: flex; + flex-flow: row wrap; + max-width: 400px; + min-width: 200px; + justify-content: space-around; + margin: 20px 0; + background-color: #1d1d1d; + padding: 10px; + border-radius: 5px; +} + +.info-card { + min-width: 180px; + max-width: 400px; + padding: 10px 20px; + margin: 10px 0; + background-color:rgb(49, 48, 48); + border-radius: 5px; +} + +.hcb-container { + font-size: 24px; + padding: 2px; + display: flex; + justify-content: center; + align-items: center; +} + +.hcb-svg { + margin-right: 5px +} + +.spots-container.bankacc-click { + background:#9a4752; +} + +.card-heading { + font-size: 30px; +} + +.apexcharts-menu { + background-color: #27293d!important; + border: 0px; + text-align: center; +} + +.apexcharts-menu-item:hover { + background-color: #3f3f3f!important; +} + +.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); +} + +#signup-link::after { + content: 'Signup Form'; +} + +.email-link::after { + content: 'Email'; + right: calc((100%/2) - 25px); +} + +#discord-link::after { + content: 'Discord Invite Link'; + right: -40px; +} + +#website::after { + content: 'Check out my website!'; + top: 100px; + color: rgb(255, 208, 137) +} + +.tooltip.discord::after { + content: 'Discord'; + color: rgb(128, 130, 245); + right: -70px; + top: -5px; + transform-origin: left; +} + +#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) +} + +#sponsors { + margin-bottom: 10px; + padding-top: 30px; +} + +.wolfram-logo { + align-items: center; + justify-content: center; + display: flex; + width: 300px; +} + +#wolfram-star { + max-height: 60px !important; +} + +#wolfram-letters { + margin-left: 5px !important; + max-height: 35px !important; +} + +#sponsor-container { + display: flex; + flex-flow: row wrap; + padding: 20px 15px; + margin: 0 50px; + max-width: 1500px; + justify-content: space-evenly; +} + +#sponsor-container a { + padding: 7px 0px; + margin: 5px 20px; + align-content: center; +} + +#sponsor-container img { + max-height: 80px; + max-width: 370px; +} + +#sponsor-container a:hover { + animation: 0.3s ease shake; +} + +@keyframes shake { + 0% { + transform:rotate(0.5deg); + } + 33% { + transform:rotate(-0.5deg); + } + 66% { + transform:rotate(0.5deg); + } + 100% { + transform:rotate(0deg); + } +} + +#sponsor-container img { + margin: 10px 0; +} + +#gilroy-library-logo { + height: 120px; + width: 352px; +} + +#gavilan-college-logo { + height: 102px; + width: 352px; +} + +#gear-club-logo { + height: 60px; + width: 352px; +} + +/* Schedule */ +#schedule { + padding-top: 70px; + margin-bottom: 30px; +} + +.schedule-parent { + display: flex; + flex-flow: row wrap; + justify-content: center; + max-width: 1300px; + width: 95%; + margin: auto; +} + +.schedule-element { + padding: 20px 20px; + margin-top: 20px; + width: 95%; + min-width: 370px; + max-width: 650px; + background-color: rgb(29, 27, 36); + border-radius: 10px; +} + +.time-column-header { + margin-bottom: 20px; + font-size: 30px; + text-decoration: underline; +} + +.schedule-container { + display: grid; + margin: auto; + grid-gap: 0.2rem; + grid-template-columns: 4rem repeat(4, 1fr); + grid-template-rows: repeat(14, 1fr); + grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage"; +} + +.modal { + border: 1px solid rgb(142, 102, 177); + background-color: #23262a; + min-width: 350px; + max-width: 500px; + position: fixed; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; + text-align: left; + border-radius: 5px; + overflow: hidden; + z-index: 2; +} + +.modal-header { + background-color: rgb(147, 29, 141); + padding: 5px 10px; +} + +.modal-desc { + padding: 8px 10px 15px; +} + +.button-close-modal { + display: block; + float: right; + background-color: unset; + border: none; + cursor: pointer; + margin-right: 5px; + display: block; + height: 2px; + position: relative; + width: 20px; + height: 20px; + padding: 15px 20px 10px 10px; + cursor: pointer; +} + +.button-close-modal:before, +.button-close-modal:after { + background: rgb(200, 200, 200); + content: ''; + display: block; + height: 2px; + position: absolute; + transition: all .2s ease-out; + width: 13px; +} + +.button-close-modal:hover { + transform: scale(1.05); + filter: brightness(1.1); + transition: 0.3s; +} + +.button-close-modal:before { + transform: rotate(-45deg); +} + +.button-close-modal:after { + transform: rotate(45deg); +} + +#modal-overlay { + width: 100%; + height: 100%; + display: none; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, .5); + opacity: 0; + transition: opacity .2s ease; +} + +.timeline-description { + font-size: 16px; + font-weight: normal; +} + +.timeline-description-list li { + margin: 10px 40px; + font-size: 16px; +} + +.important-text { + color: rgb(255, 126, 126); +} + +.timeline-links { + display: flex; + flex-flow: row wrap; + justify-content: center; + text-align: center; + text-decoration: none !important; + margin-top: 15px; +} + +.timeline-icon { + height: 23px; + width: 75px; + float: left; +} + +.timeline-button { + color: rgb(233, 203, 104); + text-decoration: none; + border-radius: 5px; + font-size: 18px; + border: 1px solid rgb(192, 168, 88); + padding: 5px; + display: inline-block; + margin: 0 10px; +} + +.zoom-link { + border: 1px solid rgb(45, 140, 255); +} + +.timeline-button.zoom-link:hover { + background-color: rgb(45, 140, 255); +} + +.timeline-button.zoom-link:hover > .timeline-icon{ + filter:hue-rotate(60deg); +} + +.timeline-button:hover { + color: white; + background-color: rgb(192, 168, 88); + transition: 0.5s; +} + +/** + * Time + */ +.time { + display: flex; + justify-content: flex-end; + height: 100%; + padding: 0 0.5rem; +} + +.time span { + position: relative; + bottom: 10px; +} + +.time.start-800 { + grid-area: time800; +} +.time.start-900 { + grid-area: time900; +} +.time.start-1000 { + grid-area: time1000; +} +.time.start-1100 { + grid-area: time1100; +} +.time.start-1200 { + grid-area: time1200; +} +.time.start-1300 { + grid-area: time1300; +} +.time.start-1400 { + grid-area: time1400; +} +.time.start-1500 { + grid-area: time1500; +} +.time.start-1600 { + grid-area: time1600; +} +.time.start-1700 { + grid-area: time1700; +} +.time.start-1800 { + grid-area: time1800; +} +.time.start-1900 { + grid-area: time1900; +} +.time.start-2000 { + grid-area: time2000; +} +.time.start-2100 { + grid-area: time2100; +} + +/** + * Event + */ +.event { + display: flex; + justify-content: center; + flex-direction: column; + padding: 0.2rem 1rem; + background-color: rgb(157, 0, 149); + border-radius: 0.2rem; + font-size: 18px; + border-top: thin solid rgb(68, 68, 68); + cursor: pointer; + position: relative; +} +.event span { + display: block; + width: 100%; + font-size: 14px; + color: rgb(177, 177, 177); +} +.event.empty { + background-color: unset; + cursor: unset; +} + +.event:hover:not(.empty) { + filter: brightness(1.1); + transform: translateY(-2px); + transition: 0.3s; +} + +.event.start-800 { + grid-row-start: time800; +} +.event.start-900 { + grid-row-start: time900; +} +.event.start-1000 { + grid-row-start: time1000; +} +.event.start-1100 { + grid-row-start: time1100; +} +.event.start-1200 { + grid-row-start: time1200; +} +.event.start-1300 { + grid-row-start: time1300; +} +.event.start-1400 { + grid-row-start: time1400; +} +.event.start-1500 { + grid-row-start: time1500; +} +.event.start-1600 { + grid-row-start: time1600; +} +.event.start-1700 { + grid-row-start: time1700; +} +.event.start-1800 { + grid-row-start: time1800; +} +.event.start-1900 { + grid-row-start: time1900; +} +.event.start-2000 { + grid-row-start: time2000; +} +.event.start-2100 { + grid-row-start: time2100; +} +.event.end-800 { + grid-row-end: time800; +} +.event.end-900 { + grid-row-end: time900; +} +.event.end-1000 { + grid-row-end: time1000; +} +.event.end-1100 { + grid-row-end: time1100; +} +.event.end-1200 { + grid-row-end: time1200; +} +.event.end-1300 { + grid-row-end: time1300; +} +.event.end-1400 { + grid-row-end: time1400; +} +.event.end-1500 { + grid-row-end: time1500; +} +.event.end-1600 { + grid-row-end: time1600; +} +.event.end-1700 { + grid-row-end: time1700; +} +.event.end-1800 { + grid-row-end: time1800; +} +.event.end-1900 { + grid-row-end: time1900; +} +.event.end-2000 { + grid-row-end: time2000; +} +.event.end-2100 { + grid-row-end: time2100; +} +.event.length-1 { + grid-column-end: span 1; +} +.event.length-2 { + grid-column-end: span 2; +} +.event.length-3 { + grid-column-end: span 3; +} +.event.length-4 { + grid-column-end: span 4; +} +.event.small { + font-size: 16px; +} + +.logistics { + background-color: rgb(147, 29, 141); +} +.hacking { + background-color: rgb(53, 53, 199); +} +.food { + background-color: #03833b; +} +.workshop { + background-color: rgb(109, 40, 194); +} +.game { + background-color: rgb(105, 94, 139); +} + +.logistics-border { + border: 1px solid rgb(147, 29, 141); +} +.hacking-border { + border: 1px solid rgb(53, 53, 199); +} +.food-border { + border: 1px solid #03833b; +} +.workshop-border { + border: 1px solid rgb(109, 40, 194); +} +.game-border { + border: 1px solid rgb(105, 94, 139); +} + + +#map-article { + margin: 20px auto 0; + width: 90%; + max-width: 1100px; +} + +#cal-parent { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#cal-container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 440px; + min-width: 400px !important; + height: auto; + justify-content: center; +} + +.cal-card { + width: 100%; + border-radius: 7px; + border: 1px solid white; +} + +.cal-card:hover { + transform: translateY(-5px); + background-color: #0f1318; + transition: 0.5s; +} + +/* .cal-card:hover > #community-room { + visibility: visible !important; +} */ + +#fri { + background-color: #18b14b65; +} + +#sat { + background-color: #cc1b1b65; +} + +#sun { + background-color: #cc83148a; +} + +.cal-entry { + display: flex; + align-content: stretch; + width: 100%; + height: 100%; + padding: 10px; + border-radius: 10px; +} + +.day-of-week { + font-size: 35px; +} + +.cal-date { + display: flex; + flex-direction: column; + padding: 5px 10px; + width: 110px; + height: 75px; + border-radius: 10px; +} + +.cal-subtitle { + color: rgb(150, 150, 150); +} + +.cal-title { + text-align: center; + text-decoration: underline; + margin-bottom: 10px; +} + +.vertical-line { + width: 2px; + margin: 0 10px; + background-color: rgb(88, 88, 88); +} + +.cal-desc { + justify-content: center; + width: 100%; +} + +.event-list { + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.event-entry { + display: flex; + flex: row nowrap; + height: 30px; + margin-bottom: 7px; +} + +@media (max-width: 487px) { + .event-entry { + height: auto; + } +} + +.time-column { + width: 35%; + height: 100%; + text-align: right; +} + +.event-column { + width: 75%; + height: 100%; + text-align: left; + padding-left: 15px; +} + +.event-time { + color: gray; +} + +.map-title { + font-size: 25px; + margin: 10px 0; +} + +#map-div { + width: 660px; + height: 462px; +} + +#map-container { + border-radius: 10px; + padding: 3px; + width: 100%; + height: 100%; + border: 1px solid white; + position: relative; + min-width: 375px; +} + +#map { + height: 100%; + width: 100%; + + border-radius: 10px; + position: relative; + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; +} + +/* Workshops */ +.flex-container { + display: flex; + flex-flow: row wrap; + margin-top: 20px; + justify-content: center; + align-items: flex-start; + width: 90%; + margin: 20px auto 0; +} + +.workshop-entry { + margin: 20px; + min-width: 350px; + max-width: 500px; + border-radius: 10px; + box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); + text-align: left; + overflow: hidden; +} + +.workshop-entry:hover { + transform: translateY(-4px); + transition: 0.5s; +} + +#webdev-workshop { + background-image: + linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), + url(/img/webdev.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: rgb(102, 85, 61); + background-blend-mode: multiply; + /* Photo by Tranmautritam: https://www.pexels.com/photo/information-sign-on-shelf-251225/ */ +} + +#python-workshop { + background-image: + linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), + url(/img/python_code.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: rgb(53, 79, 110); + background-blend-mode: multiply; + /* Photo SRC: https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink */ +} + +.workshop-header { + padding: 10px 30px 15px; + display: grid; + grid-template-columns: auto auto; + background-color: rgb(19, 29, 41); +} + +.workshop-title { + display: flex; + flex-flow: column nowrap; +} + +.title-font-weight { + font-size: 25px; +} + +.workshop-subtitle { + margin-top: 3px; + font-size: 15px; + color: rgb(168, 168, 168); +} + +.workshop-topics { + float: right; + display: flex; + flex-flow: row-reverse; +} + +.workshop-img { + height: 30px; + width: 30px; + margin-left: 10px; +} + +.workshop-desc { + padding: 10px 35px; + background-color: #1b1c20; +} + +.workshop-date { + padding: 7px 20px; + text-align: center; + background-color: #3a3344; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + font-size: 20px; + align-items: center; +} + +.workshop-date div { + margin: 0 10px; +} + +.cal-tooltip::after { + content: 'Add to Calendar'; + font-size: 16px; + top: 30px; + right: -20px; +} + +.link.workshop-link { + background: unset; +} + +.workshop-icon { + float: left; + margin-top: 2px; + margin-right: 5px; +} + +.workshop-instructor { + width: 20px; + height: 20px; + margin: 0 5px 0 10px; +} + +.instructor-img { + width: 20px; + height: 20px; + border-radius: 50%; + border-radius: 50%; + border: 1px solid rgb(161, 161, 161); +} + +.workshop-slides { + display: flex; + flex-flow: row nowrap; + width: 100%; +} + +.workshop-topics-covered { + width: 50%; + min-width: 150px; +} + +.workshop-presentation { + text-align: center; + justify-content: center; + float: right; + width: 50%; +} + +.slides-thumbnail { + padding: 10px 15px; +} + +.slides-thumbnail:hover { + transform: scale(1.05); + transition: 0.5s; +} + +.slides-element { + width: 100%; + height: 100%; + border-radius: 5px; + border: 1px solid rgb(102, 102, 102); +} + +.tooltip#python-slides-tooltip::after { + content: 'Intro to Python Programming'; + color: rgb(252, 188, 93); + right: -11px; +} + +.tooltip#webdev-slides-tooltip::after { + content: 'Web Dev & Git Version Control'; + color: rgb(252, 188, 93); + right: -17px; +} + +.tooltip#python-slides-tooltip::after { + content: 'Intro to Python Programming'; + color: rgb(252, 188, 93); + right: -11px; +} + +.workshop-difficulty { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176e2a; + padding: 3px 30px; + justify-content: space-around; +} + +.workshop-status { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: #963c3c; + padding: 3px 30px; + justify-content: space-around; +} + +.workshop-footer { + padding: 10px 30px; + text-align: center; + background-color: #151618; + display: flex; + justify-content: center; + align-items: center; +} + +#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 */ +#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; +} + +/* 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); +} + +.podium-description { + width: 100%; + height: auto; + + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +.prize-desc { + width: 100%; + height: auto; + + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +.prize-desc:hover > .prize-text { + transform: rotate3d(0, 1, 0, 360deg); + transition: ease-in-out 0.5s; +} + +.prize-laurel { + height: 150px; + width: 150px; + position: relative; +} + +.prize-text { + position: absolute; + color: rgb(167, 146, 234); + font-size: 25px; + margin-bottom: 160px; + line-height: 25px; + z-index: 1; +} + +#first-prize-title { + margin-bottom: 180px; +} + +.prize-title { + color: rgb(167, 146, 234); + font-size: 30px; +} + +.prize-subtitle { + margin: 10px 0; +} + +.prize-column { + display: flex; + flex-flow: column-reverse; +} + +#second-podium { + width: 100%; + height: 50px; + background-color: #333; +} + +#first-podium { + width: 100%; + height: 90px; + background-color: #333; + align-items: center; + text-align: center; + display: flex; + justify-content: center; +} + +#third-podium { + width: 100%; + height: 40px; + background-color: #333; +} + +.podium-edge { + width: 105%; + height: 10px; + background-color: #24282e; + border-radius: 4px; + z-index: 1; +} + +#prize-logo { + height: 50px; + width: 50px; + border-radius: 50%; + border: 1px solid rgb(119, 119, 119); +} + +.podium-label { + position: relative; + font-size: 20px; +} + +#podium-label-1 { + margin-right: 7px; + color: #7ed856; +} + +#podium-label-2 { + margin-left: 7px; + color: #018036; +} + +.prize-img { + height: 85px; +} + +#prize-box { + border-radius: 10px; + border: 1px solid white; + background-color: #2c2c2c; + margin: 30px auto 10px; + width: 70%; + max-width: 850px; + min-width: 350px; + padding: 10px; +} + +#prize-list { + list-style: none; +} + +/* Team */ +#team-container { + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +#team-container article { + padding: 20px 35px; + width: 430px; +} + +.team-title { + font-size: 25px; + color:rgb(161, 245, 150); + margin-bottom: 10px; +} + +.team-entry { + display: flex; + align-content: stretch; + padding: 15px; + border-radius: 10px; + width: 357px; + border: 0px solid rgb(54, 54, 54); +} + +@keyframes card-img-pullout { + 0% { + transform: translateX(110px); + } + 50% { + transform: translateX(110px); + } + 100% { + transform: translateX(0px); + } +} +@keyframes card-desc-pullout { + 0% { + transform: translateX(-110px); + opacity: 0; + } + 50% { + transform: translateX(-110px); + } + 80% { + opacity: 0; + } + 100% { + opacity: 1; + transform: translateX(0px); + } +} + +.team-entry:hover { + transform: scale(1.01); + border: 1px solid rgb(54, 54, 54); + transition: 0.5s; +} + +.team-picture { + width: auto; + height: auto; +} + +.team-picture img { + height: 100px; + width: 100px; + border-radius: 50%; + border: 1px solid rgb(161, 161, 161); +} + +#jd { + border: 0px; +} + +.team-description { + text-align: left; + width: auto; + display: block; + margin-left: 18px; +} + +.person-name { + font-size: 20px; + color:rgb(99, 169, 250); + padding-bottom: 2px; +} + +.person-subtitle { + font-size: 15px; + color: rgb(129, 129, 129); +} + +.person-contact { + font-size: 15px; + padding-top: 16px; + font-style: normal; +} + +/* Utilities */ +#line-header { + width: 200px; + margin: 10px 0; + animation: grow-wide ease 2s; +} + +.vertical-line.second { + width: 2px; + margin: 0 10px; + background-color: rgb(255, 255, 255); +} + +@keyframes grow-wide { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +.tooltip-rules { + 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; +} + +#arrow-link { + color:rgb(252, 188, 93); + text-decoration: none; + cursor: pointer; +} + +.bottom-text { + margin: 10px 5px; +} + +.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; +} + +.new-tab-icon { + fill: white; + height: 10px; + margin-left: 5px; +} + +.new-tab-icon.sub-icon { + height: 15px; + margin-left: 8px; +} + +.discord-icon { + width: 16px; + height: 16px; + fill: rgb(110, 112, 247); + float: left; + margin-right: 5px; +} + +@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; + } +} + +.donate-button { + color: white; + text-decoration: none; +} + +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; +} + +/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and +coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? +Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to newcomers. If this sounds like you, then all aboard the Hackathon tra */ \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store index 57fa5122c7173fff105a4035fdf5df2c153661d8..a52d1e1e1f1d3a45a7dc05ea57a3d7ede898de0c 100644 GIT binary patch delta 37 tcmZn(XbG6$&uFC=mGo diff --git a/index.html b/index.html index e6fed75..c8d8d59 100644 --- a/index.html +++ b/index.html @@ -1,900 +1,900 @@ - - - - - - - - - Gilroy Hacks - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- -
- G - I - L - R - O - Y -
-
- H - A - C - K - S -
-
-
-

Apr 15 - 16

 -

 Gavilan College

 - -
- -

Signup Form

-
- - -
- -
-
-
-
- -
-
-

Event Details

-
-
-
-
-

New Hackathon Who Dis?

-
-

A recap of Summer 2022:

-
-
-
    -
  • First place winners🎉 First Place Winners - Christian Nguyen, Connor Palsgrove 🎉
    • -
  • Opening CeremonyOpening Ceremony 👍
    • -
  • Brainstorming ideas...🤔 Brainstorming ideas...
    • -
  • Python Workshop💻 Python Workshop 💻
    • -
  • Prizes🏆 Prizes! 🏆
    • -
-
-
-

- Some info on us... -
-

What is Gilroy Hacks?

-
Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza - with tons of other like-minded students sound (at the least bit) interesting to you? Gilroy Hacks is all about letting students - showcase their skills and teaching new concepts to newcomers!
-
-
-
-

Why?

-
We wanted to give the power for students to create what they make best: projects that make a difference.
-
-
-

Who are we?

-
We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.
-
-
-
-
-
- - Click each step to cross it out! -
-
- -
-
-
- $750+
in prizes! -
-
- ##
participants -
-
- Financials
over ### in funding - -
-

Bank Account

-
- -
-
-
-
-
-
- - -
-
-
-

Event Schedule

- The official Spring 2023 Hackathon schedule -
-
-
-

Saturday

-
- -
8:00am
-
9:00am
-
10:00am
-
11:00am
-
12:00pm
-
1:00pm
-
2:00pm
-
3:00pm
-
4:00pm
-
5:00pm
-
6:00pm
-
7:00pm
-
8:00pm
-
9:00pm
- - -
-
📋 Check In9 - 9:30am
-
👋 Opening Ceremony9:30 - 10am
-
✅ Hacking startsStart 10am
-
🌐 Web Dev Workshop11am - 12pm
-
🍕 Lunch12 - 1pm
-
-
💻 Python Workshop2 - 3pm
-
-
🏓 Ping Pong TournamentStart 4pm
-
🤔 Kahoot (Programming Concepts)Start 5pm
-
-
-
-
-
-
-
-

Sunday

-
- -
8:00am
-
9:00am
-
10:00am
-
11:00am
-
12:00pm
-
1:00pm
-
2:00pm
-
3:00pm
-
4:00pm
-
5:00pm
-
6:00pm
-
7:00pm
-
8:00pm
-
9:00pm
- - -
-
☕ Coffee & Bagels 🥯9 - 10am
-
-
-
🍕 Lunch12 - 1pm
-
-
🛑 Hacking endsDeadline: 2pm
-
Presentation Planning2 - 3pm
-
📢 Project Presentations3 - 5pm
-
Judging5 - 5:30pm
-
🏆 Awards Ceremony5:30 - 6pm
-
-
-
-
-
-
-
- -
-
-

Workshops

-
-

Our workshops will be hosted in-person!

-
-
-
-
-

Web Dev Workshop

-

Git + Website Building

-
-
- Git - HTML -
-
-
-
Apr 15
 -
11am - 12pm
-
Student Center
-
-

Beginner-Friendly

Open to all

-
-

Description

-

A chance for you to learn the world's most common version control system: Git -- and how to create your own website!


-
-
-

Topics Covered:

-
    -
  • Git Version Control
    • -
  • Web Dev Basics
    • -
  • HTML
    • -
  • CSS
    • -
  • JavaScript
    • -
  • Domains
    • -

-
-
-

Slides Presentation:

-
- slide thumbnail -
-
-
-

Notes

-
    -
  • Max capacity is around 20 people (first come, first serve)
    • -
  • Computers are provided (personal laptops recommended)
    • -
-
-
- Instructed By:
profile picture
James Dinh -
-
-
-
-
-

Python Workshop

-

Data structures + programming logic

-
-
- Python -
-
-
-
Apr 15
 -
2 - 3pm
-
Student Center
-
-

Beginner-Friendly

Open to all

-
-

Description

-

Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!


-
-
-

Topics Covered:

-
    -
  • Input/Output
    • -
  • Variables, Math
    • -
  • Booleans/if statements
    • -
  • Loops
    • -
  • Arrays
    • -
  • Functions
    • -

-
-
-

Slides Presentation:

-
- slide thumbnail -
-
-
-

Notes

-
    -
  • Max capacity is around 20 people (first come, first serve)
    • -
  • Computers are provided (personal laptops recommended)
    • -
-
-
- Instructed By:
profile picture
Clement Boiteux -
-
-
-
-
-

Prizes

-
-
-
-
-
-
- 2nd -
- silver laurel - -
RADCLO Mini Drone with Camera
-
-
-
-
-
-
-
-
-
- 1st
-
- gold laurel - -
Custom Linear/Tactile Keyboard
(per request, <$80)
-
-
-
-

Gilroy

- -

Hacks

-
-
-
-
-
-
-
- 3rd
-
- bronze laurel - -
Logitech G502 HERO Wired Gaming Mouse
-
-
-
-
-
-
- -
-
-

Hackathon Team

-
-
- - - - - -
-
-
- -
- -
- + + + + + + + + + Gilroy Hacks + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ G + I + L + R + O + Y +
+
+ H + A + C + K + S +
+
+
+

Apr 15 - 16

 +

 Gavilan College

 + +
+ +

Signup Form

+
+ + +
+ +
+
+
+
+ +
+
+

Event Details

+
+
+
+
+

New Hackathon Who Dis?

+
+

A recap of Summer 2022:

+
+
+
    +
  • First place winners🎉 First Place Winners - Christian Nguyen, Connor Palsgrove 🎉
    • +
  • Opening CeremonyOpening Ceremony 👍
    • +
  • Brainstorming ideas...🤔 Brainstorming ideas...
    • +
  • Python Workshop💻 Python Workshop 💻
    • +
  • Prizes🏆 Prizes! 🏆
    • +
+
+
+

+ Some info on us... +
+

What is Gilroy Hacks?

+
Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza + with tons of other like-minded students sound (at the least bit) interesting to you? Gilroy Hacks is all about letting students + showcase their skills and teaching new concepts to newcomers!
+
+
+
+

Why?

+
We wanted to give the power for students to create what they make best: projects that make a difference.
+
+
+

Who are we?

+
We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.
+
+
+
+
+
+ + Click each step to cross it out! +
+
+ +
+
+
+ $750+
in prizes! +
+
+ ##
participants +
+
+ Financials
transparent public access + +
+
Bank Account
+
+ +
+
+
+
+
+
+ + +
+
+
+

Event Schedule

+ The official Spring 2023 Hackathon schedule +
+
+
+

Saturday

+
+ +
8:00am
+
9:00am
+
10:00am
+
11:00am
+
12:00pm
+
1:00pm
+
2:00pm
+
3:00pm
+
4:00pm
+
5:00pm
+
6:00pm
+
7:00pm
+
8:00pm
+
9:00pm
+ + +
+
📋 Check In9 - 9:30am
+
👋 Opening Ceremony9:30 - 10am
+
✅ Hacking startsStart 10am
+
🌐 Web Dev Workshop11am - 12pm
+
🍕 Lunch12 - 1pm
+
+
💻 Python Workshop2 - 3pm
+
+
🏓 Ping Pong TournamentStart 4pm
+
🤔 Kahoot (Programming Concepts)Start 5pm
+
+
+
+
+
+
+
+

Sunday

+
+ +
8:00am
+
9:00am
+
10:00am
+
11:00am
+
12:00pm
+
1:00pm
+
2:00pm
+
3:00pm
+
4:00pm
+
5:00pm
+
6:00pm
+
7:00pm
+
8:00pm
+
9:00pm
+ + +
+
☕ Coffee & Bagels 🥯9 - 10am
+
+
+
🍕 Lunch12 - 1pm
+
+
🛑 Hacking endsDeadline: 2pm
+
Presentation Planning2 - 3pm
+
📢 Project Presentations3 - 5pm
+
Judging5 - 5:30pm
+
🏆 Awards Ceremony5:30 - 6pm
+
+
+
+
+
+
+
+ +
+
+

Workshops

+
+

Our workshops will be hosted in-person!

+
+
+
+
+

Web Dev Workshop

+

Git + Website Building

+
+
+ Git + HTML +
+
+
+
Apr 15
 +
11am - 12pm
+
Student Center
+
+

Beginner-Friendly

Open to all

+
+

Description

+

A chance for you to learn the world's most common version control system: Git -- and how to create your own website!


+
+
+

Topics Covered:

+
    +
  • Git Version Control
    • +
  • Web Dev Basics
    • +
  • HTML
    • +
  • CSS
    • +
  • JavaScript
    • +
  • Domains
    • +

+
+
+

Slides Presentation:

+
+ slide thumbnail +
+
+
+

Notes

+
    +
  • Max capacity is around 20 people (first come, first serve)
    • +
  • Computers are provided (personal laptops recommended)
    • +
+
+
+ Instructed By:
profile picture
James Dinh +
+
+
+
+
+

Python Workshop

+

Data structures + programming logic

+
+
+ Python +
+
+
+
Apr 15
 +
2 - 3pm
+
Student Center
+
+

Beginner-Friendly

Open to all

+
+

Description

+

Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!


+
+
+

Topics Covered:

+
    +
  • Input/Output
    • +
  • Variables, Math
    • +
  • Booleans/if statements
    • +
  • Loops
    • +
  • Arrays
    • +
  • Functions
    • +

+
+
+

Slides Presentation:

+
+ slide thumbnail +
+
+
+

Notes

+
    +
  • Max capacity is around 20 people (first come, first serve)
    • +
  • Computers are provided (personal laptops recommended)
    • +
+
+
+ Instructed By:
profile picture
Clement Boiteux +
+
+
+
+
+

Prizes

+
+
+
+
+
+
+ 2nd +
+ silver laurel + +
RADCLO Mini Drone with Camera
+
+
+
+
+
+
+
+
+
+ 1st
+
+ gold laurel + +
Custom Linear/Tactile Keyboard
(per request, <$80)
+
+
+
+

Gilroy

+ +

Hacks

+
+
+
+
+
+
+
+ 3rd
+
+ bronze laurel + +
Logitech G502 HERO Wired Gaming Mouse
+
+
+
+
+
+
+ +
+
+

Hackathon Team

+
+
+ + + + + +
+
+
+ + + \ No newline at end of file diff --git a/js/general.js b/js/general.js index 6c5fc02..f19904d 100644 --- a/js/general.js +++ b/js/general.js @@ -116,6 +116,11 @@ document.addEventListener('DOMContentLoaded', function(){ observer.observe(entry); }); + const info_card_container = document.querySelectorAll('.card-info-container'); + info_card_container.forEach(entry => { + observer.observe(entry); + }); + const workshop_entry = document.querySelectorAll('.workshop-entry'); workshop_entry.forEach(entry => { observer.observe(entry);