Added Timeline
This commit is contained in:
James Dinh
parent
c896841684
commit
23426a3a9b
259
css/general.css
259
css/general.css
@ -466,4 +466,261 @@ footer li {
|
|||||||
footer a {
|
footer a {
|
||||||
color:rgb(108, 176, 231);
|
color:rgb(108, 176, 231);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Timeline */
|
||||||
|
#timeline {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeline-heading {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-parent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #2C3E50;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
input::before, input::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: #2C3E50;
|
||||||
|
width: 6vw;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
input::before {
|
||||||
|
right: calc(2vw);
|
||||||
|
}
|
||||||
|
input::after {
|
||||||
|
left: calc(1vw);
|
||||||
|
}
|
||||||
|
input:checked {
|
||||||
|
background-color: #2C3E50;
|
||||||
|
}
|
||||||
|
input:checked::before {
|
||||||
|
background-color: #2C3E50;
|
||||||
|
}
|
||||||
|
input:checked::after {
|
||||||
|
background-color: #AEB6BF;
|
||||||
|
}
|
||||||
|
input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
|
||||||
|
background-color: #AEB6BF;
|
||||||
|
}
|
||||||
|
input:checked + .dot-info span {
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgb(243, 174, 252);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-info {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index: -1;
|
||||||
|
left: calc((((80vw - 25px) / 20) * -1) - 1px);
|
||||||
|
}
|
||||||
|
.dot-info span {
|
||||||
|
visibility: visible;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.dot-info span.year {
|
||||||
|
bottom: -30px;
|
||||||
|
right: -0.2vw;
|
||||||
|
/* transform: translateX(-60%); */
|
||||||
|
}
|
||||||
|
.dot-info span.label {
|
||||||
|
top: -56px;
|
||||||
|
left: -10px;
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
width: 70px;
|
||||||
|
text-indent: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeline-descriptions-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 70px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 200px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#timeline-descriptions-wrapper div {
|
||||||
|
margin-top: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-description {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-description-subtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgb(121, 120, 120);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-description-list li {
|
||||||
|
margin: 10px 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important-text {
|
||||||
|
color: rgb(255, 126, 126);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1250px) {
|
||||||
|
input::before {
|
||||||
|
left: -37.5px;
|
||||||
|
}
|
||||||
|
input::after {
|
||||||
|
right: -37.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot-info {
|
||||||
|
left: calc((((1000px - 25px) / 20) * -1) - 1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeline-descriptions-wrapper {
|
||||||
|
margin-left: -37.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 630px) {
|
||||||
|
.flex-parent {
|
||||||
|
justify-content: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-flex-container {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
width: 400px;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 15vh;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, .dot-info {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 10px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
background-color: transparent !important;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
input::before, input::after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
input:checked + .dot-info {
|
||||||
|
background-color: #2C3E50;
|
||||||
|
}
|
||||||
|
input:checked + .dot-info span.year {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
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: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.input-flex-container {
|
||||||
|
width: 340px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.input-flex-container {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
93
index.html
93
index.html
@ -89,8 +89,98 @@
|
|||||||
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes. Students can create their own teams or if they are competing individually, we will assign teams based on experience level and programming language. For this hackathon, we plan on grouping at least one experienced person with novices so that no one is out of their depth. The current estimate is that there will be one or two experienced people and two novices in each team for this contest. However, depending on the number of participants, we may decrease team size if not enough people participate. </li>
|
<li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
||||||
|
<div id="timeline">
|
||||||
|
<h2 id="timeline-heading">Timeline</h2>
|
||||||
|
<div class="flex-parent">
|
||||||
|
<div class="input-flex-container">
|
||||||
|
<input type="radio" name="timeline-dot" data-description="1" checked>
|
||||||
|
<div class="dot-info" data-description="1">
|
||||||
|
<span class="year">8/12 6:00pm</span>
|
||||||
|
<span class="label">Opening Ceremony</span>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="timeline-dot" data-description="2">
|
||||||
|
<div class="dot-info" data-description="2">
|
||||||
|
<span class="year">8/12 6:30pm</span>
|
||||||
|
<span class="label">Hacking Begins</span>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="timeline-dot" data-description="3">
|
||||||
|
<div class="dot-info" data-description="3">
|
||||||
|
<span class="year">8/14 12:00pm</span>
|
||||||
|
<span class="label">Hacking Ends</span>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="timeline-dot" data-description="4">
|
||||||
|
<div class="dot-info" data-description="4">
|
||||||
|
<span class="year">8/14 2:00pm</span>
|
||||||
|
<span class="label">Project Presentations</span>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="timeline-dot" data-description="5">
|
||||||
|
<div class="dot-info" data-description="5">
|
||||||
|
<span class="year">8/14 3:30pm</span>
|
||||||
|
<span class="label">Awards Ceremony</span>
|
||||||
|
</div>
|
||||||
|
<div id="timeline-descriptions-wrapper">
|
||||||
|
<div data-description="1">
|
||||||
|
<h4>Opening Ceremony</h4>
|
||||||
|
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
|
||||||
|
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the final teams, prompts, rules, and timeline.<br>
|
||||||
|
<ul class="timeline-description-list">
|
||||||
|
<li>You are required to attend this portion of the hackathon to participate</li>
|
||||||
|
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div data-description="2">
|
||||||
|
<h4>Hacking Begins</h4>
|
||||||
|
<h5 class="timeline-description-subtitle">8/12 | 6:30pm</h5><br>
|
||||||
|
<p class="timeline-description">
|
||||||
|
Now's your time to shine! Start working with your team to build your project. No strings attached!
|
||||||
|
<ul class="timeline-description-list">
|
||||||
|
<li><span class="important-text">=IMPORTANT=</span> Your project must follow the given prompt and guidelines; otherwise, your team may lose a lot of points for unrelated topic</li>
|
||||||
|
<li>Remember, you only have 44 hours to complete your project... Use your time wisely</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div data-description="3">
|
||||||
|
<h4>Hacking Ends</h4>
|
||||||
|
<h5 class="timeline-description-subtitle">8/14 | 12:00pm</h5><br>
|
||||||
|
<p class="timeline-description">STOP coding! Your 44 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and met some new friends along the way.<br>
|
||||||
|
<ul class="timeline-description-list">
|
||||||
|
<li><span class="important-text">=IMPORTANT=</span> Make sure you turn in your project BEFORE the deadline at 12:30pm. You can find the submission form on the Discord server or <a class="link" href="https://forms.gle/bpoXvyjP2TcsrELX8" target="_blank" title="Submission Form">Submit Here</a></li>
|
||||||
|
<li>Don't leave yet though, because you still need to present your project to the judges</li>
|
||||||
|
<li>From now until Project Presentations (2:00pm), your team will have around 2 hours to prepare for your presentation. Get back to work!</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div data-description="4">
|
||||||
|
<h4>Project Presentations</h4>
|
||||||
|
<h5 class="timeline-description-subtitle">8/14 | 2:00pm - 3:00pm</h5><br>
|
||||||
|
<p class="timeline-description">This is where your team will present your product to our honored judges.<br>
|
||||||
|
<ul class="timeline-description-list">
|
||||||
|
<li>Be Creative! Make your product stand out by including a demo or showing its function across multiple sources</li>
|
||||||
|
<li>Presentations will occur in order of team number (i.e. Team 1 will go first)</li>
|
||||||
|
<li>It is advised you have your camera on and that you ensure your microphone and tech work before presenting</li>
|
||||||
|
<li><span class="important-text">=IMPORTANT=</span> 5 minutes max per team. Your team is not allowed to go ABOVE those 5 minutes... Use your time wisely.</li>
|
||||||
|
<li>Your team will be graded on both the product and presenting as per the rubric</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div data-description="5">
|
||||||
|
<h4>Awards Ceremony</h4>
|
||||||
|
<h5 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h5><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 positive feedback.<br>
|
||||||
|
<ul class="timeline-description-list">
|
||||||
|
<li>Winners: we will contact you via Email about your prizes, 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" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article>
|
<article>
|
||||||
<h3 id="steps-header">STEPS</h3>
|
<h3 id="steps-header">STEPS</h3>
|
||||||
@ -140,6 +230,7 @@
|
|||||||
<section id="rules">
|
<section id="rules">
|
||||||
<h2 class="topic">Rules</h2>
|
<h2 class="topic">Rules</h2>
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section id="prizes">
|
<section id="prizes">
|
||||||
<h2 class="topic">Prizes</h2>
|
<h2 class="topic">Prizes</h2>
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
$(function () {
|
|
||||||
var inputs = $(".input");
|
|
||||||
var paras = $(".description-flex-container").find("p");
|
|
||||||
inputs.click(function () {
|
|
||||||
var t = $(this),
|
|
||||||
ind = t.index(),
|
|
||||||
matchedPara = paras.eq(ind);
|
|
||||||
|
|
||||||
t.add(matchedPara).addClass("active");
|
|
||||||
inputs.not(t).add(paras.not(matchedPara)).removeClass("active");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user