Added signup page and login modal

Author: DeepCodeWork

src/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import Layout from './components/Layout/Layout';
+import Layout from './containers/Layout/Layout';
 
 function App() {
   return (

src/UI/Modal/Modal.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classes from './Modal.module.css';
+import Aux from '../../hoc/Auxi';
+
+const Modal = (props) => {
+
+    return (
+        <Aux>
+            <Background show = { props.login } clicked = { props.close }/>
+            <div className = { classes.Modal }
+                style = {{
+                    transform : props.login ? 'translateY(0)' : 'translateY(-100vh)',
+                    opacity : props.login ? '1' : '0'
+                }}>
+                <div className = "row justify-content-right">
+                </div>
+
+                <hr></hr>
+
+                <hr></hr>
+                <div className="float-right">
+                    <button className = "btn btn-danger mr-2" 
+                    onClick = { props.close }>Close</button>
+                    <button className = "btn btn-primary">Login</button>
+                </div>
+            </div>
+        </Aux>
+    );
+}
+
+export default Modal;

src/UI/Modal/Modal.module.css

@@ -0,0 +1,25 @@
+.Modal {
+    position: fixed;
+    z-index: 500;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    padding: 16px;
+    left: 15%;
+    top: 30%;
+    box-sizing: border-box;
+    transition: all 0.3s ease-out;
+    border-radius: 5px;
+}
+
+.Modal .Button{
+    padding: 5px;
+
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}

src/components/AboutSection/Features/Features.js

@@ -9,22 +9,22 @@ const Features = (props) => {
             <div className = "col-lg-3">
                 <Feature icon = " mdi mdi-speedometer"
                     title = "Fast"
-                    body = "Fast load times and lag free interaction, my highest priority."></Feature>
+                    body = "Fast team connect and lag free interaction, our highest priority."></Feature>
             </div>
             <div className = "col-lg-3">
                 <Feature icon = " mdi mdi-cellphone-link"
                     title = "Responsive"
-                    body = "My layouts will work on any device, big or small any size"></Feature>
+                    body = "Our App will work on any device, big or small any size"></Feature>
             </div>
             <div className = "col-lg-3">
                 <Feature icon = " mdi mdi-lightbulb"
                     title = "Intuitive"
-                    body = "Strong preference for easy to use, intuitive UX/UI."></Feature>
+                    body = "Strong preference for easy to use, ineractive creative ideas."></Feature>
             </div>
             <div className = "col-lg-3">    
                 <Feature icon = " mdi mdi-rocket"
                 title = "Dynamic"
-                body = "Websites don't have to be static, I love making pages come to life."></Feature>
+                body = "Physics don't have to be static, I love making it come to life."></Feature>
             </div>
         </div>
     );

src/components/HomeSection/HomeSection.module.css

@@ -15,7 +15,7 @@
     font-size: 30px;
 }
 
-button{
+.home button{
     border: 3px solid #0096ea;
     border-radius: 20px;
     outline: none;

src/components/Layout/Layout.js

@@ -13,21 +13,19 @@ const RegisterSection  = () => {
                 <div className = "container">
                     <SectionTitle title="Register Yourself!"/>
                     <div className = "row pt-3">
-                        <div className="col-lg-8 offset-lg-2">
+                        <div className="col-lg-10 offset-lg-1">
                             <div className = "row">
-                                <div>
-                                    <button>Login</button>
-                                    <button>Signup</button>
-                                </div>
+                                
                             </div>
-                            <div className = "row">
-                                <div className = "col-lg-6">
-                                    
+                           <div className={classes.loginSignupBox}>
+                           <div className = "row">
+                                <div className = {classes.sidepanel+" col-lg-7"}>
                                 </div>
-                                <div className = "col-lg-6">
-
+                                <div className = "col-lg-5">
+                                <SignupSection/>
                                 </div>
                             </div>
+                           </div>
                         </div>
                     </div>
                 </div>

src/components/RegisterSection/RegisterSection.js

@@ -1,3 +1,11 @@
 .registerSection{
     height: 100vh;
-}
+}
+
+.registerSection .sidepanel{
+    background: url('../../assets/images/onlineStudy.jpg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-attachment: scroll;
+    min-height: 800px;
+}

src/components/RegisterSection/RegisterSection.module.css

@@ -1,10 +1,45 @@
 import React from 'react';
 import Aux from '../../../hoc/Auxi';
+import classes from './SignupSection.module.css';
 
 const SignupSection = () => {
     return (
         <Aux>
-            <h1>Deep</h1>
+            <div>
+            <div className={classes.panel+" card card-form text-center"}>
+                <div class="card-body">
+                            <div class="card-title"><h4>Sign Up Today</h4></div>
+								<h6>Please fill out the form</h6>
+								<div>
+                                    <form action="">
+                                        <div class="form-group">
+                                            <input class="form-control form-control" type="text" placeholder="Username"/>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <input class="form-control form-control" type="email" name="" id="" placeholder="Email"/>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <input class="form-control form-control" type="password" name="" id="" placeholder="Password"/>
+                                        </div>
+
+                                        <div class="form-group">
+                                            <input class="form-control form-control" type="password" name="" id="" placeholder="Confirm Password"/>
+                                        </div>
+                                    
+                                        <div class="form-group">
+                                            <button class="btn btn-outline-light btn-block">Submit!</button>
+                                        </div>
+
+                                        <div className="form-group">
+                                            <a><button>Already a member? Login</button></a>
+                                        </div>
+                                    </form>
+								</div>
+                    </div>
+            </div>
+            </div>
         </Aux>
     );
 }

src/components/RegisterSection/SignupSection/SignupSection.js

@@ -0,0 +1,28 @@
+.panel{
+    background-color: #292D2E ;
+}
+
+
+.panel h4{
+    color: #646c74 ;
+}
+
+.panel h6{
+    color: #0096ea ;
+}
+
+.panel button:hover{
+    border: none;
+}
+
+.panel a button{
+    border: none;
+    outline: none;
+    background-color: #292D2E;
+    border-radius: 5px;
+    color: #0096ea;
+}
+
+.panel a button:hover{
+    color: white;
+}