fix: responsive layout

imrob-s · Feb 5, 2024 · 62beab9 · 62beab9
1 parent 6d9f98d
commit 62beab9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git 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
@@ -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;
     }
 }