feat: Adiciona footer desktop e mobile

assets/styles/main.css

@@ -1,22 +1,22 @@
-* {
+*{
     margin: 0;
     padding: 0;
-    box-sizing: border-box; /*mantem a largura do elemento determinada no widht e nao adiciona o tamanho do padding no calculo, porem ele vai estar la*/
+    box-sizing: border-box;
 }
 
-body {
+body{
     font-family: 'Inter', sans-serif;
     color: #000;
 }
 
-.page-header {
+.page-header{
     display: flex;
     justify-content: center;
     padding: 28px 0;
     background: #000;
 }
 
-.logo-header {
+.logo-header{
     display: block;
     width: 12%;
 }
@@ -215,10 +215,18 @@ body {
 .social-medias{
     display: flex;
     flex-direction: row;
-    gap: 20px;
+    gap: 18px;
     justify-content: center;
 }
 
+.social-media{
+    display: contents;
+}
+
+.icon-social-media{
+    width: 7%;
+}
+
 .footer-text{
     margin-top: 16px;
 }
@@ -230,7 +238,7 @@ body {
     color: #BDBDBD;
 }
 
-/*4k*/
+/*4K*/
 @media screen and (min-width: 2500px) {
     .top-infocard-subtitle{
         font-size: 40px;
@@ -271,10 +279,11 @@ body {
     .footer-copyright{
         font-size: 20px;
         line-height: 24px;
-    }    
+    }
+    
 }
 
-/*MOBILE* */
+/*MOBILE*/
 @media screen and (max-width: 1024px) {
     .logo-header{
         width: 55%;
@@ -316,6 +325,7 @@ body {
     .cards{
         flex-direction: column;
         gap: 24px;
+        margin-top: 90px;
     }
 
     .card{
@@ -387,6 +397,12 @@ body {
         padding: 0;
         margin-bottom: 87px;
     }
+
+    .footer-content{
+        width: 63%;
+        margin-bottom: 32px;
+        margin-top: 32px;
+    }
     
 }
 

index.html

@@ -125,14 +125,14 @@
         <footer class="footer">
             <div class="footer-content">
                 <div class="social-medias">
-                    <a href="#">
-                        <img src="/assets/images/instagram.svg" alt="Icone do Instagram">
+                    <a class="social-media" href="#">
+                        <img class="icon-social-media" src="/assets/images/instagram.svg" alt="Icone do Instagram" />
                     </a>
-                    <a href="#">
-                        <img src="/assets/images/facebook.svg" alt="Icone do Facebook">
+                    <a class="social-media" href="#">
+                        <img class="icon-social-media" src="/assets/images/facebook.svg" alt="Icone do Facebook" />
                     </a>
-                    <a href="#">
-                        <img src="/assets/images/youtube.svg" alt="Icone do Youtube">
+                    <a class="social-media" href="#">
+                        <img class="icon-social-media" src="/assets/images/youtube.svg" alt="Icone do Youtube" />
                     </a>
                 </div>
 
@@ -141,5 +141,6 @@
                 </div>
             </div>
         </footer>
+
     </body>
 </html>