Login container

src/containers/App/App.jsx

@@ -4,6 +4,8 @@ import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
 import Layout from '../../hoc/Layout/Layout';
 import Home from '../Home/Home';
 import Landing from '../../components/Landing/Landing';
+import Signup from '../Signup/Signup';
+import Login from '../Login/Login';
 import { Provider } from '../../components/Context/Context';
 import ResourcesPage from '../ResourcesPage/ResourcesPage';
 import Lost from '../../components/Lost/Lost';
@@ -52,6 +54,8 @@ class App extends Component {
                   <Landing toggleLanding={this.toggleLanding} />
                 )} />
                 <Route path="/home" exact component={Home} />
+                <Route path="/signup" exact component={Signup} />
+                <Route path="/login" exact component={Login} />
                 <Route path="/coding-resources" render={() => (
                   <ResourcesPage title="Coding Resources" color="#06addb" />
                 )} />

src/containers/Home/Home.css

@@ -1,6 +1,8 @@
 #home-page-container {
     padding: 5vh 0 25vh 0;
     text-align: center;
+    color: var(--red);
+    border: 1px solid var(--red);
 }
 
 .heading {
@@ -11,9 +13,9 @@
 
 .sub-heading {
     color: var(--theme);
-    font-size: 1em;
-    max-width: 75vw;
-    margin: 17px auto;
+    font-size: 1.5vw;
+    margin-bottom: 50px;
+    margin-top: 0px;
 }
 
 @media only screen and (min-width: 2000px) {
@@ -54,7 +56,10 @@
     }
 
     .sub-heading {
+        color: var(--theme);
         font-size: 4vw;
+        margin-bottom: 50px;
+        margin-top: 0px;
     }
 }
 

src/containers/Login/Login.css

@@ -0,0 +1,66 @@
+body
+{
+}
+
+.login-form {
+    background: #303e4b;
+    margin-top: 2rem;
+    max-width: 590px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1em;
+    text-align: center;
+}
+
+.container {
+    color: #f9f9f9;
+}
+
+
+.login-form input {
+    margin-bottom: 2rem;
+    background: #fff;
+    border: 1px solid #9c9c9c;
+}
+
+    .login-form input[type=submit] {
+        background: #678;
+        padding: 0.7em;
+        border: 0;
+    }
+
+
+label {
+    display: block;
+    padding: 0.5em 1.5em 0.5em 0;
+}
+
+input {
+    width: 100%;
+    padding: 0.7em;
+    margin-bottom: 0.5rem;
+}
+
+    input:focus {
+        outline: 3px solid gold;
+    }
+
+@media (min-width: 350px) {
+    form {
+        overflow: hidden;
+    }
+
+    label {
+        float: left;
+        width: 108px;
+    }
+
+    input {
+        float: left;
+        width: calc(100% - 200px);
+    }
+
+    .login-form input[type=submit] {
+        width: calc(100% - 200px)
+    }
+}

src/containers/Login/Login.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import './Login.css';
+
+class Login extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user_name: '',
+            password: ''
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <form className="login-form">
+                    <div className="container">
+                        <h1>Login </h1>
+                        <p>Please enter your credentials to access your account.</p>
+                        <br />
+                        <label for="UserName" class="username">UserName</label>
+                        <input
+                            type={Text}
+                            required="true"
+                            name="UserName"
+                            placeholder="Enter your UserName"
+                            onChange={(event, newValue) => this.setState({ user_name: newValue })}
+                        />
+                        <br />
+                        <label for="password" class="password">Password</label>
+                        <input
+                            type="password"
+                            placeholder="Enter your Password"
+                            required="true"
+                            name="Password"
+                            onChange={(event, newValue) => this.setState({ password: newValue })}
+                        />
+                        <br />
+                        <label></label>
+                        <input type="submit" value="Login" />
+                    </div>
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Login;

src/containers/Signup/Signup.css

@@ -0,0 +1,65 @@
+body {
+}
+
+.signup-form {
+    background: #303e4b;
+    margin-top: 2rem;
+    max-width: 590px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1em;
+    text-align: center;
+}
+
+.container {
+    color: #f9f9f9;
+}
+
+.signup-form  input {
+        margin-bottom: 2rem;
+        background: #fff;
+        border: 1px solid #9c9c9c;
+}
+
+ .signup-form input[type=submit] {
+        background: #678;
+        padding: 0.7em;
+        border: 0;
+ }
+
+
+label {
+    display: block;
+    padding: 6px 1.5em 0.5em 6px;
+    text-align:left;
+}
+
+input {
+    width: 100%;
+    padding: 0.7em;
+    margin-bottom: 0.5rem;
+}
+
+input:focus {
+      outline: 3px solid gold;
+ }
+
+@media (min-width: 350px) {
+    form {
+        overflow: hidden;
+    }
+
+    label {
+        float: left;
+        width: 108px;
+    }
+
+    input {
+        float: left;
+        width: calc(100% - 200px);
+    }
+
+    .signup-form input[type=submit] {
+        width: calc(100% - 200px)
+    }
+}

src/containers/Signup/Signup.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import './Signup.css';
+
+class Signup extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            name: '',
+            user_name: '',
+            email: '',
+            password: '',
+            re_password: ''
+        }
+    }
+    render() {
+        return (
+               <div>
+                <form className="signup-form">
+                    <div className="container">
+                        <h1>SignUp </h1>
+                        <p>Please fill in this form to create an account.</p>
+                        <br/>
+                        <label for="name" class="name">FullName</label>
+                        <input
+                            type={Text}
+                            name="FullName"
+                            placeholder="FullName*"
+                            required="true"
+                            onChange={(event, newValue) => this.setState({ name: newValue })}
+                        />
+                        <br />
+                        <label for="UserName" class="username">UserName</label>
+                        <input
+                            type={Text}
+                            name="UserName"
+                            placeholder="UserName*"
+                            required="true"
+                            onChange={(event, newValue) => this.setState({ user_name: newValue })}
+                        />
+                        <br />
+                        <label for="email" class="email">Email Address</label>
+                        <input
+                            placeholder="Email Address*"
+                            required="true"
+                            type="email"
+                            name="Email"
+                            onChange={(event, newValue) => this.setState({ email: newValue })}
+                        />
+                        <br />
+                        <label for="password" class="password">Password</label>
+                        <input
+                            type="password"
+                            placeholder="Password*"
+                            required="true"
+                            name="Password"
+                            onChange={(event, newValue) => this.setState({ password: newValue })}
+                        />
+                        <br />
+                        <label for="re-password" class="re-password">Re-Password</label>
+                        <input
+                            type="password"
+                            placeholder="Re-Enter Password*"
+                            required="true"
+                            name="Password"
+                            onChange={(event, newValue) => this.setState({ re_password: newValue })}
+                        />
+                        <br />
+                        <label></label>
+                          <input type="submit" value="Submit" />
+                         </div>
+                    </form>
+                </div>
+        );
+    }
+}
+
+export default Signup;

src/index.css

@@ -20,8 +20,8 @@ body {
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+   sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-user-select: none;