From fb1f3edd40a30c1c47e3d3b39af4f5f4f86d379c Mon Sep 17 00:00:00 2001
From: tiago rodrigues <tiago.rodriguesfr1@gmail.com>
Date: Thu, 13 Oct 2022 13:16:23 -0300
Subject: [PATCH] Cria cards desktop

---
 assets/image/{image-fs1.png => image-ss1.png} | Bin
 assets/image/{image-fs2.png => image-ss2.png} | Bin
 assets/image/{image-fs3.png => image-ss3.png} | Bin
 assets/styles/main.css                        |  49 +++++++++++++++++-
 index.html                                    |  28 ++++++----
 5 files changed, 65 insertions(+), 12 deletions(-)
 rename assets/image/{image-fs1.png => image-ss1.png} (100%)
 rename assets/image/{image-fs2.png => image-ss2.png} (100%)
 rename assets/image/{image-fs3.png => image-ss3.png} (100%)

diff --git a/assets/image/image-fs1.png b/assets/image/image-ss1.png
similarity index 100%
rename from assets/image/image-fs1.png
rename to assets/image/image-ss1.png
diff --git a/assets/image/image-fs2.png b/assets/image/image-ss2.png
similarity index 100%
rename from assets/image/image-fs2.png
rename to assets/image/image-ss2.png
diff --git a/assets/image/image-fs3.png b/assets/image/image-ss3.png
similarity index 100%
rename from assets/image/image-fs3.png
rename to assets/image/image-ss3.png
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 024e433..6b6f0ce 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -22,18 +22,21 @@ body{
 
 .main-image{
     width: 100%;
+    display: block;
 }
 
 .firts-section{
 display: flex;
 align-items: center;
 justify-content: center;
+text-align: center;
 
 
 }
 
 .son-section-text{
     max-width: 776px;
+    
 
 
 }
@@ -65,12 +68,42 @@ justify-content: center;
 .son-image{
     padding-bottom: 178px;
 }
-    
+
 .second-section{
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(3, max-content);
+    justify-content: center;
+   
+   
     
+}
+
+.cousin-section{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 37px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+
+.cousin-image{
+    display: block;
+    margin-bottom: 20px;
+ 
+}
+
+.cousin-text{
+    max-width: 300px;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
 
 }
 
+
 @media screen and (max-width:  414px){
     .main-image-desktop{
         display: none;
@@ -78,6 +111,20 @@ justify-content: center;
     }
 }
 
+@media screen and(max-width:768px){
+    
+    .firts-section{
+        margin-right: 0;
+
+    }
+    
+    .son-section-text{
+        margin-bottom: 65px;
+
+    }
+
+
+}
 
 
 
diff --git a/index.html b/index.html
index 9208707..8bb5858 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 
     <title>Desafio Landing Page</title>
 
- >
+
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="assets/styles/main.css">
@@ -39,29 +39,35 @@
             </section>
               
             <section class="second-section">
-                <div>
-                    <img src="assets/image/image-fs1.png" alt="Primeir imagem ">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss1.png" alt="Primeir imagem ">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
 
-                <div>
-                    <img src="assets/image/image-fs2.png" alt="Segunda imagem">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss2.png" alt="Segunda imagem">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
 
 
-                <div>
-                    <img src="assets/image/image-fs3.png" alt="Terceira imagem">
-                    <p>
+                <div class="cousin-section">
+                    <img class="cousin-image" src="assets/image/image-ss3.png" alt="Terceira imagem">
+
+                    <p class="cousin-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </p>
+
                 </div>
             </section>
-
+        </main>
               
     </body>