From 1b857098e21cf271f660fc75d41c761dbc866607 Mon Sep 17 00:00:00 2001
From: Mubarak Yahaya <ymubarak247@gmail.com>
Date: Mon, 29 May 2023 23:24:18 +0100
Subject: [PATCH 1/2] change div navigation to semantic html header tag

---
 index.html      | 92 +++++++++++++++++++++++++++++++++----------------
 src/desktop.css | 12 ++++---
 2 files changed, 69 insertions(+), 35 deletions(-)
diff --git a/index.html b/index.html
index 36a332c..19eef2b 100644
--- a/index.html
+++ b/index.html
@@ -6,32 +6,64 @@
     <link rel="stylesheet" href="src/desktop.css" />
   </head>
   <body>
-    <div id="navbar">
-      <div class="navbutton" onclick="window.location.href='index.html'">
-        <a href="index.html"><i icon-name="home" class="icon"></i>Home</a>
-      </div>
-      <div class="navbutton" onclick="window.location.href='blog.html'">
-        <a href="blog.html"><i icon-name="newspaper" class="icon"></i>News</a>
-      </div>
-      <div class="navbutton" onclick="window.location.href='tools.html'">
-        <a href="tools.html"><i icon-name="package" class="icon"></i>Tools</a>
-      </div>
-      <div class="navbutton" onclick="window.location.href='smp.html'">
-        <a href="smp.html" id="mc"
-          ><i icon-name="sword" class="icon"></i>Minecraft</a
-        >
-      </div>
-      <div class="navbutton" onclick="window.location.href='clubs.html'">
-        <a href="clubs.html"
-          ><i icon-name="users" class="icon"></i>Join a Club!</a
-        >
-      </div>
-    </div>
-    <div id="titlebox">
+    <header>
+      <!-- This is the header container -->
+      <!-- Use a custom classname for all previous div element so as to not make changes to the Reset CSS declaration -->
+      <nav>
+        <!--This wraps the navigation items-->
+
+        <ul id="navbar" class="custom">
+          <!-- This is the navigation items -->
+          <li
+            class="navbutton custom"
+            onclick="window.location.href='index.html'"
+          >
+            <a href="index.html"><i icon-name="home" class="icon"></i>Home</a>
+          </li>
+
+          <li
+            class="navbutton custom"
+            onclick="window.location.href='blog.html'"
+          >
+            <a href="blog.html"
+              ><i icon-name="newspaper" class="icon"></i>News</a
+            >
+          </li>
+
+          <li
+            class="navbutton custom"
+            onclick="window.location.href='tools.html'"
+          >
+            <a href="tools.html"
+              ><i icon-name="package" class="icon"></i>Tools</a
+            >
+          </li>
+
+          <li
+            class="navbutton custom"
+            onclick="window.location.href='smp.html'"
+          >
+            <a href="smp.html" id="mc"
+              ><i icon-name="sword" class="icon"></i>Minecraft</a
+            >
+          </li>
+
+          <li
+            class="navbutton custom"
+            onclick="window.location.href='clubs.html'"
+          >
+            <a href="clubs.html"
+              ><i icon-name="users" class="icon"></i>Join a Club!</a
+            >
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <div id="titlebox" class="custom">
       <h1 style="color: #dedede">Colonel By Student Community</h1>
       <div id="directory"></div>
     </div>
-    <div class="boxList">
+    <div class="boxList" class="custom">
       <div class="descbox">
         <h2>Welcome to the Colonel By Student Community Website!</h2>
         <p>
@@ -40,7 +72,7 @@ <h2>Welcome to the Colonel By Student Community Website!</h2>
           information on our school minecraft server.
         </p>
       </div>
-      <div class="descbox">
+      <div class="descbox custom">
         <h2>Who we are</h2>
         <p>
           We are a group of students focused on creating an interconnected
@@ -49,24 +81,24 @@ <h2>Who we are</h2>
         <p>We are, and will always be For Students, By Students</p>
       </div>
     </div>
-    <div class="boxList">
-      <div class="box">
+    <div class="boxList custom">
+      <div class="box custom">
         <a href="blog.html"><h3>Blog + Newspaper</h3></a>
       </div>
-      <div class="box">
+      <div class="box custom">
         <a href="smp.html" style="color: #70b433"><h3>Minecraft Server</h3></a>
       </div>
-      <div class="box">
+      <div class="box custom">
         <a href="tools.html"><h3>Tools + Guides</h3></a>
       </div>
     </div>
     <div
       id="comunicationsBox"
