Add photo section

CarletonComputerScienceSociety · Sep 30, 2024 · e2399d0 · e2399d0
1 parent eebd668
commit e2399d0
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 2 deletions.
diff --git a/assets/scss/components/_hack_the_tunnels.scss b/assets/scss/components/_hack_the_tunnels.scss
@@ -19,6 +19,53 @@
 .hack-the-tunnels {
   overflow-y: hidden;
 
+  &__gallery {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &-1 {
+      height: 15rem;
+      width: 16rem;
+      background-image: url("/images/event_pics/2023-2024/hack-the-tunnels/1.jpg");
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 1rem;
+    }
+
+    &-2 {
+      height: 15rem;
+      width: 16rem;
+      background-image: url("/images/event_pics/2023-2024/hack-the-tunnels/2.jpg");
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 1rem;
+    }
+
+    &-3 {
+      height: 15rem;
+      width: 16rem;
+      background-image: url("/images/event_pics/2023-2024/hack-the-tunnels/4.jpg");
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 1rem;
+    }
+
+    &-4 {
+      height: 15rem;
+      width: 16rem;
+      background-image: url("/images/event_pics/2023-2024/hack-the-tunnels/3.jpg");
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 1rem;
+    }
+  }
+
   &__link {
     color: #34d3fa !important;
   }

diff --git a/layouts/_default/hack_the_tunnels.html b/layouts/_default/hack_the_tunnels.html
@@ -43,11 +43,17 @@
       <h1 id="about">✨ 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>
+      <div class="hack-the-tunnels__gallery">
+        <div class="hack-the-tunnels__gallery-1"></div>
+        <div class="hack-the-tunnels__gallery-2"></div>
+        <div class="hack-the-tunnels__gallery-3"></div>
+        <div class="hack-the-tunnels__gallery-4"></div>
+      </div>
+      <br />
+      <br />
       <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 earn points

diff --git a/static/images/event_pics/2023-2024/hack-the-tunnels/1.jpg b/static/images/event_pics/2023-2024/hack-the-tunnels/1.jpg
diff --git a/static/images/event_pics/2023-2024/hack-the-tunnels/2.jpg b/static/images/event_pics/2023-2024/hack-the-tunnels/2.jpg
diff --git a/static/images/event_pics/2023-2024/hack-the-tunnels/3.jpg b/static/images/event_pics/2023-2024/hack-the-tunnels/3.jpg
diff --git a/static/images/event_pics/2023-2024/hack-the-tunnels/4.jpg b/static/images/event_pics/2023-2024/hack-the-tunnels/4.jpg