From 91e4df4cbeabfc572b78cc19678482a9841cd158 Mon Sep 17 00:00:00 2001
From: Patrick <patricksouza.pss@gmail.com>
Date: Tue, 11 Oct 2022 17:31:37 -0300
Subject: [PATCH] adicionado o top infocard desktop e mobile

---
 assents/imagens/orked-computers.png | Bin 0 -> 4669 bytes
 index.html                          |  40 ++++++++++---
 main.styles/style.css               |  85 +++++++++++++++++++++++++++-
 3 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 assents/imagens/orked-computers.png

diff --git a/assents/imagens/orked-computers.png b/assents/imagens/orked-computers.png
new file mode 100644
index 0000000000000000000000000000000000000000..268c92f92935a10d8d76331b98d7b0a08e2b1856
GIT binary patch
literal 4669
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 01b1f7d..8413424 100644
--- a/index.html
+++ b/index.html
@@ -2,26 +2,50 @@
 <html lang="en">
 
 <head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/main.styles/style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+
   <title>M3 Landing Page</title>
 
 </head>
 
 <body>
-  <header class="page-header" >
+  <header class="page-header">
     <a href="/">
-      <img class="header-logo" src="/assents/imagens/Logo M3 [branco] (4) 1.png" alt="logo da M3 Branco"/>
+      <img class="header-logo" src="/assents/imagens/Logo M3 [branco] (4) 1.png" alt="logo da M3 Branco" />
     </a>
   </header>
-    <main>
-      <section>
-        <img class="main-banner  main-banner-desktop" src="assents/imagens/banner-desktop.png" alt="Banner Principal">
-        <img class="main-banner  main-banner-mobile" src="assents/imagens/banner-mobile.png" alt="Banner Principal">
-      </section>
-    </main>
+  <main>
+    <section>
+      <img class="main-banner  main-banner-desktop" src="assents/imagens/banner-desktop.png" alt="Banner Principal">
+      <img class="main-banner  main-banner-mobile" src="assents/imagens/banner-mobile.png" alt="Banner Principal">
+    </section>
+
+    <section class="top-infocard">
+      <div class="top-infocard-text">
+        <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+        <h1 class="top-infocard-title">Dolor sit amet</h1>
+
+
+        <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>
+      </div>
+
+
+      <img class="top-infocard-image" src="assents/imagens/orked-computers.png" alt="banner do infocard do topo" />
+
+    </section>
+
+
+  </main>
+
 
 
 </body>
diff --git a/main.styles/style.css b/main.styles/style.css
index 7b0ff27..705735a 100644
--- a/main.styles/style.css
+++ b/main.styles/style.css
@@ -2,7 +2,8 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-
+  font-family: 'Inter', sans-serif;
+  color: #000000;
   
 }
 /*///////////// HEADER /////////////////// */
@@ -24,6 +25,45 @@
   width: 100%;
   
 }
+/*///////////// SECTION 02 INFO CARD TOP ///////////////////*/
+.top-infocard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 0 96px;
+}
+
+ 
+.top-infocard-text{
+  max-width: 766px;
+  margin-right: 124px;
+}
+
+.top-infocard-subtitle {
+  font-weight: 400;
+  font-size: 32px;
+  
+  text-transform: uppercase;
+}
+
+.top-infocard-title {
+  font-weight: 500;
+  font-size: 48px;
+  
+  margin-bottom: 24px;
+
+  text-transform: uppercase;
+
+}
+
+.top-infocard-description {
+  
+  font-size: 16px;
+  line-height: 24px;
+  
+}
+
+/*/////////////////  ABAIXO DE 414PX /////////////////*/
 
 @media screen and (max-width: 414px){
   .main-banner-desktop {
@@ -31,9 +71,50 @@
   }
 }
 
+/*/////////////////  ACIMA DE 768PX /////////////////*/
+@media screen and (max-width: 992px){
+  .top-infocard{
+    flex-direction: column;
+    padding: 84px 26px 158px;
+  }
+
+  .top-infocard-text{
+    margin: 0 0 68px;
+  }
+
+  .top-infocard-subtitle{
+    font-size: 20px;
+  }
+
+  .top-infocard-title{
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+
+  .top-infocard-description{
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .top-infocard-image{
+    width: 100%;
+    max-width: 240px;
+  }
+}
+
+/*//////////////////MEDIA DE UM TAMANHO ATE O OUTR////////////////*/
+@media screen and (min-width: 993px) and (max-width: 1280px) {
+  .top-infocard-text{
+    max-width: 520px;
+    margin-right: 70px;
+  }
+}
+
+/*/////////////////  ABAIXO DE 415PX /////////////////*/
 @media screen and (min-width: 415px ) {
   .main-banner-mobile{
     display: none;
   }
   
-}
\ No newline at end of file
+}
+