forked from M3-Academy/desafio-react-e-typescript
feature/content #2
@ -1,12 +1,18 @@
|
||||
import React from "react";
|
||||
import { Header } from "./components/Header/Header";
|
||||
import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb";
|
||||
import { Content } from "./components/Content/Content";
|
||||
import "./global.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Breadcrumb />
|
||||
<div className="title">
|
||||
<h1>institucional</h1>
|
||||
</div>
|
||||
<Content />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
72
src/components/Content/Content.scss
Normal file
72
src/components/Content/Content.scss
Normal file
@ -0,0 +1,72 @@
|
||||
.content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: -webkit-fill-available;
|
||||
margin: 80px 100px;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
border-right: 1px solid black;
|
||||
|
||||
.tab-item {
|
||||
padding: 10px 16px;
|
||||
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.tab-active {
|
||||
background: #000000;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-view {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-left: 30px;
|
||||
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.tab-view-title {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
.tab-view-content {
|
||||
margin-top: 12px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
171
src/components/Content/Content.tsx
Normal file
171
src/components/Content/Content.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
import React from "react";
|
||||
import "./Content.scss";
|
||||
|
||||
const Content = () => {
|
||||
return (
|
||||
<main className="content">
|
||||
<div className="tabs">
|
||||
<ul className="tab-items">
|
||||
<li className="tab-item tab-active">Sobre</li>
|
||||
<li className="tab-item">Forma de Pagamento</li>
|
||||
<li className="tab-item">Entrega</li>
|
||||
<li className="tab-item">Troca e Devolução</li>
|
||||
<li className="tab-item">Segurança e Privacidade</li>
|
||||
<li className="tab-item">Contato</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="tab-view">
|
||||
<div className="About">
|
||||
<h2 className="tab-view-title">Sobre</h2>
|
||||
<p className="tab-view-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum. <br />
|
||||
<br />
|
||||
<br /> Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
|
||||
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora incidunt ut
|
||||
labore et dolore magnam aliquam quaerat voluptatem. <br />
|
||||
<br />
|
||||
<br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="payment">
|
||||
<h2 className="tab-view-title">Forma de Pagamento</h2>
|
||||
<p className="tab-view-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum. <br />
|
||||
<br />
|
||||
<br /> Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
|
||||
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora incidunt ut
|
||||
labore et dolore magnam aliquam quaerat voluptatem. <br />
|
||||
<br />
|
||||
<br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="delivery">
|
||||
<h2 className="tab-view-title">Entrega</h2>
|
||||
<p className="tab-view-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum. <br />
|
||||
<br />
|
||||
<br /> Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
|
||||
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora incidunt ut
|
||||
labore et dolore magnam aliquam quaerat voluptatem. <br />
|
||||
<br />
|
||||
<br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="devolution">
|
||||
<h2 className="tab-view-title">Troca e devolução</h2>
|
||||
<p className="tab-view-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum. <br />
|
||||
<br />
|
||||
<br /> Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
|
||||
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora incidunt ut
|
||||
labore et dolore magnam aliquam quaerat voluptatem. <br />
|
||||
<br />
|
||||
<br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="privacy">
|
||||
<h2 className="tab-view-title">Segurança e Privacidade</h2>
|
||||
<p className="tab-view-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
||||
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum. <br />
|
||||
<br />
|
||||
<br /> Sed ut perspiciatis unde omnis iste natus error sit
|
||||
voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||||
eaque ipsa quae ab illo inventore veritatis et quasi architecto
|
||||
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
|
||||
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
|
||||
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
|
||||
adipisci velit, sed quia non numquam eius modi tempora incidunt ut
|
||||
labore et dolore magnam aliquam quaerat voluptatem. <br />
|
||||
<br />
|
||||
<br />
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
|
||||
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
|
||||
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
|
||||
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
|
||||
voluptas nulla pariatur?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
export { Content };
|
||||
@ -51,7 +51,7 @@ const Header = () => {
|
||||
</div>
|
||||
|
||||
{/* Menu para mobile */}
|
||||
<div className={active ? "menu-open overlay" : "menu-closed"}>
|
||||
<aside className={active ? "menu-open overlay" : "menu-closed"}>
|
||||
<nav className="side-menu">
|
||||
<div className="side-menu-top">
|
||||
<p className="entrar">Entrar</p>
|
||||
@ -66,7 +66,7 @@ const Header = () => {
|
||||
<li>Institucionais</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -13,3 +13,20 @@ code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: #292929;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 80px auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user