152implement responsive (#576)

* Update index.html * Me and christian have made a new footer that is responsive on all the html pages * fixed hrf links in the footer
NoroffFEU · Sep 30, 2024 · c1dc270 · c1dc270
1 parent f214eff
commit c1dc270
Show file tree

Hide file tree

Showing 12 changed files with 1,753 additions and 1,067 deletions.
diff --git a/index.html b/index.html
diff --git a/pages/404.html b/pages/404.html
@@ -11,62 +11,107 @@
   <main>
 
   </main>
-  <!-- Footer -->
-  <footer class="bg-[#363732] text-white p-20 h-auto max-w-full">
-    <a href="../index.html"><img src="/assets/images/SVGs/headerLogo.svg" alt="The logo for MFL" /></a>
-    <!--News and sign up-->
-    <div class="flex justify-between items-start">
-      <div class="flex flex-col items-baseline pt-20">
-        <div class="flex flex-col items-baseline">
-        </div>
-      </div>
-      <!-- Links and button-->
-      <div class="flex flex-col gap-16">
-        <a href="../pages/about-page.html">About Us</a>
-        <a href="../pages/news.html">News</a>
-        <a href="../pages/event.html">Events</a>
-      </div>
-      <div class="flex flex-col gap-16">
-        <a href="../pages/gallery-page.html">Gallery</a>
-        <a href="../pages/our-work.html">Our work</a>
-        <a href="../pages/contact-page.html">Contact Us</a>
-      </div>
-      <div class="flex flex-col">
-        <a class="alt-button uppercase font-sans text-2xl px-8" href="../pages/support-page.html">donate</a>
-
-        <div class="flex flex-col items-center p-2 mt-12">
-          <p class="uppercase">follow us</p>
-          <div class="flex justify-center mt-2">
-            <div class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-2 mr-2">
-              <a href="https://www.facebook.com/musicchangeslivesMadagascar
-                  "><svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
-                  <path fill-rule="evenodd" clip-rule="evenodd"
-                    d="M21.2273 0C23.0348 0 24.5 1.46525 24.5 3.27273V20.7273C24.5 22.5348 23.0348 24 21.2273 24H3.77273C1.96525 24 0.5 22.5348 0.5 20.7273V3.27273C0.5 1.46525 1.96525 0 3.77273 0H21.2273ZM21.2273 2.18182C21.8298 2.18182 22.3182 2.67024 22.3182 3.27273V20.7273C22.3182 21.3298 21.8298 21.8182 21.2273 21.8182H15.7727V14.1817H18.0377C18.5072 14.1817 18.924 13.8813 19.0726 13.4357L19.5559 11.9859C19.7325 11.4561 19.3381 10.909 18.7797 10.909H15.7727V8.72719C15.7727 8.18173 16.3182 7.63628 16.8636 7.63628H19.0455C19.648 7.63628 20.1364 7.14785 20.1364 6.54537V5.79701C20.1364 5.44463 19.9113 5.12869 19.5705 5.03877C18.1405 4.6614 16.8636 4.6614 16.8636 4.6614C14.1364 4.6614 12.5 6.54537 12.5 8.18173V10.909H10.3182C9.71569 10.909 9.22727 11.3974 9.22727 11.9999V13.0908C9.22727 13.6933 9.71568 14.1817 10.3182 14.1817H12.5V21.8182H3.77273C3.17024 21.8182 2.68182 21.3298 2.68182 20.7273V3.27273C2.68182 2.67024 3.17024 2.18182 3.77273 2.18182H21.2273Z"
-                    fill="white" />
-                </svg></a>
+      <!-- Footer -->
+      <footer class="bg-[#363732] text-white p-2 h-auto max-w-full pt-6 px-4">
+        <div class="flex justify-between">
+          <div class="flex flex-col justify-between gap-10 md:flex-row xl:ml-10">
+            <a href="../index.html">
+              <img
+                src="/assets/images/SVGs/headerLogo.svg"
+                alt="The logo for MFL"
+                class="w-[170px] md:w-[200px] md:-mt-10 pt-20 xl:w-[350px]"
+              />
+            </a>
+            <!--News and sign up-->
+            <!-- Links and button-->
+            <div
+              class="flex flex-col md:flex-row md:gap-10 md:text-sm md:ml-6 md:mt-14 lg:text-xl lg:mt-10 lg:gap-14 lg:ml-28 mt-4 xl:text-3xl xl:ml-40 xl:mt-28"
+            >
+              <div class="flex flex-col pl-4 gap-3 md:gap-5 lg:gap-10">
+                <a href="../pages/about-page.html">About Us</a>
+                <a href="../pages/news.html">News</a>
+                <a href="../pages/event.html">Events</a>
+              </div>
+              <div class="flex flex-col pl-4 gap-3 md:gap-5 lg:gap-10">
+                <a href="../pages/gallery-page.html">Gallery</a>
+                <a href="../pages/our-work.html">Our work</a>
+                <a href="../pages/contact-page.html">Contact Us</a>
+              </div>
             </div>
-            <div class="border-2 border-solid border-sunset-red rounded-full p-2 bg-sunset-red">
-              <a href="https://www.instagram.com/musikkforandrerliv/
-                ">
-                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
-                  <path fill-rule="evenodd" clip-rule="evenodd"
+            <div>
+              <!-- button for sm screen-->
+              <a
+                class="alt-button uppercase font-sans text-2xl px-10 md:hidden"
+                href="../pages/support-page.html"
+                >donate</a
+              >
+              <!-- button for sm screen-->
+            </div>
+          </div>
+          <div>
+            <!-- button for md screen-->
+            <a
+              class="alt-button uppercase font-sans text-2xl px-10 hidden md:block md:mr-4 md:my-10 lg:mr-4 xl:mr-24 xl:text-3xl xl:mt-28"
+              href="../pages/support-page.html"
+              >donate</a
+            >
+            <!-- button for md screen-->
+            <p
+              class="uppercase font-bold mt-24 text-2xl md:ml-4 lg:mt-9 xl:ml-8 xl:mt-10"
+            >
+              follow us
+            </p>
+            <div
+              class="flex gap-2 mt-4 w-14 justify-between lg:ml-4 lg:mt-0 lg:gap-0 lg:pl-4"
+            >
+              <a
+                href="https://www.facebook.com/musicchangeslivesMadagascar"
+                class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-4 mr-2 xl:ml-4"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M21.2273 0C23.0348 0 24.5 1.46525 24.5 3.27273V20.7273C24.5 22.5348 23.0348 24 21.2273 24H3.77273C1.96525 24 0.5 22.5348 0.5 20.7273V3.27273C0.5 1.46525 1.96525 0 3.77273 0H21.2273ZM21.2273 2.18182C21.8298 2.18182 22.3182 2.67024 22.3182 3.27273V20.7273C22.3182 21.3298 21.8298 21.8182 21.2273 21.8182H15.7727V14.1817H18.0377C18.5072 14.1817 18.924 13.8813 19.0726 13.4357L19.5559 11.9859C19.7325 11.4561 19.3381 10.909 18.7797 10.909H15.7727V8.72719C15.7727 8.18173 16.3182 7.63628 16.8636 7.63628H19.0455C19.648 7.63628 20.1364 7.14785 20.1364 6.54537V5.79701C20.1364 5.44463 19.9113 5.12869 19.5705 5.03877C18.1405 4.6614 16.8636 4.6614 16.8636 4.6614C14.1364 4.6614 12.5 6.54537 12.5 8.18173V10.909H10.3182C9.71569 10.909 9.22727 11.3974 9.22727 11.9999V13.0908C9.22727 13.6933 9.71568 14.1817 10.3182 14.1817H12.5V21.8182H3.77273C3.17024 21.8182 2.68182 21.3298 2.68182 20.7273V3.27273C2.68182 2.67024 3.17024 2.18182 3.77273 2.18182H21.2273Z"
+                    fill="white"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://www.instagram.com/musikkforandrerliv/"
+                class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-4 mr-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
                     d="M0.5 4.8C0.5 2.14903 2.64903 0 5.3 0H19.7C22.3509 0 24.5 2.14903 24.5 4.8V19.2C24.5 21.8509 22.3509 24 19.7 24H5.3C2.64903 24 0.5 21.8509 0.5 19.2V4.8ZM5.3 2.4C3.97452 2.4 2.9 3.47452 2.9 4.8V19.2C2.9 20.5255 3.97452 21.6 5.3 21.6H19.7C21.0255 21.6 22.1 20.5255 22.1 19.2V4.8C22.1 3.47452 21.0255 2.4 19.7 2.4H5.3ZM12.5 8.4C10.5117 8.4 8.9 10.0117 8.9 12C8.9 13.9883 10.5117 15.6 12.5 15.6C14.4883 15.6 16.1 13.9883 16.1 12C16.1 10.0117 14.4883 8.4 12.5 8.4ZM6.5 12C6.5 8.6863 9.1863 6 12.5 6C15.8137 6 18.5 8.6863 18.5 12C18.5 15.3137 15.8137 18 12.5 18C9.1863 18 6.5 15.3137 6.5 12ZM19.1 7.2C20.0941 7.2 20.9 6.39412 20.9 5.4C20.9 4.40588 20.0941 3.6 19.1 3.6C18.1059 3.6 17.3 4.40588 17.3 5.4C17.3 6.39412 18.1059 7.2 19.1 7.2Z"
-                    fill="white" />
+                    fill="white"
+                  />
                 </svg>
               </a>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-    <!--PP, TC and ©-->
-    <div class="flex justify-center mt-32">
-      <a class="underline pr-6 font-semibold" href="../pages/privacy-policy.html">Privacy Policy</a>
-      <a class="underline pl-6 font-semibold" href="../pages/terms-and-conditions.html">Terms and Conditions</a>
-    </div>
-    <div class="flex justify-center p-6 font-se">&copy;Musikkforandrerliv</div>
-  </footer>
-  <!--Footer end-->
-</body>
-
-</html>
+        <!--PP, TC and ©-->
+        <div class="flex font-semibold underline justify-center gap-x-12 mt-32">
+          <a href="../pages/privacy-policy.html">Privacy Policy</a>
+          <a href="../pages/terms-and-conditions.html">Terms and Conditions</a>
+        </div>
+        <div class="flex justify-center p-6">&copy;Musikkforandrerliv</div>
+      </footer>
+      <!--Footer end-->
+    </body>
+  </html>
diff --git a/pages/about-page.html b/pages/about-page.html
@@ -650,102 +650,107 @@ <h5 class="text-2xl font-semibold mb-6">
 
       <!-- Section 8 end -->
     </main>
-    <!-- Footer -->
-    <footer class="bg-[#363732] text-white p-20 h-auto max-w-full">
-      <a href="../index.html"
-        ><img src="/assets/images/SVGs/headerLogo.svg" alt="The logo for MFL"
-      /></a>
-      <!--News and sign up-->
-      <div class="flex justify-between items-start">
-        <div class="flex flex-col items-baseline pt-20">
-          <div class="flex flex-col items-baseline"></div>
-        </div>
-        <!-- Links and button-->
-        <div class="flex flex-col gap-16">
-          <a href="../pages/about-page.html">About Us</a>
-          <a href="../pages/news.html">News</a>
-          <a href="../pages/event.html">Events</a>
-        </div>
-        <div class="flex flex-col gap-16">
-          <a href="../pages/gallery-page.html">Gallery</a>
-          <a href="../pages/our-work.html">Our work</a>
-          <a href="../pages/contact-page.html">Contact Us</a>
-        </div>
-        <div class="flex flex-col">
-          <a
-            class="alt-button uppercase font-sans text-2xl px-8"
-            href="../pages/support-page.html"
-            >donate</a
-          >
-
-          <div class="flex flex-col items-center p-2 mt-12">
-            <p class="uppercase">follow us</p>
-            <div class="flex justify-center mt-2">
-              <div
-                class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-2 mr-2"
-              >
-                <a
-                  href="https://www.facebook.com/musicchangeslivesMadagascar
-                  "
-                  ><svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="25"
-                    height="24"
-                    viewBox="0 0 25 24"
-                    fill="none"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M21.2273 0C23.0348 0 24.5 1.46525 24.5 3.27273V20.7273C24.5 22.5348 23.0348 24 21.2273 24H3.77273C1.96525 24 0.5 22.5348 0.5 20.7273V3.27273C0.5 1.46525 1.96525 0 3.77273 0H21.2273ZM21.2273 2.18182C21.8298 2.18182 22.3182 2.67024 22.3182 3.27273V20.7273C22.3182 21.3298 21.8298 21.8182 21.2273 21.8182H15.7727V14.1817H18.0377C18.5072 14.1817 18.924 13.8813 19.0726 13.4357L19.5559 11.9859C19.7325 11.4561 19.3381 10.909 18.7797 10.909H15.7727V8.72719C15.7727 8.18173 16.3182 7.63628 16.8636 7.63628H19.0455C19.648 7.63628 20.1364 7.14785 20.1364 6.54537V5.79701C20.1364 5.44463 19.9113 5.12869 19.5705 5.03877C18.1405 4.6614 16.8636 4.6614 16.8636 4.6614C14.1364 4.6614 12.5 6.54537 12.5 8.18173V10.909H10.3182C9.71569 10.909 9.22727 11.3974 9.22727 11.9999V13.0908C9.22727 13.6933 9.71568 14.1817 10.3182 14.1817H12.5V21.8182H3.77273C3.17024 21.8182 2.68182 21.3298 2.68182 20.7273V3.27273C2.68182 2.67024 3.17024 2.18182 3.77273 2.18182H21.2273Z"
-                      fill="white"
-                    /></svg
-                ></a>
+        <!-- Footer -->
+      <footer class="bg-[#363732] text-white p-2 h-auto max-w-full pt-6 px-4">
+        <div class="flex justify-between">
+          <div class="flex flex-col justify-between gap-10 md:flex-row xl:ml-10">
+            <a href="../index.html">
+              <img
+                src="/assets/images/SVGs/headerLogo.svg"
+                alt="The logo for MFL"
+                class="w-[170px] md:w-[200px] md:-mt-10 pt-20 xl:w-[350px]"
+              />
+            </a>
+            <!--News and sign up-->
+            <!-- Links and button-->
+            <div
+              class="flex flex-col md:flex-row md:gap-10 md:text-sm md:ml-6 md:mt-14 lg:text-xl lg:mt-10 lg:gap-14 lg:ml-28 mt-4 xl:text-3xl xl:ml-40 xl:mt-28"
+            >
+              <div class="flex flex-col pl-4 gap-3 md:gap-5 lg:gap-10">
+                <a href="../pages/about-page.html">About Us</a>
+                <a href="../pages/news.html">News</a>
+                <a href="../pages/event.html">Events</a>
               </div>
-              <div
-                class="border-2 border-solid border-sunset-red rounded-full p-2 bg-sunset-red"
+              <div class="flex flex-col pl-4 gap-3 md:gap-5 lg:gap-10">
+                <a href="../pages/gallery-page.html">Gallery</a>
+                <a href="../pages/our-work.html">Our work</a>
+                <a href="../pages/contact-page.html">Contact Us</a>
+              </div>
+            </div>
+            <div>
+              <!-- button for sm screen-->
+              <a
+                class="alt-button uppercase font-sans text-2xl px-10 md:hidden"
+                href="../pages/support-page.html"
+                >donate</a
               >
-                <a
-                  href="https://www.instagram.com/musikkforandrerliv/
-                "
+              <!-- button for sm screen-->
+            </div>
+          </div>
+          <div>
+            <!-- button for md screen-->
+            <a
+              class="alt-button uppercase font-sans text-2xl px-10 hidden md:block md:mr-4 md:my-10 lg:mr-4 xl:mr-24 xl:text-3xl xl:mt-28"
+              href="../pages/support-page.html"
+              >donate</a
+            >
+            <!-- button for md screen-->
+            <p
+              class="uppercase font-bold mt-24 text-2xl md:ml-4 lg:mt-9 xl:ml-8 xl:mt-10"
+            >
+              follow us
+            </p>
+            <div
+              class="flex gap-2 mt-4 w-14 justify-between lg:ml-4 lg:mt-0 lg:gap-0 lg:pl-4"
+            >
+              <a
+                href="https://www.facebook.com/musicchangeslivesMadagascar"
+                class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-4 mr-2 xl:ml-4"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="25"
-                    height="24"
-                    viewBox="0 0 25 24"
-                    fill="none"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M0.5 4.8C0.5 2.14903 2.64903 0 5.3 0H19.7C22.3509 0 24.5 2.14903 24.5 4.8V19.2C24.5 21.8509 22.3509 24 19.7 24H5.3C2.64903 24 0.5 21.8509 0.5 19.2V4.8ZM5.3 2.4C3.97452 2.4 2.9 3.47452 2.9 4.8V19.2C2.9 20.5255 3.97452 21.6 5.3 21.6H19.7C21.0255 21.6 22.1 20.5255 22.1 19.2V4.8C22.1 3.47452 21.0255 2.4 19.7 2.4H5.3ZM12.5 8.4C10.5117 8.4 8.9 10.0117 8.9 12C8.9 13.9883 10.5117 15.6 12.5 15.6C14.4883 15.6 16.1 13.9883 16.1 12C16.1 10.0117 14.4883 8.4 12.5 8.4ZM6.5 12C6.5 8.6863 9.1863 6 12.5 6C15.8137 6 18.5 8.6863 18.5 12C18.5 15.3137 15.8137 18 12.5 18C9.1863 18 6.5 15.3137 6.5 12ZM19.1 7.2C20.0941 7.2 20.9 6.39412 20.9 5.4C20.9 4.40588 20.0941 3.6 19.1 3.6C18.1059 3.6 17.3 4.40588 17.3 5.4C17.3 6.39412 18.1059 7.2 19.1 7.2Z"
-                      fill="white"
-                    />
-                  </svg>
-                </a>
-              </div>
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M21.2273 0C23.0348 0 24.5 1.46525 24.5 3.27273V20.7273C24.5 22.5348 23.0348 24 21.2273 24H3.77273C1.96525 24 0.5 22.5348 0.5 20.7273V3.27273C0.5 1.46525 1.96525 0 3.77273 0H21.2273ZM21.2273 2.18182C21.8298 2.18182 22.3182 2.67024 22.3182 3.27273V20.7273C22.3182 21.3298 21.8298 21.8182 21.2273 21.8182H15.7727V14.1817H18.0377C18.5072 14.1817 18.924 13.8813 19.0726 13.4357L19.5559 11.9859C19.7325 11.4561 19.3381 10.909 18.7797 10.909H15.7727V8.72719C15.7727 8.18173 16.3182 7.63628 16.8636 7.63628H19.0455C19.648 7.63628 20.1364 7.14785 20.1364 6.54537V5.79701C20.1364 5.44463 19.9113 5.12869 19.5705 5.03877C18.1405 4.6614 16.8636 4.6614 16.8636 4.6614C14.1364 4.6614 12.5 6.54537 12.5 8.18173V10.909H10.3182C9.71569 10.909 9.22727 11.3974 9.22727 11.9999V13.0908C9.22727 13.6933 9.71568 14.1817 10.3182 14.1817H12.5V21.8182H3.77273C3.17024 21.8182 2.68182 21.3298 2.68182 20.7273V3.27273C2.68182 2.67024 3.17024 2.18182 3.77273 2.18182H21.2273Z"
+                    fill="white"
+                  />
+                </svg>
+              </a>
+              <a
+                href="https://www.instagram.com/musikkforandrerliv/"
+                class="border-2 border-solid border-sunset-red bg-sunset-red rounded-full p-4 mr-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 25 24"
+                  fill="none"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M0.5 4.8C0.5 2.14903 2.64903 0 5.3 0H19.7C22.3509 0 24.5 2.14903 24.5 4.8V19.2C24.5 21.8509 22.3509 24 19.7 24H5.3C2.64903 24 0.5 21.8509 0.5 19.2V4.8ZM5.3 2.4C3.97452 2.4 2.9 3.47452 2.9 4.8V19.2C2.9 20.5255 3.97452 21.6 5.3 21.6H19.7C21.0255 21.6 22.1 20.5255 22.1 19.2V4.8C22.1 3.47452 21.0255 2.4 19.7 2.4H5.3ZM12.5 8.4C10.5117 8.4 8.9 10.0117 8.9 12C8.9 13.9883 10.5117 15.6 12.5 15.6C14.4883 15.6 16.1 13.9883 16.1 12C16.1 10.0117 14.4883 8.4 12.5 8.4ZM6.5 12C6.5 8.6863 9.1863 6 12.5 6C15.8137 6 18.5 8.6863 18.5 12C18.5 15.3137 15.8137 18 12.5 18C9.1863 18 6.5 15.3137 6.5 12ZM19.1 7.2C20.0941 7.2 20.9 6.39412 20.9 5.4C20.9 4.40588 20.0941 3.6 19.1 3.6C18.1059 3.6 17.3 4.40588 17.3 5.4C17.3 6.39412 18.1059 7.2 19.1 7.2Z"
+                    fill="white"
+                  />
+                </svg>
+              </a>
             </div>
           </div>
         </div>
-      </div>
-      <!--PP, TC and ©-->
-      <div class="flex justify-center mt-32">
-        <a
-          class="underline pr-6 font-semibold"
-          href="../pages/privacy-policy.html"
-          >Privacy Policy</a
-        >
-        <a
-          class="underline pl-6 font-semibold"
-          href="../pages/terms-and-conditions.html"
-          >Terms and Conditions</a
-        >
-      </div>
-      <div class="flex justify-center p-6 font-se">
-        &copy;Musikkforandrerliv
-      </div>
-    </footer>
-    <!--Footer end-->
-  </body>
-</html>
+        <!--PP, TC and ©-->
+        <div class="flex font-semibold underline justify-center gap-x-12 mt-32">
+          <a href="../pages/privacy-policy.html">Privacy Policy</a>
+          <a href="../pages/terms-and-conditions.html">Terms and Conditions</a>
+        </div>
+        <div class="flex justify-center p-6">&copy;Musikkforandrerliv</div>
+      </footer>
+      <!--Footer end-->
+    </body>
+  </html>