Signup

src/container/Full.jsx

@@ -8,7 +8,7 @@ import { bool } from 'prop-types'
 // Home and Auth Pages
 import Home from '../views/Home/HomeContainer'
 import Login from '../views/Login/LoginContainer'
-
+import Signup from '../views/Signup/SignupContainer'
 // Private route
 import { connect } from 'react-redux';
 import PrivateRoute from './PrivateRoute';
@@ -25,6 +25,7 @@ class Full extends Component {
     return (
       <Switch>
         <Route path="/login" component={Login} />
+        <Route path="/signup" component={Signup} />
         <PrivateRoute path="/app" component={privateRoute} authState={auth} />
         <Route exact path="/" component={Home} />
         <Redirect from="*" to="/" />

src/styles/Login.scss

@@ -0,0 +1,136 @@
+.login {
+    margin: 0;
+    display: flex;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+    background: #E5E5E5;
+    font-family: "Poppins", sans-serif,  'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
+    .carousel {
+      background-color: white;      
+      background-size: cover;
+      width: 300px;
+      height: 300px;
+      align-content: center;
+      padding: 40px;
+      border-radius: 50%;
+      left: 90px;
+      z-index: 5;
+    }
+
+    .carousel div img {
+      width: 250px;
+      height: 220px;
+      border-radius: 50%;
+
+    }
+    .carousel-indicators li {
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+    }    
+    .carousel-indicators {
+      bottom: -80px;      
+  }  
+    .box {
+      padding: 50px;
+      background: #ffffff;
+      box-shadow: 0px 116.543px 327.368px rgba(0, 0, 0, 0.25);
+      border-radius: 20px;
+      min-width: 80%;
+    }
+
+    .column1 {
+      width: 100%;
+      background-color: transparent;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-image: url("../asset/imgs/transparent.png");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      // z-index: 3;
+    }
+
+    .column2 {
+      flex: 1;
+    }
+
+    h1 {
+      font-weight: 600;
+      font-size: 30px;
+      text-align: center;
+    }
+
+    .login-form {
+      text-align: center;
+      .icon {
+        margin: 20px;
+      }
+      .input-group {
+        display: flex;
+        width: 100%;
+        height: 60px;
+        background: #e8f0fe;
+        opacity: 0.99;
+        border: 2px solid rgb(91, 116, 227);
+        box-sizing: border-box;
+        box-shadow: 0px 13.524px 27.048px rgba(0, 0, 0, 0.15);
+        border-radius: 56.3917px;
+        margin: 10px 0px 10px 0px;
+        align-content: center;
+        padding: 20px;
+        .input {
+          flex: 1;
+          padding-left: 10px;
+          border: none;
+          background-color: transparent !important;
+        }
+        input:focus,
+        textarea:focus,
+        select:focus {
+          outline: none;
+          background-color: transparent !important;
+        }
+        img {
+          height: 30px;
+        }
+      }
+    }
+
+    .button {
+      width: 100%;
+      background-color: rgba(83, 66, 235, 0.97);
+      color: white;
+      opacity: 0.99;
+      backdrop-filter: blur(210.981px);
+      border: 3.381px solid rgb(66, 88, 211);
+      box-sizing: border-box;
+      border-radius: 56.3917px;
+      margin: 10px 0px 10px 0px;
+      align-content: center;
+
+      padding: 20px;
+    }
+
+    .pass {
+      color: black;
+    }
+
+    .regain {
+      color: rgb(65, 44, 255);
+    }
+
+    .p1 {
+      float: inline-end;
+      color: black;
+    }
+
+    .p2 {
+      float: inline-end;
+      color: black;
+    }
+  }
+

src/styles/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Poppins:400,600,700,800&display=swap');

src/styles/fonts.scss

@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css?family=Pacifico');
+@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
+

src/styles/landing.scss

@@ -0,0 +1,83 @@
+.nav {
+width: 100%;
+    float: right;
+    padding: 0;
+    list-style: none;
+    padding: 0px 35px 0px 0px;
+    margin: 0px 30px 0px 0px;
+
+}
+#skin {
+    font-family: Source Sans Pro;
+    padding: 0px 0px 0px 70px;
+    margin: 0px 0px 0px 20px; 
+}
+.nav li {
+    float: right;
+    text-align:right; 
+    padding: 0px 0px 0px 5px;
+    margin: 0px 0px 0px 5px;
+}
+.nav li a {
+    display: block;
+    padding: 0px 0px 0px 5px;
+    margin: 0px 0px 0px 5px;
+    text-decoration: none;
+    text-align: right;
+    float: right;
+} 
+.style {
+    font-family: Kaushan Script;
+}
+.polygon {
+    position: absolute;
+    width: 390px;
+    height: 517px;
+    left: 860px;
+    top: 80px;
+    background: rgb(96, 118, 192);
+    border-radius: 20px;
+    transform: rotate(-90deg);
+}
+
+.out {
+    padding: 50px;
+    font-style: normal;
+    font-weight: normal;
+    font-family: Kaushan Script;
+    font-size: 60px;
+    line-height: 116px;
+    color: #1A348D; 
+}
+
+.text {
+    position: absolute;
+    width: 624px;
+    height: 100px;
+    left: 57px;
+    top: 508px;
+    font-family: Pacifico;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 38px;
+    line-height: 146.28%;
+    color: #1A348D;
+}
+.button {
+    position: absolute;
+    width: 242px;
+    height: 86px;
+    left: 823px;
+    top: 613px;
+    background: #1A348D;
+    border-radius: 30px;
+}
+
+.practice {
+    color: red;
+}
+.mynav {
+    position: sticky;
+    top: 0;
+    background-color: #1A348D;
+}

src/styles/signup.scss

@@ -0,0 +1,135 @@
+.signup {
+    margin: 0;
+    display: flex;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+    background: #E5E5E5;
+    font-family: "Poppins", sans-serif,  'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
+    .carousel {
+      background-color: white;      
+      background-size: cover;
+      width: 300px;
+      height: 300px;
+      align-content: center;
+      padding: 40px;
+      border-radius: 50%;
+      left: 90px;
+      z-index: 5;
+    }
+
+    .carousel div img {
+      width: 250px;
+      height: 220px;
+      border-radius: 50%;
+
+    }
+    .carousel-indicators li {
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+    }    
+    .carousel-indicators {
+      bottom: -80px;      
+  }  
+    .box {
+      padding: 50px;
+      background: #ffffff;
+      box-shadow: 0px 116.543px 327.368px rgba(0, 0, 0, 0.25);
+      border-radius: 20px;
+      min-width: 80%;
+    }
+
+    .column1 {
+      width: 100%;
+      background-color: transparent;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-image: url("../asset/imgs/transparent.png");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      // z-index: 3;
+    }
+
+    .column2 {
+      flex: 1;
+    }
+
+    h1 {
+      font-weight: 600;
+      font-size: 30px;
+      text-align: center;
+    }
+
+    .signup-form {
+      text-align: center;
+      .icon {
+        margin: 20px;
+      }
+      .input-group {
+        display: flex;
+        width: 100%;
+        height: 60px;
+        background: #e8f0fe;
+        opacity: 0.99;
+        border: 2px solid rgb(91, 116, 227);
+        box-sizing: border-box;
+        box-shadow: 0px 13.524px 27.048px rgba(0, 0, 0, 0.15);
+        border-radius: 56.3917px;
+        margin: 10px 0px 10px 0px;
+        align-content: center;
+        padding: 20px;
+        .input {
+          flex: 1;
+          padding-left: 10px;
+          border: none;
+          background-color: transparent !important;
+        }
+        input:focus,
+        textarea:focus,
+        select:focus {
+          outline: none;
+          background-color: transparent !important;
+        }
+        img {
+          height: 30px;
+        }
+      }
+    }
+
+    .button {
+      width: 100%;
+      background-color: rgba(83, 66, 235, 0.97);
+      color: white;
+      opacity: 0.99;
+      backdrop-filter: blur(210.981px);
+      border: 3.381px solid rgb(66, 88, 211);
+      box-sizing: border-box;
+      border-radius: 56.3917px;
+      margin: 10px 0px 10px 0px;
+      align-content: center;
+
+      padding: 20px;
+    }
+
+    .pass {
+      color: black;
+    }
+
+    .regain {
+      color: rgb(65, 44, 255);
+    }
+
+    .p1 {
+      float: inline-end;
+      color: black;
+    }
+
+    .p2 {
+      float: inline-end;
+      color: black;
+    }
+  }