WellingtonDuarteSantos/desafio-react-e-typescript-wellington-duarte-santos
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/content #2

Merged
WellingtonDuarteSantos merged 9 commits from feature/content into main 2023-01-21 03:01:40 +00:00
Conversation 0 Commits 9 Files Changed 46 +183
3 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9e4e29ce0f - Show all commits

2
src/App.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { Header } from "./components/Header/Header";
import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb";
import { Content } from "./components/Content/Content";
import { Newsletter } from "./components/Newsletter/Newsletter";
import "./global.css";
function App() {
@ -13,6 +14,7 @@ function App() {
<h1>institucional</h1>
</div>
<Content />
<Newsletter />
</>
);
}

160
src/components/Newsletter/Newsletter.scss Normal file
View File

@ -0,0 +1,160 @@
.newsletter {
padding: 16px;
background: #ffffff;
border-width: 1px 0px;
border-style: solid;
border-color: #000000;
.newsletter-wrapper {
width: 38%;
margin: 0 auto;
.news-col {
display: flex;
flex-direction: column;
.news-row {
display: flex;
margin-bottom: 8px;
.news-signup {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.05em;
font-variant: small-caps;
color: #303030;
}
.news-email {
width: 100%;
padding: 13px 16px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
text-transform: uppercase;
}
.news-email::-webkit-input-placeholder {
color: #c4c4c4;
}
.news-submit {
width: 128px;
padding: 14px 20px;
background: #000000;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 14px;
text-align: center;
letter-spacing: 0.05em;
color: #ffffff;
margin-left: 8px;
text-transform: uppercase;
}
}
}
}
}
@media screen and (min-width: 2000px) {
.news-signup {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 36px;
line-height: 42px;
letter-spacing: 0.05em;
font-variant: small-caps;
}
.news-email {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
.news-submit {
width: 246px;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 240px;
line-height: 28px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
}
}
@media screen and (max-width: 1024px) {
.newsletter {
.newsletter-wrapper {
width: 100%;
.news-col {
.news-row {
flex-direction: column;
margin-bottom: 16px;
.news-signup {
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.05em;
font-variant: small-caps;
}
.news-email {
width: auto;
padding: 17px 16px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
.news-email::-webkit-input-placeholder {
color: #c4c4c4;
}
.news-submit {
width: 100%;
padding: 17px;
background: #000000;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
font-family: "Roboto";
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 14px;
text-align: center;
letter-spacing: 0.05em;
color: #ffffff;
margin-left: 0px;
margin-top: 16px;
text-transform: uppercase;
}
}
}
}
}
}

21
src/components/Newsletter/Newsletter.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
import "./Newsletter.scss";
const Newsletter = () => {
return (
<div className="newsletter">
<div className="newsletter-wrapper">
<div className="news-col">
<div className="news-row">
<span className="news-signup">Assine nossa Newsletter</span>
</div>
<div className="news-row">
<input type="text" placeholder="E-mail" className="news-email" />
<button className="news-submit">Enviar</button>
</div>
</div>
</div>
</div>
);
};
export { Newsletter };