forked from M3-Academy/desafio-react-e-typescript
feat(Informacoes): Cria e estiliza todos os tamanhos de tela o conteudo da pagina
This commit is contained in:
parent
8cc376f524
commit
ba3654f99a
@ -8,8 +8,7 @@
|
||||
|
||||
@include mq($lg, max) {
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
background-color: rgba(69, 69, 69, 0.7);
|
||||
|
||||
top: 0;
|
||||
border: 0;
|
||||
|
@ -43,11 +43,15 @@
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include fontStyle(400, 24px, 28px, $primary-1000);
|
||||
@include fontStyle(400, 24px, 28px, $gray-900);
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
@include mq($lg, max) {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(48px, 56px);
|
||||
|
@ -2,17 +2,26 @@ import React from "react";
|
||||
import home from "../../assets/svgs/home.svg";
|
||||
import arrowRight from "../../assets/svgs/arrow-right.svg";
|
||||
import styles from "./Main.module.scss";
|
||||
import Informacoes from "./components/Informacoes";
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<main className={styles["main"]}>
|
||||
<main className={styles["main"]}>
|
||||
<div className={styles["main__current-page"]}>
|
||||
<a className={styles["main__home"]} href="/"><img src={home} alt="Casa" /></a>
|
||||
<span className={styles["main__arrow-right"]}><img src={arrowRight} alt="" /></span>
|
||||
<a className={styles["main__page"]} href="/">Institucional</a>
|
||||
<a className={styles["main__home"]} href="/">
|
||||
<img src={home} alt="Casa" />
|
||||
</a>
|
||||
<span className={styles["main__arrow-right"]}>
|
||||
<img src={arrowRight} alt="" />
|
||||
</span>
|
||||
<a className={styles["main__page"]} href="/">
|
||||
Institucional
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1 className={styles["main__title"]}>INSTITUCIONAL</h1>
|
||||
|
||||
<Informacoes />
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
const FormCustom = () => {
|
||||
return (
|
||||
<h1>Form</h1>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormCustom;
|
@ -0,0 +1,80 @@
|
||||
@import "../../../styles/all.scss";
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
display: block;
|
||||
}
|
||||
.content-list {
|
||||
border-right: 1px solid $black;
|
||||
width: 27.96296296%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 25.652189%;
|
||||
}
|
||||
|
||||
&__subject {
|
||||
padding: 10px 16px;
|
||||
@include fontStyle(400, 16px, 19px, $gray-500);
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(32px, 38px);
|
||||
}
|
||||
}
|
||||
|
||||
&__active {
|
||||
background-color: $black;
|
||||
@include fontStyle(700, 16px, 19px, $white);
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(32px, 38px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-subject {
|
||||
width: 69.2592592%;
|
||||
|
||||
@include mq($lg, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
width: 73.04347826%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include fontStyle(700, 24px, 28px, $gray-900);
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(48px, 56px);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
@include fontStyle(400, 13px, 15px, $gray-500);
|
||||
margin-bottom: 15px;
|
||||
|
||||
@include mq($lg, max) {
|
||||
@include fontStyleResponsive(12px, 18px);
|
||||
}
|
||||
|
||||
@include mq($xl, min) {
|
||||
@include fontStyleResponsive(26px, 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import styles from "./Informacoes.module.scss";
|
||||
|
||||
const Informacoes = () => {
|
||||
return (
|
||||
<div className={styles["container"]}>
|
||||
<div className={styles["content-list"]}>
|
||||
<ul className={styles["content-list__container"]}>
|
||||
<li className={styles["content-list__subject"]}>Sobre</li>
|
||||
<li className={styles["content-list__subject"]}>
|
||||
Forma de Pagamento
|
||||
</li>
|
||||
<li className={styles["content-list__subject"]}>Entrega</li>
|
||||
<li className={styles["content-list__subject"]}>Troca e Devolução</li>
|
||||
<li className={styles["content-list__subject"]}>
|
||||
Segurança e Privacidade
|
||||
</li>
|
||||
<li
|
||||
className={`${styles["content-list__subject"]} ${styles["content-list__active"]}`}
|
||||
>
|
||||
Contato
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={styles["content-subject"]}>
|
||||
<h2 className={styles["content-subject__title"]}>Sobre</h2>
|
||||
<p className={styles["content-subject__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.
|
||||
</p>
|
||||
<p className={styles["content-subject__content"]}>
|
||||
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.
|
||||
</p>
|
||||
<p className={styles["content-subject__content"]}>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Informacoes;
|
@ -1,4 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
@ -7,6 +7,11 @@
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
//APAGAR A LINHA DEPOIS
|
||||
body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border: none;
|
||||
|
@ -2,18 +2,20 @@
|
||||
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
|
||||
$primary-100: #5200FF;
|
||||
|
||||
$primary-100: #5200ff;
|
||||
$primary-200: #303030;
|
||||
$primary-300: #5E5E5E;
|
||||
$primary-300: #5e5e5e;
|
||||
$primary-400: #919191;
|
||||
$primary-500: #C6C6C6;
|
||||
$primary-600: #C4C4C4;
|
||||
$primary-700: #F2F2F2;
|
||||
$primary-800: #F9F9F9;
|
||||
$primary-900: #FF0000;
|
||||
$primary-1000: #292929;
|
||||
$primary-500: #c6c6c6;
|
||||
$primary-600: #c4c4c4;
|
||||
$primary-700: #f2f2f2;
|
||||
$primary-800: #f9f9f9;
|
||||
$primary-900: #ff0000;
|
||||
|
||||
$gray-500: #7d7d7d;
|
||||
$gray-900: #292929;
|
||||
//media Queries
|
||||
$sm: 375px;
|
||||
$lg: 1024px;
|
||||
$xl: 2500px;
|
||||
$xl: 2500px;
|
||||
|
Loading…
Reference in New Issue
Block a user