From 4747437ff329eebda8349f913497be6e35da26b0 Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Wed, 12 Oct 2022 16:12:18 -0300
Subject: [PATCH] fix: Add tag Main no HTML

---
 index.html | 154 +++++++++++++++++++++++++++--------------------------
 1 file changed, 78 insertions(+), 76 deletions(-)

diff --git a/index.html b/index.html
index 0f12e39..3d81344 100644
--- a/index.html
+++ b/index.html
@@ -26,89 +26,91 @@
         <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner Principal Mobile" />
     </div>
     
-    <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>
+    <main>
+        <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>
 
-            <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>
+                <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 class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
+        </section>
+
+        <section class="top-cards">
+            <div class="top-card">
+                <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
+                <p class="top-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
+
+            <div class="top-card">
+                <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
+                <p class="top-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
+
+            <div class="top-card">
+                <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
+                <p class="top-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
+        </section>
+
+        <div class="middle-banner">
+            <div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador" /></div>
+            <div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador" /></div>
+            <div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador" /></div>
         </div>
 
-        <figure class="wrapper-top-infocard"><img class="top-infocard-image" src="./assets/images/image-infocard-topo.png" alt="Banner do Infocard do Topo" /></figure>
-    </section>
+        <section class="footer-cards">
+            <div class="footer-card">
+                <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
+                <p class="footer-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
 
-    <section class="top-cards">
-        <div class="top-card">
-            <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-01.png" alt="Imagem do Primeiro Card do Topo"></figure>
-            <p class="top-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
+            <div class="footer-card">
+                <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
+                <p class="footer-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
 
-        <div class="top-card">
-            <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-02.png" alt="Imagem do Segundo Card do Topo"></figure>
-            <p class="top-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
+            <div class="footer-card">
+                <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
+                <p class="footer-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
 
-        <div class="top-card">
-            <figure class="wrapper-top-card-image"><img class="top-card-image" src="./assets/images/info-card-middle-image-03.png" alt="Imagem do Terceiro Card do Topo"></figure>
-            <p class="top-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
-    </section>
+            <div class="footer-card">
+                <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
+                <p class="footer-card-description card-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+                </p>
+            </div>
+        </section>
 
-    <div class="middle-banner">
-        <div class="banner-grid-1"><img class="middle-banner-image" src="./assets/images/banner-middle-01.png" alt="Banner Primeiro Computador" /></div>
-        <div class="banner-grid-2"><img class="middle-banner-image" src="./assets/images/banner-middle-02.png" alt="Banner Segundo Computador" /></div>
-        <div class="banner-grid-3"><img class="middle-banner-image" src="./assets/images/banner-middle-03.png" alt="Banner Terceiro Computador" /></div>
-    </div>
-
-    <section class="footer-cards">
-        <div class="footer-card">
-            <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-01.png" alt="Imagem do Primeiro Card do Rodapé"></figure>
-            <p class="footer-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
-
-        <div class="footer-card">
-            <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-02.png" alt="Imagem do Segundo Card do Rodapé"></figure>
-            <p class="footer-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
-
-        <div class="footer-card">
-            <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-03.png" alt="Imagem do Terceiro Card do Rodapé"></figure>
-            <p class="footer-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
-
-        <div class="footer-card">
-            <figure class="wrapper-footer-card-image"><img class="footer-card-image" src="./assets/images/infocard-footer-image-04.png" alt="Imagem do Quarto Card do Rodapé"></figure>
-            <p class="footer-card-description card-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-            </p>
-        </div>
-    </section>
-
-    <section class="section-footer">
-        <div class="section-footer-text">
-            <h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
-            <p class="section-footer-description">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
-                Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
-                Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
-            </p>
-        </div>
-        
-        <img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
-        <img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
-    </section>
+        <section class="section-footer">
+            <div class="section-footer-text">
+                <h2 class="section-footer-title">Lorem ipsum dolor sit amet</h2>
+                <p class="section-footer-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                    Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                </p>
+            </div>
+            
+            <img class="footer-banner section-footer-image-desktop" src="./assets/images/retangulo-footer-image-desktop.png" alt="Imagem Retangulo do Footer" />
+            <img class="footer-banner section-footer-image-mobile" src="./assets/images/retangulo-footer-image-mobile.png" alt="Imagem Retangulo do Footer" />
+        </section>
+    </main>
 
     <footer class="page-footer">
         <div class="social-links">