From 57e42e1f93028bb3d4d9483000458b1e434ff51e Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Mon, 1 Feb 2021 18:39:13 -0300 Subject: [PATCH 01/15] adc comentarios no arquivo --- components/BannerQuizNivelamento/index.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/components/BannerQuizNivelamento/index.js b/components/BannerQuizNivelamento/index.js index 083c6ef..46a89b0 100644 --- a/components/BannerQuizNivelamento/index.js +++ b/components/BannerQuizNivelamento/index.js @@ -1,10 +1,15 @@ -import { Button } from "antd"; -import Head from "next/head"; -import React, { useState } from "react"; -import * as S from "./styles"; +import { Button } from "antd"; //importando botão do antd +import Head from "next/head"; //componente integrado para anexar elementos do head +import React, { useState } from "react";/*permite adc o state do React (onde estão os dados do componente), +// um hook, em uma função */ +import * as S from "./styles";//'S' não precisa importar cada componente do styles, separadamente export default function BannerQuizNivelamento() { return ( + /*S.Wrapper vai estilizar esse container conforme "export const Wrapper = styled.div" do styles.js + S.TesteNivelamento, S.Title, S.Description, vão usar o style conforme o que for + definido em seu respectivo "item" no style.js*/ + // Wrapper é uma cápsula, um content, "div capa" de um componente
Teste de Nivelamento From 06f1285c70ee57c0eb35031969dfc04eaba527d4 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Mon, 1 Feb 2021 18:39:41 -0300 Subject: [PATCH 02/15] adc comentarios no arquivo --- components/BannerQuizNivelamento/styles.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/BannerQuizNivelamento/styles.js b/components/BannerQuizNivelamento/styles.js index 9507ab1..30069b2 100644 --- a/components/BannerQuizNivelamento/styles.js +++ b/components/BannerQuizNivelamento/styles.js @@ -1,10 +1,12 @@ -import styled from "styled-components"; +import styled from "styled-components"; //importa styles para os componentes +//adc esse style ao container Wrapper, do index.js export const Wrapper = styled.div` padding: 100px 0; background: #222266; `; +//adc esse style na parte do index.js export const TesteNivelamento = styled.p` color: #98b; margin-bottom: 0; @@ -12,11 +14,13 @@ export const TesteNivelamento = styled.p` font-size: 18px; `; +//adc esse style na parte do index.js export const Title = styled.h3` font-size: 28px; color: #eee; `; +//adc esse style na parte do index.js export const Description = styled.p` margin-bottom: 30px; font-size: 20px; From 781b8dd13e899ba5914b425ad5afde3bd558145e Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Thu, 4 Feb 2021 00:30:09 -0300 Subject: [PATCH 03/15] criado - @media all and (max-width:600px) - para mobile --- styles/AprenderReactDoZero.module.scss | 41 ++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss index b470f39..a048a63 100644 --- a/styles/AprenderReactDoZero.module.scss +++ b/styles/AprenderReactDoZero.module.scss @@ -17,6 +17,8 @@ x.banner { background-color: #5f4aaa; } + + .content { position: relative; z-index: 5; @@ -53,6 +55,7 @@ x.banner { } .NaoExisteLinear { + margin: 0; max-width: 800px; } @@ -65,3 +68,41 @@ x.banner { font-size: 28px; color: #cbf; } + + + + +@media all and (max-width: 600px){ + .content{ + h1, h2, h3, h4, h5, h6{ + font-size: 22px; + } + p{ + font-size: 18px; + text-align: justify-all; + } + margin: 0; + +} +.NaoExisteLinear{ + h2{ + align-items: left; + font-size: 22px; + margin: 0; + } + p{ + font-size: 18px; + text-align: justify-all; + margin: 0; + } +} +.highlightText{ + font-size: 18px; + margin: 0; +} + +.nextPageLink{ + font-size: 15px; +} + +} From b9600064acab568b9614c4ef10b38cd8c30e8130 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Thu, 4 Feb 2021 22:19:22 -0300 Subject: [PATCH 04/15] style organizado para screen max-width 600px --- styles/AprenderReactDoZero.module.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss index a048a63..ce7bc25 100644 --- a/styles/AprenderReactDoZero.module.scss +++ b/styles/AprenderReactDoZero.module.scss @@ -74,19 +74,28 @@ x.banner { @media all and (max-width: 600px){ .content{ - h1, h2, h3, h4, h5, h6{ + h1, h3, h4, h5, h6{ font-size: 22px; } + h2{ + font-size: 22px; + padding: 18px; + margin-bottom: 10px; + + } p{ font-size: 18px; text-align: justify-all; + padding: 0px 0px 0px 18px; } margin: 0; + min-height: 500px; + } .NaoExisteLinear{ h2{ - align-items: left; + padding-bottom: 30px; font-size: 22px; margin: 0; } @@ -99,10 +108,17 @@ x.banner { .highlightText{ font-size: 18px; margin: 0; + padding: 20px; } .nextPageLink{ font-size: 15px; } +.footer{ + padding: 50px 0px 50px 0px; +} + + + } From 9a7644cfc8b3c6c46e119d9c86a2e9751401a539 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Thu, 4 Feb 2021 22:20:32 -0300 Subject: [PATCH 05/15] Layout organizado para screen max-width 600px --- pages/aprender-react-do-zero.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/aprender-react-do-zero.js b/pages/aprender-react-do-zero.js index 3f50622..b440065 100644 --- a/pages/aprender-react-do-zero.js +++ b/pages/aprender-react-do-zero.js @@ -7,14 +7,20 @@ import Modal from "antd/lib/modal/Modal"; import falcorModel from "../falcor/falcorModel"; import { useState } from "react"; import BannerQuizNivelamento from "../components/BannerQuizNivelamento"; +import { Row, Col } from 'antd'; +import React, {Fragment} from 'react'; +import Media from 'react-media'; export default function NossaMetodologia({ articles }) { const [currentArticle, setCurrentArticle] = useState({ id: 0, }); + + return ( + Aprender React do Zero! @@ -39,7 +45,7 @@ export default function NossaMetodologia({ articles }) {

