From bc5da5dd6df02aedc350b6f6c9558a1fd409ceca Mon Sep 17 00:00:00 2001
From: Adilson Fernando <ornellas00@hotmail.com>
Date: Tue, 3 Jan 2023 13:32:29 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20newsletter=20adicionado=20e=20j=C3=A1?=
 =?UTF-8?q?=20responsivo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Main/Newsletter.tsx        | 14 ++-
 .../src/styles/Newsletter.module.scss         | 95 +++++++++++++++++++
 2 files changed, 106 insertions(+), 3 deletions(-)

diff --git a/adilson-fernando/src/components/Main/Newsletter.tsx b/adilson-fernando/src/components/Main/Newsletter.tsx
index 3730c2b..4719e31 100644
--- a/adilson-fernando/src/components/Main/Newsletter.tsx
+++ b/adilson-fernando/src/components/Main/Newsletter.tsx
@@ -7,9 +7,17 @@ import styles from  "../../styles/Newsletter.module.scss";
 
 const Newsletter = () =>{
     return (
-        <h1>
-            hello world
-        </h1>
+        <div className={styles["newsletter"]}>
+            <hr className={styles["newsletter-hr"]} />
+            <div className={styles["newsletter-div1"]} >
+                <h2 className={styles["newsletter-div1-titulo"]}>ASSINE NOSSA NEWSLETTER</h2>
+            </div>
+            <div className={styles["newsletter-div2"]}>
+                <input className={styles["newsletter-div2-input"]} type="email" name="E-mail" id="E-mail" placeholder="   E-mail" />
+                <button className={styles["newsletter-div2-button"]}>ENVIAR</button>
+            </div>
+            <hr className={styles["newsletter-hr"]} />
+        </div>
     );
 };
 
diff --git a/adilson-fernando/src/styles/Newsletter.module.scss b/adilson-fernando/src/styles/Newsletter.module.scss
index e69de29..d9d4d25 100644
--- a/adilson-fernando/src/styles/Newsletter.module.scss
+++ b/adilson-fernando/src/styles/Newsletter.module.scss
@@ -0,0 +1,95 @@
+.newsletter{
+    display: flex;
+    flex-direction: column;
+    .newsletter-hr{
+        border: 0.5px solid #000;
+    }
+    .newsletter-div1{
+        margin-top: 16px;
+        margin-left: 31.484375%;
+        margin-bottom: 8px;
+        @media (max-width: 1024px){
+            margin-left: 16px;
+            margin-bottom: 16px;
+        }
+        .newsletter-div1-titulo{
+            font-family: 'Roboto',sans-serif;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 21px;
+            letter-spacing: 0.05em;
+            font-variant: small-caps;
+            color: #303030;
+            @media (min-width: 2500px){
+                font-size: 36px;
+                line-height: 42px;
+            }
+        }
+    }
+    .newsletter-div2{
+        margin-bottom: 16px;
+        margin-left: 31.484375%;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 8px;
+        @media (min-width: 2500px){
+            margin-left: 31.56%;
+        }
+        @media (max-width: 1024px){
+            flex-direction: column;
+            margin-left: 16px;
+            margin-right: 16px;
+            gap: 16px;
+        }
+        .newsletter-div2-input{
+            font-family: 'Roboto', sans-serif;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 16px;
+            color: #C4C4C4;
+            width: 38.768529%;
+            height: 42px;
+            background: #FFFFFF;
+            border: 1px solid #E5E5E5;
+            border-radius: 4px;
+            @media (min-width: 2500px){
+                font-size: 28px;
+                line-height: 33px;
+                width: 39.041496%;
+                height: 56px;
+            }
+            @media (max-width: 1024px){
+                width: 100%;
+                height: 50px;
+            }
+        }
+        .newsletter-div2-button{
+            font-family: 'Roboto',sans-serif;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 12px;
+            line-height: 14px;
+            text-align: center;
+            letter-spacing: 0.05em;
+            color: #FFF;
+            background-color: #000;
+            height: 42px;
+            width: 14.367161%;
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            border-radius: 4px;
+            @media (min-width: 2500px){
+                font-size: 24px;
+                line-height: 28px;
+                height: 56px;
+                width: 14.378%;
+            }
+            @media (max-width: 1024px){
+                width: 100%;
+                height: 50px;
+            }
+        }
+    }
+}
\ No newline at end of file