continuacao do guia

rede-cidada · Oct 6, 2020 · 00de98a · 00de98a
1 parent dd35480
commit 00de98a
Show file tree

Hide file tree

Showing 6 changed files with 350 additions and 1 deletion.
diff --git a/src/Pages/Colaboradores/index.js b/src/Pages/Colaboradores/index.js
@@ -4,7 +4,7 @@ import axios from "axios";
 import "./styles.css";
 
 const Profissoes = ['Dev. Front End', 'Dev. Full Stack', 'Dev. Back End', 'Analista de Sistemas', 'Engenheira de Software'];
-const sort = Math.floor(Math.random() * (Profissoes.length - 1));
+const sort = Math.floor(Math.random() * (Profissoes.length - 1 ));
 
 const Colaboradores = () => {
   const [dados, setDados] = useState([]);

diff --git a/src/Pages/Guia/index.js b/src/Pages/Guia/index.js
@@ -4,6 +4,8 @@ import PageOne from '../../components/PageOne';
 import InternetPage from '../../components/InternetPage';
 import ProfessionsPage from '../../components/ProfessionsPage';
 import AreasPage from '../../components/AreasPage';
+import Logica from '../../components/Logica';
+import Cursos from '../../components/cursos';
 
 
 const Guia = () => {
@@ -16,6 +18,8 @@ const Guia = () => {
             <InternetPage />
             <ProfessionsPage />
             <AreasPage />
+            <Logica />
+            <Cursos />
         </div>
 
     )

diff --git a/src/components/Logica/index.js b/src/components/Logica/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+
+
+import "./style.css";
+
+const Logica = () => {
+  return (
+    <div>
+      <section className="logica-area">
+        <div className="logica-text">
+          <h2>Logica de programação</h2>
+          <h3>Por que estudar Logica de programação?</h3>
+          <p>
+            É o primeiro passo porque isso não muda, independente da linguagem
+            que você escolher. Consiste em aprender técnicas para escrever
+            códigos que possam ser interpretados por computadores. A seguir tem
+            alguns links onde to assistir e entender melhor.{" "}
+          </p>
+
+          <a
+            href="https://www.youtube.com/watch?v=JaTf3dhx464&t=5s"
+            target="_blanck"
+          >
+            {" "}
+            Click aqui para assistir{" "}
+          </a>
+          <h3>Mas o que é exatamente lógica da programação?</h3>
+          <p>
+            Lógica é a técnica utilizada para desenvolver instruções em uma
+            sequência para atingir determinado objetivo. É a organização e
+            planejamento de instruções, em um algoritmo, com o objetivo de
+            tornar viável a implementação de um programa ou software.{" "}
+          </p>
+          <h3>Algoritmo</h3>
+          <p>
+            O algoritmo é a própria sequência de instruções para a execução de
+            uma tarefa. De uma forma mais simples, algoritmo é uma receita ou
+            roteiro que indica todos os procedimentos necessários para realizar
+            algo ou resolver algum problema.{" "}
+          </p>
+          <h3>Algoritmo “Batata-frita”</h3>
+          <ul>
+            <li>Pegar as batatas</li>
+            <li>Descascar as batatas</li>
+            <li>Cortar as batatas em tiras</li>
+            <li>Pegar uma panela</li>
+            <li>Colocar óleo na panela</li>
+            <li>Acender o fogo do fogão</li>
+            <li> Colocar a panela com óleo para esquentar</li>
+            <li>Esperar o óleo esquentar</li>
+            <li> Colocar as batatas para fritar</li>
+            <li>Aguardar o tempo ideal até que as batatas estejam fritas</li>
+            <li>Remover as batatas-fritas e servir</li>
+            <li>FIM</li>
+          </ul>
+          <h3>Variáveis e Constantes</h3>
+          <p>
+            Você já deve ter ouvido falar muito sobre variáveis e constantes
+            quando o assunto é programação, não é mesmo?
+          </p>
+          <p>
+            Uma variável é um espaço para armazenar um tipo de dado que pode ser
+            modificado quando necessário. Já a constante possuí um dado definido
+            no início do programa e não poderá ser alterado.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Logica;
diff --git a/src/components/Logica/style.css b/src/components/Logica/style.css
@@ -0,0 +1,40 @@
+.logica-area {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    background: #ff907d;
+  }
+
+  .logica-text h2 {
+    font-size: 30px;
+    padding: 50px;
+  }
+
+  .logica-text p {
+    font-size: 20px;
+  }
+
+  .logica-area {
+    width: 99vw;
+
+  }
+
+  @media (min-width: 900px) {
+    .logica-area {
+      width: 100%;
+      height: 100%;
+      margin:  auto;
+
+    }
+
+    li{
+        list-style: none;
+    }
+
+    .logica-text,
+    .segundaArea {
+      width: 50%;
+      margin: 0 auto;
+    }
+  }
+
diff --git a/src/components/cursos/index.js b/src/components/cursos/index.js
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import "./styles.css";
+
+const Cursos = () => {
+  return (
+    <div>
+      <section className="cursos-area">
+        <div className="cursos-text">
+          <h2>Lista de cursos</h2>
+
+          <p>
+            Aqui vai uma lista de curso que você pode fazer na area da
+            Tecnologia.
+          </p>
+        </div>
+
+        <div className="lista-cursos">
+          <button className="reprograma">
+            <a href="https://reprograma.com.br/" target="_blanck">
+              {" "}
+              &#123;Reprograma&#125;
+            </a>
+          </button>
+
+          <button className="programaria">
+            <a href="https://www.programaria.org/" target="_blanck">
+              Progra <span>&#123;M&#125;</span>aria
+            </a>{" "}
+          </button>
+
+          <button className="laborato">
+            <a href="https://www.laboratoria.la/br" target="_blanck">
+              <span className="seta"> &lt; </span> Laboratoria{" "}
+              <span className="seta"> &gt; </span>{" "}
+            </a>{" "}
+          </button>
+
+          <button className="pyladies">
+            <a href="https://brasil.pyladies.com/" target="_blanck">
+              PyLadies{" "}
+            </a>
+          </button>
+
+          <button className="minas">
+            <a
+              href="https://www.instagram.com/uxparaminaspretas/?hl=pt"
+              target="_blanck"
+            >
+              UX para Minas Pretas{" "}
+            </a>{" "}
+          </button>
+
+          <button className="codena">
+            {" "}
+            <a href="https://www.codenation.dev/" target="_blanck">
+              {" "}
+              Codenation{" "}
+            </a>{" "}
+          </button>
+          <button className="quebra">
+            {" "}
+            <a href="https://quebradev.com.br/" target="_blanck">
+              Quebradev{" "}
+            </a>
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Cursos;
+
diff --git a/src/components/cursos/styles.css b/src/components/cursos/styles.css
@@ -0,0 +1,159 @@
+.cursos-area {
+    width: 100vw;
+    height: 100%;
+    background: #ff907d;
+  }
+
+  .cursos-text h2 {
+    font-size: 30pt;
+    padding: 5px;
+  }
+
+  button {
+    padding: 5px;
+    margin: auto;
+    margin-top: 20px;
+    width: 10rem;
+  }
+
+  .reprograma {
+    border: none;
+    border-radius: 10px;
+    background-color: #a020f0;
+    color: #dcdcdc;
+    cursor: pointer;
+    font-size: 10pt;
+  }
+  .reprograma a {
+    text-decoration: none;
+    color: #dcdcdc;
+  }
+
+  .programaria {
+    color: #8a2be2;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 10pt;
+  }
+
+  .programaria a {
+    text-decoration: none;
+    color: #8a2be2;
+  }
+  span {
+    color: #00ced1;
+  }
+
+  .laborato {
+    border: none;
+    cursor: pointer;
+    border-radius: 10px;
+    font-size: 10pt;
+  }
+  .laborato a {
+    text-decoration: none;
+    color: #000000;
+  }
+  .seta {
+    color: #ffff00;
+  }
+
+  .pyladies {
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #00008b;
+    font-size: 10pt;
+  }
+
+  .pyladies a {
+    text-decoration: none;
+    color: #00008b;
+  }
+  .minas {
+    background-color: #836fff;
+    color: #f8f8ff;
+    font-size: 10pt;
+    border: none;
+    cursor: pointer;
+    border-radius: 10px;
+  }
+  .minas a {
+    text-decoration: none;
+    color: #f8f8ff;
+  }
+
+  .codena {
+    background-color: #4b0082;
+    color: #4169e1;
+    font-size: 10pt;
+    cursor: pointer;
+    border: none;
+    border-radius: 10px;
+  }
+  .codena a {
+    text-decoration: none;
+    color: #4169e1;
+  }
+
+  .quebra {
+    background-color: #363636;
+    color: #f8f8ff;
+    font-size: 10pt;
+    cursor: pointer;
+    border: none;
+    border-radius: 10px;
+    text-decoration: none;
+  }
+  .quebra a {
+    text-decoration: none;
+    color: #f8f8ff;
+  }
+  .cursos-text p {
+    font-size: 20px;
+  }
+
+  img {
+    width: 50px;
+  }
+
+  .lista-cursos {
+    width: 100%;
+    height: 15vh;
+    margin-top: 20px;
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+
+  @media (min-width: 200px) {
+    .lista-cursos {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  @media (min-width: 800px) {
+    .lista-cursos {
+      width: 70%;
+      height: 100%;
+      margin: auto;
+
+      margin-top: 20px;
+      display: block;
+    }
+    button {
+      padding: 5px;
+      margin: auto 20px 5px 90px;
+      margin-top: 20px;
+      width: 130px;
+    }
+
+    .cursos-text {
+      width: 60%;
+      margin: 0 auto;
+    }
+  }
+