From a28d3f546e6c4dc3fba251d10e9e7222951cd43c Mon Sep 17 00:00:00 2001
From: nathius262 <egbodonathaniel@yahoo.com>
Date: Wed, 17 Jul 2024 03:09:07 +0100
Subject: [PATCH] modified media page

---
 index.html           |  2 +-
 media.html           | 16 ++++++++--------
 static/css/style.css | 32 +++++++++++++++++++++++++++++---
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index b83ba96..7dc0342 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
                     <div class="container">
                         <div class="row">
                             <div class="col-md-8">
-                                <div class="d-flex mx-auto">
+                                <div class="d-flex mx-auto position-relative">
                                     <div class="year">2024</div>
                                     <div class="text_year">Our Year<span class="the">of The</span></div>
                                     
diff --git a/media.html b/media.html
index 2b62959..9f579fc 100644
--- a/media.html
+++ b/media.html
@@ -46,25 +46,25 @@
             <!--=========MAIN BEGIN===========-->
             <main>
                 <!---=========INTRO BEGIN========-->
-                <section class="intro mb-0 ft-upper" style="background: url(static/img/media_bg.jfif); background-size:cover;background-repeat:no-repeat;">
-                    <div class="container" >
-                        <div class="row justify-content-center align-items-end">
-                            <div class="col-md-8 justify-content-center" style="position: relative;">
+                <section class="intro mb-0 ft-upper position-relative" style="background: url(static/img/media_bg.jfif); background-size: cover; background-repeat: no-repeat; height: 100vh; display: flex; align-items: flex-end;">
+                    <div class="media-top" >
+                        <div class="row justify-content-center">
+                            <div class="col-md-8 justify-content-center" >
                                 <div class="d-grid justify-content-center latest_media">
                                     <h4 class="text-center fs-6 fw-bold">Latest Sermon</h4>
-                                    <h2 class="text-center" class="fw-bold h1">A Call To Prayer</h2>
+                                    <h2 class="text-center">A Call To Prayer</h2>
                                     <div class="d-flex justify-content-center">
-                                        <img src="static/img/icon/download.png" width="360" alt="download">
+                                        <img src="static/img/icon/download.png" width="200" alt="download">
                                     </div>
                                 </div>
                             </div>
                         </div>
+                        
                     </div>
-
                     <div class="ellipse_media"></div>
-                    
                 </section>
                 
+                
                 <!---=========INTRO END========-->
 
 
diff --git a/static/css/style.css b/static/css/style.css
index 5ddc0f3..a401c82 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -285,10 +285,18 @@ a{
 }
 
 
+.media-top{
+    position: absolute;
+    width: 100%; 
+    height: 100%; 
+    top: 300px; 
+    height: 544px; 
+}
+
 .latest_media h4{
     font-family: Nexa-Bold;
     font-size: 24px;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 30.77px;
     letter-spacing: 0.91em;
     text-align: left;
@@ -296,9 +304,9 @@ a{
 }
 
 .latest_media h2{
-    font-family: Trajan Pro 3;
+    font-family: 'Trajan Pro 3' !important;
     font-size: 50px;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 76.8px;
     text-align: left;
 
@@ -568,4 +576,22 @@ MEDIA QUERY  @ screen size below 438
         line-height: 160px;
     }
 
+    .media-top{
+        top: calc(300px * .99); 
+    }
+    
+    .latest_media h4{
+        font-size: calc(24px * .7);
+        letter-spacing: 0.1em;
+    }
+    
+    .latest_media h2{
+        font-size: calc(50px * .7);
+    
+    }
+
+    .latest_media img{
+        width: calc(200px * .8);
+    }
+
 }
\ No newline at end of file