Add hack the tunnels page (#333)

* Add hack the tunnels page

* lint

assets/scss/components/_hack_the_tunnels.scss

@@ -19,21 +19,126 @@
 .hack-the-tunnels {
   overflow-y: hidden;
 
+  &__link {
+    color: #34d3fa !important;
+  }
+
+  &__heading {
+    font-size: 1.7rem !important;
+  }
+
+  &__text {
+    font-size: 1.2rem !important;
+  }
+
   &__logo {
     object-fit: cover;
     width: 100%;
   }
 
   &__date {
-    padding-top: 3rem;
+    padding-top: 1.5rem;
     color: white;
     font-size: 1.5rem;
     font-weight: bold;
   }
 
+  &__cards {
+    display: flex;
+    justify-content: space-between;
+    gap: 3rem;
+    margin: 0 1rem;
+    margin-top: 5rem;
+  }
+
+  &__card {
+    width: 50%;
+    border-radius: 2rem;
+    height: 30rem;
+    margin: auto;
+    padding: 1rem;
+
+    p {
+      font-size: 1.3rem !important;
+    }
+
+    h1 {
+      font-size: 5rem !important;
+      margin-bottom: 0;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    &__cards {
+      flex-direction: column;
+    }
+
+    &__card {
+      width: 90%;
+    }
+  }
+
   @media only screen and (max-width: 600px) {
     &__date {
       font-size: 1.1rem;
     }
   }
 }
+
+.day1 {
+  border: 10px solid #34d3fa;
+}
+
+.day2 {
+  border: 10px solid #c6006a;
+}
+
+.day1-number {
+  color: #8c65fe;
+}
+
+.day2-number {
+  color: #f9df02;
+}
+
+.header-button {
+  margin-top: 3rem;
+  border-radius: 0.3rem;
+  border-width: 0px;
+  min-width: 9rem;
+  background-color: #ffffff;
+  padding: 0.75rem 1.5rem;
+  color: rgb(0, 0, 0);
+  font-weight: bold;
+  font-size: 1.05rem;
+  transition: all 0.15s;
+  cursor: pointer;
+}
+
+.header-button:hover {
+  background-image: linear-gradient(
+    90deg,
+    #34d3fa 0%,
+    #8c65fe 39%,
+    #f9df02 70%,
+    #c6006a 90%,
+    #34d3fa 100%
+  );
+  animation: slidebg 5s linear infinite;
+  color: white;
+}
+
+@keyframes slide {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -400px 0;
+  }
+}
+
+@keyframes slidebg {
+  to {
+    background-position: 20vw;
+  }
+}

layouts/_default/hack_the_tunnels.html

@@ -22,37 +22,75 @@
         <div class="hack-the-tunnels__date">
           September 29th - September 30th
         </div>
+        <div>
+          <a href="https://forms.gle/MZKAUtWersoTscMx5"
+            ><button class="header-button">Register</button></a
+          >
+        </div>
       </div>
     </div>
   </div>
   <div class="woa-content">
     <div class="woa-description">
-      <a
-        href="https://forms.gle/yPfcFd7TYSeya2h66"
-        style="font-size:3rem ; color: aliceblue; font-weight: bolder;text-decoration: none;"
-        >Register Here!</a
-      >
-      <!-- <div>
-        <img class="woa-content-logo" src="https://i.imgur.com/IGjgFH8.png" />
-      </div>
-      <p style="font-size: 1.4rem">
-        <i
-          ><b
-            >It's kinda like a computer science frosh ... but 100% free and
-            organized completely by students!</b
-          ></i
-        >
+      <h1>What is Hack The Tunnels?</h1>
+      <br />
+      <img src="/images/event_posters/2023-2024/hack_the_tunnels_symbol.png" />
+      <br />
+      <br />
+      <p class="hack-the-tunnels__heading">
+        Hack The Tunnels is a <b>"Challenge"</b> based Hackathon.
+      </p>
+      <p class="hack-the-tunnels__text">
+        Participants will work in teams to build various features for a mystery
+        project. By completing these features, participants will learn various
+        web development and software engineering concepts while earning points
+        that will count towards winning prizes. Teams will hack with the
+        languages, libraries, and frameworks of their choosing. However, a
+        project template will also be provided.
       </p>
-      <p style="font-size: 1.05rem">
-        Established in 2014, Week of Awesome is an annual tradition organized by
-        the Carleton Computer Science Society to welcome incoming and returning
-        Computer science students to the upcoming academic year. Coming to Week
-        of Awesome events is a great way to make new friends, learn something
-        new, or find out how you get involved with Carleton's vibrant computer
-        science community! Checkout our list of events below.
+      <p class="hack-the-tunnels__text">
+        The event will take place over two days. Day one will be decicated to
+        teaching core concepts neccesary to complete challenges on day two. We
+        recommend participants who have not taken <b>COMP 2406</b> attend Day
+        one. Day two is the main event where participants will complete various
+        challenges, attend workshops, and win prizes!
+      </p>
+      <div class="hack-the-tunnels__cards">
+        <div class="hack-the-tunnels__card day1">
+          <h1>DAY <span class="day1-number">1</span></h1>
+          <h2>Fri, Sept 29th @ 6:00 PM - 9:00 PM</h2>
+          <br />
+          <p>Learn JavaScript</p>
+          <p>Learn Client-Server Architecture</p>
+          <p>Setup The Project Template</p>
+          <br />
+          <br />
+          <i>Recommended if you have not taken <b>COMP 2406</b></i>
+        </div>
+        <div class="hack-the-tunnels__card day2">
+          <h1>DAY <span class="day2-number">2</span></h1>
+          <h2>Sat, Sept 30th @ 10:00 AM - 6:00 PM</h2>
+          <br />
+          <p>Attend Workshops</p>
+          <p>Build the Mystery Project</p>
+          <p>Win Prizes</p>
+          <br />
+          <br />
+          <i>The Main Event</i>
+        </div>
+      </div>
+      <!-- <div style="margin-top: 5rem"></div>
+      <h1>Schedule</h1>
+      <p>Coming Soon.</p> -->
+      <div style="margin-top: 5rem"></div>
+      <h1>Code of Conduct</h1>
+      <p>
+        This event will be following the
+        <a class="hack-the-tunnels__link" href="https://hackcodeofconduct.org/"
+          >Hack Code of Conduct</a
+        >, please read it to be informed of what it is!
       </p>
-    </div> -->
-      <div style="padding-top:50rem"></div>
+      <div style="margin-top: 5rem"></div>
     </div>
   </div>
 {{ end }}