From 3f84222d3783fd3b172220dba72c561cb4773bcb Mon Sep 17 00:00:00 2001
From: Ramon Dias Ferreira <ramondf13@gmail.com>
Date: Thu, 13 Oct 2022 02:02:56 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=C3=A7=C3=A3o=20dos=20tr=C3=AAs?=
 =?UTF-8?q?=20primeiros=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/landing-page.css | 33 +++++++++++++++++++++++++++++++++
 landing-page.html              | 31 ++++++++++++++++---------------
 2 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/assets/styles/landing-page.css b/assets/styles/landing-page.css
index d62cd15..05e5bf7 100644
--- a/assets/styles/landing-page.css
+++ b/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%;
+}
\ No newline at end of file
diff --git a/landing-page.html b/landing-page.html
index 3f18da0..33f48b6 100644
--- a/landing-page.html
+++ b/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"/>
-        </figure>
-        <section>
-            <div>
-                <figure>
+
+        <section class="card-section">
+            <div class="card">
+                <figure class="img-card">
                     <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>
-                <figure>
+            <div class="card">
+                <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>
-                <figure>
+            <div class="card">
+                <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>
@@ -122,4 +123,4 @@
         </p>
     </footer>
 </body>
-</html>
\ No newline at end of file
+</html>