diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..600d2d3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/index.html b/index.html
index 60133a7..25b94d0 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,15 @@
   <body>
     <header class="page-header">
       <a href="/">
-        <img class="header-logo" src="./src/assets/svg/m3-logo.svg" alt="Logo da M3">
+        <img class="header-logo" src="./src/assets/svg/m3-logo.svg" alt="Logo da M3"/>
       </a>
     </header>
-        
+
+    <main>
+      <div>
+        <img class="main-banner main-banner-desktop" src="./src/assets/img/main-banner-desktop.png" alt="Banner Principal Desktop"/>
+        <img class="main-banner main-banner-mobile" src="./src/assets/img/main-banner-mobile.png" alt="Banner Principal Mobile"/>
+      </div>
+    </main>        
   </body>
 </html>
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 336d111..b9bf624 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -16,3 +16,22 @@
 .header-logo {
   display: block;
 }
+
+/* ----- MAIN BANNER ----- */
+.main-banner {
+  display: block;
+  width: 100%;
+}
+
+/* ----- RESPONSIVIDADE ----- */
+@media screen and (max-width: 768px) {
+  .main-banner-desktop {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .main-banner-mobile {
+    display: none;
+  }
+}
