feat: banner principal e inicio da primeira seção

assets/style.css

@@ -1,11 +1,11 @@
 @charset "UTF-8";
 
-*{
+* {
     margin: 0;
     padding: 0;
 }
 
-.page-header{
+.page-header {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -13,6 +13,43 @@
     height: 101px;
 }
 
-.logo-header{
+.logo-header {
     display: block;
 }
+
+.main-banner{
+    width: 100%;
+}
+
+.section-1 {
+    max-width: 766px;
+    margin: 0 auto;
+    text-align: center;
+
+}
+
+.main-title {
+    font-family: 'Inter', sans-serif;
+    padding: 73px 0;
+}
+
+.main-title h2,
+.main-title h1 {
+    text-transform: uppercase;
+}
+
+.main-title h1 {
+    font-size: 48px;
+    line-height: 58px;
+    font-weight: 500;
+}
+
+.main-title h2 {
+    font-size: 32px;
+    line-height: 39px;
+    font-weight: 400;
+}
+
+.main-title p{
+    margin-top: 28px;
+}

index.html

@@ -23,6 +23,27 @@
         </a>
     </header>
 
+    <main>
+
+        <picture>
+            <img class="main-banner" src="assets/imagens/banner-principal-desktop.png" alt="banner m3">
+        </picture>
+
+
+        <section class="section-1">
+            <div class="main-title">
+                <h2>Lorem ipsum</h2>
+                <h1>Dolor sit amet</h1>
+                <p>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>
+            <div>
+                <img src="assets/imagens/image-body.png" alt="imagem computadores em conexão">
+            </div>
+        </section>
+    </main>
+
 </body>
 
 </html>