Site Completo

assets/styles/main.css

@@ -183,10 +183,12 @@ body{
 }
 
 .footer{
+    justify-content: center;
     background-color: #000;
     display: flex;
     flex-direction: column;
     padding: 2.23% 0;
+    height: 120px;
 }
 
 .texto-footer{
@@ -212,7 +214,11 @@ body{
     width: 1.25vw;
 }
 
-.middle-banner-mobile{
+.middle-banners-mobile{
+    display: none;
+}
+
+.bottom-infocard-img-mobile{
     display: none;
 }
 
@@ -261,11 +267,20 @@ body{
 
     .main-banner-mobile{
         display: block;
+        margin-bottom: 17.65%;
     }
 
     .main-banner-desktop{
         display: none;
     }
+    .bottom-infocard-img{
+        display: none;
+    }
+    .bottom-infocard-img-mobile{
+        display: block;
+        margin-bottom: 12%;
+        width: 100%;
+    }
 
     .top-infocard-title{
         font-size: 28px;
@@ -278,6 +293,7 @@ body{
     .bottom-infocard-title{
         font-size: 24px;
         line-height: 29px;
+        margin-bottom: 2.6%;
     }
 
     .main-banner-desktop{
@@ -293,6 +309,7 @@ body{
     }
 
     .top-cards,.botton-cards{
+        gap: 5vmin;
         flex-direction: column;
         align-items: center;
     }
@@ -301,6 +318,18 @@ body{
         width: 84.7%;
     }
 
+    .top-cards{
+        margin-bottom: 19.4%;
+    }
+
+    .top-infocard{
+        margin-bottom: 22%;
+    }
+
+    .top-infocard-description{
+        text-align: center;
+    }
+
     .top-card-images{
         margin-top: 13.8%;
     }
@@ -323,6 +352,10 @@ body{
         width: 100%;
     }
 
+    .middle-banner{
+        margin-bottom: 19.4%;
+    }
+
     .wrapper-mobile{
         display: flex;
         justify-content: center;
@@ -341,4 +374,28 @@ body{
         width: 89.2%;
         align-self: center;
     }
+
+    .botton-card{
+        width: 96%;
+    }
+
+    .bottom-infocard{
+        width: 100%;
+        flex-direction: column-reverse;
+        margin-bottom: 21%;
+    }
+
+    .bottom-infocard-text{
+        padding: 0;
+        min-width: 84.5%;
+    }
+
+    .texto-footer{
+        width: 55%;
+        text-align: center;
+    }
+
+    .imagens-logo{
+        width: 100%;
+    }
 }

index.html

@@ -100,6 +100,7 @@
                                         Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
                     </div>
                 <img class="bottom-infocard-img" src="./assets/images/oculosdesktop.png" alt="Banner do inforcard de baixo">
+                <img class="bottom-infocard-img-mobile" src="./assets/images/oculos.png" alt="Banner do inforcard de baixo">
         </section>
     </main>
     <footer class="footer">