From 3c4549dd718c01cb809cdf010f6b5f122b5a51b9 Mon Sep 17 00:00:00 2001
From: Patrick <patricksouza.pss@gmail.com>
Date: Wed, 12 Oct 2022 17:44:45 -0300
Subject: [PATCH] feat: ajuste na imagem central

---
 html/index.html            | 33 +++++++++++++------------
 html/main.styles/style.css | 49 +++++++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/html/index.html b/html/index.html
index 59e040a..e0d1aab 100644
--- a/html/index.html
+++ b/html/index.html
@@ -33,6 +33,7 @@
   </header>
   <main>
     <section>
+
       <figure>
         <img class="main-banner  main-banner-desktop" src="/assents/assents-img/banner-01.png" alt="Banner Principal">
 
@@ -43,6 +44,7 @@
           alt="Banner Principal">
 
       </figure>
+
     </section>
 
     <section class="top-infocard">
@@ -101,29 +103,30 @@
 
 
     <section class="infocard-img-section">
+      <div class="container">
+        <div class="infocard-center">
+
+          <div class="infocards-center">
+            <figure>
+              <img class="middle-banner" src="/assents/assents-img/banner-center-desk01.png"
+                alt="imagem de notbook aberto">
+            </figure>
+            <figure>
+              <img class="middle-banner" src="/assents/assents-img/banner-center-desk02.png"
+                alt="imagem de notbook aberto">
+            </figure>
+          </div>
 
-      <div class="infocard-center">
 
-        <div class="infocards-center">
           <figure>
-            <img class="middle-banner" src="/assents/assents-img/banner-center-desk01.png"
-              alt="imagem de notbook aberto">
-          </figure>
-          <figure>
-            <img class="middle-banner" src="/assents/assents-img/banner-center-desk02.png"
+
+            <img class="middle-banner" src="/assents/assents-img/banner-center-desk03.png"
               alt="imagem de notbook aberto">
           </figure>
+
         </div>
-
-
-        <figure>
-
-          <img class="middle-banner" src="/assents/assents-img/banner-center-desk03.png" alt="imagem de notbook aberto">
-        </figure>
-
       </div>
 
-
     </section>
 
     <section class="bottom-cards">
diff --git a/html/main.styles/style.css b/html/main.styles/style.css
index 0215cfa..50a6e56 100644
--- a/html/main.styles/style.css
+++ b/html/main.styles/style.css
@@ -5,6 +5,13 @@
   font-family: 'Inter', sans-serif;
   color: #000000;
 }
+
+.container {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 0 72px;
+}
 /*///////////// HEADER /////////////////// */
 .page-header {
   background: #000000;
@@ -19,23 +26,13 @@
 
 /*///////////// SECTION 01 e 02 com banner /////////////////// */
 
-.main-banner,
-.middle-banner {
-  display: block;
-  width: 100%;
-}
 
-.main-banner-mobile,
-.middle-banner-mobile {
-  display: none;
-}
 /*///////////// SECTION 02 INFO CARD TOP ///////////////////*/
 
 .top-infocard {
   display: flex;
   align-items: center;
-  
-  
+
   padding: 75px 30px 179px;
 
   flex-direction: column;
@@ -44,7 +41,6 @@
 
 .top-infocard-text {
   max-width: 766px;
-  
 }
 
 .top-infocard-subtitle {
@@ -62,7 +58,6 @@
   margin-bottom: 24px;
 
   text-transform: uppercase;
-
 }
 
 .top-infocard-description {
@@ -73,22 +68,38 @@
 }
 /*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
 
-
 .infocard-img-section {
-  background: #E0E0E0;
+  background: #e0e0e0;
+  padding-top: 62px;
 }
 
+.infocards-center{
+  display: flex;
+  gap: 40px;
+  
+}
+
+.infocard-center {
+  display: flex;
+  gap: 40px;
+}
+
+.middle-banner{
+  margin-bottom: -62px;
+}
+
+
 /*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
 
 .top-cards {
   background: #ffffff;
-  
+
   display: grid;
   grid-template-columns: repeat(3, max-content);
   gap: 20px;
 
   justify-content: center;
-  
+  padding-bottom: 80px;
 }
 
 .top-card {
@@ -100,6 +111,8 @@
 
   background: #ffffff;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+
+  
 }
 
 .top-card-image {
@@ -114,8 +127,6 @@
   font-size: 16px;
 }
 
-
-
 /*/////////// Bottom Area com imagens e background//////////////*/
 
 .bottom-cards {