Como começar a aprender

Se você nunca programou ou sabe apenas o básico de programação, este - lugar é pra você. Mas para que você aprenda a programar com React, é + lugar é pra você.
Mas para que você aprenda a programar com React, é necessário primeiro aprender HTML/CSS/Javascript.

From 3235efd0e9b47ef0fac055cc59d3ade25160df5a Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Thu, 4 Feb 2021 22:22:39 -0300 Subject: [PATCH 06/15] falta organizar o banner para screen max-width 600px --- components/BannerQuizNivelamento/index.js | 1 + components/BannerQuizNivelamento/styles.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/components/BannerQuizNivelamento/index.js b/components/BannerQuizNivelamento/index.js index 46a89b0..b85c21f 100644 --- a/components/BannerQuizNivelamento/index.js +++ b/components/BannerQuizNivelamento/index.js @@ -37,3 +37,4 @@ export default function BannerQuizNivelamento() { ); } + diff --git a/components/BannerQuizNivelamento/styles.js b/components/BannerQuizNivelamento/styles.js index 30069b2..a41324b 100644 --- a/components/BannerQuizNivelamento/styles.js +++ b/components/BannerQuizNivelamento/styles.js @@ -27,3 +27,6 @@ export const Description = styled.p` color: #77a; max-width: 500px; `; + + + From 0f1f838e705374f931001166f5bf434f7cff218a Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Thu, 4 Feb 2021 22:45:58 -0300 Subject: [PATCH 07/15] banner organizado para screen max-width 600px --- components/BannerQuizNivelamento/styles.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/BannerQuizNivelamento/styles.js b/components/BannerQuizNivelamento/styles.js index a41324b..db1831a 100644 --- a/components/BannerQuizNivelamento/styles.js +++ b/components/BannerQuizNivelamento/styles.js @@ -2,7 +2,7 @@ import styled from "styled-components"; //importa styles para os componentes //adc esse style ao container Wrapper, do index.js export const Wrapper = styled.div` - padding: 100px 0; + padding: 50px 0; background: #222266; `; @@ -16,14 +16,14 @@ export const TesteNivelamento = styled.p` //adc esse style na parte do index.js export const Title = styled.h3` - font-size: 28px; + font-size: 22px; color: #eee; `; //adc esse style na parte do index.js export const Description = styled.p` margin-bottom: 30px; - font-size: 20px; + font-size: 18px; color: #77a; max-width: 500px; `; From 97fbc4e303a2bed996662fa620301173f0def660 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Tue, 9 Feb 2021 18:21:17 -0300 Subject: [PATCH 08/15] itens alterados --- styles/AprenderReactDoZero.module.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss index ce7bc25..b403ddb 100644 --- a/styles/AprenderReactDoZero.module.scss +++ b/styles/AprenderReactDoZero.module.scss @@ -1,3 +1,4 @@ + .contentWrapper { position: relative; background-color: #5f4aaa; @@ -40,6 +41,8 @@ x.banner { h6 { color: #00dbff; } + + } .firstParagraph { @@ -73,13 +76,16 @@ x.banner { @media all and (max-width: 600px){ + .contentWrapper{ + flex-flow: column; + } .content{ h1, h3, h4, h5, h6{ font-size: 22px; } h2{ font-size: 22px; - padding: 18px; + padding: 0px 0px 20px 18px; margin-bottom: 10px; } @@ -87,15 +93,16 @@ x.banner { font-size: 18px; text-align: justify-all; padding: 0px 0px 0px 18px; + max-width: 500px; } margin: 0; - min-height: 500px; + min-height: 400px; } .NaoExisteLinear{ h2{ - padding-bottom: 30px; + padding: 30px 0px 30px 0px; font-size: 22px; margin: 0; } @@ -103,12 +110,14 @@ x.banner { font-size: 18px; text-align: justify-all; margin: 0; + max-width: 500px; } } .highlightText{ font-size: 18px; margin: 0; padding: 20px; + max-width: 500px; } .nextPageLink{ @@ -117,8 +126,7 @@ x.banner { .footer{ padding: 50px 0px 50px 0px; -} - - +}; + } From 7f8399432c6ab782add6748402e37b35d791817b Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Tue, 9 Feb 2021 18:21:44 -0300 Subject: [PATCH 09/15] itens alterados --- pages/aprender-react-do-zero.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/aprender-react-do-zero.js b/pages/aprender-react-do-zero.js index b440065..7e74160 100644 --- a/pages/aprender-react-do-zero.js +++ b/pages/aprender-react-do-zero.js @@ -45,7 +45,7 @@ export default function NossaMetodologia({ articles }) {

