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

feat: adiciona formulário 2500px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-08 08:16:59 -03:00
parent 698b035baa
commit beb84fd3c9
9 changed files with 203 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Main/About/styles.module.scss
View File

@ -41,4 +41,21 @@
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

47
src/components/Main/Contact/styles.module.scss
View File

@ -114,4 +114,51 @@
align-items: center;
}
}
@media (min-width: 2500px) {
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
.form {
&__input {
label {
font-size: 28px;
line-height: 33px;
}
input {
height: 63px;
font-size: 28px;
line-height: 33px;
&::placeholder {
font-size: 28px;
line-height: 33px;
}
}
}
&__checkbox {
font-size: 28px;
line-height: 33px;
input {
width: 36.4px;
height: 35.15px;
border-radius: 3px;
}
}
button {
height: 71px;
font-size: 32px;
line-height: 38px;
}
}
}
}
}

17
src/components/Main/Delivery/styles.module.scss
View File

@ -41,4 +41,21 @@
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

17
src/components/Main/ExchangeAndReturn/styles.module.scss
View File

@ -41,4 +41,21 @@
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

16
src/components/Main/MainMenu/styles.module.scss
View File

@ -36,4 +36,20 @@
width: 100%;
margin-bottom: 30px;
}
@media (min-width: 2500px) {
width: 25.6522%;
padding-bottom: 117px;
li {
height: 58px;
font-size: 32px;
line-height: 38px;
a {
line-height: 38px;
padding: 10px 0 10px 16px;
}
}
}
}

17
src/components/Main/Payment/styles.module.scss
View File

@ -41,4 +41,21 @@
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

17
src/components/Main/SecurityAndPrivacy/styles.module.scss
View File

@ -45,4 +45,21 @@
}
}
}
@media (min-width: 2500px) {
min-height: 465px;
&__text {
width: 73.044%;
h1 {
font-size: 48px;
line-height: 56px;
}
p {
font-size: 26px;
line-height: 30px;
}
}
}
}

44
src/components/Main/index.tsx
View File

@ -14,30 +14,28 @@ const Main = () => {
return (
<main className={styles["main"]}>
<div className={styles["main__container"]}>
<div className={styles["main__top"]}>
<div className={styles["main__way"]}>
<span className={styles["homeIcon"]}>
<img src={homeIcon} alt="Home" />
</span>
<span className={styles["arrowIcon"]}>
<img src={arrowRightIcon} alt="Seta" />
</span>
<p>INSTITUCIONAL</p>
</div>
<div className={styles["main__title"]}>
<h1>Institucional</h1>
</div>
<Router>
<Routes>
<Route path="/" element={<About />} />
<Route path="/payment" element={<Payment />} />
<Route path="/delivery" element={<Delivery />} />
<Route path="/exchange" element={<ExchangeAndReturn />} />
<Route path="/security" element={<SecurityAndPrivacy />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
<div className={styles["main__way"]}>
<span className={styles["homeIcon"]}>
<img src={homeIcon} alt="Home" />
</span>
<span className={styles["arrowIcon"]}>
<img src={arrowRightIcon} alt="Seta" />
</span>
<p>INSTITUCIONAL</p>
</div>
<div className={styles["main__title"]}>
<h1>Institucional</h1>
</div>
<Router>
<Routes>
<Route path="/" element={<About />} />
<Route path="/payment" element={<Payment />} />
<Route path="/delivery" element={<Delivery />} />
<Route path="/exchange" element={<ExchangeAndReturn />} />
<Route path="/security" element={<SecurityAndPrivacy />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
</div>
</main>
);

34
src/components/Main/styles.module.scss
View File

@ -89,4 +89,38 @@
}
}
}
@media (min-width: 2500px) {
&__container {
width: 92%;
}
&__way {
height: 60.25px;
.homeIcon {
width: 31.25px;
height: 31.25px;
}
.arrowIcon {
width: 15.62px;
height: 15.62px;
}
p {
font-size: 24px;
line-height: 28px;
}
}
&__title {
height: 218px;
h1 {
font-size: 48px;
line-height: 56px;
}
}
}
}