feat: add footer information

dvfrancis · Oct 9, 2024 · 7ac17cc · 7ac17cc
1 parent 7fdba0b
commit 7ac17cc
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 6 deletions.
diff --git a/404.html b/404.html
@@ -39,7 +39,12 @@
   </head>
   <body>
     <!-- Header / Navigation -->
-    <header id="header"></header>
+    <header id="header">
+      <a href="index.html"
+        ><img id="logo" src="assets/images/logo.jpg" alt="hi-lo website logo"
+      /></a>
+      <a href="faq.html">FAQ</a>
+    </header>
     <main>
       <!-- Error Message -->
       <section id="error-message"></section>
@@ -49,7 +54,40 @@
       <section id="error-links"></section>
     </main>
     <!-- Footer / Social Media Icons -->
-    <footer id="footer"></footer>
+   <footer id="footer">
+      <div class="text-center">
+        <a
+          href="https://www.instagram.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-instagram"
+          aria-label="Visit Instagram"
+          ><span class="socials">Instagram</span></a
+        >
+        <a
+          href="https://www.facebook.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-facebook"
+          aria-label="Visit Facebook"
+          ><span class="socials">Facebook</span></a
+        >
+      </div class="text-center">
+      <div>
+        <div class="text-center">
+          <p>
+            &#169; <span id="copyright"></span>,
+            <a
+              href="https://www.dominicfrancis.co.uk/"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Visit Dominic Francis's website"
+              >Dominic Francis</a
+            >
+          </p>
+        </div>
+      </div>
+    </footer>
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -131,3 +131,59 @@ table {
 }
 
 /* Website CSS */
+
+#header {
+  background-color:lightblue;
+}
+
+#game-info {
+  background-color: aqua;
+}
+
+#cards {
+  background-color: chartreuse;
+}
+
+#card-1 {
+  background-color: cornflowerblue;
+}
+
+#card-2 {
+  background-color: darkgreen;
+}
+
+#card-3 {
+  background-color: crimson;
+}
+
+#card-4 {
+  background-color: dimgrey;
+}
+
+#card-5 {
+  background-color: khaki;
+}
+
+#card-6 {
+  background-color: blanchedalmond;
+}
+
+#faq-info {
+  background-color: darksalmon;
+}
+
+#error-message {
+  background-color: goldenrod;
+}
+
+#error-image {
+  background-color: hotpink;
+}
+
+#error-links {
+  background-color: mediumspringgreen;
+}
+
+#footer {
+  background-color:darkgrey;
+}
diff --git a/assets/images/logo.jpg b/assets/images/logo.jpg
diff --git a/assets/scripts/script.js b/assets/scripts/script.js
@@ -0,0 +1,4 @@
+// Display current copyright year
+let currentDate = new Date();
+let currentYear = currentDate.getFullYear();
+document.getElementById("copyright").innerText = currentYear;
diff --git a/faq.html b/faq.html
@@ -36,13 +36,51 @@
   </head>
   <body>
     <!-- Header / Navigation -->
-    <header id="header"></header>
+    <header id="header">
+      <a href="index.html"
+        ><img id="logo" src="assets/images/logo.jpg" alt="hi-lo website logo"
+      /></a>
+      <a href="faq.html">FAQ</a>
+    </header>
     <main>
       <!-- FAQ Section -->
       <section id="faq-info"></section>
     </main>
     <!-- Footer / Social Media Icons -->
-    <footer id="footer"></footer>
+    <footer id="footer">
+      <div class="text-center">
+        <a
+          href="https://www.instagram.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-instagram"
+          aria-label="Visit Instagram"
+          ><span class="socials">Instagram</span></a
+        >
+        <a
+          href="https://www.facebook.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-facebook"
+          aria-label="Visit Facebook"
+          ><span class="socials">Facebook</span></a
+        >
+      </div class="text-center">
+      <div>
+        <div class="text-center">
+          <p>
+            &#169; <span id="copyright"></span>,
+            <a
+              href="https://www.dominicfrancis.co.uk/"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Visit Dominic Francis's website"
+              >Dominic Francis</a
+            >
+          </p>
+        </div>
+      </div>
+    </footer>
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"

diff --git a/index.html b/index.html
@@ -39,7 +39,12 @@
   </head>
   <body>
     <!-- Header / Navigation -->
-    <header id="header"></header>
+    <header id="header">
+      <a href="index.html"
+        ><img id="logo" src="assets/images/logo.jpg" alt="hi-lo website logo"
+      /></a>
+      <a href="faq.html">FAQ</a>
+    </header>
     <main>
       <!-- Game Information Panel -->
       <section id="game-info"></section>
@@ -53,7 +58,40 @@
       </section>
     </main>
     <!-- Footer / Social Media Icons -->
-    <footer id="footer"></footer>
+    <footer id="footer">
+      <div class="text-center">
+        <a
+          href="https://www.instagram.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-instagram"
+          aria-label="Visit Instagram"
+          ><span class="socials">Instagram</span></a
+        >
+        <a
+          href="https://www.facebook.com"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="fa fa-facebook"
+          aria-label="Visit Facebook"
+          ><span class="socials">Facebook</span></a
+        >
+      </div class="text-center">
+      <div>
+        <div class="text-center">
+          <p>
+            &#169; <span id="copyright"></span>,
+            <a
+              href="https://www.dominicfrancis.co.uk/"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Visit Dominic Francis's website"
+              >Dominic Francis</a
+            >
+          </p>
+        </div>
+      </div>
+    </footer>
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"