Cria top infocard desktop

assets/styles/main.css

@@ -50,13 +50,45 @@
   font-size: 16px;
   line-height: 24px;
   text-align: left;
-  
 }
 
 .top-infocard-img {
-  margin-top: 72px
+  margin-top: 72px;
 }
 
+.top-cards {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  gap: 20px;
+  justify-content: center;
+  margin: 178px 0;
+}
+
+.top-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 26px 26px 34px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+
+.top-card-img {
+  display: block;
+  margin-bottom: 26px;
+
+}
+
+
+.top-card-paragrafo{
+  max-width: 300px;
+  text-align: center;
+  font-size: 16px;
+  line-height: 24px;
+  }
+
+
 
 
 @media screen and (max-width: 1023px) {
@@ -73,22 +105,19 @@
   }
 }
 
-
 @media screen and (max-width: 1023px) {
-  .top-infocard-subtitulo{
-      font-size: 20px;
-  }
-  
-  .top-infocard-titulo{
-      font-size: 28px;
+  .top-infocard-subtitulo {
+    font-size: 20px;
   }
 
-  .top-infocard-paragrafo{
-      font-size: 16px;
-      line-height: 24px;
-      text-align: center;
-      padding: 0 30px;
-      
+  .top-infocard-titulo {
+    font-size: 28px;
   }
 
-}
+  .top-infocard-paragrafo {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    padding: 0 30px;
+  }
+}

index.html

@@ -44,6 +44,23 @@
 
             <img class="top-infocard-img" src="assets/img/top-infocard.png" alt="Banner infocard do Topo">
             </section>
+
+            <section class="top-cards">
+
+                <div class="top-card"><img class="top-card-img" src="assets/img/topo card 1.png" alt="Imagem do topo do card 01">
+                <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+                
+    
+    
+                <div class="top-card"><img class="top-card-img" src="assets/img/topo card 2.png" alt="Imagem do topo do card 02">
+                <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+                
+    
+                <div class="top-card"><img class="top-card-img" src="assets/img/topo card 3.png" alt="Imagem do topo do card 03">
+                <p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+    
+                
+            </section>
     </main>
 </body>