feat: cria area da landing page que contem os tres cards, feito tanto na versão mobile quanto na versao desktop

index.html

@@ -39,6 +39,35 @@
             </div>
             <img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
         </div>
+        <div class="container-icones">
+            <div class="container-cards">
+                <div class="container-card1">
+                    <figure>
+                        <img class="icon-card" src="assets/icons/shop.svg" alt="icone de shopping">
+                        <figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                            euismod enim non dui
+                            fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="container-card2">
+                    <figure>
+                        <img class="icon-card" src="assets/icons/shopping-bag.svg" alt="icone bolsa de shopping">
+                        <figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                            euismod enim non dui
+                            fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="container-card3">
+                    <figure>
+                        <img class="icon-card" src="assets/icons/coin.svg" alt="icone de mão segurando moeda">
+                        <figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                            euismod enim non dui
+                            fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+            </div>
+        </div>
+
     </main>
 </body>
 

style/style.css

@@ -56,11 +56,68 @@ header {
 }
 
 .banner-infocard {
-    width: 315px;
+    width: 19.688rem;
-    height: 315px;
+    height: 19.688rem;
     display: block;
 }
 
+/* container com icones */
+.container-icones {
+    background-color: #F0F0F0;
+    width: 100%;
+    padding: 4.625rem 25.875rem;
+    display: flex;
+    justify-content: center;
+}
+
+.container-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 20px;
+    grid-template-areas:
+        "container-card1 container-card2 container-card3";
+
+}
+
+.container-card1,
+.container-card2,
+.container-card3 {
+    width: 100%;
+    min-width: 21.896rem;
+    grid-area: container-card2 container-card3 container-card1;
+    background-color: #FFF;
+}
+
+.container-card1,
+.container-card2,
+.container-card3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 36px 28px 24px;
+}
+
+.icon-card {
+    width: 6.409rem;
+    height: 6.409rem;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 28px;
+}
+
+.text-card {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    margin-bottom: 28px;
+    color: #000;
+    margin-bottom: 28px;
+    font-weight: 400;
+
+}
+
 /* Media Queries */
 
 @media screen and (min-width:280px) and (max-width: 1023px) {
@@ -70,10 +127,6 @@ header {
         display: none;
     }
 
-    .banner-principal-mobile {
-        object-fit: cover;
-    }
-
     /* Infocard */
     .container-infocard {
         flex-direction: column;
@@ -107,6 +160,39 @@ header {
         height: 15rem;
         width: 15rem;
     }
+
+    /* container banner icones */
+    .container-icones {
+        background-color: #F0F0F0;
+        width: 100%;
+        padding: 2.375rem 2rem;
+
+    }
+
+    .container-cards {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        gap: 16px 0px;
+        grid-auto-flow: column dense;
+        grid-template-areas:
+            "container-card1"
+            "container-card2"
+            "container-card3";
+    }
+
+    .container-card1 {
+        grid-area: container-card1;
+    }
+
+    .container-card2 {
+        grid-area: container-card2;
+    }
+
+    .container-card3 {
+        grid-area: container-card3;
+    }
+
 }
 
 @media (min-width:1024px) {