diff --git a/index.html b/index.html
index 4616e26..45e621b 100644
--- a/index.html
+++ b/index.html
@@ -17,5 +17,13 @@
             </a>
         
     </header>
+    
+    <main>
+        <section>
+            <img class="baner-principal principal-baner-desktop" src="materiais/imagens/banner-principal-desktop.png" alt="baner principal desktop">
+            
+            <img class="baner-principal principal-baner-mobile" src="materiais/imagens/banner-principal-mobile.png" alt="baner principal mobile">
+        </section>
+    </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/materiais/imagens/banner-principal-desktop.png b/materiais/imagens/banner-principal-desktop.png
new file mode 100644
index 0000000..5d94877
Binary files /dev/null and b/materiais/imagens/banner-principal-desktop.png differ
diff --git a/materiais/imagens/banner-principal-mobile.png b/materiais/imagens/banner-principal-mobile.png
new file mode 100644
index 0000000..098a4dc
Binary files /dev/null and b/materiais/imagens/banner-principal-mobile.png differ
diff --git a/materiais/styles/main.css b/materiais/styles/main.css
index f02d823..8571989 100644
--- a/materiais/styles/main.css
+++ b/materiais/styles/main.css
@@ -14,3 +14,19 @@
 .header-logo{
     display: block;
 }
+
+.baner-principal{
+    width: 100%;
+}
+
+@media screen and (max-width: 414px) {
+    .principal-baner-desktop{
+        display: none;
+    }
+}
+
+@media screen and (min-width: 415px){
+    .principal-baner-mobile{
+        display: none;
+    }
+}