assets/style/style.css

@@ -21,21 +21,25 @@ body{
 }
 
 .main-banner{
-    display: block;
     width: 100%;
 }
 
 .top-infocard{
-    display:inline-block;
-    align-items: center;
+    display:flex;
     justify-content: center;
+    align-items: center;
+    margin-top: 73px;
 }
 
+
 .top-infocard-text{
-    margin: 73px 577px;
+    max-width: 766px;
+
 }
 
 .top-infocard-subtitle{
+    display: flex;
+    justify-content: center;
     font-weight: 400;
     font-size: 32px;
     line-height: 39px;
@@ -44,10 +48,13 @@ body{
 }
 
 .top-infocard-title{
+    display: flex;
+    justify-content: center;
     font-weight: 500;
     font-size: 48px;
     line-height: 58px;
     text-transform: uppercase;
+    margin-bottom: 24px;
 }
 
 .top-infocard-description{
@@ -58,16 +65,38 @@ body{
 }
 
 .top-infocard-image{
-    margin: 0 803px 179px 802px;
+    display: flex;
+    justify-content: center;
+    margin: 84px 0 178px;
 }
 
-
 /*MEDIAS*/
 
 @media screen and (max-width:414px) {
     .main-banner-desktop{
         display: none;
     }
+
+    .top-infocard-subtitle{
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .top-infocard-title{
+        font-size: 28px;
+        line-height: 34px;
+    }
+    
+    .top-infocard-description{
+        font-size: 16px;
+        line-height: 24px;
+        margin: 28px;
+        text-align: center;
+    }
+
+    .top-infocard-image{
+        margin: 74px 0 90px;
+    }
     
 }
 
@@ -75,5 +104,6 @@ body{
     .main-banner-mobile{
         display: none;
     }
+
 }
 

index.html

@@ -36,18 +36,19 @@
 
         <section class="top-infocard">
             <div class="top-infocard-text">
-                <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
-                <h1 class="top-infocard-title">dolor sit amet</h1>
+                
+                    <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+                    <h1 class="top-infocard-title">dolor sit amet</h1>
+               
                 <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
                     interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
                     dui. </p>
             </div>
-
-            <figure>
-                <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
-            </figure>
-
         </section>
+
+        <figure class="top-infocard-image">
+            <img src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
+        </figure>
     </main>
 
 </body>