diff --git a/assets/images/png/main-banner-desktop.png b/assets/images/png/main-banner-desktop.png
new file mode 100644
index 0000000..a2c9f47
Binary files /dev/null and b/assets/images/png/main-banner-desktop.png differ
diff --git a/assets/images/png/main-banner-mobile.png b/assets/images/png/main-banner-mobile.png
new file mode 100644
index 0000000..a0f7541
Binary files /dev/null and b/assets/images/png/main-banner-mobile.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index b140ef5..5038eae 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -1,6 +1,6 @@
 * {
-    margin: 0;
-    padding: 0;
+    margin: 0%;
+    padding: 0%;
     box-sizing: border-box;
 }
 
@@ -8,5 +8,26 @@
     display: flex;
     justify-content: center;
     padding: 28px 0;
-    background: #000000  
+    background: #000000
+ 
+}
+
+.header-logo {
+    display: block;
+}
+
+.main-banner {
+    width: 100%;
+}
+
+@media screen and (max-width:414px) {
+    .main-banner-desktop {
+        display: none;
+    }
+
+}
+
+@media screen and (min-width:415px) {
+    .main-banner-mobile {
+        display: none;}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ae7e841..001f573 100644
--- a/index.html
+++ b/index.html
@@ -17,5 +17,11 @@
                 <img class="header-logo" src="./assets/images/svg/Logo-M3Academy-1.svg" alt="Logo M3 Academy" />
             </a>
         </header>
+            <main>
+                <section>
+                    <img class="main-banner main-banner-desktop" src="./assets/images/png/main-banner-desktop.png" alt="banner principal">
+                    <img class="main-banner main-banner-mobile" src="./assets/images/png/main-banner-mobile.png" alt="banner principal">
+                </section>
+            </main>
     </body>
 </html>    
\ No newline at end of file