Added QOTW passage

Author: MoonTM-GIT

assets/Channels.png

@@ -16,4 +16,10 @@
 
 body {
     background-color: #011E2F;
+}
+
+.special-word {
+    background-color: #1E3847;
+    padding: 3px 8px;
+    border-radius: 20px;
 }

assets/QOTWLeaderboard.png

@@ -1,4 +1,3 @@
-
 .introduction-container {
     display: flex;
     margin-top: 5%;
@@ -85,4 +84,47 @@
     font-family: "Inter";
     font-size: 34px;
     font-weight: 600;
+}
+
+.qotw-container {
+    display: flex;
+    margin-top: 5%;
+    margin-left: 5%;
+    color:white;
+    font-family: "Inter";
+    font-weight: 500;
+}
+
+.qotw-text {
+    margin-top: 5%;
+    width: 65%;
+    display:flex;
+    flex-direction: column;
+}
+
+.qotw-text h1 {
+    font-family: "Uni Sans";
+    font-size: 73px;
+}
+
+.qotw-paragraph {
+    margin-top: 2%;
+    padding-right: 30%;
+}
+
+.qotw-learn-more {
+    margin-top: 4%;
+    color: #ff212d;
+    font-family: "Uni Sans", "Inter";
+    text-decoration: underline solid transparent;
+    transition: text-decoration 0.4s ease;
+}
+
+.qotw-learn-more:hover {
+    text-decoration: underline solid currentColor;
+}
+
+.qotw-image {
+    padding-left: 2%;
+    width: 35%;
 }

assets/sample.png

@@ -19,6 +19,10 @@
     .data-field-subtitle {
         font-size: 20px;
     }
+
+    .qotw-text h1 {
+        font-size: 56px;
+    }
 }
 
 @media only screen and (max-width: 1250px) {
@@ -50,6 +54,18 @@
     .data-field-subtitle {
         font-size: 17px;
     }
+
+    .qotw-text {
+        width: 100%;
+    }
+
+    .qotw-paragraph {
+        padding-right: 3%;
+    }
+
+    .qotw-image { 
+        display: none;
+    }
 }
 
 @media only screen and (max-width: 1020px) {
@@ -73,6 +89,10 @@
     .data-field-subtitle {
         font-size: 15px;
     }
+
+    .qotw-text h1 {
+        font-size: 42px;
+    }
 }
 
 @media only screen and (max-width: 940px) {
@@ -96,6 +116,10 @@
     .data-field-subtitle {
         font-size: 12px;
     }
+
+    .qotw-text h1 {
+        font-size: 36px;
+    }
 }
 
 @media only screen and (max-width: 750px) {
@@ -128,6 +152,10 @@
     .data-field-subtitle {
         font-size: 14px;
     }
+
+    .qotw-text h1 {
+        font-size: 30px;
+    }
 }
 
 @media only screen and (max-width: 500px) {
@@ -151,4 +179,8 @@
     .data-field-subtitle {
         font-size: 12px;
     }
+
+    .qotw-text h1 {
+        font-size: 26px;
+    }
 }

css/global.css

@@ -43,7 +43,7 @@ <h1>HELP. <a style="color:#ff212d">CODE.</a> LEARN.</h1>
             <a href="https://discord.gg/X3NmMgzFKF" target="_blank" class="introduction-join-btn">Join</a>
         </div>
         <div class="introduction-image">
-            <img src="./assets/sample.png" alt="" style="width:85%;">
+            <img src="./assets/Channels.png" alt="" style="width:85%;">
         </div>
     </div>
     <!-- DATA/STATS -->
@@ -61,7 +61,17 @@ <h1>HELP. <a style="color:#ff212d">CODE.</a> LEARN.</h1>
             <p class="data-field-subtitle">messages each week²</p>
         </div>
     </div>
-    <p class="paragraph">&nbsp</p>
+    <!-- MEET QOTW -->
+    <div class="qotw-container">
+        <div class="qotw-text">
+            <h1>MEET QUESTION OF THE WEEK</h1>
+            <p class="paragraph qotw-paragraph">Question of the week is a weekly Java-related question you can answer and be awarded points for. Check it out in <b class="special-word">#question-of-the-week</b> on the Java Discord.</p>
+            <a href="./qotw.html" target="_blank" class="paragraph qotw-learn-more"><i class="fa-solid fa-arrow-right"></i> Learn More</a>
+        </div>
+        <div class="qotw-image">
+            <img src="./assets/QOTWLeaderboard.png" alt="" style="width:65%;">
+        </div>
+    </div>
 
     <!-- Hamburger Menu JavaScript -->
     <script type="text/javascript">