AdilsonFernandoNevesOrnellas/desafio-react-e-typescript-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: newsletter adicionado e já responsivo

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-03 13:32:29 -03:00
parent 0495b26f7b
commit bc5da5dd6d
2 changed files with 106 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
adilson-fernando/src/components/Main/Newsletter.tsx
View File

@ -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>
);
};

95
adilson-fernando/src/styles/Newsletter.module.scss
View File

@ -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;
}
}
}
}