Fixed image paths for all html pages (#200)

Co-authored-by: Oda Karoline Rolstad Verbeke <146728692+Kittypoda@users.noreply.github.com>
NoroffFEU · Mar 22, 2024 · 8378a2b · 8378a2b
1 parent 46fbba3
commit 8378a2b
Show file tree

Hide file tree

Showing 12 changed files with 1,388 additions and 633 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
diff --git a/pages/about-page.html b/pages/about-page.html
@@ -13,20 +13,20 @@
     <header class="flex h-24 items-center justify-between px-10 mt-6">
         <div class="flex flex-row items-center gap-10 text-base">
             <a href="#">
-                <img src="/images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
+                <img src="../images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
             </a>
         </div>
         <nav class="flex flex-row items-center gap-10">
             <button id="openSearchBarDrawer" class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform">  <!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
-                <img src="/images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
+                <img src="../images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
                 <span class="text-2xl font-medium">Search</span>
             </button>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">News</a>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">About Us</a>
             <div class="relative cursor-pointer hover:scale-105 transition-transform">
                 <div class="flex items-center">
                     <span class="text-2xl font-medium">Projects</span>
-                    <img src="/images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
+                    <img src="../images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
                 </div>
                 <!-- Dropdown projects menu, hidden, toggle visibility with JS -->
                 <div class="absolute hidden mt-2 bg-white">
@@ -38,16 +38,16 @@
                 DONATE
             </button>
             <div class="relative flex w-5 h-5 items-center group" id="language-selector">
-                <img src="/images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
+                <img src="../images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
                 <div class="absolute left-0 w-full bg-white" id="language-options">
                     <a href="#" class="block">
-                        <img src="/images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
                     </a>
                 </div>
             </div>
@@ -62,7 +62,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                     <label for="Search-Drawer" class="sr-only">Search Site</label>
                     <input type="search" class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm" id="Search-Drawer" placeholder="Search..." autocomplete="off">
                     <button type="submit" class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center">
-                        <img src="images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
+                        <img src="../images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
                     </button>
                 </form>
             </div>

diff --git a/pages/blog-post.html b/pages/blog-post.html
@@ -14,20 +14,20 @@
     <header class="flex h-24 items-center justify-between px-10 mt-6">
         <div class="flex flex-row items-center gap-10 text-base">
             <a href="#">
-                <img src="/images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
+                <img src="../images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
             </a>
         </div>
         <nav class="flex flex-row items-center gap-10">
             <button id="openSearchBarDrawer" class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform">  <!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
-                <img src="/images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
+                <img src="../images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
                 <span class="text-2xl font-medium">Search</span>
             </button>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">News</a>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">About Us</a>
             <div class="relative cursor-pointer hover:scale-105 transition-transform">
                 <div class="flex items-center">
                     <span class="text-2xl font-medium">Projects</span>
-                    <img src="/images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
+                    <img src="../images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
                 </div>
                 <!-- Dropdown projects menu, hidden, toggle visibility with JS -->
                 <div class="absolute hidden mt-2 bg-white">
@@ -39,16 +39,16 @@
                 DONATE
             </button>
             <div class="relative flex w-5 h-5 items-center group" id="language-selector">
-                <img src="/images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
+                <img src="../images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
                 <div class="absolute left-0 w-full bg-white" id="language-options">
                     <a href="#" class="block">
-                        <img src="/images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
                     </a>
                 </div>
             </div>
@@ -63,7 +63,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                     <label for="Search-Drawer" class="sr-only">Search Site</label>
                     <input type="search" class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm" id="Search-Drawer" placeholder="Search..." autocomplete="off">
                     <button type="submit" class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center">
-                        <img src="images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
+                        <img src="../images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
                     </button>
                 </form>
             </div>

diff --git a/pages/blog.html b/pages/blog.html
@@ -19,20 +19,20 @@
     <header class="flex h-24 items-center justify-between px-10 mt-6">
       <div class="flex flex-row items-center gap-10 text-base">
           <a href="#">
-              <img src="/images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
+              <img src="../images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
           </a>
       </div>
       <nav class="flex flex-row items-center gap-10">
           <button id="openSearchBarDrawer" class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform">  <!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
-              <img src="/images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
+              <img src="../images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
               <span class="text-2xl font-medium">Search</span>
           </button>
           <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">News</a>
           <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">About Us</a>
           <div class="relative cursor-pointer hover:scale-105 transition-transform">
               <div class="flex items-center">
                   <span class="text-2xl font-medium">Projects</span>
-                  <img src="/images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
+                  <img src="../images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
               </div>
               <!-- Dropdown projects menu, hidden, toggle visibility with JS -->
               <div class="absolute hidden mt-2 bg-white">
@@ -44,16 +44,16 @@
               DONATE
           </button>
           <div class="relative flex w-5 h-5 items-center group" id="language-selector">
-              <img src="/images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
+              <img src="../images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
               <div class="absolute left-0 w-full bg-white" id="language-options">
                   <a href="#" class="block">
-                      <img src="/images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
+                      <img src="../images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
                   </a>
                   <a href="#" class="block">
-                      <img src="/images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
+                      <img src="../images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
                   </a>
                   <a href="#" class="block">
-                      <img src="/images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
+                      <img src="../images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
                   </a>
               </div>
           </div>
@@ -68,7 +68,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                   <label for="Search-Drawer" class="sr-only">Search Site</label>
                   <input type="search" class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm" id="Search-Drawer" placeholder="Search..." autocomplete="off">
                   <button type="submit" class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center">
-                      <img src="images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
+                      <img src="../images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
                   </button>
               </form>
           </div>

diff --git a/pages/children-specific-article.html b/pages/children-specific-article.html
@@ -17,20 +17,20 @@
     <header class="flex h-24 items-center justify-between px-10 mt-6">
         <div class="flex flex-row items-center gap-10 text-base">
             <a href="#">
-                <img src="/images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
+                <img src="../images/SVGs/headerLogo.svg" aria-label="Header Logo" alt="Header Logo" class="cursor-pointer w-20 h-20">
             </a>
         </div>
         <nav class="flex flex-row items-center gap-10">
             <button id="openSearchBarDrawer" class="flex gap-4 items-center cursor-pointer hover:scale-105 transition-transform">  <!-- JS intention: On click, remove -translate-y-full from section id="search-drawer-from-header", and add translate-y-0 -->
-                <img src="/images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
+                <img src="../images/SVGs/Search.svg" class="w-5 h-5 -mr-1" aria-label="Search Button" alt="Search Button">
                 <span class="text-2xl font-medium">Search</span>
             </button>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">News</a>
             <a href="#" class="text-2xl font-medium cursor-pointer hover:scale-105 transition-transform">About Us</a>
             <div class="relative cursor-pointer hover:scale-105 transition-transform">
                 <div class="flex items-center">
                     <span class="text-2xl font-medium">Projects</span>
-                    <img src="/images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
+                    <img src="../images/SVGs/chevron-down.svg" aria-label="Projects Dropdown Menu" alt="Projects Dropdown Menu" class="ml-3">
                 </div>
                 <!-- Dropdown projects menu, hidden, toggle visibility with JS -->
                 <div class="absolute hidden mt-2 bg-white">
@@ -42,16 +42,16 @@
                 DONATE
             </button>
             <div class="relative flex w-5 h-5 items-center group" id="language-selector">
-                <img src="/images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
+                <img src="../images/SVGs/globe-solid.svg" aria-label="Globe Icon For Language Selection" alt="Language Selection" class="cursor-pointer object-contain h-5 w-5">
                 <div class="absolute left-0 w-full bg-white" id="language-options">
                     <a href="#" class="block">
-                        <img src="/images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/norway.svg" aria-label="Norwegian Flag Language Selection" alt="Norwegian Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/unitedKingdom.svg" aria-label="English Flag Language Selection" alt="English Flag" class="inline h-6 w-8"> 
                     </a>
                     <a href="#" class="block">
-                        <img src="/images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
+                        <img src="../images/SVGs/madagascar.svg" aria-label="Malagasy Flag Language Selection" alt="Malagasy Flag" class="inline h-6 w-8"> 
                     </a>
                 </div>
             </div>
@@ -66,7 +66,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
                     <label for="Search-Drawer" class="sr-only">Search Site</label>
                     <input type="search" class="search-drawer_input flex-grow bg-transparent focus:outline-none p-2 text-sm" id="Search-Drawer" placeholder="Search..." autocomplete="off">
                     <button type="submit" class="search-drawer_submit p-2 text-gray-500 flex items-center justify-center">
-                        <img src="images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
+                        <img src="../images/SVGs/Search.svg" class="w-4 h-4" aria-label="Search Now Button" alt="Search Now Button">
                     </button>
                 </form>
             </div>