forked from M3-Academy/desafio-react-e-typescript
Merge pull request 'feat: adiciona formulário 375px e 1024px' (#17) from feature/adiciona-formulario-375px-1024px into development
Reviewed-on: #17
This commit is contained in:
commit
698b035baa
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.26%;
|
||||
@ -26,4 +26,19 @@
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -103,4 +103,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.26%;
|
||||
@ -26,4 +26,19 @@
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.26%;
|
||||
@ -26,4 +26,19 @@
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -29,4 +29,11 @@
|
||||
background: var(--black-500);
|
||||
color: var(--white-500);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-width: none;
|
||||
border-style: none;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.26%;
|
||||
@ -26,4 +26,19 @@
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 285px;
|
||||
min-height: 285px;
|
||||
|
||||
&__text {
|
||||
width: 69.26%;
|
||||
@ -15,6 +15,10 @@
|
||||
line-height: 28px;
|
||||
color: var(--black-400);
|
||||
margin: 12px 0;
|
||||
|
||||
@media (max-width: 299px) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -26,4 +30,19 @@
|
||||
color: var(--gray-300);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -70,4 +70,23 @@
|
||||
color: var(--black-400);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 81px;
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
height: 148px;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
position: absolute;
|
||||
bottom: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,22 +1,38 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.scss";
|
||||
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
|
||||
|
||||
interface FormikValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
const initialValues = {
|
||||
email: "",
|
||||
};
|
||||
|
||||
const NewsLetter = () => {
|
||||
const handleFormikSubmit = (values: FormikValues) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles["newsLetter"]}>
|
||||
<div className={styles["newsLetter__title"]}>
|
||||
<h1>Assine nossa Newsletter</h1>
|
||||
</div>
|
||||
<form className={styles["newsLetter__container"]}>
|
||||
<input
|
||||
className={styles["newsLetter__input"]}
|
||||
type="text"
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
<button className={styles["newsLetter__button"]} type="submit">
|
||||
Enviar
|
||||
</button>
|
||||
</form>
|
||||
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
|
||||
<Form className={styles["newsLetter__container"]}>
|
||||
<Field
|
||||
id="email"
|
||||
name="email"
|
||||
className={styles["newsLetter__input"]}
|
||||
placeholder="E-mail"
|
||||
/>
|
||||
<button className={styles["newsLetter__button"]} type="submit">
|
||||
Enviar
|
||||
</button>
|
||||
</Form>
|
||||
</Formik>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user