feat: add logo to title and footer

Author: francelu

website/data/about-france.jpg

@@ -30,7 +30,7 @@
 
     <!-- Each .section becomes a full-screen panel -->
     <div class="section" data-anchor="title" style="--bg-img: url('data/intro_background.jpg')">
-      <h1>Olympic Inequalities</h1>
+      <img src="data/logo.png" alt="Title Logo" class="intro-logo">
     </div>
 
     <div class="section" data-anchor="introduction">
@@ -288,8 +288,13 @@ <h2>Conclusion</h2>
       </p>
     </div>
 
-    <div class="section fp-auto-height">
-      <footer>Olympic Inequalities website created by DataRizz team for EPFL course COM-480 Data visualisation</footer>
+    <div class="section fp-auto-height" data-anchor="footer">
+      <footer>
+        <div class="footer-content">
+          <img src="data/logo.png" alt="Footer Logo" class="footer-logo">
+          <p>website created by DataRizz team for EPFL course COM-480 Data visualisation</p>
+        </div>
+      </footer>
     </div>
 
     <!-- A section with horizontal slides -->

website/data/about-hana.png

@@ -44,11 +44,6 @@ body {
   padding: 5%;
 }
 
-/* Remove "Made with fullpage.js" link at bottom of page */
-.fp-watermark {
-  display: none !important;
-}
-
 /* =============================================
    Navigation dots
    =========================================== */
@@ -63,37 +58,6 @@ body {
   background: white;
 }
 
-/* =============================================
-   General layout
-   =========================================== */
-
-.container {
-  display: flex;
-  gap: 2%;
-  align-items: center;
-  justify-content: start;
-}
-
-.text-container {
-  flex: 1;
-}
-
-.image-container {
-  width: 60%;
-}
-
-.image-container img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.slide img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
 /* =============================================
    Paragraph in two columns
    =========================================== */
@@ -163,12 +127,18 @@ p {
 .section[data-anchor="title"] {
   box-sizing: border-box;
   background-attachment: fixed;
-  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), var(--bg-img);
+  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), var(--bg-img);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
+.img[alt="Title Logo"] {
+  max-width: 1217px;
+  width: 80%;
+  height: auto;
+}
+
 /* =============================================
    Introduction section
    =========================================== */
@@ -870,4 +840,31 @@ p {
 .fair-wrapper select:focus,
 .fair-control select:focus {
   outline: 2px solid white !important;
+}
+
+/* =============================================
+   Footer
+   =========================================== */
+
+/* Remove "Made with fullpage.js" link at bottom of page */
+.fp-watermark {
+  display: none !important;
+}
+
+.footer-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  justify-content: center;
+  text-align: center;
+}
+
+.footer-logo {
+  height: 50px;
+  width: auto;
+}
+
+[data-anchor="footer"] p {
+  margin: 0;
+  width: auto;
 }