From 62beab95595f7b46f24288643cbb697a0ea3ccf9 Mon Sep 17 00:00:00 2001
From: imrob-s <orobsilva@gmail.com>
Date: Sun, 4 Feb 2024 23:28:18 -0300
Subject: [PATCH] fix: responsive layout

---
 index.html       | 12 +++++++-----
 styles/style.css | 46 ++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 4292d7a..4757522 100644
--- a/index.html
+++ b/index.html
@@ -32,11 +32,13 @@ <h2 class="subtitulo fadeIn second">
         </div>
     </main>
     <footer class="rodape">
-        <p>Desenvolvido por Robson Silva | 
-            <i class="fa-brands fa-github fa-xl" style="color: #00C933;"></i>
-            <i class="fa-brands fa-linkedin fa-xl" style="color: #00C933;"></i>
-            <i class="fa-brands fa-instagram fa-xl" style="color: #00C933;"></i>
-             Para o desafio da Oracle Next Education e Alura</p>
+        <div class="social">
+        <p>Desenvolvido por Robson Silva |</p>
+            <a href="https://github.com/imrob-s"><i class="fa-brands fa-github fa-xl" style="color: #00C933;"></i></a>
+            <a href="https://www.linkedin.com/in/robsilva1/"><i class="fa-brands fa-linkedin fa-xl" style="color: #00C933;"></i></a>
+            <a href="https://www.instagram.com/imrob.s/"><i class="fa-brands fa-instagram fa-xl" style="color: #00C933;"></i></a>
+        </div>
+        <p>Para o desafio da Oracle Next Education e Alura</p>
     </footer>
     <script src="./js/eventos.js"></script>
     <script src="./js/app.js"></script>
diff --git a/styles/style.css b/styles/style.css
index 6b8a8e2..2985280 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -170,26 +170,64 @@ body {
     justify-content: center;
     align-items: center;
     height: 65px;
-    width: 100%;
-    position: fixed;
+    flex-wrap: wrap;
     bottom: 0;
     background-color: rgba(2,10,6, 0.9);
 }
 
+.social {
+    display: flex;
+    justify-content: space-between;
+    width: 80%;
+}
+
 @media (max-width: 480px) {
     .cabecalho {
         justify-content: center;
         margin-top: 20px;
     }
 
+    .titulo {
+        text-align: center;
+        font-size: 3rem;
+    }
+
+    .subtitulo {
+        display: none;
+    }
+
     .img__monitor {
-        width: 42.25em;
+        width: 100%;
         height: 42em;
-        margin-top: -30px;
+        margin-top: -20px;
+        background-image: url(../assets/monitor.svg);
+        clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 90%);
+    }
+
+    .img__texto_monitor {
+    left: 9%;
+    width: 82%;
+    }
+
+    .btn__copiar {
+        right: 6%;
+        top: 57%;
+    }
+    
+    .btn__copiar img {
+        width: 20px;
+        height: 20px;
     }
 
     .container__header {
         align-items: center;
+        margin-top: -30%;
+    }
+
+    .rodape > p {
+        text-align: center;
+        
+        font-size: 1rem;
     }
 }