-      class="box"
+      class="box custom"
       style="height: auto; padding: 2%; width: 90%"
     >
       <h3>Come chat with fellow students on the CBSC Discord Server!</h3>
-      <div style="padding: 1%">
+      <div class="custom" style="padding: 1%">
         <img
           src="img/discord-mark-white.svg"
           alt="discord logo"
diff --git a/src/desktop.css b/src/desktop.css
index 9ca454c..739c914 100644
--- a/src/desktop.css
+++ b/src/desktop.css
@@ -12,10 +12,11 @@
 }
 
 /*Reset CSS*/
-div {
+
+div, .custom {
   margin: 0;
-	padding: 0;
-	border: 0;
+  padding: 0;
+  border: 0;
   border-radius: 5px;
 }
 img {
@@ -82,11 +83,12 @@ to {background-position-x: -100px 0px;background-size:150%;}
 }
 /*^homepage scrolling background animation^*/
 #navbar {
+  background-color: var(--bg1);
   display: flex;
   flex-direction: row;
-  background-color: var(--bg1);
-  width: 100%;
+  list-style: none;
   margin: 5px;
+  width: 100%;
 }
 
 #mc {

From 9088846d81bf8d3c79ac26ed01ab25a6874d54c9 Mon Sep 17 00:00:00 2001
From: Mubarak Yahaya <ymubarak247@gmail.com>
Date: Thu, 1 Jun 2023 00:22:09 +0100
Subject: [PATCH 2/2] implemented semantic html in homepage

---
 index.html | 74 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 19eef2b..81e7a09 100644
--- a/index.html
+++ b/index.html
@@ -59,40 +59,44 @@
         </ul>
       </nav>
     </header>
-    <div id="titlebox" class="custom">
-      <h1 style="color: #dedede">Colonel By Student Community</h1>
-      <div id="directory"></div>
-    </div>
-    <div class="boxList" class="custom">
-      <div class="descbox">
-        <h2>Welcome to the Colonel By Student Community Website!</h2>
-        <p>
-          You can find tools, info, and communications platforms related and
-          dedicated to the Colonel By Student Community here, as well as
-          information on our school minecraft server.
-        </p>
-      </div>
-      <div class="descbox custom">
-        <h2>Who we are</h2>
-        <p>
-          We are a group of students focused on creating an interconnected
-          online community for the Students of Colonel By Secondary School
-        </p>
-        <p>We are, and will always be For Students, By Students</p>
-      </div>
-    </div>
-    <div class="boxList custom">
-      <div class="box custom">
-        <a href="blog.html"><h3>Blog + Newspaper</h3></a>
-      </div>
-      <div class="box custom">
-        <a href="smp.html" style="color: #70b433"><h3>Minecraft Server</h3></a>
-      </div>
-      <div class="box custom">
-        <a href="tools.html"><h3>Tools + Guides</h3></a>
-      </div>
-    </div>
-    <div
+    <main>
+      <section id="titlebox" class="custom">
+        <h1 style="color: #dedede">Colonel By Student Community</h1>
+        <div id="directory"></div>
+      </section>
+      <section class="boxList" class="custom">
+        <article class="descbox">
+          <h2>Welcome to the Colonel By Student Community Website!</h2>
+          <p>
+            You can find tools, info, and communications platforms related and
+            dedicated to the Colonel By Student Community here, as well as
+            information on our school minecraft server.
+          </p>
+        </article>
+        <div class="descbox custom">
+          <h2>Who we are</h2>
+          <p>
+            We are a group of students focused on creating an interconnected
+            online community for the Students of Colonel By Secondary School
+          </p>
+          <p>We are, and will always be For Students, By Students</p>
+        </div>
+      </section>
+      <section class="boxList custom">
+        <div class="box custom">
+          <a href="blog.html"><h3>Blog + Newspaper</h3></a>
+        </div>
+        <div class="box custom">
+          <a href="smp.html" style="color: #70b433"
+            ><h3>Minecraft Server</h3></a
+          >
+        </div>
+        <div class="box custom">
+          <a href="tools.html"><h3>Tools + Guides</h3></a>
+        </div>
+      </section>
+    </main>
+    <footer
       id="comunicationsBox"
       class="box custom"
       style="height: auto; padding: 2%; width: 90%"
@@ -116,7 +120,7 @@ <h3>Come chat with fellow students on the CBSC Discord Server!</h3>
         target="_blank"
         >Click here to join the Server</a
       >
-    </div>
+    </footer>
     <script src="https://unpkg.com/lucide@latest"></script>
     <script>
       lucide.createIcons();
