colocando as informacoes nos infobox

assets/css/style.css

@@ -9,76 +9,81 @@
     height: 101px;
     left: 0px;
     top: 0px;
+    justify-content: center;
+    align-items: center;
     background: #000000;
 }
 .header-logo{
-    position: absolute;
-    width: 226.16px;
+    width: 100%;
     height: 43px;
-    left: 847px;
-    top: 29px;
 }
-.main-banner-desktop{
+.main-banner{
     width: 100%;
     height: auto;
-    left: 0px;
-    top: 101px;
 }
 @media screen and (max-width: 414px){ 
-    .main-banner-desktop{
+    .desktop-hidden{
         display: none;
     }
+    .div-image-pc{
+        margin: 15% 0;
+    }
+    .image-pc{
+    width: 50%;
+}
 }
 @media screen and (min-width: 415px) {
-    .main-banner-mobile{
+    .mobile-hidden{
         display: none;
     }
+    .div-image-pc{
+        margin: 5% 0;
+    }
+    .image-pc{
+        width: 45%;
+    }
+}
+.div-title{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 .title-one{
     width: 100%;
-    height: 39px;
-    left: 850px;
-    top: 874px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 32px;
     line-height: 39px;
     text-transform: uppercase;
+    text-align: center;
     color: #000000;
 }
 .title-two{
     width: 100%;
-    height: 58px;
-    left: 758px;
-    top: 913px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     font-size: 48px;
     line-height: 58px;
     text-transform: uppercase;
+    text-align: center;
     color: #000000;
 }
 .title-three{
     width: 100%;
-    height: 56px;
-    left: 577px;
-    top: 999px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
+    text-align: center;
     color: #000000;
 
 }
-.image-pc{
-    width: 315px;
-    height: 315.5px;
-     position: absolute;
-    left: 30%;
-    right: 0%;
-    top: 90%;
-    bottom: -0.16%;
-}
+.div-image-pc{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

index.html

@@ -17,18 +17,29 @@
     
     <main>
         <section>
-            <img class="main-banner-desktop" src="./assets/images/imagem-top.png" alt="Banner Principal Desktop">
-            <img class="main-banner-mobile" src="./assets/images/imagem-top-mobile.png" alt="Banner Principal Mobile">
+            <img class="main-banner desktop-hidden" src="./assets/images/imagem-top.png" alt="Banner Principal Desktop">
+            <img class="main-banner mobile-hidden" src="./assets/images/imagem-top-mobile.png" alt="Banner Principal Mobile">
         </section>
 
         <section>
-            <div>
+            <div class="div-title">
                 <h1 class="title-one">Lorem ipsum</h1>
                 <h2 class="title-two">dolor sit amet</h2>
                 <h3 class ="title-three">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. </h3>
+
+                <div class ="div-image-pc">
                 <img class ="image-pc" src="./assets/images/image-pc.png" alt="Imagem de informacao de conteudo">
             </div>
+            </div>
+        </section>
+
+        <section>
+            <div>
+                <div class="div-infobox">teste1</div>
+                <div class="div-infobox">teste2</div>
+                <div class="div-infobox">teste3</div>
+            </div>
         </section>
     </main>