forked from M3-Academy/desafio-react-e-typescript
feat: Cria breadcrumbs desktop
This commit is contained in:
parent
91cb35e36e
commit
d92f2d91ef
@ -1,10 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_560)">
|
||||
<path d="M11.9417 7.03685L5.22531 0.320703C4.79807 -0.106746 4.10537 -0.106746 3.67833 0.320703C3.25126 0.747771 3.25126 1.44043 3.67833 1.86747L9.62128 7.81023L3.67851 13.7528C3.25144 14.18 3.25144 14.8726 3.67851 15.2997C4.10558 15.7269 4.79824 15.7269 5.22548 15.2997L11.9418 8.58344C12.1554 8.3698 12.262 8.0901 12.262 7.81026C12.262 7.53029 12.1552 7.25038 11.9417 7.03685Z" fill="#C4C4C4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_560">
|
||||
<rect width="15.62" height="15.62" fill="white" transform="matrix(1 0 0 -1 0 15.6201)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.11608 3.60396L1.6762 0.164193C1.45738 -0.0547314 1.10261 -0.0547314 0.883896 0.164193C0.665166 0.382921 0.665166 0.737679 0.883896 0.95639L3.92766 4.00006L0.883984 7.04362C0.665255 7.26244 0.665255 7.61716 0.883984 7.83589C1.10271 8.0547 1.45747 8.0547 1.67629 7.83589L5.11617 4.39607C5.22553 4.28665 5.28015 4.1434 5.28015 4.00008C5.28015 3.85668 5.22543 3.71332 5.11608 3.60396Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 689 B After Width: | Height: | Size: 510 B |
@ -119,8 +119,8 @@
|
||||
margin: 38px 100px 38px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
}
|
||||
// @media (min-width: 2500px) {
|
||||
// }
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
@ -244,7 +244,7 @@
|
||||
justify-content: space-between;
|
||||
width: 84.38%;
|
||||
margin: auto;
|
||||
gap: 110.41px;
|
||||
// gap: 110.41px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 92%;
|
||||
@ -257,6 +257,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 91.6%;
|
||||
}
|
||||
|
||||
.address {
|
||||
color: var(--white);
|
||||
font-style: normal;
|
||||
@ -272,12 +276,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// max-width: 40%;
|
||||
|
||||
// @include mq(md, max) {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 22.15%;
|
||||
font-size: 20px;
|
||||
@ -294,7 +292,7 @@
|
||||
.stamps {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 40.62%;
|
||||
width: 36.89%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
@ -302,7 +300,7 @@
|
||||
gap: 12px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 32.815%;
|
||||
width: 30.087%;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@ -311,31 +309,49 @@
|
||||
margin: 21.94px 0 21.94px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 376px) and (max-width: 767px) {
|
||||
width: 87%;
|
||||
margin: 22px 0 23px 16px;
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
order: 1;
|
||||
gap: 11px;
|
||||
margin: 22px 16px 23px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 91.2%;
|
||||
order: 1;
|
||||
gap: 4px;
|
||||
margin: 22px 0 23px 16px;
|
||||
}
|
||||
// @media (max-width: 280px) {
|
||||
// width: 100%;
|
||||
// order: 1;
|
||||
// gap: 11px;
|
||||
// margin: 22px 16px 23px 16px;
|
||||
// }
|
||||
|
||||
.creditcard {
|
||||
width: 20.27%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
width: 36px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vtex {
|
||||
width: 31%;
|
||||
// width: 31%;
|
||||
|
||||
.vtex-pci {
|
||||
width: 100%;
|
||||
width: 54.61px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 106px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -346,8 +362,8 @@
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: 42px;
|
||||
@media (max-width: 375px) {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -361,6 +377,10 @@
|
||||
margin: 27px 0 22px;
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 404.17px
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
order: 3;
|
||||
margin: 0;
|
||||
|
||||
30
src/components/main/index.tsx
Normal file
30
src/components/main/index.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
|
||||
import styles from "../main/style.module.scss";
|
||||
|
||||
import RightArrow from "../../assets/svgs/arrow-point-to-right.svg";
|
||||
import Home from "../../assets/svgs/home.svg";
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles["breadcrumb"]}>
|
||||
<a href="/" className={styles["breadcrumb__home"]}>
|
||||
<img src={Home} alt="Voltar para a home" />
|
||||
</a>
|
||||
<div className={styles["breadcrumb__right-arrow"]}>
|
||||
<img src={RightArrow} alt="Seta para a direita" />
|
||||
</div>
|
||||
<a href="/" className={styles["breadcrumb__title"]}>
|
||||
<h3>Institucional</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className={styles["page-title"]}>
|
||||
<h1>Institucional</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { Main };
|
||||
68
src/components/main/style.module.scss
Normal file
68
src/components/main/style.module.scss
Normal file
@ -0,0 +1,68 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 29px 100px 81px;
|
||||
gap: 9.73px;
|
||||
|
||||
&__home {
|
||||
height: 16px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 15.99px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 31.22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__right-arrow {
|
||||
img {
|
||||
width: 4.56px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 8.9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-decoration: none;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: var(--light-gray-500);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin: 0 0 80px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,13 @@
|
||||
import React from "react";
|
||||
import { Header } from "../components/header";
|
||||
|
||||
import { Main } from "../components/main";
|
||||
import { Footer } from "../components/footer";
|
||||
|
||||
const Institucional = () => {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user