Merge branch 'master' of https://github.com/rede-cidada/girls-code in…

…to dev

src/App.css

@@ -2,9 +2,4 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
 

src/App.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import './App.css';
-import Footer from './components/Footer/Footer';
-import Header from './components/Header/Header';
+import About from './components/About';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import { Info } from './components/Info';
+
 
 
 function App() {
   return (
     <div className="App">
-      <h1>Girls code</h1>
       <Header />
+      <Info />
+      <About/>
       <Footer />
     </div>
   );

src/components/About/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "../About/style.css";
+
+const About = () => {
+  return (
+    <section className="about-section">
+      <div>
+        <h2>Sobre Nós</h2>
+        <p>
+          O Girls code surgiu da necessidade de trazer mais mulheres para a área
+          de tecnologia. Tendo em vista que essa área tem crescido bastante e
+          atingido muitas mulheres, diversas ainda não são alcançadas...e é nelas
+          que o Girls code está pensando. Mulheres que são mães, independente de
+          idade, mesmo que não saibam nada de tecnologia...viemos mostrar que elas
+          também podem! Nossa aplicação traz um guia iniciante em informática e
+          conecta diversas mulheres que também estão tentando entrar nesse meio,
+          compartilhando histórias. Como surgiu: Quatro jovens mulheres estudantes
+          de Front End, com histórias divergentes, mas com um objetivo em comum:
+          impulsionar mulheres na área de tecnologia.
+      </p>
+      </div>
+      <div className="nossa-equipe">
+        <h2>Nossa Equipe</h2>
+        <p>
+          <strong>Ana Julia</strong> 19 anos, começou os estudos sem base nenhuma
+        na área de TI. Hoje em dia é uma das fundadoras do Girls code.{" "}
+          <strong>Franciele Bernardo</strong> 22 anos, curiosa nata, começou os
+        estudos sozinhas na internet e tendo que dividir o tempo entre estudo e
+        trabalho. Quis prestar apoio as mulheres que também estão iniciando na
+        área. <strong>Ana Beatriz</strong> 20 anos, começou técnico na área de
+        TI e o amor por Front-End surgiu. Também esbarrou em outra paixão:
+        aumentar o índice de mulheres que atuam na área de tecnologia.{" "}
+          <strong>Alice Cavalcanti</strong> 20 anos, estava perdida em qual
+        profissão seguir até que se encontrou na programação.
+        </p>
+      </div>
+    </section>
+  );
+};
+
+export default About;

src/components/About/style.css

@@ -0,0 +1,39 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.about-section {
+  width: 100vw;
+  height: 80%;
+  background: #d789d7;
+}
+
+.about-section h2 {
+  font-size: 1.5rem;
+  color: #562349;
+}
+
+.about-section p {
+  padding: 10px 10px;
+  font-size: 1.2rem;
+  color: #252525;
+}
+
+.about-section p strong {
+  color: #562349;
+}
+
+/* @media (min-width: 900px) {
+  .about-section {
+    display: flex;
+    flex-direction: ;
+    justify-content: space-around;
+  }
+
+  .about-section p {
+    font-size: 1.2rem;
+  }
+
+} */

src/components/Footer/Footer.js → src/components/Footer/index.js

@@ -12,11 +12,8 @@ const Footer = () => {
                     <li> <a href=""> Fale conosco</a></li>
 
                 </ul>
-
+                
             </footer>
-
-
-
         </div>
     )
 

src/components/Header/index.js

@@ -0,0 +1,41 @@
+import React from "react";
+import "./styles.css";
+
+import logoIcon from "./assets/girls-logo.svg";
+
+
+
+const Header = () => {
+  return (
+    <header className="header">
+      <img src={logoIcon} alt="logo" className="logo-header" />
+
+      <nav className="navegation">
+
+        <input id="navbar" type="checkbox"></input>
+          <label for="navbar">
+            <div className="menu">
+              <span className="menu-btn"></span>
+            </div>
+          </label>
+
+        <ul>
+          <li>
+             <a href="#">Guias</a>
+           </li>
+          <li>
+             <a href="#">Colaboradores</a>
+          </li>
+          <li>
+            <a href="#">Sobre</a>
+          </li>
+          <li>
+            <a href="#">Contato</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

src/components/Header/styles.css

@@ -1,3 +1,179 @@
 .header {
-    background-color: yellow;
-}
+    background: transparent;
+
+    width: 100vw;
+    height: 3rem;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    font-size: 1.1rem;
+    padding: 10px;
+
+    position: fixed;
+  }
+
+  .navegation ul li {
+      margin: 0.2rem;
+      list-style: none;
+
+  }
+
+  .logo-header {
+    width: 5rem;
+    margin-left: 1rem;
+  }
+
+  logo-header {
+    width: 5rem;
+    margin: 0.3rem;
+  }
+
+  /* estilo do menu hamburguer */
+
+  *:before,
+  *:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .menu {
+    background: transparent;
+    border-radius: 50%;
+
+    cursor: pointer;
+    height: 60px;
+    width: 60px;
+    position: absolute;
+    right: 25px;
+    top: -6px;
+    transition: box-shadow 1.1s cubic-bezier(0.19, 1, 0.22, 1);
+
+    z-index: 2;
+  }
+
+  .menu-btn {
+    position: relative;
+    top: 29px;
+    left: 15px;
+    width: 30px;
+    height: 2px;
+    background: #000;
+    display: block;
+    transform-origin: center;
+    transition: 0.5s ease-in-out;
+  }
+
+  .menu-btn:after,
+  .menu-btn:before {
+    background: #000;
+    content: "";
+    display: block;
+    transition: 0.5s ease-in-out;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .menu-btn:before {
+    top: -10px;
+  }
+
+  .menu-btn:after {
+    bottom: -10px;
+  }
+
+  .navegation input {
+    display: none;
+  }
+
+  input:checked ~ label .menu-btn {
+    transform: rotate(45deg);
+  }
+
+  input:checked ~ label .menu-btn:after {
+    transform: rotate(90deg);
+    bottom: 0;
+  }
+
+  input:checked ~ label .menu-btn:before {
+    transform: rotate(90deg);
+    top: 0;
+  }
+
+  input:checked ~ ul {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .navegation ul {
+    position: absolute;
+    top: 140px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    list-style: none;
+    font-size: 1.1rem;
+    opacity: 0;
+    transition: 0.25s 0.1s cubic-bezier(0, 1.07, 0, 1.02);
+    visibility: hidden;
+    z-index: 2;
+  }
+
+  .navegation ul li a {
+    color: #2b0548;
+    display: block;
+    margin-bottom: 1em;
+    text-decoration: none;
+  }
+
+  .navegation ul li a:hover {
+    color: black;
+  }
+
+  @media (min-width: 900px) {
+
+      .header {
+          padding: 0;
+
+      }
+
+      .navegation ul li {
+          margin: 25px;
+
+      }
+
+      .logo-header {
+          margin: 25px;
+      }
+
+      .menu,
+      .menu-btn,
+      #nav-bar {
+
+        cursor: default;
+        visibility: hidden;
+
+      }
+
+      /* faz o menor normal aparecer no desktop */
+
+      .navegation ul {
+
+        visibility: visible;
+        position: static;
+
+        opacity: initial;
+
+        transform: none;
+
+        display: flex;
+        margin-top: 13px;
+
+
+
+      }
+  }
+
+

src/components/Info/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import '../Info/style.css';
+
+export const Info = () => {
+    return(
+        <section className="info">
+            <h1 className="title-info">Girls code</h1>
+            <p className="paragraph-info">Nosso objetivo é te trazer para o mundo de TI mulher, topa? Então vem com a gente!</p>
+        </section>
+    );
+}
+