microenv · MicaellaDanna · Feb 1, 2021 · Feb 1, 2021 · Feb 4, 2021 · Feb 5, 2021
diff --git 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
     <S.Wrapper>
       <div className="page-content">
         <S.TesteNivelamento>Teste de Nivelamento</S.TesteNivelamento>
@@ -16,19 +21,12 @@ export default function BannerQuizNivelamento() {
           suficiente para você não se perder enquanto estuda React!
         </S.Description>
 
-        <Button
-          type="primary"
-          style={{
-            padding: "0 50px",
-            height: "50px",
-            lineHeight: "50px",
-            fontSize: "22px",
-          }}
-          onClick={() => alert("Funcionalidade em Desenvolvimento!")}
-        >
-          Fazer Quiz de Nivelamento
-        </Button>
+        <S.MyButton type="primary" onClick={() => alert("estou em desenvolvimento!")}>
+          Fazer Quiz de Nivelamento</S.MyButton>
+
+
       </div>
     </S.Wrapper>
   );
 }
+
diff --git a/components/BannerQuizNivelamento/styles.js b/components/BannerQuizNivelamento/styles.js
@@ -1,25 +1,53 @@
-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;
+  padding: 50px 0;
   background: #222266;
 `;
 
+//adc esse style na parte <S.TesteNivelamento></S.TesteNivelamento> do index.js
 export const TesteNivelamento = styled.p`
   color: #98b;
   margin-bottom: 0;
   font-weight: bold;
   font-size: 18px;
 `;
 
+//adc esse style na parte <S.Title></S.Teitle> do index.js
 export const Title = styled.h3`
-  font-size: 28px;
+  font-size: 22px;
   color: #eee;
 `;
 
+//adc esse style na parte <S.Description></S.Description> do index.js
 export const Description = styled.p`
   margin-bottom: 30px;
-  font-size: 20px;
+  font-size: 18px;
   color: #77a;
   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;
+  }
+
+`;
+
+
+
diff --git 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 (
     <MainPage currentMenu="comece-por-aqui" noPadding>
+
       <Head>
         <title>Aprender React do Zero!</title>
       </Head>
@@ -39,7 +45,7 @@ export default function NossaMetodologia({ articles }) {
           <h2>Como começar a aprender</h2>
           <p className={styles.firstParagraph}>
             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.
             <br />
             <br />

diff --git a/styles/AprenderReactDoZero.module.scss b/styles/AprenderReactDoZero.module.scss
@@ -1,3 +1,4 @@
+
 .contentWrapper {
   position: relative;
   background-color: #5f4aaa;
@@ -13,10 +14,16 @@ 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;
+  }
 }
 
+
+
 .content {
   position: relative;
   z-index: 5;
@@ -28,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,
@@ -37,31 +48,104 @@ x.banner {
   h5,
   h6 {
     color: #00dbff;
+    font-size: 22px;
   }
+
+
 }
 
 .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 {
   font-size: 28px;
   color: #cbf;
 }
+
+
+
+
+@media (max-width: 600px){
+
+  .contentWrapper{
+    flex-flow: column;
+  }
+  .content{
+
+    h1, h3, h4, h5, h6{
+      font-size: 18px;  
+    }
+    h2{
+      font-size: 18px;
+      padding: 0px 0px 20px 18px;
+      margin-bottom: 10px;
+
+    }
+    p{
+      font-size: 16px;
+      text-align: justify-all;
+      padding: 0px 0px 0px 18px;
+      max-width: 500px;
+    }
+    margin: 0;
+    min-height: 400px;
+
+
+}
+.NaoExisteLinear{
+  h2{
+    padding: 30px 0px 30px 0px;
+    font-size: 18px;
+    margin: 0;
+  }
+  p{
+    font-size: 16px;
+    text-align: justify-all;
+    margin: 0;
+    max-width: 500px;
+  }
+}
+.highlightText{
+  font-size: 16px;
+  margin: 0;
+  padding: 20px;
+  max-width: 500px;
+}
+
+.nextPageLink{
+  font-size: 16px;
+}
+
+.footer{
+  padding: 50px 0px 50px 0px;
+};
+
+
+}