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

feat: cria area da newsletter da pagina, com responsividade #4

Merged
emmanuelvitor merged 1 commits from feature/NewsLetter into development 2023-01-12 02:30:02 +00:00
Conversation 0 Commits 1 Files Changed 4 +167 -5
4 changed files with 167 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Footer/NewsLetter.tsx
View File

@ -1,5 +0,0 @@
import React from "react";
export const NewsLetter = () => {
}

18
src/components/NewsLetter/NewsLetter.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import styleNewsLetter from "./Newsletter.module.scss";
export const NewsLetter = () => {
return (
<div className={styleNewsLetter["newsLetter"]}>
<div className={styleNewsLetter["newsLetter__wrapper"]}>
<h3 className={styleNewsLetter["newsLetter__title"]}>Assine nossa Newsletter</h3>
<form className={styleNewsLetter["newsLetter__form"]} action="/">
<input className={styleNewsLetter["newsLetter__form__input"]} type="email" name="email" id="email" placeholder="E-mail" />
<input className={styleNewsLetter["newsLetter__form__submit"]} type="submit" value="Enviar" />
</form>
</div>
</div>
);
}

147
src/components/NewsLetter/Newsletter.module.scss Normal file
View File

@ -0,0 +1,147 @@
.newsLetter {
width: 100%;
padding: 16px 0;
border: 1px solid;
&__wrapper {
display: flex;
flex-direction: column;
width: 37.03125%;
margin: 0 auto;
@media (max-width:1024px) {
row-gap: 16px;
margin: 0 16px;
width: 96.875%;
}
@media (max-width:768px) {
width: 94%;
}
@media (max-width:490px) {
width: 90.4%;
}
.newsLetter__title {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.05em;
font-variant: small-caps;
text-transform: uppercase;
color: #303030;
margin: 0;
margin-bottom: 8px;
@media (min-width:2500px) {
font-size: 36px;
line-height: 42px;
}
@media (max-width:1024px) {
font-size: 14px;
line-height: 16px;
}
}
.newsLetter__form {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 10px;
@media (max-width:1024px) {
row-gap: 16px;
flex-direction: column;
}
&__input{
width: 100%;
max-width: 340px;
height: 42px;
border-radius: 4px;
border: 1px solid #E5E5E5;
outline: none;
padding: 0 16px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #C4C4C4;
&::placeholder{
color: #C4C4C4;
}
@media (min-width:2500px) {
height: 59px;
min-width: 668px;
font-size: 28px;
line-height: 33px;
}
@media (max-width:1024px) {
max-width: 96.875% ;
}
@media (max-width:768px) {
width: 94.875%;
}
@media (max-width:512px) {
width: 91.875%;
}
@media (max-width:490px) {
width: 90.4%;
}
}
&__submit {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.05em;
color: #FFFFFF;
width: 100%;
max-width: 126px;
padding: 14px 20px;
border-radius: 4px;
outline: none;
border: none;
background: #000000;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
@media (min-width:2500px) {
min-width: 246px;
height: 59px;
font-size: 24px;
line-height: 28px;
}
@media (max-width:1024px) {
max-width: none ;
}
}
}
}
}

2
src/pages/Home.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { Rodape } from "../components/Footer/Rodape/Rodape";
import { Header } from "../components/Header/Header";
import { NewsLetter } from "../components/NewsLetter/NewsLetter";
export const Home = () => {
@ -8,6 +9,7 @@ export const Home = () => {
<>
<Header />
<NewsLetter />
<Rodape />
</>
)