From ba3654f99a02a988b82b499798c6f98918b8efaf Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 3 Jan 2023 17:38:21 -0300 Subject: [PATCH] feat(Informacoes): Cria e estiliza todos os tamanhos de tela o conteudo da pagina --- .../components/HeaderBottom.module.scss | 3 +- .../src/components/Main/Main.module.scss | 8 +- .../src/components/Main/Main.tsx | 17 +++- .../Main/components/Form/FormCustom.tsx | 9 +++ .../Main/components/Informacoes.module.scss | 80 +++++++++++++++++++ .../Main/components/Informacoes.tsx | 59 ++++++++++++++ .../src/styles/global.scss | 7 +- .../src/styles/variaveis.scss | 22 ++--- 8 files changed, 186 insertions(+), 19 deletions(-) create mode 100644 desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx create mode 100644 desafio-react-typescript/src/components/Main/components/Informacoes.module.scss create mode 100644 desafio-react-typescript/src/components/Main/components/Informacoes.tsx diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss index b585c29..4beaeff 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss @@ -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; diff --git a/desafio-react-typescript/src/components/Main/Main.module.scss b/desafio-react-typescript/src/components/Main/Main.module.scss index 3ce127a..4ec12d8 100644 --- a/desafio-react-typescript/src/components/Main/Main.module.scss +++ b/desafio-react-typescript/src/components/Main/Main.module.scss @@ -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); diff --git a/desafio-react-typescript/src/components/Main/Main.tsx b/desafio-react-typescript/src/components/Main/Main.tsx index de12c0e..752e77a 100644 --- a/desafio-react-typescript/src/components/Main/Main.tsx +++ b/desafio-react-typescript/src/components/Main/Main.tsx @@ -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 ( -
+
- Casa - - Institucional + + Casa + + + + + + Institucional +

INSTITUCIONAL

+ +
); }; diff --git a/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx b/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx new file mode 100644 index 0000000..210336c --- /dev/null +++ b/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +const FormCustom = () => { + return ( +

Form

+ ) +} + +export default FormCustom; \ No newline at end of file diff --git a/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss new file mode 100644 index 0000000..3df5182 --- /dev/null +++ b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss @@ -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); + } + } + } +} diff --git a/desafio-react-typescript/src/components/Main/components/Informacoes.tsx b/desafio-react-typescript/src/components/Main/components/Informacoes.tsx new file mode 100644 index 0000000..f5fd2a4 --- /dev/null +++ b/desafio-react-typescript/src/components/Main/components/Informacoes.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import styles from "./Informacoes.module.scss"; + +const Informacoes = () => { + return ( +
+
+
    +
  • Sobre
    • +
  • + Forma de Pagamento +
    • +
  • Entrega
    • +
  • Troca e Devolução
    • +
  • + Segurança e Privacidade +
    • +
  • + Contato +
    • +
+
+
+

Sobre

+

+ 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. +

+

+ 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. +

+

+ 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? +

+
+
+ ); +}; + +export default Informacoes; diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index f6d6243..6a41bb6 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -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; diff --git a/desafio-react-typescript/src/styles/variaveis.scss b/desafio-react-typescript/src/styles/variaveis.scss index f4df6a9..79c2cd6 100644 --- a/desafio-react-typescript/src/styles/variaveis.scss +++ b/desafio-react-typescript/src/styles/variaveis.scss @@ -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; \ No newline at end of file +$xl: 2500px;