[chore] merge LLZBranch into main

Adaptando banner da soluções
TeamXFive · Jun 8, 2024 · 915aeeb · 915aeeb
2 parents 615afad + 3d56bf4
commit 915aeeb
Show file tree

Hide file tree

Showing 4 changed files with 244 additions and 272 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;
+    }
 }