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

53
index.html
View File

@ -39,7 +39,7 @@
<!--Nav--> <!--Nav-->
<nav id="navBar"> <nav id="navBar">
<a id="nav-logo-a" href="./"> <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> </a>
<div id="nav-links-container"> <div id="nav-links-container">
<input type="checkbox" id="check"> <input type="checkbox" id="check">
@ -59,7 +59,7 @@
<header> <header>
<div id="header-background"> <div id="header-background">
<div id="header"> <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"> <hr id="line-header">
<h2 id="header-subtitle-date">Aug 12 - 14</h2> <h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container"> <div id="spots-container">
@ -97,6 +97,7 @@
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg --> <!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
<div id="timeline"> <div id="timeline">
<h2 id="timeline-heading">Timeline</h2> <h2 id="timeline-heading">Timeline</h2>
<span class="caption">Click on each dot for more info</span>
<div class="flex-parent"> <div class="flex-parent">
<div class="input-flex-container"> <div class="input-flex-container">
<input class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked> <input class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
@ -126,8 +127,8 @@
</div> </div>
<div id="timeline-descriptions-wrapper"> <div id="timeline-descriptions-wrapper">
<div data-description="1"> <div data-description="1">
<h4>Opening Ceremony</h4> <h3>Opening Ceremony</h3>
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br> <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> <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"> <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> <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> </p>
</div> </div>
<div data-description="2"> <div data-description="2">
<h4>Hacking Begins</h4> <h3>Hacking Begins</h3>
<h5 class="timeline-description-subtitle">8/12 | 6:30pm</h5><br> <h4 class="timeline-description-subtitle">8/12 | 6:30pm</h4><br>
<p class="timeline-description"> <p class="timeline-description">
Now's your time to shine! Start working with your team to build your project. No strings attached! Now's your time to shine! Start working with your team to build your project. No strings attached!
<ul class="timeline-description-list"> <ul class="timeline-description-list">
@ -147,8 +148,8 @@
</p> </p>
</div> </div>
<div data-description="3"> <div data-description="3">
<h4>Hacking Ends</h4> <h3>Hacking Ends</h3>
<h5 class="timeline-description-subtitle">8/14 | 12:00pm</h5><br> <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> <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"> <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><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> </p>
</div> </div>
<div data-description="4"> <div data-description="4">
<h4>Project Presentations</h4> <h3>Project Presentations</h3>
<h5 class="timeline-description-subtitle">8/14 | 2:00pm - 3:00pm</h5><br> <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> <p class="timeline-description">This is where your team will present your product to our honored judges.<br>
<ul class="timeline-description-list"> <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>Be Creative! Make your product stand out by including a demo or showing its function across multiple sources</li>
@ -171,8 +172,8 @@
</p> </p>
</div> </div>
<div data-description="5"> <div data-description="5">
<h4>Awards Ceremony</h4> <h3>Awards Ceremony</h3>
<h5 class="timeline-description-subtitle">8/14 | 3:30pm - 4:00pm</h5><br> <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> <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"> <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>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>
<article id="code-of-conduct"> <article id="code-of-conduct">
<h2 id="signup-header">Code of Conduct</h2> <h2 id="signup-header">Code of Conduct</h2>
<div id="rules-main-card"> <div id="code-main-card">
<div id="signup-container"> <div id="signup-container">
<div class="rules-card" id="rules-1"> <div class="rules-card code-card" id="rules-1">
<p class="rules-title">Treat everyone with respect</p> <p class="rules-title code-title">Treat everyone with respect</p>
<p> <p>
- This includes team members, judges, organizers, volunteers, etc. - This includes team members, judges, organizers, volunteers, etc.
<br> <br>
- We reserve the right to refuse patronage to participants based on their actions - We reserve the right to refuse patronage to participants based on their actions
</p> </p>
</div> </div>
<div class="rules-card" id="rules-2"> <div class="rules-card code-card" id="rules-2">
<p class="rules-title">Be appropriate</p> <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>- 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> </p>
</div> </div>
<div class="rules-card" id="rules-3"> <div class="rules-card code-card" id="rules-3">
<p class="rules-title">Respect one's privacy</p> <p class="rules-title code-title">Respect one's privacy</p>
<p> <p>
- You may not photograph anyone without consent - You may not photograph anyone without consent
<br> <br>
- We take your privacy VERY seriously - We take your privacy VERY seriously
</p> </p>
</div> </div>
<div class="rules-card" id="rules-4"> <div class="rules-card code-card" id="rules-4">
<p class="rules-title">Don't be lazy</p> <p class="rules-title code-title">Don't be lazy</p>
<p> <p>
- Help out anyone whenever possible (with navigation, signups, etc.), whether it's your teammate or another participant - Help out anyone whenever possible (with navigation, signups, etc.), whether it's your teammate or another participant
<br> <br>
- You are required to provide adequete effort to your team - You are required to provide adequete effort to your team
</p> </p>
</div> </div>
<div class="rules-card" id="rules-5"> <div class="rules-card code-card" id="rules-5">
<p class="rules-title">Be ethical and equal</p> <p class="rules-title code-title">Be ethical and equal</p>
<p> <p>
- Consider the ramifications of your actions; do not do anything that will reputably harm others or yourself - Consider the ramifications of your actions; do not do anything that will reputably harm others or yourself
<br> <br>
@ -375,7 +376,7 @@
<div class="prize-desc" id="second-place"> <div class="prize-desc" id="second-place">
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel"> <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
<div class="prize-title">2nd</div> <div class="prize-title">2nd</div>
<div class="prize-content">$300</div> <div class="prize-content">$200</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
<div id="second-podium"></div> <div id="second-podium"></div>
@ -386,7 +387,7 @@
<div class="prize-desc" id="first-place"> <div class="prize-desc" id="first-place">
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel"> <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
<div class="prize-title">1st</div> <div class="prize-title">1st</div>
<div class="prize-content">$400</div> <div class="prize-content">$300</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
<div id="first-podium"> <div id="first-podium">
@ -401,7 +402,7 @@
<div class="prize-desc" id="third-place"> <div class="prize-desc" id="third-place">
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel"> <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
<div class="prize-title">3rd</div> <div class="prize-title">3rd</div>
<div class="prize-content">$200</div> <div class="prize-content">$100</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
<div id="third-podium"></div> <div id="third-podium"></div>