modified media page

Nathius262 · Jul 17, 2024 · a28d3f5 · a28d3f5
1 parent 89ff557
commit a28d3f5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git 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
@@ -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
@@ -285,20 +285,28 @@ 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;
     color: var(--yellow);
 }
 
 .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);
+    }
+
 }