[chore] Merge LLZBranch into main

[feat] Reponsividade básica no banner

css/index.css

@@ -1,29 +1,104 @@
+*{
+    margin: 0;
+    padding: 0;
+
+    /*---=| Fonte Padrão |=---*/
+    font-family: "Josefin Sans", sans-serif ;
+    font-weight: 700;
+}
+
 /*-----===| MAIN |===-----*/
 /*---=| DISPLAY FLEX |=---*/
-main, .main-banner-container, .banner-container{
+main, .main-banner-container, .banner-image-container,
+.banner-text-container, .banner-text-title, .btn-contact-container, .btn-contact{
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 main{
+    min-height: 150vh;
     width: 100%;
     background-color: var(--azul-medio);
     align-items: flex-start;
+    z-index: 100;
 }
 
+/*---=| BANNER |=---*/
 .main-banner-container{
     height: 90vh;
     width: 100%;
+    flex-wrap: wrap;
 }
 
-.banner-container{
+/*-| Imagem |-*/
+.banner-image-container{
     height: 100%;
     width: 100%;
+    margin: 0;
 }
-
-.banner-container img{
+.banner-image-container img{
     height: 100%;
     width: 100%;
     object-fit: cover;
+}
+
+/*-| Texto |-*/
+.banner-text-container{
+    height: 90%;
+    width: 90%;
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    color: white;
+    transform: translateY(-100%);
+}
+.banner-text-title{
+    width: 80%;
+    align-items: flex-end;
+    font-size: 80px;
+    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;
+}
+
+/*-----===| EFEITOS |===-----*/
+/*---=| Hover |=---*/
+.btn-contact:hover{
+    transform: scale(1.05);
+}
+
+/*-----===| RESPONSIVIDADE |===-----*/
+/*---=| BanneBanner |=---*/
+@media (max-width: 1200px) {
+    .main-banner-container{ height: 75vh; }
+    .banner-text-title{
+        width: 100%;
+        font-size: 64px;
+    }
+    .btn-contact{ font-size: 14px; }
+}
+
+@media (max-width: 767px) {
+    .main-banner-container{ height: 50vh; }
+    .banner-text-title{
+        width: 80%;
+        font-size: 48px;
+    }
+    .btn-contact{ font-size: 12px; }
 }

css/universal.css

@@ -10,8 +10,10 @@
 /*-----===| ROOT |===-----*/
 :root{
     /*---=| Variáveis |=---*/
+    --azul-super-claro: rgb(184, 227, 255);
     --azul-claro: rgb(92, 159, 204);
     --azul-medio: rgb(66, 91, 146);
+    --aqua-medio: rgb(0, 218, 218);
     --sombrear: rgba(0, 0, 0, 0.5);
     --clarear: rgba(255, 255, 255, 0.5);
     --clarear-gradiente: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.5));
@@ -23,6 +25,7 @@ header{
     width: 100%;
     background: var(--clarear-gradiente);
     position: fixed;
+    z-index: 999;
 }
 
 /*---=| Left Header |=---*/

index.html

@@ -33,11 +33,21 @@
     </header>
 
     <main>
-        <div class="main-banner-container">
-            <figure class="banner-container">
+        <article class="main-banner-container">
+            <figure class="banner-image-container">
                 <img src="./assets/img/thomas-vimare-IZ01rjX0XQA-unsplash.jpg" alt="">
             </figure>
-        </div>
+
+            <section class="banner-text-container">
+                <div class="banner-text-title">
+                    <span class>NÓS ESTAMOS CONSTRUINDO UM NOVO FUTURO</span>
+                </div>
+
+                <div class="btn-contact-container">
+                    <button class="btn-contact">ENTRE EM CONTATO</button>
+                </div>
+            </section>
+        </article>
     </main>
 
     <footer>