feat: estilização dos três primeiros cards

assets/styles/landing-page.css

@@ -50,4 +50,37 @@ header {
 .network{
     display: flex;
     justify-content: center;
+    width: 16%;
+}
+
+.network img{
+    width: 100%;
+}
+
+.card-section{
+    display: flex;
+    justify-content: space-evenly;
+    padding: 178px 0px 80px 0px;
+}
+
+.card, .card-small{
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+}
+
+.card{
+    width: 18%;
+    height: 287.68px;
+}
+
+.img-card{
+    width: 29%;
+}
+
+.img-card img{
+    width: 100%;
 }

landing-page.html

@@ -21,29 +21,30 @@
             <h2 class="sub-title">Lorem ipsum</h2>
             <h1 class="title">dolor sit amet</h1>
             <p class="descriptiom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
+            <figure class="network">
+                <img src="./assets/images/networkcomputters.png"/>
+            </figure>
         </section>
-        <figure class="network">
+
-            <img src="./assets/images/networkcomputters.png"/>
+        <section class="card-section">
-        </figure>
+            <div class="card">
-        <section>
+                <figure class="img-card">
-            <div>
-                <figure>
                     <img src="./assets/images/shop 1.png">
                 </figure>
                 <figcaption>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                 </figcaption>
             </div>
-            <div>
+            <div class="card">
-                <figure>
+                <figure class="img-card">
                     <img src="./assets/images/shopping-bag.png">
                 </figure>
                 <figcaption>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                 </figcaption>
             </div>
-            <div>
+            <div class="card">
-                <figure>
+                <figure class="img-card">
                     <img src="./assets/images/coin 1.png">
                 </figure>
                 <figcaption>
@@ -64,7 +65,7 @@
             </figure>
         </section>
         <section>
-            <div>
+            <div class="card-small">
                 <figure>
                     <img src="./assets/images/money.png">
                 </figure>
@@ -72,7 +73,7 @@
                     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>
             </div>
-            <div>
+            <div class="card-small">
                 <figure>
                     <img src="./assets/images/coin 1.png">
                 </figure>
@@ -80,7 +81,7 @@
                     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>
             </div>
-            <div>
+            <div class="card-small">
                 <figure>
                     <img src="./assets/images/laptop.png">
                 </figure>
@@ -88,7 +89,7 @@
                     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>
             </div>
-            <div>
+            <div class="card-small">
                 <figure>
                     <img src="./assets/images/cel.png">
                 </figure>