modified zoe_record.html

Nathius262 · Jul 10, 2024 · ed902a9 · ed902a9
1 parent 01f1254
commit ed902a9
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 11 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -326,6 +326,58 @@ a{
     right: 0 !important;
 }
 
+.relative-container {
+    position: relative;
+    background: var(--bg-blue-transparent);
+    height: 300px;
+    width: 80vw;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.relative-container .container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.relative-container .zbg1 {
+    top: 10%;
+    left: 0;
+    width:300px;
+    height:auto;
+}
+
+.relative-container .zbg2 {
+    z-index: 999;
+    top: 60%;
+    right: 0;
+    width:300px;
+    height:auto;
+}
+
+.relative-container .zbg3 {
+    top: 10%;
+    left: 30vw;
+    width:300px;
+    height:auto;
+}
+
+.relative-container .zbg4 {
+    top: 10%;
+    left: 50vw;
+    width:300px;
+    height:auto;
+}
+
+.relative-container img {
+    width: 100%;
+    height: 100%;
+    object-fit:fill;
+}
+
+
 .department-bg-bottom{
     position: absolute;
     z-index: -3;
@@ -375,8 +427,27 @@ MEDIA QUERY @ screen size below 768px
 **********
 **********/
 
-@media (min-width: 768px) {
+@media (max-width: 768px) {
 
+    .relative-container .zbg1 {
+        width:250px;
+        height:auto;
+    }
+
+    .relative-container .zbg2 {
+        width:250px;
+        height:auto;
+    }
+
+    .relative-container .zbg3 {
+        width:250px;
+        height:auto;
+    }
+
+    .relative-container .zbg4 {
+        width:250px;
+        height:auto;
+    }
 }
 
 /**********
@@ -406,6 +477,7 @@ MEDIA QUERY @ screen size below 632
     .about .about-bg-text{       
         font-size: 180px;
     }
+
 
 }
 
@@ -439,4 +511,24 @@ MEDIA QUERY  @ screen size below 438
         font-size: 100px;
         line-height: 160px;
     }
+
+    .relative-container .zbg1 {
+        width:230px;
+        height:auto;
+    }
+
+    .relative-container .zbg2 {
+        width:230px;
+        height:auto;
+    }
+
+    .relative-container .zbg3 {
+        width:230px;
+        height:auto;
+    }
+
+    .relative-container .zbg4 {
+        width:230px;
+        height:auto;
+    }
 }
diff --git a/static/img/zz1.jfif b/static/img/zz1.jfif
diff --git a/static/img/zz2.jfif b/static/img/zz2.jfif
diff --git a/static/img/zz3.jfif b/static/img/zz3.jfif
diff --git a/static/img/zz4.jfif b/static/img/zz4.jfif
diff --git a/zoe_records.html b/zoe_records.html
@@ -48,16 +48,17 @@
                 <!---=========INTRO BEGIN========-->
                 <section class="mt-5 pt-5 mb-0 ft-upper">
                     <div class="container mt-5" >
-                        <div class="row justify-content-center align-items-end">
-                            <div class="col-md-8 justify-content-center rounded-4" style="position: relative;background:var( --bg-blue-transparent);height: 300px;">
+                        <div class="row justify-content-center align-items-end container">
+                            <div class="col-md-8 justify-content-center container rounded-4 relative-container">
                                 <div class="row justify-content-center latest_media">
-                                    <div class="col-sm-4 container zbg1"><img  width="100%" src="static/img/z1.jfif" alt=""></div>
-                                    <div class="col-sm-5 containerzbg2"><img  width="100%" src="static/img/z4.jfif" alt=""></div>
-                                    <div class="col-sm-4 container zbg3"><img  width="100%" src="static/img/z2.jfif" alt=""></div>
-                                    <div class="col-sm-4 container zbg4"><img  width="100%" src="static/img/z3.jfif" alt=""></div>
+                                    <div class="col-sm-4 container zbg1"><img src="static/img/zz2.jfif" alt=""></div>
+                                    <div class="col-sm-5 container zbg2"><img src="static/img/zz1.jfif" alt=""></div>
+                                    <div class="col-sm-4 container zbg3"><img src="static/img/zz3.jfif" alt=""></div>
+                                    <div class="col-sm-4 container zbg4"><img src="static/img/zz4.jfif" alt=""></div>
                                 </div>
                             </div>
                         </div>
+
                     </div>
 
                     <div class=""></div>
@@ -125,15 +126,12 @@
 
         <!--========JavaScript================ -->
         <script>
-            window.addEventListener('load', ()=>{
+            window.addEventListener('load', () => {
               setInterval(()=>{
                 document.querySelector("#preloader").classList.add('hidden-item')
 				document.querySelector("#root").classList.remove('show-hidden')
               }, 3000)
 
-              /*document.querySelector('#screen-mode').addEventListener('click', ()=> {
-                document.querySelector('body').classList.toggle('body-dark')
-              })*/
             })
         </script>