From 01cc9a683bb81e52d24e51ee06d506b34a484a9a Mon Sep 17 00:00:00 2001
From: Iseost <94354710+Iseost@users.noreply.github.com>
Date: Thu, 11 Apr 2024 17:42:19 +0200
Subject: [PATCH] Update index.html (#435)

Updated section 3 on the homepage
---
 index.html | 159 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 99 insertions(+), 60 deletions(-)

diff --git a/index.html b/index.html
index 9fda640..5e7927c 100644
--- a/index.html
+++ b/index.html
@@ -228,71 +228,105 @@ <h2 class="text-center text-6xl mb-6">History of MMF</h2>
       </div>
       <!--End Main Content Section 2-->
       <!-- Main Content Section 3 -->
-      <div class="flex flex-col items-center my-[100px]">
-        <div class="max-w-[1200px] flex flex-col items-center">
+      <section class="flex flex-col items-center justify-center my-[100px]">
+        <h2 class="font-justAnotherHand text-[110px] mb-7">Our staff</h2>
+        <!--Card 1-->
+        <div
+          class="flex w-[960px] h-60 items-start gap-2 flex-shrink-0 bg-[#F8EED1] rounded-lg overflow-hidden"
+        >
           <div
-            class="flex flex-col items-center max-w-[530px] text-center pb-16"
-          >
-            <h2 class="pb-4 text-6xl">Our Staff</h2>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Suspendisse tincidunt sagittis eros. Quisque quis euismod lorem.
+            class="flex items-center justify-center w-[340px] h-[340px] bg-cover bg-bottom rounded-l-lg"
+            style="
+              background-image: url('./assets/placeholder-images/IMG_7511.webp');
+            "
+          ></div>
+          <div class="w-[636px] p-6 flex flex-col justify-center gap-2">
+            <p class="font-sans text-base uppercase">Violin Teacher</p>
+            <p class="font-sans text-[32px] font-semibold">
+              Eline Rodvelt Hansen
+            </p>
+            <p class="font-sans text-lg">
+              Eline is a violinist and violin teacher, educated at the Grieg
+              Academy in Bergen. Originally from Sandnes in Rogaland, she has
+              traveled extensively around the world, playing with musicians on
+              several continents and in various genres.
             </p>
           </div>
-          <div class="flex justify-evenly">
-            <div class="max-w-[368px] max-h-[439px] flex flex-col items-center">
-              <div class="max-w-[270px] max-h-[270px] overflow-hidden">
-                <img
-                  src="/assets/placeholder-images/IMG_3078.webp"
-                  alt="Picture of an employee"
-                />
-              </div>
-              <div class="text-center">
-                <h3 class="font-bold">Full name</h3>
-                <p class="mb-4">Job title</p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Suspendisse varius enim in eros elemen tum tristique.
-                </p>
-              </div>
-            </div>
-            <div class="max-w-[368px] max-h-[439px] flex flex-col items-center">
-              <div class="max-w-[270px] max-h-[270px] overflow-hidden">
-                <img
-                  src="/assets/placeholder-images/IMG_7511.webp"
-                  alt="Picture of an employee"
-                />
-              </div>
-              <div class="text-center">
-                <h3 class="font-bold">Full name</h3>
-                <p class="mb-4">Job title</p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Suspendisse varius enim in eros elemen tum tristique.
-                </p>
-              </div>
-            </div>
-            <div class="max-w-[368px] max-h-[439px] flex flex-col items-center">
-              <div class="max-w-[270px] max-h-[270px] overflow-hidden">
-                <img
-                  class="object-cover h-[270px]"
-                  height="270px"
-                  src="/assets/placeholder-images/IMG_7542.webp"
-                  alt="Picture of an employee"
-                />
-              </div>
-              <div class="text-center">
-                <h3 class="font-bold">Full name</h3>
-                <p class="mb-4">Job title</p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Suspendisse varius enim in eros elemen tum tristique.
-                </p>
-              </div>
-            </div>
+        </div>
+        <!--Card 1 end-->
+        <!--Card 2-->
+        <div
+          class="flex w-[960px] h-60 items-start gap-2 flex-shrink-0 bg-[#F8EED1] rounded-lg overflow-hidden my-20"
+        >
+          <div
+            class="flex items-center pb-6 bg-bottom bg-cover bg-no-repeat w-[340px] h-[340px] rounded-l-lg"
+            style="
+              background-image: url('./assets/placeholder-images/IMG_3078.webp');
+            "
+          ></div>
+          <div class="w-[636px] p-6 flex flex-col justify-center gap-1">
+            <p class="font-sans text-base uppercase">Piano Teacher</p>
+            <p class="font-sans text-[32px] font-semibold">
+              Dina Rasalina Andriamanalina
+            </p>
+            <p class="flex-1 h-[167px] font-sans text-lg">
+              Dina co-founded MMF with his wife, Eline Rodvelt Hansen, in 2021.
+              Originally from Antsirabe, Madagascar, Dina has rhythm and music
+              in his blood, having played many instruments since childhood.
+              However, it was eventually the piano that became his dominant
+              instrument.
+            </p>
           </div>
         </div>
-      </div>
+        <!--Card 2 end-->
+        <!--Card 3-->
+        <div
+          class="flex w-[960px] h-60 items-start gap-2 flex-shrink-0 bg-[#F8EED1] rounded-lg overflow-hidden"
+        >
+          <div
+            class="flex items-center justify-center bg-bottom bg-cover bg-no-repeat w-[340px] h-[340px] rounded-l-lg"
+            style="
+              background-image: url('./assets/placeholder-images/IMG_7544.webp');
+            "
+          ></div>
+          <div class="w-[636px] p-6 flex flex-col justify-center gap-1">
+            <p class="font-sans text-base uppercase">Nurse</p>
+            <p class="font-sans text-[32px] font-semibold">
+              Karoline Hartvigsen
+            </p>
+            <p class="h-[123px] flex-1 font-sans text-lg">
+              Karoline completed her nursing education in 2017 and now works
+              full-time at a cancer ward at Radiumhospitalet in Oslo. Before her
+              bachelor's studies, she completed a one-year study in
+              intercultural understanding at NLA University College Bergen.
+            </p>
+          </div>
+        </div>
+        <!--Card 3 end-->
+        <!--Card 4-->
+        <div
+          class="flex w-[960px] h-60 items-start gap-2 flex-shrink-0 bg-[#F8EED1] rounded-lg overflow-hidden mt-20"
+        >
+          <div
+            class="flex items-center bg-bottom bg-cover bg-no-repeat w-[340px] h-[340px] rounded-l-lg"
+            style="
+              background-image: url('./assets/placeholder-images/IMG_3597.webp');
+            "
+          ></div>
+          <div class="w-[636px] p-6 flex flex-col justify-center gap-1">
+            <p class="font-sans text-base uppercase">Nurse</p>
+            <p class="font-sans text-[32px] font-semibold">Thea Harbo</p>
+            <p class="flex-1 font-sans text-lg">
+              Thea completed her bachelor's degree in nursing in 2017 at
+              Diakonova University College in Oslo. She lived there for 9 years
+              before moving back to her hometown, Stavanger. She has work
+              experience from home nursing care, several years in a pediatric
+              ward at Rikshospitalet.
+            </p>
+          </div>
+        </div>
+        <!--Card 4 end-->
+      </section>
       <!-- End Main Content Section 3-->
       <!-- Main Content Section 4 -->
       <section
@@ -612,7 +646,9 @@ <h3 class="text-2xl font-semibold mb-6">
         <div class="flex flex-col">
           <a
             class="alt-button uppercase font-sans text-2xl px-8"
+
             href="./pages/support-page.html"
+
             >donate</a
           >
 
@@ -671,12 +707,15 @@ <h3 class="text-2xl font-semibold mb-6">
       <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>