NUSComputingDev · Respirayson · Nov 4, 2023 · Nov 4, 2023 · Nov 4, 2023
diff --git a/assets/AltheaTan.jpg b/assets/AltheaTan.jpg
diff --git a/assets/ChloeOng.jpg b/assets/ChloeOng.jpg
diff --git a/assets/DavianKho.jpg b/assets/DavianKho.jpg
diff --git a/assets/EmilyTan.jpg b/assets/EmilyTan.jpg
diff --git a/assets/IvanYang.jpg b/assets/IvanYang.jpg
diff --git a/assets/JamieHo.jpg b/assets/JamieHo.jpg
diff --git a/assets/JavianNg.jpg b/assets/JavianNg.jpg
diff --git a/assets/JoshuaLek.jpg b/assets/JoshuaLek.jpg
diff --git a/assets/KhooPynZhern.jpg b/assets/KhooPynZhern.jpg
diff --git a/assets/KongShiTing.jpg b/assets/KongShiTing.jpg
diff --git a/assets/KooJay-Lynn.jpg b/assets/KooJay-Lynn.jpg
diff --git a/assets/LeeYongNing.jpg b/assets/LeeYongNing.jpg
diff --git a/assets/MartinNg.jpg b/assets/MartinNg.jpg
diff --git a/assets/MervynSeah.jpg b/assets/MervynSeah.jpg
diff --git a/assets/NatashaKoh.jpg b/assets/NatashaKoh.jpg
diff --git a/assets/NatashaSanghar.jpg b/assets/NatashaSanghar.jpg
diff --git a/assets/NathanLoo.jpg b/assets/NathanLoo.jpg
diff --git a/assets/NgLeXuan.jpg b/assets/NgLeXuan.jpg
diff --git a/assets/OpheliaTeo.jpg b/assets/OpheliaTeo.jpg
diff --git a/assets/Raeeda.jpg b/assets/Raeeda.jpg
diff --git a/assets/RaysonYeap.jpg b/assets/RaysonYeap.jpg
diff --git a/assets/ReinaTng.jpg b/assets/ReinaTng.jpg
diff --git a/assets/SeanKevinDias.jpg b/assets/SeanKevinDias.jpg
diff --git a/assets/TeoHongRui.jpg b/assets/TeoHongRui.jpg
diff --git a/assets/TimothySoon.jpg b/assets/TimothySoon.jpg
diff --git a/assets/TohYiHui.jpg b/assets/TohYiHui.jpg
diff --git a/assets/TriciaAng.jpg b/assets/TriciaAng.jpg
diff --git a/assets/VivienHe.jpg b/assets/VivienHe.jpg
diff --git a/assets/WangYuQing.jpg b/assets/WangYuQing.jpg
diff --git a/assets/WanjariKimaya.jpg b/assets/WanjariKimaya.jpg
diff --git a/assets/external.jpg b/assets/external.jpg
diff --git a/assets/internal.jpg b/assets/internal.jpg
diff --git a/assets/presidential.jpg b/assets/presidential.jpg
diff --git a/assets/studentdev.jpg b/assets/studentdev.jpg
diff --git a/assets/studentlife.jpg b/assets/studentlife.jpg
diff --git a/css/styles.css b/css/styles.css
@@ -501,15 +501,16 @@ img {
     }
 
 .flip-container, .front, .back {
-	width: auto;
-	height: 800px;
+    width: auto;
+    max-width: 1200px;
+	height: 900px;
 
-    @media screen and (max-width: 1024px) {
-        height: 900px;
+    @media screen and (max-width: 1200px) {
+        height: 1100px;
     }
 
-    @media screen and (min-width: 600px) and (max-width: 1000px) {
-        height: 500px;
+    @media screen and (max-width: 700px) {
+        height: 900px;
     }
 
 }

diff --git a/index.html b/index.html
@@ -94,39 +94,43 @@
       <div class="wing-cont">
         <p class="wing-name">Presidency</p>
 
-        <!-- <div class="flip-container" onclick="this.classList.toggle('flip');">
+        <div
+          class="flip-container"
+          style="max-height: 1100px"
+          onclick="this.classList.toggle('flip');"
+        >
           <div class="flipper">
             <div class="front">
               <img
                 src="assets/presidential.jpg"
                 class="transition"
-                style="border-radius: 20px; max-height: 900px;"
-                />
+                style="border-radius: 20px; max-height: 900px"
+              />
               <div class="middle">
                 <div class="text">
                   Click to find out more about the presidential wing
                 </div>
               </div>
             </div>
             <div class="back">
-              <div class="wing-cards" id="pwing-box">
-              </div>
+              <div class="wing-cards" id="pwing-box"></div>
             </div>
-          </div> -->
-        <div class="wing-cards" id="pwing-box"></div>
+          </div>
+          <!-- <div class="wing-cards" id="pwing-box"></div> -->
+        </div>
       </div>
 
       <div class="wing-cont">
         <p class="wing-name">External Relations</p>
 
-        <!-- <div class="flip-container" onclick="this.classList.toggle('flip');">
+        <div class="flip-container" onclick="this.classList.toggle('flip');">
           <div class="flipper">
             <div class="front">
               <img
                 src="assets/external.jpg"
                 class="transition"
-                style="border-radius: 20px; max-height: 900px;"
-                />
+                style="border-radius: 20px; max-height: 900px"
+              />
               <div class="middle">
                 <div class="text">
                   Click to find out more about our external relations
@@ -137,21 +141,21 @@
               <div class="wing-cards" id="external-box"></div>
             </div>
           </div>
-        </div> -->
-        <div class="wing-cards" id="external-box"></div>
+        </div>
+        <!-- <div class="wing-cards" id="external-box"></div> -->
       </div>
 
       <div class="wing-cont">
         <p class="wing-name">Internal Relations</p>
 
-        <!-- <div class="flip-container" onclick="this.classList.toggle('flip');">
+        <div class="flip-container" onclick="this.classList.toggle('flip');">
           <div class="flipper">
             <div class="front">
               <img
                 src="assets/internal.jpg"
                 class="transition"
-                style="border-radius: 20px; max-height: 900px;"
-                />
+                style="border-radius: 20px; max-height: 900px"
+              />
               <div class="middle">
                 <div class="text">
                   Click to find out more about our internal relations
@@ -162,59 +166,58 @@
               <div class="wing-cards" id="internal-box"></div>
             </div>
           </div>
-        </div> -->
-        <div class="wing-cards" id="internal-box"></div>
+        </div>
+        <!-- <div class="wing-cards" id="internal-box"></div> -->
       </div>
 
       <div class="wing-cont">
         <p class="wing-name">Student Development</p>
 
-        <!-- <div class="flip-container" onclick="this.classList.toggle('flip');">
-            <div class="flipper">
-              <div class="front">
-                <img
-                  src="assets/studentdev.jpg"
-                  class="transition"
-                  style="border-radius: 20px; max-height: 900px;"
-                />
-                <div class="middle">
-                  <div class="text">
-                    Click to find out more about our student development
-                  </div>
+        <div class="flip-container" onclick="this.classList.toggle('flip');">
+          <div class="flipper">
+            <div class="front">
+              <img
+                src="assets/studentdev.jpg"
+                class="transition"
+                style="border-radius: 20px; max-height: 900px"
+              />
+              <div class="middle">
+                <div class="text">
+                  Click to find out more about our student development
                 </div>
               </div>
-              <div class="back">
-                <div class="wing-cards" id="stddev-box"></div>
             </div>
+            <div class="back">
+              <div class="wing-cards" id="stddev-box"></div>
             </div>
-          </div> -->
-        <div class="wing-cards" id="stddev-box"></div>
+          </div>
+        </div>
+        <!-- <div class="wing-cards" id="stddev-box"></div> -->
       </div>
 
       <div class="wing-cont">
         <p class="wing-name">Student Life</p>
 
-        <!-- <div class="flip-container" onclick="this.classList.toggle('flip');">
-            <div class="flipper">
-              <div class="front">
-                <img
-                  src="assets/studentlife.jpg"
-                  class="transition"
-                  style="border-radius: 20px; max-height: 900px;"
-                />
-                <div class="middle">
-                  <div class="text">
-                    Click to find out more about our student life
-                  </div>
+        <div class="flip-container" onclick="this.classList.toggle('flip');">
+          <div class="flipper">
+            <div class="front">
+              <img
+                src="assets/studentlife.jpg"
+                class="transition"
+                style="border-radius: 20px; max-height: 900px"
+              />
+              <div class="middle">
+                <div class="text">
+                  Click to find out more about our student life
                 </div>
               </div>
-              <div class="back">
-                back content
-                <div class="wing-cards" id="stdlife-box"></div>
             </div>
+            <div class="back">
+              <div class="wing-cards" id="stdlife-box"></div>
             </div>
-          </div> -->
-        <div class="wing-cards" id="stdlife-box"></div>
+          </div>
+        </div>
+        <!-- <div class="wing-cards" id="stdlife-box"></div> -->
       </div>
     </div>