Como começar a aprender

Se você nunca programou ou sabe apenas o básico de programação, este - lugar é pra você.
Mas para que você aprenda a programar com React, é + lugar é pra você. Mas para que você aprenda a programar com React, é necessário primeiro aprender HTML/CSS/Javascript.

From 8809de92858d4a5294ad1d42d61646d04149584a Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Tue, 9 Feb 2021 18:22:53 -0300 Subject: [PATCH 10/15] =?UTF-8?q?altera=C3=A7=C3=A3o=20no=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BannerQuizNivelamento/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/BannerQuizNivelamento/index.js b/components/BannerQuizNivelamento/index.js index b85c21f..69dbb09 100644 --- a/components/BannerQuizNivelamento/index.js +++ b/components/BannerQuizNivelamento/index.js @@ -27,7 +27,7 @@ export default function BannerQuizNivelamento() { padding: "0 50px", height: "50px", lineHeight: "50px", - fontSize: "22px", + fontSize: "18px", }} onClick={() => alert("Funcionalidade em Desenvolvimento!")} > From f6db533ca3c8a8f1413e64103a7d9197b4d802a0 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Tue, 9 Feb 2021 23:57:25 -0300 Subject: [PATCH 11/15] =?UTF-8?q?altera=C3=A7=C3=A3o=20no=20button,=20que?= =?UTF-8?q?=20agora=20est=C3=A1=20flex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BannerQuizNivelamento/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/BannerQuizNivelamento/index.js b/components/BannerQuizNivelamento/index.js index 69dbb09..ddd5f71 100644 --- a/components/BannerQuizNivelamento/index.js +++ b/components/BannerQuizNivelamento/index.js @@ -27,7 +27,8 @@ export default function BannerQuizNivelamento() { padding: "0 50px", height: "50px", lineHeight: "50px", - fontSize: "18px", + fontSize: "3vw", + flexFlow: "column", }} onClick={() => alert("Funcionalidade em Desenvolvimento!")} > From fae3f9592b3fd7544676782417beb79f2fbdac50 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Tue, 9 Feb 2021 23:58:08 -0300 Subject: [PATCH 12/15] medidas mudadas pra 'vw' --- styles/AprenderReactDoZero.module.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss index b403ddb..deb2a27 100644 --- a/styles/AprenderReactDoZero.module.scss +++ b/styles/AprenderReactDoZero.module.scss @@ -76,21 +76,23 @@ x.banner { @media all and (max-width: 600px){ + .contentWrapper{ flex-flow: column; } .content{ + h1, h3, h4, h5, h6{ - font-size: 22px; + font-size: 6vw; } h2{ - font-size: 22px; + font-size: 6vw; padding: 0px 0px 20px 18px; margin-bottom: 10px; } p{ - font-size: 18px; + font-size: 5vw; text-align: justify-all; padding: 0px 0px 0px 18px; max-width: 500px; @@ -103,25 +105,25 @@ x.banner { .NaoExisteLinear{ h2{ padding: 30px 0px 30px 0px; - font-size: 22px; + font-size: 6vw; margin: 0; } p{ - font-size: 18px; + font-size: 5vw; text-align: justify-all; margin: 0; max-width: 500px; } } .highlightText{ - font-size: 18px; + font-size: 5vw; margin: 0; padding: 20px; max-width: 500px; } .nextPageLink{ - font-size: 15px; + font-size: 5vw; } .footer{ From 5b762d1ff3859adc0db0aa624446c0f06b23841d Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Wed, 10 Feb 2021 21:13:35 -0300 Subject: [PATCH 13/15] Realizados ajustes para telas mobile e desktop. --- styles/AprenderReactDoZero.module.scss | 45 ++++++++++++++++++-------- 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss index deb2a27..73c2261 100644 --- a/styles/AprenderReactDoZero.module.scss +++ b/styles/AprenderReactDoZero.module.scss @@ -14,8 +14,12 @@ x.banner { background-size: 1200px auto; background-position: left top; background-repeat: no-repeat; - height: 670px; + height: 500px; background-color: #5f4aaa; + + @media (max-width:600px) { + height: 300px; + } } @@ -31,7 +35,11 @@ x.banner { background-size: 1200px auto; background-position: left top; background-repeat: no-repeat; - min-height: 670px; + min-height: 500px; + + @media (max-width:600px) { + height: 300px; + } h1, h2, @@ -40,6 +48,7 @@ x.banner { h5, h6 { color: #00dbff; + font-size: 22px; } @@ -48,23 +57,31 @@ x.banner { .firstParagraph { margin: 0; max-width: 400px; - font-size: 22px; + font-size: 20px; + } .highlightText { - margin: 50px 0 50px 15vw; - font-size: 38px; + margin:0; + font-size: 20px; color: #faf; + max-width: 800px; } .NaoExisteLinear { margin: 0; max-width: 800px; + h2{ + font-size: 22px; + } } .footer { - padding: 150px 0 100px 0; + padding: 50px 0px; text-align: right; + a{ + font-size: 15px; + } } .nextPageLink { @@ -75,7 +92,7 @@ x.banner { -@media all and (max-width: 600px){ +@media (max-width: 600px){ .contentWrapper{ flex-flow: column; @@ -83,16 +100,16 @@ x.banner { .content{ h1, h3, h4, h5, h6{ - font-size: 6vw; + font-size: 18px; } h2{ - font-size: 6vw; + font-size: 18px; padding: 0px 0px 20px 18px; margin-bottom: 10px; } p{ - font-size: 5vw; + font-size: 16px; text-align: justify-all; padding: 0px 0px 0px 18px; max-width: 500px; @@ -105,25 +122,25 @@ x.banner { .NaoExisteLinear{ h2{ padding: 30px 0px 30px 0px; - font-size: 6vw; + font-size: 18px; margin: 0; } p{ - font-size: 5vw; + font-size: 16px; text-align: justify-all; margin: 0; max-width: 500px; } } .highlightText{ - font-size: 5vw; + font-size: 16px; margin: 0; padding: 20px; max-width: 500px; } .nextPageLink{ - font-size: 5vw; + font-size: 16px; } .footer{ From 20172348f31f0432f979b45f426e66ac9eefbc52 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Wed, 10 Feb 2021 21:15:30 -0300 Subject: [PATCH 14/15] Criado styled-component para o button do banner Quiz. --- components/BannerQuizNivelamento/index.js | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/components/BannerQuizNivelamento/index.js b/components/BannerQuizNivelamento/index.js index ddd5f71..c679fd5 100644 --- a/components/BannerQuizNivelamento/index.js +++ b/components/BannerQuizNivelamento/index.js @@ -21,19 +21,10 @@ export default function BannerQuizNivelamento() { suficiente para você não se perder enquanto estuda React! - + alert("estou em desenvolvimento!")}> + Fazer Quiz de Nivelamento + +

); From 413805b14a72573e70b1b169af7150c591f1d701 Mon Sep 17 00:00:00 2001 From: Micaella Danna Date: Wed, 10 Feb 2021 21:17:13 -0300 Subject: [PATCH 15/15] style do component button/MyButton --- components/BannerQuizNivelamento/styles.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/components/BannerQuizNivelamento/styles.js b/components/BannerQuizNivelamento/styles.js index db1831a..b7e98d5 100644 --- a/components/BannerQuizNivelamento/styles.js +++ b/components/BannerQuizNivelamento/styles.js @@ -28,5 +28,26 @@ export const Description = styled.p` max-width: 500px; `; +export const MyButton = styled.button` + background: #5F4AAA; + color: #fff; + border-radius: 5px; + padding: 0 50px; + height: 50px; + display: flex; + flexFlow: column; + align-items: center; + @media (min width: 379px) and (max-width: 600px){ + line-height: 30px; + font-size: 15px; + flex-direction: row; + } + @media (min-width:290px) and (max-width: 378x){ + font-size: 10px; + flex-direction: row; + } + +`; +