Created HTML and style for home page section 4 (#186)

Co-authored-by: Eli Nygård <142724042+EliNygard@users.noreply.github.com>
NoroffFEU · Mar 21, 2024 · 54634a5 · 54634a5
1 parent d951d04
commit 54634a5
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/css/styles.css b/css/styles.css
@@ -649,6 +649,10 @@ video {
   z-index: 50;
 }
 
+.m-28 {
+  margin: 7rem;
+}
+
 .mx-52 {
   margin-left: 13rem;
   margin-right: 13rem;
@@ -659,6 +663,11 @@ video {
   margin-right: auto;
 }
 
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .my-24 {
   margin-top: 6rem;
   margin-bottom: 6rem;
@@ -668,6 +677,7 @@ video {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
+
 .my-\[100px\] {
   margin-top: 100px;
   margin-bottom: 100px;
@@ -692,6 +702,10 @@ video {
   margin-right: -0.25rem;
 }
 
+.mb-40 {
+  margin-bottom: 10rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -888,6 +902,10 @@ video {
   height: 49px;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .max-h-\[270px\] {
   max-height: 270px;
 }
@@ -928,6 +946,14 @@ video {
   width: 100%;
 }
 
+.max-w-\[560px\] {
+  max-width: 560px;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-\[1200px\] {
   max-width: 1200px;
 }
@@ -981,6 +1007,7 @@ video {
 .resize {
   resize: both;
 }
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1184,6 +1211,10 @@ video {
   gap: 2.5rem;
 }
 
+.gap-20 {
+  gap: 5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1361,6 +1392,11 @@ video {
   line-height: 1.5rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;

diff --git a/index.html b/index.html
@@ -242,6 +242,46 @@ <h2 class="text-6xl text-white">Our work</h2>
         </div>
       </div>
       <!-- End Main Content Section 3-->
+      <!-- Main Content Section 4 -->
+      <section class="home-section4">
+    <div class="flex justify-center items-center gap-20 m-28 mb-40">
+        <div id="home-section4-imgContainer" class="max-w-[560px] h-auto">
+            <img src="assets/placeholder-images/IMG_1457.webp" aria-label="Girl playing violin" alt="Girl playing violin">
+        </div>
+        <div class="home-section4-heading-text-button">
+            <h3 id="home-section4-heading" class="text-6xl">Meet the children</h3>
+            <p class="text-lg my-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. 
+                Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
+            </p>
+            <button class="reg-button cursor-pointer uppercase my-5">Read more</button>
+        </div>
+    </div>
+    <div class="flex justify-center items-center gap-20 m-28 mb-40">
+        <div class="home-section4-heading-text-button">
+            <h3 id="home-section4-heading" class="text-6xl">Support us</h3>
+            <p class="text-lg my-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. 
+                Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
+            </p>
+            <button class="reg-button cursor-pointer uppercase my-5">Donate</button>
+        </div>
+        <div id="home-section4-imgContainer" class="max-w-[560px] h-auto">
+            <img src="assets/placeholder-images/IMG_5351.webp" aria-label="Small chairs with books and toys" alt="Small chairs with books and toys">
+        </div>
+    </div>
+    <div class="flex justify-center items-center gap-20 m-28 mb-40">
+        <div id="home-section4-imgContainer" class="max-w-[560px] h-auto">
+            <img src="assets/placeholder-images/IMG_3078.webp" aria-label="Man playing piano and smiling happily" alt="Man playing piano and smiling happily">
+        </div>
+        <div class="home-section4-heading-text-button">
+            <h3 id="home-section4-heading" class="text-6xl">Volunteer</h3>
+            <p class="text-lg my-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. 
+                Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
+            </p>
+            <button class="reg-button cursor-pointer uppercase my-5">Apply</button>
+        </div>
+    </div>
+</section>
+      <!-- End Main Content Section 4-->
     </main>
   </body>
-</html>
+</html>