From 249ba81de4e3e3905386c712c24a7b3fcf0cdb02 Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Fri, 3 Jun 2022 18:51:23 -0700
Subject: [PATCH] Changed card colors

---
 css/general.css | 38 +++++++++++++++++++++++++++--------
 index.html      | 53 +++++++++++++++++++++++++------------------------
 2 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/css/general.css b/css/general.css
index 07e4d4e..f104784 100644
--- a/css/general.css
+++ b/css/general.css
@@ -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);
 }
diff --git a/index.html b/index.html
index 3ccfe52..1afd9c7 100644
--- a/index.html
+++ b/index.html
@@ -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>