feat: correcao dos erros enviados

index.html

@@ -67,8 +67,8 @@
                     Craseuismod enim non dui fringilla interdum.</figcaption>
             </figure>
 
-            <figure class="card top-card" />
+            <figure class="card top-card">
-            <img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo">
+            <img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo" />
             <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                 Craseuismod enim non dui fringilla interdum.</figcaption>
             </figure>
@@ -110,17 +110,17 @@
                     elit. Cras euismod enim non dui fringilla interdum. </figcaption>
             </figure>
 
-            <figure class="card bottom-card" />
+            <figure class="card bottom-card">
             <img class="bottom-card-image" src="assets/images/card-image-laptop.png"
-                alt="imagem do terceiro card do bottomo">
+                alt="imagem do terceiro card do bottomo" />
             <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                 euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                 euismod enim non dui fringilla interdum. </figcaption>
             </figure>
 
-            <figure class="card bottom-card" />
+            <figure class="card bottom-card">
             <img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
-                alt="imagem do terceiro card do bottomo">
+                alt="imagem do terceiro card do bottomo" />
             <figcaption class="bottom-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                 euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                 euismod enim non dui fringilla interdum. </figcaption>
@@ -139,7 +139,8 @@
             </div>
 
             <figure class="bottom-infocard-image-container">
-                <img class="bottom-infocard-image" src="assets/images/bottom-infocard-image.png"
+                <img class="bottom-infocard-image bottom-banner-desktop" src="assets/images/bottom-infocard-image-desktop.png" alt="imagem do infocard de baixo">
+                <img class="bottom-infocard-image bottom-banner-mobile" src="assets/images/bottom-infocard-image-mobile.png"
                     alt="imagem do infocard de baixo">
             </figure>
         </article>
@@ -147,9 +148,9 @@
 
     <footer class="footer-page">
         <ul class="footer-icons">
-            <li><a href="/"><img src="assets/svgs/instagram-logo.svg" alt="logo do instagram"></a></li>
+            <li class="footer-icons-container"><a href="/"><img src="assets/svgs/instagram-logo.svg" alt="logo do instagram"></a></li>
-            <li><a href="/"><img src="assets/svgs/facebook-logo.svg" alt="logo do facebook"></a></li>
+            <li class="footer-icons-container"><a href="/"><img src="assets/svgs/facebook-logo.svg" alt="logo do facebook"></a></li>
-            <li><a href="/"><img src="assets/svgs/youtube-logo.svg" alt="logo do youtube"></a></li>
+            <li class="footer-icons-container"><a href="/"><img src="assets/svgs/youtube-logo.svg" alt="logo do youtube"></a></li>
         </ul>
 
         <p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00

styles/main.css

@@ -11,7 +11,8 @@ body {
 .main-banner,
 .top-infocard-image,
 .bottom-infocard-image,
-.middle-image {
+.middle-image,
+.header-page-logo {
     width: 100%;
 }
 
@@ -56,23 +57,29 @@ body {
     background: #000;
 }
 
+.header-page a {
+    width: 12%;
+}
+
 .header-page-logo {
     display: block;
     padding: 30px 0;
 }
 
 /*Main Banner*/
-.main-banner-desktop {
+.main-banner-desktop,
+.bottom-banner-desktop {
     display: block;
 }
 
-.main-banner-mobile {
+.main-banner-mobile,
+.bottom-banner-mobile {
     display: none;
 }
 
 /* Top Infocard */
 .top-infocard {
-    padding: 74px 0;
+    padding: 73px 0 179px;
 }
 
 .top-infocard-content {
@@ -121,7 +128,6 @@ body {
 
 .top-card {
     padding: 36px 26px 26px;
-    min-width: 300px;
 }
 
 .top-card-image {
@@ -169,7 +175,7 @@ body {
 
 .bottom-card-image {
     width: 29%;
-    padding-bottom: 18px;
+    padding-bottom: 15px;
 }
 
 /*bottom infocard*/
@@ -195,11 +201,6 @@ body {
     width: 71%;
 }
 
-.bottom-infocard-image {
-    height: 276px;
-    object-fit: cover;
-}
-
 /*footer*/
 .footer-page {
     background: #000;
@@ -209,14 +210,25 @@ body {
 .footer-icons {
     list-style: none;
     display: flex;
+    justify-content: center;
     gap: 16px;
     padding-bottom: 16px;
+
+    width: 6%;
 }
 
 .footer-icons>li:last-child {
     margin: auto 0;
 }
 
+.footer-icons-container {
+    width: 23%;
+}
+
+.footer-icons-container img {
+    width: 100%;
+}
+
 .footer-text {
     color: #BDBDBD;
     font-weight: 400;
@@ -238,19 +250,19 @@ body {
     }
 
     /*Banner*/
-    .main-banner-desktop {
+    .main-banner-desktop,
+    .bottom-banner-desktop {
         display: none;
     }
 
-    .main-banner-mobile {
+    .main-banner-mobile,
+    .bottom-banner-mobile {
         display: block;
-        max-height: 598px;
-        object-fit: cover;
     }
 
     /*Top infocard*/
     .top-infocard {
-        padding: 74px 30px 90px 30px;
+        padding: 69px 30px 90px 30px;
     }
 
     .top-infocard-subtitle {
@@ -261,10 +273,12 @@ body {
     .top-infocard-title {
         font-size: 28px;
         line-height: 34px;
+        padding-bottom: 5px;
     }
 
     .top-infocard-description {
         text-align: center;
+        padding-bottom: 69px;
     }
 
     .top-infocard-image-container {
@@ -279,6 +293,7 @@ body {
 
     .top-cards {
         padding: 0 30px 80px;
+        gap: 24px;
     }
 
     .top-card {
@@ -315,12 +330,7 @@ body {
 
     .bottom-infocard {
         flex-direction: column-reverse;
-        padding-bottom: 88px;
+        padding-bottom: 98px;
-    }
-
-    .bottom-infocard-image {
-        height: auto;
-        object-fit: initial;
     }
 
     .bottom-infocard-content {
@@ -337,6 +347,17 @@ body {
         padding-bottom: 0;
     }
 
+    .footer-page {
+        padding: 32px 0;
+    }
+
+    .footer-icons {
+        width: 25%;
+    }
+
+    .footer-icons-container {
+        width: 23%;
+    }
     .footer-text {
         width: 261px;
     }