From 93c48faa848e1f72b3e43b042386cb8a58b3d0bb Mon Sep 17 00:00:00 2001
From: matheus <matheusbrollo201@gmail.com>
Date: Wed, 12 Oct 2022 10:54:49 -0300
Subject: [PATCH] feat(main-banner-responsive): adicionei responsividade -
 desktop, mobile~

---
 src/index.html       | 10 ++++------
 src/styles/style.css | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 2bb5324..839cfb7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,12 +17,10 @@
         </div>
 
         <main>
-            <div id="img1">
-                <picture>
-                    <source media="(max-width: 1920px)" srcset="assets/img/Rectangle 9 (1).png">
-                    <img src="assets/img/Rectangle 9.png" alt="Ilustração de um laptop com codigos na tela.">
-                </picture>
-            </div>
+            <section>
+                <img class="main-banner-desktop" src="assets/img/Rectangle 9.png" alt="Imagem de Laptop com codigos na tela.">
+                <img class="main-banner-mobile" src="assets/img/Rectangle 9 (1).png" alt="">
+            </section>
             
             <article>
                 <h1 id="title1">Lorem ipsum</h1>
diff --git a/src/styles/style.css b/src/styles/style.css
index 9585a94..60ef3ff 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -20,3 +20,23 @@ header {
     width: auto;
     height: auto;
 }
+
+.main-banner-desktop {
+    width: 100%;
+}
+
+.main-banner-mobile {
+    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