wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed card colors

Browse Source
This commit is contained in:
James Dinh 2022-06-03 18:51:23 -07:00
parent a8da4bea84
commit 249ba81de4
2 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
css/general.css
View File

@ -132,6 +132,11 @@ nav li a:focus::after{
}
/* Responsive Functions */
@media (max-width: 1156px) {
#signup-header {
margin-top: 20px;
}
}
@media (max-width: 880px) {
#photo-release-container {
transform: scale(0.8);
@ -151,7 +156,6 @@ nav li a:focus::after{
background: rgb(24, 24, 24);
top: -100%;
text-align: center;
/*animation: growOut 300ms ease-in-out forwards*/
}
nav ul li {
display: block;
@ -479,7 +483,7 @@ section {
#description-heading {
text-align: center;
margin-bottom: 15px;
margin-bottom: 26px;
}
.list {
@ -785,10 +789,6 @@ section {
transition: 0.5s;
}
#signup-header {
padding-top: 10px;
}
/* Title of the card */
.title {
color: rgb(255, 255, 255);
@ -984,6 +984,7 @@ section {
#rules-description {
margin: 10px 20px;
font-size: 18px;
}
#photo-description {
@ -993,7 +994,7 @@ section {
#photo-release-container {
border-radius: 10px;
border: 1px solid white;
background-color: #1f2b22;
background-color: #272b1f;
margin: 10px auto;
max-width: 850px;
min-width: 400px;
@ -1025,6 +1026,10 @@ section {
max-width: 400px;
}
.code-card {
background: rgb(40, 63, 52);
}
#rules-main-card {
width: 400px;
min-width: 300px;
@ -1036,6 +1041,17 @@ section {
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;
}
@ -1047,6 +1063,10 @@ section {
font-size: 17px;
}
.code-title {
color: rgb(212, 100, 223);
}
.rules-card::before {
content: "";
font-size: 30px;
@ -1114,7 +1134,7 @@ section {
.prize-laurel {
height: 150px;
width: auto;
width: 150px;
position: relative;
}
@ -1182,6 +1202,7 @@ section {
#prize-logo {
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid rgb(119, 119, 119);
}
@ -1248,6 +1269,7 @@ section {
.team-picture img {
height: 100px;
width: 100px;
border-radius: 50%;
border: 1px solid rgb(161, 161, 161);
}

53
index.html
View File

@ -39,7 +39,7 @@
<!--Nav-->
<nav id="navBar">
<a id="nav-logo-a" href="./">
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" loading="lazy" height="50" width="auto" alt="logo"/>
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" height="50" width="258" alt="logo"/>
</a>
<div id="nav-links-container">
<input type="checkbox" id="check">
@ -59,7 +59,7 @@
<header>
<div id="header-background">
<div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" loading="lazy" alt="logo"/>
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="400" width="400" alt="logo"/>
<hr id="line-header">
<h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container">
@ -97,6 +97,7 @@
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
<div id="timeline">
<h2 id="timeline-heading">Timeline</h2>
<span class="caption">Click on each dot for more info</span>
<div class="flex-parent">
<div class="input-flex-container">
<input class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
@ -126,8 +127,8 @@
</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>
<h3>Opening Ceremony</h3>
<h4 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h4><br>
<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.<br>
<ul class="timeline-description-list">
<li>It is highly recommended you attend this portion of the hackathon (at least half of your team must attend to participate)</li>
@ -136,8 +137,8 @@
</p>
</div>
<div data-description="2">
<h4>Hacking Begins</h4>
<h5 class="timeline-description-subtitle">8/12 | 6:30pm</h5><br>
<h3>Hacking Begins</h3>
<h4 class="timeline-description-subtitle">8/12 | 6:30pm</h4><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">
@ -147,8 +148,8 @@
</p>
</div>
<div data-description="3">
<h4>Hacking Ends</h4>
<h5 class="timeline-description-subtitle">8/14 | 12:00pm</h5><br>
<h3>Hacking Ends</h3>
<h4 class="timeline-description-subtitle">8/14 | 12:00pm</h4><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 made 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>
@ -158,8 +159,8 @@
</p>
</div>
<div data-description="4">
<h4>Project Presentations</h4>
<h5 class="timeline-description-subtitle">8/14 | 2:00pm - 3:00pm</h5><br>
<h3>Project Presentations</h3>
<h4 class="timeline-description-subtitle">8/14 | 2:00pm - 3:00pm</h4><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>
@ -171,8 +172,8 @@
</p>
</div>
<div data-description="5">
<h4>Awards Ceremony</h4>
<h5 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h5><br>
<h3>Awards Ceremony</h3>
<h4 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</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 positive feedback for each.<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>
@ -311,39 +312,39 @@
</article>
<article id="code-of-conduct">
<h2 id="signup-header">Code of Conduct</h2>
<div id="rules-main-card">
<div id="code-main-card">
<div id="signup-container">
<div class="rules-card" id="rules-1">
<p class="rules-title">Treat everyone with respect</p>
<div class="rules-card code-card" id="rules-1">
<p class="rules-title code-title">Treat everyone with respect</p>
<p>
- This includes team members, judges, organizers, volunteers, etc.
<br>
- We reserve the right to refuse patronage to participants based on their actions
</p>
</div>
<div class="rules-card" id="rules-2">
<p class="rules-title">Be appropriate</p>
<div class="rules-card code-card" id="rules-2">
<p class="rules-title code-title">Be appropriate</p>
<p>- Respond professionally with organizers, answer questions to the best of your ability, and ensure that your project is not offensive in any way <br>
</p>
</div>
<div class="rules-card" id="rules-3">
<p class="rules-title">Respect one's privacy</p>
<div class="rules-card code-card" id="rules-3">
<p class="rules-title code-title">Respect one's privacy</p>
<p>
- You may not photograph anyone without consent
<br>
- We take your privacy VERY seriously
</p>
</div>
<div class="rules-card" id="rules-4">
<p class="rules-title">Don't be lazy</p>
<div class="rules-card code-card" id="rules-4">
<p class="rules-title code-title">Don't be lazy</p>
<p>
- Help out anyone whenever possible (with navigation, signups, etc.), whether it's your teammate or another participant
<br>
- You are required to provide adequete effort to your team
</p>
</div>
<div class="rules-card" id="rules-5">
<p class="rules-title">Be ethical and equal</p>
<div class="rules-card code-card" id="rules-5">
<p class="rules-title code-title">Be ethical and equal</p>
<p>
- Consider the ramifications of your actions; do not do anything that will reputably harm others or yourself
<br>
@ -375,7 +376,7 @@
<div class="prize-desc" id="second-place">
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
<div class="prize-title">2nd</div>
<div class="prize-content">$300</div>
<div class="prize-content">$200</div>
</div>
<div class="podium-edge"></div>
<div id="second-podium"></div>
@ -386,7 +387,7 @@
<div class="prize-desc" id="first-place">
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
<div class="prize-title">1st</div>
<div class="prize-content">$400</div>
<div class="prize-content">$300</div>
</div>
<div class="podium-edge"></div>
<div id="first-podium">
@ -401,7 +402,7 @@
<div class="prize-desc" id="third-place">
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
<div class="prize-title">3rd</div>
<div class="prize-content">$200</div>
<div class="prize-content">$100</div>
</div>
<div class="podium-edge"></div>
<div id="third-podium"></div>