From 64c07c655b198a59e9666200324fcd6aa0bfd7e7 Mon Sep 17 00:00:00 2001
From: WellingtonWDS <wellingtonuserr@gmail.com>
Date: Mon, 10 Oct 2022 15:02:12 -0300
Subject: [PATCH] feat(index): Adicionado o Infocard do topo desktop e mobile

---
 assets/top-infocard-image.png | Bin 0 -> 4717 bytes
 css/style.css                 |  69 +++++++++++++++++++++++++++++++++-
 index.html                    |  46 ++++++++++++++++++++---
 3 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 assets/top-infocard-image.png

diff --git a/assets/top-infocard-image.png b/assets/top-infocard-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..2af63bd074221902e8d0f9c89b9a9104dbf0a5c7
GIT binary patch
literal 4717
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
F;$NsbxNHCb

literal 0
HcmV?d00001

diff --git a/css/style.css b/css/style.css
index 306cf0f..b1642ae 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,5 @@
 * {
     margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
@@ -9,6 +8,8 @@ body{
     color: #000000;
 }
 
+/*** HEADER ***/
+
 .page-header{
     display: flex;
     justify-content: center;
@@ -21,6 +22,8 @@ body{
     display: block;
 }
 
+/*** MAIN BANNER ***/
+
 .main-banner-desktop{
     display: block;
     width: 100%;
@@ -30,13 +33,77 @@ body{
     width: 100%;
 }
 
+/*** TOP INFOCARD ***/
+
+.top-infocard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 74px;
+}
+
+.top-infocard-subtitle{
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 39px;
+    text-transform: uppercase;   
+}
+
+.top-infocard-title{
+    font-weight: 500;
+    font-size: 48px;
+    line-height: 58px;
+    text-transform: uppercase;
+}
+
+.top-infocard-description{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 28px;
+    max-width: 40%;
+}
+
+.top-infocard-image{
+    margin-top: 74px;
+}
+
 @media screen and (max-width: 1024px){
+    /*** MAIN BANNER ***/
     .main-banner-desktop{
         display: none;
     }
+    
+    /*** TOP INFOCARD ***/
+    .top-infocard{
+        padding: 0 28px 0;
+    }
+
+    .top-infocard-subtitle{  
+        font-size: 20px;
+        line-height: 24px;
+        text-align: center;
+    }
+
+    .top-infocard-title{
+        text-align: center;
+        font-size: 28px;
+        line-height: 34px;
+    }
+
+    .top-infocard-description{
+        max-width: 100%;
+        text-align: center;
+    }
+
+    .top-infocard-image{
+        margin-top: 65px;
+    }
 }
 
 @media screen and (min-width: 1025px){
+    /*** MAIN BANNER ***/
     .main-banner-mobile{
         display: none;
     }
diff --git a/index.html b/index.html
index a85328e..a36ee64 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
+    <!-- FONT FAMILY -->
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,18 +13,48 @@
     <link rel="stylesheet" href="./css/style.css" />
 </head>
 <body>
+    <!-- HEADER -->
     <header class="page-header">
         <img src="./assets/logoM3.svg" alt="" />
     </header>
 
-    <div>
-        <img src="./assets/main-banner-desktop.png" alt="" class="main-banner-desktop">
-    </div>
-
-    <div>
+    <!-- MAIN BANNER -->
+    <!-- MAIN BANNER DESKTOP-->
+    <figure>
+        <img src="./assets/main-banner-desktop.png" alt="Banner principal, imagem de um notebook" class="main-banner-desktop">
+    </figure>
+    
+    <!-- MAIN BANNER MOBILE-->
+    <figure>
         <img src="./assets/main-banner-mobile.png" alt="" class="main-banner-mobile">
-    </div>
+    </figure>
+    
+    <!-- TOP INFOCARD -->
+    <section class="top-infocard">
+        <!-- SUBTITLE -->
+        <p class="top-infocard-subtitle">
+            Lorem ipsum
+        </p>
+        
+        <!-- TITLE -->
+        <p class="top-infocard-title">
+            dolor sit amet
+        </p>
+        
+        <!-- DESCRITION -->
+        <p class="top-infocard-description">
+            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>
+        
+        <!-- IMAGE -->
+        <figure>
+            <img src="./assets/top-infocard-image.png" alt="Conexão entre computadores" class="top-infocard-image">
+        </figure>
 
+    </section>
+    
     
 </body>
 </html>
\ No newline at end of file