anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Newsletter

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-04 08:34:46 -03:00
parent 0d6aeb88b1
commit 9f89095f11
4 changed files with 169 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/Footer/Footer.module.scss
View File

@ -495,3 +495,148 @@ footer {
}
}
}
//Newsletter
.Newsletter {
width: 100%;
height: 102.02px;
background: $white;
border-width: 1px 0px;
border-style: solid;
border-color: $black;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
@media (min-width: 2500px) {
height: 141.24px;
}
@media (max-width: 1025px) {
height: 180.01px;
}
&__Content {
width: 84.378%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
@media (min-width: 2500px) {
width: 92.002%;
}
@media (max-width: 1025px) {
width: 96.875%;
}
@media (max-width: 376px) {
width: 91.484%;
// width: 91.284%;
}
&__Block {
width: 43.878%;
@media (min-width: 2500px) {
width: 40.075%;
}
@media (max-width: 1025px) {
width: 100%;
}
&__Message {
margin: 0 0 8px;
font-family: "Roboto";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $primary-200;
@media (min-width: 2500px) {
font-size: 36px;
line-height: 42px;
}
@media (max-width: 1025px) {
margin: 0 0 16px;
font-size: 14px;
line-height: 16px;
}
}
&__Register {
display: flex;
@media (max-width: 1025px) {
flex-direction: column;
}
& input {
padding: 12.06px 16px;
width: 64.57%;
background: $white;
border: 1px solid $primary-300;
border-radius: 4px;
margin-right: 8px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $primary-600;
@media (min-width: 2500px) {
width: 68.766%;
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1025px) {
margin-right: 0;
width: calc(100% - 34.2px);
border-radius: unset;
margin-bottom: 16px;
}
@media (max-width: 376px) {
width: auto;
}
&::placeholder {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $primary-600;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
}
& button {
padding: 14px 20px;
width: 26.59%;
height: 42px;
background: $black;
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: $white;
text-transform: uppercase;
@media (min-width: 2500px) {
width: 26.681%;
height: 59px;
font-size: 24px;
line-height: 28px;
}
@media (max-width: 1025px) {
width: 100%;
border-radius: unset;
font-size: 14px;
line-height: 16px;
border: none;
}
}
}
}
}
}

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

@ -1,11 +1,14 @@
import styles from "./Footer.module.scss";
import { FooterBottom } from "./FooterBottom";
import { FooterTop } from "./FooterTop";
import { Newsletter } from "./Newsletter";
const Footer = () => {
return (
<footer>
<div className={styles["Newsletter"]}></div>
<div className={styles["Newsletter"]}>
<Newsletter/>
</div>
<div className={styles["Footer__Top"]}>
<FooterTop />
</div>

19
src/components/Footer/Newsletter.tsx Normal file
View File

@ -0,0 +1,19 @@
import styles from "./Footer.module.scss";
const Newsletter = () => {
return (
<div className={styles["Newsletter__Content"]}>
<div className={styles["Newsletter__Content__Block"]}>
<h3 className={styles["Newsletter__Content__Block__Message"]}>
Assine nossa Newsletter
</h3>
<div className={styles["Newsletter__Content__Block__Register"]}>
<input type="text" placeholder="E-mail" />
<button>Enviar</button>
</div>
</div>
</div>
);
};
export { Newsletter };

1
src/variaveis.scss
View File

@ -3,6 +3,7 @@ $black: #000000;
$white: #FFFFFF;
$primary-200: #303030;
$primary-300: #5E5E5E;
$primary-700: #f2f2f2;
$primary-600: #C4C4C4;
$primary-500: #C6C6C6;