Added Buttons

css/general.css

@@ -661,7 +661,7 @@ section {
   padding: 10px;
   width: 100%;
   text-align: center;
-  margin-bottom: 50px;
+  margin-bottom: 30px;
 }
 
 #timeline-heading {
@@ -1013,6 +1013,57 @@ section {
   }
 }
 
+.timeline-links {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none !important;
+  margin-top: 15px;
+}
+
+.timeline-icon {
+  height: 23px;
+  float: left;
+}
+
+.timeline-button {
+  color: rgb(233, 203, 104);
+  text-decoration: none;
+  border-radius: 5px;
+  font-size: 18px;
+  border: 1px solid rgb(192, 168, 88);
+  padding: 5px;
+  display: inline-block;
+  margin: 0 10px;
+}
+
+#zoom-link {
+  border: 1px solid rgb(45, 140, 255);
+}
+
+.timeline-button#zoom-link:hover {
+  background-color: rgb(45, 140, 255);
+}
+
+.timeline-button#zoom-link:hover > .timeline-icon{
+  filter:hue-rotate(90deg);
+}
+
+.timeline-button:hover {
+  color: white;
+  background-color: rgb(192, 168, 88);
+  transition: 0.5s;
+}
+
+#zoom-tooltip::after {
+  content: 'Unavailable';
+  font-size: 16px;
+  top: 40px;
+  right: 5px;
+  color: rgb(230, 96, 96);
+}
+
 /* Signup Container */
 #signup-container {
     margin: 20px auto;
@@ -1514,6 +1565,18 @@ section {
 .flex-container {
   display: flex;
   flex-flow: row wrap;
+  margin-top: 20px;
+  justify-content: center;
+}
+
+.workshop-entry {
+  margin: 20px;
+  min-width: 500px;
+  background-color: rgb(19, 29, 41);
+  border-radius: 10px;
+  padding: 10px 30px;
+  box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
+  text-align: left;
 }
 
 #rules-description {

index.html

@@ -189,6 +189,9 @@
                                                 <li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
                                                 <li>After this event, participants will <u>head back home</u> to start coding</li>
                                             </ul>
+                                            <div class="timeline-links">
+                                                <a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" src="img/zoom.png"></div></a>
+                                            </div>
                                         </p>
                                     </div>
                                     <div class="timeline-desc" data-description="2">
@@ -201,9 +204,12 @@
                                         <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 one of the given prompts and guidelines; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
+                                                <li><span class="important-text">=IMPORTANT=</span> Your project must follow one of the given prompts; otherwise, your team may lose a lot of points for unrelated topic deductions</li>
                                                 <li>Remember, you only have 46 hours to complete your project... Use your time wisely</li>
                                             </ul>
+                                            <div class="timeline-links">
+                                                <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
+                                            </div>
                                         </p>
                                     </div>
                                     <div class="timeline-desc" data-description="3">
@@ -219,6 +225,9 @@
                                                 <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:30pm), your team will have around 30 mins to prepare for your presentation. Get back to work!</li>
                                             </ul>
+                                            <div class="timeline-links">
+                                                <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
+                                            </div>
                                         </p>
                                     </div>
                                     <div class="timeline-desc" data-description="4">
@@ -235,6 +244,10 @@
                                                 <li><span class="important-text">=IMPORTANT=</span> Your team's presentation is NOT ALLOWED to go above 5 minutes... Use your time wisely.</li>
                                                 <li>Your team will be graded on both the product and presentation as per the rubric</li>
                                             </ul>
+                                            <div class="timeline-links">
+                                                <a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" src="img/zoom.png"></div></a>
+                                                <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
+                                            </div>
                                         </p>
                                     </div>
                                     <div class="timeline-desc" data-description="5">
@@ -249,6 +262,9 @@
                                                 <li><u>Winners</u>: 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" target="_blank" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li>
                                             </ul>
+                                            <div class="timeline-links">
+                                                <a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" src="img/zoom.png"></div></a>
+                                            </div>
                                         </p>
                                     </div>
                                 </div>
@@ -467,14 +483,19 @@
                 </div>
             </article>
         </section>
-        <section id="workshops">
+        <!-- <section id="workshops">
             <h2 class="topic">Workshops</h2>
             <hr class="line">
             (under construction)
             <div class="flex-container">
-                
+                <div class="workshop-entry">
+                    yo
                 </div>
-        </section>
+                <div class="workshop-entry">
+                    hi
+                </div>
+            </div>
+        </section> -->
         <section id="rules">
             <h2 class="topic">Rules</h2>
             <hr class="line">