Changed event description
This commit is contained in:
parent
f6defc5cbc
commit
230ee5711c
@ -27,7 +27,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
||||||
font-display: swap;
|
/* font-display: swap; */
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
521
css/general.css
521
css/general.css
@ -771,17 +771,9 @@ section {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#event-main-box {
|
.description-heading {
|
||||||
padding: 10px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgb(68, 68, 68);
|
|
||||||
}
|
|
||||||
|
|
||||||
#description-heading {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 26px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#description-content {
|
#description-content {
|
||||||
@ -796,6 +788,108 @@ section {
|
|||||||
margin-top: 15px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #222;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#items {
|
||||||
|
width: 10000px;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: -300px;
|
||||||
|
}
|
||||||
|
#items.shifting {
|
||||||
|
transition: left .2s ease-out;
|
||||||
|
}
|
||||||
|
.slide {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 1s;
|
||||||
|
position: relative;
|
||||||
|
background: #4b1c6b;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-button {
|
||||||
|
margin: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control {
|
||||||
|
position: relative;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: rgb(80, 80, 80);
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.prev,
|
||||||
|
.next {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
.prev:active,
|
||||||
|
.next:active {
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
@ -808,406 +902,6 @@ section {
|
|||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Timeline */
|
|
||||||
#timeline {
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline-heading {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-parent {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-flex-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 1000px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
margin-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline-right-arrow {
|
|
||||||
width: 0px;
|
|
||||||
height: fit-content;
|
|
||||||
position: relative;
|
|
||||||
right: 30px;
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
#timeline-left-arrow {
|
|
||||||
width: 0px;
|
|
||||||
height: fit-content;
|
|
||||||
position: relative;
|
|
||||||
right: 50px;
|
|
||||||
top: 3px;
|
|
||||||
}
|
|
||||||
@media (max-width: 740px) {
|
|
||||||
#timeline-right-arrow {
|
|
||||||
right: calc(3vw);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background-color: #2C3E50;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
|
|
||||||
animation: pulse-gray 2s infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse-gray {
|
|
||||||
0% {
|
|
||||||
box-shadow: 0 0 0 0 rgba(110, 110, 110, 0.7);
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-input:focus {
|
|
||||||
animation: pulse-gray 0s;
|
|
||||||
}
|
|
||||||
.timeline-input::before, .timeline-input::after {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: #2C3E50;
|
|
||||||
width: 64px;
|
|
||||||
height: 5px;
|
|
||||||
}
|
|
||||||
.timeline-input::before {
|
|
||||||
left: -64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input::after {
|
|
||||||
right: -64px;
|
|
||||||
}
|
|
||||||
.timeline-input:checked {
|
|
||||||
background-color: #2C3E50;
|
|
||||||
}
|
|
||||||
.timeline-input:checked::before {
|
|
||||||
background-color: #2C3E50;
|
|
||||||
}
|
|
||||||
.timeline-input:checked::after {
|
|
||||||
background-color: #AEB6BF;
|
|
||||||
}
|
|
||||||
.timeline-input:checked ~ .timeline-input, .timeline-input:checked ~ .timeline-input::before, .timeline-input:checked ~ .timeline-input::after {
|
|
||||||
background-color: #AEB6BF;
|
|
||||||
}
|
|
||||||
.timeline-input:checked + .dot-info span {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgb(243, 174, 252);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-info {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
display: flex;
|
|
||||||
visibility: hidden;
|
|
||||||
position: relative;
|
|
||||||
z-index: -1;
|
|
||||||
right: 44px;
|
|
||||||
}
|
|
||||||
.dot-info span {
|
|
||||||
visibility: visible;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.dot-info span.year {
|
|
||||||
bottom: -30px;
|
|
||||||
right: -0.2vw;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.dot-info span.label {
|
|
||||||
top: -56px;
|
|
||||||
left: -10px;
|
|
||||||
transform: rotateZ(-45deg);
|
|
||||||
width: 70px;
|
|
||||||
text-indent: -10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bracket */
|
|
||||||
.bracket {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 105%;
|
|
||||||
margin-left: -20px;
|
|
||||||
}
|
|
||||||
.bracket>div {
|
|
||||||
width: 50%;
|
|
||||||
height: 1px;
|
|
||||||
background: rgb(255, 255, 255);
|
|
||||||
margin: 0px 30px 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#bracket-1 > .left {
|
|
||||||
width: 2%;
|
|
||||||
}
|
|
||||||
#bracket-1 > .right {
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
#bracket-2 > .left {
|
|
||||||
width: 24%;
|
|
||||||
}
|
|
||||||
#bracket-2 > .right {
|
|
||||||
width: 76%;
|
|
||||||
}
|
|
||||||
#bracket-3 > .left {
|
|
||||||
width: 46%;
|
|
||||||
}
|
|
||||||
#bracket-3 > .right {
|
|
||||||
width: 54%;
|
|
||||||
}
|
|
||||||
#bracket-4 > .left {
|
|
||||||
width: 68%;
|
|
||||||
}
|
|
||||||
#bracket-4 > .right {
|
|
||||||
width: 32%;
|
|
||||||
}
|
|
||||||
#bracket-5 > .left {
|
|
||||||
width: 89%;
|
|
||||||
}
|
|
||||||
#bracket-5 > .right {
|
|
||||||
width: 11%;
|
|
||||||
}
|
|
||||||
.bracket>div:before,
|
|
||||||
.bracket>div:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-top-left-radius: 200px;
|
|
||||||
border: 1px solid rgb(255, 255, 255);
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
.bracket>div:after {
|
|
||||||
right: -30px;
|
|
||||||
}
|
|
||||||
.left:after {
|
|
||||||
transform: rotate(-180deg);
|
|
||||||
top: -30px;
|
|
||||||
}
|
|
||||||
.right:before {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
top: -30px;
|
|
||||||
left: -30px;
|
|
||||||
}
|
|
||||||
.right:after {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
.left:before {
|
|
||||||
left: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline-descriptions-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 70px;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 400;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.timeline-desc {
|
|
||||||
margin-top: -30px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-description {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-description-subtitle {
|
|
||||||
font-size: 18px;
|
|
||||||
color: rgb(121, 120, 120);
|
|
||||||
}
|
|
||||||
|
|
||||||
.t-flex-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-description-list li {
|
|
||||||
margin: 10px 40px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.important-text {
|
|
||||||
color: rgb(255, 126, 126);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@media (max-width: 630px) {
|
|
||||||
.flex-parent {
|
|
||||||
justify-content: initial;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-flex-container {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
width: 400px;
|
|
||||||
height: auto;
|
|
||||||
margin-top: 7vh;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input, .dot-info {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin: 0 10px 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-input::before, .timeline-input::after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
.timeline-input:checked + .dot-info {
|
|
||||||
background-color: #2C3E50;
|
|
||||||
}
|
|
||||||
.timeline-input:checked + .dot-info span.year {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.timeline-input:checked + .dot-info span.label {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-info {
|
|
||||||
visibility: visible;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 0;
|
|
||||||
left: 0;
|
|
||||||
margin-left: -70px;
|
|
||||||
background-color: #AEB6BF;
|
|
||||||
}
|
|
||||||
.dot-info span.year {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #ECF0F1;
|
|
||||||
}
|
|
||||||
.dot-info span.label {
|
|
||||||
top: calc(100% + 5px);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
text-indent: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline-descriptions-wrapper {
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-left: 0;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline-right-arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#timeline-left-arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.input-flex-container {
|
|
||||||
width: 340px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
.input-flex-container {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip.zoom-tooltip::after {
|
.tooltip.zoom-tooltip::after {
|
||||||
content: 'Zoom Link';
|
content: 'Zoom Link';
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -1642,7 +1336,7 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
border: 1px solid #eee;
|
border: 1px solid rgb(142, 102, 177);
|
||||||
background-color: #23262a;
|
background-color: #23262a;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -2827,3 +2521,8 @@ footer li {
|
|||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
list-style: none;
|
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 train! */
|
172
index.html
172
index.html
@ -42,7 +42,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Norwester";
|
font-family: "Norwester";
|
||||||
src: url("font/Norwester.otf") format('opentype');
|
src: url("font/Norwester.otf") format('opentype');
|
||||||
font-display: swap;
|
/* font-display: swap; */
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -141,153 +141,43 @@
|
|||||||
<!--Main-->
|
<!--Main-->
|
||||||
<main>
|
<main>
|
||||||
<section id="event">
|
<section id="event">
|
||||||
<h2 class="topic">Hackathon Event</h2>
|
<h2 class="topic">Spring 2023 Event</h2>
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
<div id="event-container">
|
<div id="event-container">
|
||||||
<article id="event-description">
|
<article id="event-description">
|
||||||
<h2 id="description-heading">Our Mission & Important Info</h2>
|
<div id="event-title">
|
||||||
<div id="event-main-box">
|
<h2 class="description-heading">New Hackathon Who Dis?</h2>
|
||||||
<div id="description-content">Gilroy Hacks is a student-led organization fiscally sponsored by Hack Club, a 501(c)(3) nonprofit, and focused on promoting community engagement and improving STEM exposure for students.</div>
|
<span class="caption">Some info on us...</span>
|
||||||
<hr class="line">
|
</div>
|
||||||
<div class="list">
|
<div class="splash-container" id="what-GilroyHacks">
|
||||||
<p>"Grab a team and make something cool."<br>        - GHacks Team</p>
|
<h2 class="splash-title">What is Gilroy Hacks?</h2>
|
||||||
<h3 class="desc-title">Details</h3>
|
<div class="splash-desc">Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and coding extravaganza
|
||||||
<ul class="desc-list">
|
with tons of other like-minded students sound (at the least bit) interesting to you? Gilroy Hacks is all about letting students
|
||||||
<ul>
|
showcase their skills and teaching new concepts to newcomers!</div>
|
||||||
<li><span class="emphasis-text"><u>In-Person</u></span> - All events will be held in person</li>
|
</div>
|
||||||
<li>Signups are limited to <u>high school students only</u></li>
|
<div class="splash-group">
|
||||||
<li>Workshops are <u>fully open to the public</u></li>
|
<div class="splash-container" id="why-GilroyHacks">
|
||||||
</ul>
|
<h2 class="splash-title">Why?</h2>
|
||||||
</ul>
|
<div class="splash-desc">We wanted to give the power for students to create what they make best: projects that make a difference.</div>
|
||||||
|
</div>
|
||||||
|
<div class="splash-container" id="who-GilroyHacks">
|
||||||
|
<h2 class="splash-title">Who are we?</h2>
|
||||||
|
<div class="splash-desc">We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
<!-- <div id="slider" class="slider">
|
||||||
<div id="timeline">
|
<a id="prev" class="control prev"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></a>
|
||||||
<h2 id="timeline-heading">Timeline</h2>
|
<div class="wrapper">
|
||||||
<span class="caption">Click on each dot for more info</span>
|
<div id="items" class="items">
|
||||||
<div class="flex-parent">
|
<span class="slide">Slide 1</span>
|
||||||
<div class="input-flex-container">
|
<span class="slide">Slide 2</span>
|
||||||
<div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
|
<span class="slide">Slide 3</span>
|
||||||
<input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1">
|
<span class="slide">Slide 4</span>
|
||||||
<label for="t1" onclick="check('t1')" class="dot-info" data-description="1">
|
<span class="slide">Slide 5</span>
|
||||||
<span class="year">TBA</span>
|
|
||||||
<span class="label">TBA</span>
|
|
||||||
</label>
|
|
||||||
<input for="t2" id="t2" class="timeline-input" type="radio" name="timeline-dot" data-description="2">
|
|
||||||
<label onclick="check('t2')" class="dot-info" data-description="2">
|
|
||||||
<span class="year">TBA</span>
|
|
||||||
<span class="label">TBA</span>
|
|
||||||
</label>
|
|
||||||
<input id="t3" class="timeline-input" type="radio" name="timeline-dot" data-description="3">
|
|
||||||
<label for="t3" onclick="check('t3')" class="dot-info" data-description="3">
|
|
||||||
<span class="year">TBA</span>
|
|
||||||
<span class="label">TBA</span>
|
|
||||||
</label>
|
|
||||||
<input id="t4" class="timeline-input" type="radio" name="timeline-dot" data-description="4">
|
|
||||||
<label for="t4" onclick="check('t4')" class="dot-info" data-description="4">
|
|
||||||
<span class="year">TBA</span>
|
|
||||||
<span class="label">TBA</span>
|
|
||||||
</label>
|
|
||||||
<input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5" checked>
|
|
||||||
<label for="t5" onclick="check('t5')" class="dot-info" data-description="5">
|
|
||||||
<span class="year">TBA</span>
|
|
||||||
<span class="label">TBA</span>
|
|
||||||
</label>
|
|
||||||
<div id="timeline-right-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></div>
|
|
||||||
<div id="timeline-descriptions-wrapper">
|
|
||||||
<div class="timeline-desc" data-description="1">
|
|
||||||
<div class="bracket" id="bracket-1">
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
|
||||||
<h3>TBA</h3>
|
|
||||||
<h4 class="timeline-description-subtitle">TBA</h4><br>
|
|
||||||
<div>
|
|
||||||
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.</p>
|
|
||||||
<ul class="timeline-description-list">
|
|
||||||
<li>Along with the in-person event held at the <u>Community Room</u> at the Gilroy Library, we will be streaming the event on Zoom</li>
|
|
||||||
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
|
|
||||||
<li>After this event, participants will <u>head back home</u> to start coding</li>
|
|
||||||
</ul>
|
|
||||||
<div class="timeline-links">
|
|
||||||
<a class="tooltip zoom-tooltip" href="https://us06web.zoom.us/j/84398429896?pwd=b0ZUZ2pieXFKeUwxTVY0NVE1MTNxdz09" target="_blank"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-desc" data-description="2">
|
|
||||||
<div class="bracket" id="bracket-2">
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
|
||||||
<h3>TBA</h3>
|
|
||||||
<h4 class="timeline-description-subtitle">TBA</h4><br>
|
|
||||||
<p class="timeline-description">Now's your time to shine! Start working with your team to build your project. No strings attached!</p>
|
|
||||||
<ul class="timeline-description-list">
|
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Your project must follow one of the given prompts; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
|
|
||||||
<li><u>Hybrid model</u> - you may either code online or in-person at the Library</li>
|
|
||||||
<li>Remember, you only have 46 hours to complete your project... Use your time wisely</li>
|
|
||||||
</ul>
|
|
||||||
<div class="timeline-links">
|
|
||||||
<a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
|
|
||||||
<a target="_blank" href="https://docs.google.com/document/d/1orakhyHzQOzGaL6r1CCQzZAWt8U1GTdaC9wcrvCiu5w/edit"><div class="timeline-button">Prompts</div></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-desc" data-description="3">
|
|
||||||
<div class="bracket" id="bracket-3">
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
|
||||||
<h3>TBA</h3>
|
|
||||||
<h4 class="timeline-description-subtitle">TBA</h4><br>
|
|
||||||
<p class="timeline-description">STOP coding! Your 46 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.</p>
|
|
||||||
<ul class="timeline-description-list">
|
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 2:00pm. You can find the submission form on the Discord server or <a class="link tooltip" id="submit-tooltip" href="https://forms.gle/bpoXvyjP2TcsrELX8" target="_blank">Submit Here</a></li>
|
|
||||||
<li>From now until Project Presentations (2:30pm), your team will have around 30 mins to prepare for your presentation. Get back to work!</li>
|
|
||||||
</ul>
|
|
||||||
<div class="timeline-links">
|
|
||||||
<a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
|
|
||||||
<a target="_blank" href="https://docs.google.com/document/d/1orakhyHzQOzGaL6r1CCQzZAWt8U1GTdaC9wcrvCiu5w/edit"><div class="timeline-button">Prompts</div></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-desc" data-description="4">
|
|
||||||
<div class="bracket" id="bracket-4">
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
|
||||||
<h3>TBA</h3>
|
|
||||||
<h4 class="timeline-description-subtitle">TBA</h4><br>
|
|
||||||
<p class="timeline-description">This is where your team will present your product to our honored judges.</p>
|
|
||||||
<ul class="timeline-description-list">
|
|
||||||
<li>Be Creative! Make your product stand out by including a demo or showing its function across multiple applications</li>
|
|
||||||
<li>Presentations will occur in order of team number (i.e. Team 1 will go first)</li>
|
|
||||||
<li><span class="important-text">=IMPORTANT=</span> Your team's presentation is NOT ALLOWED to go above 5 minutes... Use your time wisely.</li>
|
|
||||||
<li>Your team will be graded on both the product and presentation as per the rubric</li>
|
|
||||||
</ul>
|
|
||||||
<div class="timeline-links">
|
|
||||||
<a class="tooltip zoom-tooltip" href="https://us06web.zoom.us/j/84398429896?pwd=b0ZUZ2pieXFKeUwxTVY0NVE1MTNxdz09" target="_blank"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
|
|
||||||
<a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-desc" data-description="5">
|
|
||||||
<div class="bracket" id="bracket-5">
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="right"></div>
|
|
||||||
</div>
|
|
||||||
<h3>TBA</h3>
|
|
||||||
<h4 class="timeline-description-subtitle">TBA</h4><br>
|
|
||||||
<p class="timeline-description">Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with constructive feedback for each in the <u>Community Room</u>.</p>
|
|
||||||
<ul class="timeline-description-list">
|
|
||||||
<li><u>Winners</u>: we will contact you via Email/Discord about your prizes; please allow up to 2 days for a response</li>
|
|
||||||
<li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link tooltip email-link email-replace-tech" target="_blank" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li>
|
|
||||||
</ul>
|
|
||||||
<div class="timeline-links">
|
|
||||||
<a class="tooltip zoom-tooltip" href="https://us06web.zoom.us/j/84398429896?pwd=b0ZUZ2pieXFKeUwxTVY0NVE1MTNxdz09" target="_blank"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<a id="next" class="control next"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></a>
|
||||||
|
</div> -->
|
||||||
</article>
|
</article>
|
||||||
<article id="signup-article">
|
<article id="signup-article">
|
||||||
<div id="signup-title">
|
<div id="signup-title">
|
||||||
|
120
js/general.js
120
js/general.js
@ -137,9 +137,10 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
|
|
||||||
// Add class animations to these elements
|
// Add class animations to these elements
|
||||||
let elements_id = [
|
let elements_id = [
|
||||||
'#description-heading',
|
'#event-title',
|
||||||
'#event-main-box',
|
'#what-GilroyHacks',
|
||||||
'#timeline',
|
'#why-GilroyHacks',
|
||||||
|
'#who-GilroyHacks',
|
||||||
'#signup-title',
|
'#signup-title',
|
||||||
'#steps-card',
|
'#steps-card',
|
||||||
'#sponsor-title',
|
'#sponsor-title',
|
||||||
@ -356,7 +357,6 @@ function showModal(id) {
|
|||||||
currentModal = id;
|
currentModal = id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
"click",
|
"click",
|
||||||
function (event) {
|
function (event) {
|
||||||
@ -371,6 +371,118 @@ document.addEventListener(
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
|
var slider = document.getElementById('slider'),
|
||||||
|
sliderItems = document.getElementById('items'),
|
||||||
|
prev = document.getElementById('prev'),
|
||||||
|
next = document.getElementById('next');
|
||||||
|
slide(slider, sliderItems, prev, next);
|
||||||
|
function slide(wrapper, items, prev, next) {
|
||||||
|
var posX1 = 0,
|
||||||
|
posX2 = 0,
|
||||||
|
posInitial,
|
||||||
|
posFinal,
|
||||||
|
threshold = 100,
|
||||||
|
slides = items.getElementsByClassName('slide'),
|
||||||
|
slidesLength = slides.length,
|
||||||
|
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
|
||||||
|
firstSlide = slides[0],
|
||||||
|
lastSlide = slides[slidesLength - 1],
|
||||||
|
cloneFirst = firstSlide.cloneNode(true),
|
||||||
|
cloneLast = lastSlide.cloneNode(true),
|
||||||
|
index = 0,
|
||||||
|
allowShift = true;
|
||||||
|
|
||||||
|
// Clone first and last slide
|
||||||
|
items.appendChild(cloneFirst);
|
||||||
|
items.insertBefore(cloneLast, firstSlide);
|
||||||
|
wrapper.classList.add('loaded');
|
||||||
|
|
||||||
|
// Mouse and Touch events
|
||||||
|
items.onmousedown = dragStart;
|
||||||
|
|
||||||
|
// Touch events
|
||||||
|
items.addEventListener('touchstart', dragStart);
|
||||||
|
items.addEventListener('touchend', dragEnd);
|
||||||
|
items.addEventListener('touchmove', dragAction);
|
||||||
|
|
||||||
|
// Click events
|
||||||
|
prev.addEventListener('click', function () { shiftSlide(-1) });
|
||||||
|
next.addEventListener('click', function () { shiftSlide(1) });
|
||||||
|
|
||||||
|
// Transition events
|
||||||
|
items.addEventListener('transitionend', checkIndex);
|
||||||
|
|
||||||
|
function dragStart (e) {
|
||||||
|
e = e || window.event;
|
||||||
|
e.preventDefault();
|
||||||
|
posInitial = items.offsetLeft;
|
||||||
|
|
||||||
|
if (e.type == 'touchstart') {
|
||||||
|
posX1 = e.touches[0].clientX;
|
||||||
|
} else {
|
||||||
|
posX1 = e.clientX;
|
||||||
|
document.onmouseup = dragEnd;
|
||||||
|
document.onmousemove = dragAction;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function dragAction (e) {
|
||||||
|
e = e || window.event;
|
||||||
|
|
||||||
|
if (e.type == 'touchmove') {
|
||||||
|
posX2 = posX1 - e.touches[0].clientX;
|
||||||
|
posX1 = e.touches[0].clientX;
|
||||||
|
} else {
|
||||||
|
posX2 = posX1 - e.clientX;
|
||||||
|
posX1 = e.clientX;
|
||||||
|
}
|
||||||
|
items.style.left = (items.offsetLeft - posX2) + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragEnd (e) {
|
||||||
|
posFinal = items.offsetLeft;
|
||||||
|
if (posFinal - posInitial < -threshold) {
|
||||||
|
shiftSlide(1, 'drag');
|
||||||
|
} else if (posFinal - posInitial > threshold) {
|
||||||
|
shiftSlide(-1, 'drag');
|
||||||
|
} else {
|
||||||
|
items.style.left = (posInitial) + "px";
|
||||||
|
}
|
||||||
|
document.onmouseup = null;
|
||||||
|
document.onmousemove = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function shiftSlide(dir, action) {
|
||||||
|
items.classList.add('shifting');
|
||||||
|
|
||||||
|
if (allowShift) {
|
||||||
|
if (!action) { posInitial = items.offsetLeft; }
|
||||||
|
if (dir == 1) {
|
||||||
|
items.style.left = (posInitial - slideSize) + "px";
|
||||||
|
index++;
|
||||||
|
} else if (dir == -1) {
|
||||||
|
items.style.left = (posInitial + slideSize) + "px";
|
||||||
|
index--;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
allowShift = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkIndex (){
|
||||||
|
items.classList.remove('shifting');
|
||||||
|
if (index == -1) {
|
||||||
|
items.style.left = -(slidesLength * slideSize) + "px";
|
||||||
|
index = slidesLength - 1;
|
||||||
|
}
|
||||||
|
if (index == slidesLength) {
|
||||||
|
items.style.left = -(1 * slideSize) + "px";
|
||||||
|
index = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
allowShift = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
series: [{
|
series: [{
|
||||||
name: 'Idea',
|
name: 'Idea',
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
||||||
font-display: swap;
|
/* font-display: swap; */
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
src: url("font/GlacialIndifference-Regular.otf") format('opentype');
|
||||||
font-display: swap;
|
/* font-display: swap; */
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
Loading…
Reference in New Issue
Block a user