From 6e4ef80d4524867532621f5c9687a446dbef0319 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 6 Jan 2023 19:47:30 -0300 Subject: [PATCH 1/3] feat(newsLetter): created news letter and scss --- src/App.tsx | 4 +- src/components/Footer/index.tsx | 11 ---- src/components/Footer/styles.module.scss | 6 -- src/components/newsLetter/index.tsx | 23 +++++++ src/components/newsLetter/styles.module.scss | 63 ++++++++++++++++++++ src/index.css | 6 +- 6 files changed, 90 insertions(+), 23 deletions(-) delete mode 100644 src/components/Footer/index.tsx delete mode 100644 src/components/Footer/styles.module.scss create mode 100644 src/components/newsLetter/index.tsx create mode 100644 src/components/newsLetter/styles.module.scss diff --git a/src/App.tsx b/src/App.tsx index fcf82d5..2833ec4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import React from "react"; import "./App.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; -import Footer from "./components/Footer"; +import NewsLetter from "./components/newsLetter"; import Home from "./pages/Home"; import Institutional from "./pages/Institutional"; @@ -20,7 +20,7 @@ function App() { return (
-
+
); } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx deleted file mode 100644 index dc8e999..0000000 --- a/src/components/Footer/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styles from "./styles.module.scss"; - -export default function Footer() { - return ( - <> - - - ); -} diff --git a/src/components/Footer/styles.module.scss b/src/components/Footer/styles.module.scss deleted file mode 100644 index e52ddbb..0000000 --- a/src/components/Footer/styles.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.footer { - background: green; -} -.jorgin { - color: blue; -} diff --git a/src/components/newsLetter/index.tsx b/src/components/newsLetter/index.tsx new file mode 100644 index 0000000..f7c4f9a --- /dev/null +++ b/src/components/newsLetter/index.tsx @@ -0,0 +1,23 @@ +import styles from "./styles.module.scss"; + +export default function newsLetter() { + return ( + <> + + + ); +} diff --git a/src/components/newsLetter/styles.module.scss b/src/components/newsLetter/styles.module.scss new file mode 100644 index 0000000..b660bff --- /dev/null +++ b/src/components/newsLetter/styles.module.scss @@ -0,0 +1,63 @@ +.newsLetter { + // background-color: black; + border-width: 1px 0px; + border-style: solid; + border-color: #000000; + width: 100%; + display: flex; + justify-content: center; + + .firstDivNews { + width: 37.03%; + display: flex; + flex-direction: column; + + .firstH2 { + padding: 16px 0 8px; + display: flex; + justify-content: center; + margin: auto; + text-transform: uppercase; + font-weight: 500; + font-size: 18px; + letter-spacing: 0.05em; + color: #303030; + margin-left: 0; + } + + .secondDivNews { + display: flex; + justify-content: center; + gap: 8px; + padding-bottom: 16px; + + .newsInput { + width: 71.73%; + font-weight: 400; + font-size: 14px; + padding: 11px 16px; + max-height: 36px; + border: 1px solid #e5e5e5; + border-radius: 4px; + + &::placeholder { + color: #c4c4c4; + } + } + + .newsButton { + width: 26.58%; + min-height: 42px; + background: #000000; + text-transform: uppercase; + color: white; + font-weight: 700; + font-size: 12px; + border: 0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 4px; + cursor: pointer; + } + } + } +} diff --git a/src/index.css b/src/index.css index ec2585e..784c513 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,11 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } From 3fe59ca1884d36503c02eb2a440268eb9c0d2531 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 6 Jan 2023 20:23:50 -0300 Subject: [PATCH 2/3] feat(newsLetter): created mobile responsive news letter --- src/App.css | 41 ++------------------ src/components/newsLetter/styles.module.scss | 25 +++++++++++- 2 files changed, 28 insertions(+), 38 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..cca57b3 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,5 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +* { + margin: 0; + padding: 0; + box-sizing: border-box; } diff --git a/src/components/newsLetter/styles.module.scss b/src/components/newsLetter/styles.module.scss index b660bff..e1efd92 100644 --- a/src/components/newsLetter/styles.module.scss +++ b/src/components/newsLetter/styles.module.scss @@ -36,7 +36,7 @@ font-weight: 400; font-size: 14px; padding: 11px 16px; - max-height: 36px; + max-height: 42px; border: 1px solid #e5e5e5; border-radius: 4px; @@ -61,3 +61,26 @@ } } } + +@media screen and (max-width: 1024px) { + .firstDivNews { + width: 96.88% !important; + + .firstH2 { + font-size: 14px; + } + + .secondDivNews { + flex-direction: column; + width: 100%; + + .newsInput { + width: 100% !important; + } + + .newsButton { + width: 100% !important; + } + } + } +} From 68a81728a0122c84f867e21cf37f0e6280805942 Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 6 Jan 2023 20:46:28 -0300 Subject: [PATCH 3/3] feat(newsLetter): created responsive news letter for 4k --- src/components/newsLetter/styles.module.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/components/newsLetter/styles.module.scss b/src/components/newsLetter/styles.module.scss index e1efd92..d451604 100644 --- a/src/components/newsLetter/styles.module.scss +++ b/src/components/newsLetter/styles.module.scss @@ -84,3 +84,20 @@ } } } + +@media screen and (min-width: 2500px) { + .firstH2 { + font-size: 36px !important; + } + + .newsInput { + max-height: unset !important; + height: 59px; + font-size: 28px !important; + } + + .newsButton { + height: 59px; + font-size: 24px !important; + } +}