[feat] Adaptando banner da página soluções

TeamXFive · Jun 8, 2024 · 3d56bf4 · 3d56bf4
1 parent 6d37491
commit 3d56bf4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 28 deletions.
diff --git a/css/index.css b/css/index.css
@@ -66,24 +66,6 @@ main {
     font-weight: 700;
 }
 
-.btn-contact-container {
-    height: 80%;
-    width: 100%;
-    position: relative;
-    align-items: flex-end;
-    transform: translateX(-80%);
-}
-
-.btn-contact {
-    padding: 1em 2em;
-    border: none;
-    border-radius: 2em;
-    background-color: var(--aqua-medio);
-    color: var(--azul-medio);
-    transition: .1s all ease-in-out;
-    font-size: 16px;
-}
-
 /*---=| Video Pitch |=---*/
 .blue-text a{
     text-decoration: none;

diff --git a/css/solucoes.css b/css/solucoes.css
@@ -10,6 +10,10 @@
 /*-----===| MAIN |===-----*/
 /*---=| DISPLAY FLEX |=---*/
 main,
+.main-banner-container,
+.banner-image-container,
+.banner-text-container,
+.banner-text-title,
 #ecoshield-charts-container,
 .charts-chart-container {
     display: flex;
@@ -27,26 +31,22 @@ main {
     top: 0px !important;
 }
 
+/*-| Video |-*/
 .main-banner-container {
-    align-items: center;
-    justify-content: center;
     height: 90vh;
-    max-height: 1080px;
+    width: 100%;
+    flex-wrap: wrap;
     overflow: hidden;
 
-    & .banner-text-container {
-        position: absolute;
-    }
-
     & .banner-image-container {
         position: relative;
         height: 100%;
+        width: 100%;
+        margin: 0;
 
         &::after {
             content: '';
             position: absolute;
-            top: 0px;
-            left: 0px;
             width: 100%;
             height: 100%;
             background: rgb(2, 0, 36);
@@ -63,6 +63,27 @@ main {
     }
 }
 
+/*-| Texto |-*/
+.banner-text-container {
+    width: 90%;
+    position: relative;
+    flex-direction: column;
+    flex-wrap: wrap;
+    color: white;
+    transform: translateY(-100%);
+}
+
+.banner-text-title {
+    width: 80%;
+    align-items: flex-end;
+    font-size: 80px;
+    font-weight: 700;
+}
+
+.banner-text-title span {
+    text-align: center;
+}
+
 /*---=| EcoShield Charts |=---*/
 #ecoshield-charts-container {
     height: 60vh;
@@ -90,4 +111,51 @@ main {
     justify-content: center;
     height: 100%!important;
     aspect-ratio: 1 / 1;
+}
+
+/*-----===| RESPONSIVIDADE |===-----*/
+/*---=| BanneBanner |=---*/
+@media (max-width: 1200px) {
+    .main-banner-container {
+        height: 75vh;
+    }
+
+    .banner-text-title {
+        width: 100%;
+        font-size: 48px;
+    }
+
+    .btn-contact-container{
+        transform: translateX(-100%);
+    }
+
+    .btn-contact {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 767px) {
+    .main-banner-container {
+        height: 50vh;
+    }
+
+    .banner-text-title {
+        width: 80%;
+        font-size: 32px;
+    }
+
+    .btn-contact-container{
+        transform: translateX(-80%);
+    }
+
+    .btn-contact {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 576px) {
+    .banner-text-title {
+        width: 100%;
+        font-size: 24px;
+    }
 }
diff --git a/html/solucoes.html b/html/solucoes.html
@@ -56,7 +56,7 @@
 
             <section class="banner-text-container">
                 <div class="banner-text-title">
-                    <span class>NOSSAS SOLUÇÕES</span>
+                    <span>O FUTURO NECESSITA DE TODOS NÓS</span>
                 </div>
             </section>
         </article>

diff --git a/js/solucoes.js b/js/solucoes.js
@@ -1,6 +1,7 @@
 /*-----===| VARIÁVEIS |===-----*/
 var headerHeight;
 var main = document.getElementsByTagName('main')[0];
+var bannerTextContainer = document.getElementsByClassName('banner-text-container')[0];
 var footer = document.getElementsByTagName('footer')[0];
 
 /*-----===| EVENTOS |===-----*/
@@ -11,5 +12,6 @@ window.addEventListener('resize', calcTranslationHeight);
 function calcTranslationHeight() {
     headerHeight = document.getElementsByTagName('header')[0].offsetHeight;
     main.style.top = headerHeight + "px";
+    bannerTextContainer.style.height = "calc(100% - " + headerHeight + "px)";
     footer.style.transform = "translateY(" + headerHeight + "px)";
 }