Technigo · violacathrine · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 # Web Accessibility Project
 
-A basic web server template focused on web accessibility practices.
+We built this website as a project focused on web accessibility. The goal was to learn how to develop inclusive digital experiences that work for everyone, regardless of their functional ability.  
+We worked with semantic HTML, proper use of ARIA attributes, clear color contrast, keyboard navigation, and responsive design.  
+The project is built with HTML, CSS, and JavaScript, and is published via Netlify.
 
-### Installation
+# Live site
 
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
-
-2. Clone your forked repository
+https://accessibility-project.netlify.app/
diff --git a/about.html b/about.html
@@ -1,10 +1,96 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>About</title>
     <link rel="stylesheet" href="css/styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body></body>
+
+  <body>
+    <a href="#main-content" class="skip-link">Skip to main content!</a>
+    <header>
+      <h1>About</h1>
+      <nav role="navigation" aria-label="Main menu">
+        <ul>
+          <li>
+            <a href="index.html">Home</a>
+          </li>
+          <li>
+            <a href="about.html">About</a>
+          </li>
+        </ul>
+        <div id="toggle-element">
+          <div class="tooltip">
+            <label class="switch" aria-label="High contrast toggle">
+              <input type="checkbox" id="toggle" />
+              <span class="slider"></span>
+            </label>
+            <span class="tooltiptext">Toggle High Contrast</span>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <main id="main-content">
+      <section class="team">
+        <article class="presentation">
+          <img src="assets/linda.jpg" alt="" />
+          <p>
+            Hey! I'm <strong>Linda</strong>, a student at Technigo. I believe
+            accessibility is essential — not only because the internet should be
+            available to everyone, but also because it enhances the user
+            experience for all. <br /><br />
+            <a href="https://github.com/LindaSchonfeldt">Visit Lindas Github</a>
+          </p>
+        </article>
+        <article class="presentation">
+          <img src="assets/cathi.jpg" alt="" />
+          <p>
+            Hi! My name is <strong>Cathi</strong> and I am currently studying
+            JavaScript at Technigo. I have always dreamed about learning
+            programming and in January i finally took the chance. I think that
+            this project, Web Accessibility, that we're working on right now is
+            super important. The www is for all! <br /><br />
+            <a href="https://github.com/violacathrine">Visit Cathis Github</a>
+          </p>
+        </article>
+      </section>
+    </main>
+
+    <footer>
+      <p>Copyright 2025</p>
+      <a
+        href="https://github.com/violacathrine/js-project-accessibility"
+        aria-label="GitHub repository"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 98 96"
+          id="github-icon"
+          class="github-icon"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+            fill="currentColor"
+          /></svg
+      ></a>
+      <p>Linda & Cathi</p>
+    </footer>
+    <script src="js/main.js"></script>
+  </body>
 </html>
diff --git a/assets/banner.png b/assets/banner.png
diff --git a/assets/cathi.jpg b/assets/cathi.jpg
diff --git a/assets/linda.JPG b/assets/linda.JPG