System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-19 22:05:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added colors to timeline thingies

Browse source
This commit is contained in:
AW_Dev 2024-05-10 21:02:05 -07:00
parent 8cfec836d6
commit 7c67cce01f
2 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/bin/landing-new/index.html
View file

@ -40,7 +40,7 @@
<img src="../images/idea.png" class="huh floaty" style="animation-delay: -3000ms;">
</section>
<section class="section container timeline">
<section class="section container timeline" style="max-width:71em;">
<!-- timeline of project -->
<h1 class="timeline-header">
What will you make
@ -48,7 +48,8 @@
<em>before summer break?</em>
</h1>
<div class="timeline-list">
<div class="timeline-item" onclick="smoothScroll('.gambling-section')" style="cursor: pointer;">
<div class="timeline-item hoverable now" onclick="smoothScroll('.gambling-section')"
style="cursor: pointer;">
<div class="timeline-info">
<em class="muted">Right now...</em>
<h2>Rummage for parts</h2>
@ -57,18 +58,22 @@
for some inspiration!</p>
</div>
</div>
<div class="timeline-item hoverable">
<em class="muted">over 3-4 days...</em>
<h2>Design your project</h2>
<p>Build a project in the online editor and program it! Get support from <a
href="https://hackclub.com/slack" target="_blank">other high schoolers in an online
community</a>.</p>
<div class="timeline-item hoverable later">
<div class="timeline-info">
<em class="muted">over 3-4 days...</em>
<h2>Design your project</h2>
<p>Build a project in the online editor and program it! Get support from <a
href="https://hackclub.com/slack" target="_blank">other high schoolers in an online
community</a>.</p>
</div>
</div>
<div class="timeline-item hoverable">
<em class="muted">in 1 week...</em>
<h2>Get it IRL</h2>
<p><a href="https://hack.club/bin-submit" target="_blank">Submit your design to the gallery</a> of
projects so other high schoolers can learn from your project.</p>
<div class="timeline-item hoverable oneweek">
<div class="timeline-info">
<em class="muted">in 1 week...</em>
<h2>Get it IRL</h2>
<p><a href="https://hack.club/bin-submit" target="_blank">Submit your design to the gallery</a> of
projects so other high schoolers can learn from your project.</p>
</div>
</div>
</div>
</section>

24
public/bin/landing-new/style.css
View file

@ -696,9 +696,10 @@ button {
.timeline-list {
margin: 2em auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 300px;
grid-template-rows: 200px;
display: grid;
gap: 20px;
width: 80%;
}
@media only screen and (max-width: 52em) {
@ -710,14 +711,33 @@ button {
.timeline-item {
padding: 10px;
background-color: red;
background-color: black;
border-radius: 20px;
box-sizing: border-box;
}
.timeline-item.now {
background: linear-gradient(to bottom right, #63CE61, #ADEA00);
}
.timeline-item.later {
background: linear-gradient(to bottom right, #7A97FC, #7AEDFC);
}
.timeline-item.oneweek {
background: linear-gradient(to bottom right, #FC7A7A, #FCA97A);
}
.timeline-info {
background-color: #EEEDED;
height: 100%;
border-radius: 15px;
padding: 20px;
box-sizing: border-box;
}
.timeline-info a {
color: black;
}
.muted {