new header

jpthor · Jun 6, 2024 · f5a4045 · f5a4045
1 parent bf166e2
commit f5a4045
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 26 deletions.
diff --git a/img/jpthor-header.png b/img/jpthor-header.png
diff --git a/index.html b/index.html
@@ -26,18 +26,20 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
         crossorigin="anonymous"></script>
     <script src="./main.js"></script>
-    <div class="content" style="overflow: hidden;">
+    <div class="content" style="overflow: hidden;position: relative;">
         <header class="header mb-2">
             <nav id="navbar"></nav>
         </header>
+        <img class="header-img" src="./img/jpthor-header.png" alt="JP THOR HEADER">
         <div class="container">
-            <div class="row mt-high">
-                <div class="col-lg-7">
+
+            <div class="row ml-minus-12">
+                <div>
                     <h1 class="text-xxlarge text-uppercase" data-query="home.header.title">
                         Empowering <br>
-                        <span class="text-green pl-header">Adventure</span> <br>& Innovation.
+                        <span class="pl-header">Adventure</span> <br>& Innovation.
                     </h1>
-                    <div class="text-thin text-medium text-c9 mt-4" data-query="home.header.subtitle"> Unlocking the
+                    <div class="text-medium mt-4" data-query="home.header.subtitle"> Unlocking the
                         Potential of Tomorrow through the
                         Spirit
                         of
@@ -47,12 +49,10 @@ <h1 class="text-xxlarge text-uppercase" data-query="home.header.title">
                         Breakthrough Thinking.
                     </div>
                 </div>
-                <div class="col-lg-5">
-                    <img class="ps-5 globe-img" src="./img/globe.gif" alt="Globe">
-                </div>
+
             </div>
         </div>
-        <div class="container">
+        <div class="container mt-lg-high">
             <div class="vertical-line"></div>
             <div class="section" style="margin-top: 20px;">
                 <div class="bullet" style="top: 0;"></div>

diff --git a/site-data.json b/site-data.json
@@ -140,7 +140,7 @@
     "home": {
         "page-title": "JPThor",
         "header": {
-            "title": "Empowering <br> <span class='text-green pl-header'>Adventure</span> <br>& Innovation.",
+            "title": "Empowering <br> <span class='pl-header'>Adventure</span> <br>& Innovation.",
             "subtitle": "Unlocking the Potential of Tomorrow through the Spirit of <br> Exploration and Breakthrough Thinking."
         },
         "segment-1": {

diff --git a/styles.css b/styles.css
@@ -143,9 +143,32 @@ h1 {
     margin-top: 10rem;
 }
 
+.ml-minus-12 {
+    margin-left: -12rem;
+}
+
+.header-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    width: 100vw;
+}
+
+.mt-lg-high {
+    margin-top: 8rem;
+}
+
+@media (max-width:1600px) {
+    .ml-minus-12 {
+        margin-left: -3rem;
+    }
+}
+
 @media (max-width:1200px) {
-    .globe-img {
-        width: 450px;
+    .ml-minus-12 {
+        margin-left: 0;
     }
 
     .pl-header {
@@ -200,9 +223,6 @@ h1 {
         margin-inline: 2rem !important;
     }
 
-    .globe-img {
-        width: 450px;
-    }
 
     #meet-jp-img {
         margin-top: 2rem;
@@ -257,6 +277,11 @@ h1 {
         height: 450px;
     }
 
+    .header-img {
+        height: 700px;
+        transform: translate(-20%);
+        width: unset;
+    }
 
 
 }
@@ -287,9 +312,6 @@ h1 {
         padding-left: 8rem !important;
     }
 
-    .globe-img {
-        width: 350px;
-    }
 
     #meet-jp-img {
         margin-top: 2rem;
@@ -338,6 +360,12 @@ h1 {
         height: 350px;
     }
 
+    .header-img {
+        height: 700px;
+        transform: translate(-40%);
+        width: unset !important;
+    }
+
 }
 
 @media (max-width: 576px) {
@@ -370,10 +398,6 @@ h1 {
         width: 100%;
     }
 
-    .globe-img {
-        width: 300px;
-    }
-
     .arts {
         position: absolute;
         right: 0px;
@@ -384,6 +408,12 @@ h1 {
         height: 300px;
     }
 
+    .header-img {
+        height: 700px;
+        transform: translate(-40%);
+        width: unset !important;
+    }
+
 }
 
 
@@ -417,10 +447,6 @@ h1 {
         width: 100%;
     }
 
-    .globe-img {
-        width: 300px;
-    }
-
     .arts {
         position: absolute;
         right: 0px;
@@ -431,4 +457,10 @@ h1 {
         height: 300px;
     }
 
+    .header-img {
+        height: 600px;
+        transform: translate(-40%);
+        width: unset !important;
+    }
+
 }