add pagina de login

src/App.js

@@ -9,6 +9,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import Home from './Pages/Home';
 import Guia from './Pages/Guia';
 import Colaboradores from './Pages/Colaboradores';
+import Login from './Pages/Login';
 
 
 
@@ -21,6 +22,8 @@ function App() {
             <Route exact path="/"><Home/></Route>
             < Route exact path="/guia"><Guia /></Route>
             < Route exact path="/colaboradores" ><Colaboradores/></Route>
+            < Route exact path="/login" ><Login/></Route>
+
         </Switch>
       <Footer />
 

src/Pages/Login/index.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+
+
+
+import '../Login/style.css';
+
+
+
+const Login = () => {
+    useEffect(() => {
+        window.scrollTo(0,0);
+    }, []);
+    return (
+        <section className="container-login">
+          <div className="box-login">
+              <h3 className="title-login">Cadastre-se na nossa plataforma</h3>
+              <p className="description-login">Vem fazer parte desse time de mulheres!</p>
+
+              <form className="login-form" action="">
+
+                <input className="input-form" type="email" placeholder="E-mail" autoComplete="on"/>
+                <input className="input-form input-password" type="password" placeholder="Senha"/>
+
+              <a className="btn-form" href="#">Cadastrar</a>
+
+              </form>
+          </div>
+        </section>
+
+    )
+}
+
+export default Login;

src/Pages/Login/style.css

@@ -0,0 +1,66 @@
+.container-login {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url(https://www.reprograma.com.br/assets/img/cursos-03.png) no-repeat;
+    background-size: cover;
+}
+.box-login {
+    width: 50rem;
+    height: 70vh;
+    background: rgba(0,0,0,.7);
+}
+
+.title-login {
+    margin-top: 2rem;
+    color: #fff;
+}
+
+.description-login {
+    margin-top: 1rem;
+    color: #fff;
+}
+.login-form {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 3rem;
+    position: relative;
+}
+.input-form {
+    width: 80%;
+    padding: 20px;
+    border: none;
+    outline: none;
+}
+.input-password {
+    margin-top: 1rem;
+
+}
+.input-form::placeholder {
+    font-size: 1rem;
+    font-family: 'IBM Plex Sans', sans-serif;
+}
+
+.btn-form {
+    display: inline-block;
+    background: #A3679A;
+    width: 12rem;
+    height: 3rem;
+    padding: 13px;
+    margin-top: 2rem;
+    font-weight: bold;
+    color: #fff;
+    letter-spacing: 2px;
+    border-radius: 3px;
+
+}
+
+@media (min-width: 700px) {
+    .title-login{
+        font-size: 1.7rem;
+    }
+}

src/components/Header/index.js

@@ -43,9 +43,6 @@ const Header = () => {
           <li>
             <Link to="/colaboradores">Colaboradores</Link>
           </li>
-          <li>
-            {/* <a href="#sobre" onClick={menuAtv()}>Sobre</a> */}
-          </li>
           <li>
             <a href="#footer">Contato</a>
           </li>