signin-page!!

src/assets/scripts/nwLogin/nwLogin.html

@@ -3,13 +3,15 @@
      <div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="modalLoginFormLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
-            <div class="modal-body d-flex">
-              <div class="modal-left" >
-                    <p class="mo-title">Let's start with getting connected.</p>
-                    <div class="subtitle-modal">Sign up and join the WISP. </div>
-                    <a class="btn btn-signup" href="#!signup" role="button">SIGNUP</a>
+            <div class="modal-body d-flex login-bg">
+              <div class="modal-left signup-modal-left" >
+                    <h2 class="text-white text-left ml-4" style="font-size: 40px;">Let's start with<br>getting connected.</h2>
+                    <div class="subtitle-modal text-white ml-4" style="font-size: 14px;">Sign up and join the WISP to find your best matches now. </div>
+                    <a class="btn btn-signup ml-3" href="#!signup" role="button">SIGN UP</a>
               </div>
-              <div class="modal-right ">
+              <div class="container modal-right">
+                  <div class="row">
+                  <div class="col-10 mx-auto">
                   <div class="logo-wisp-right"> 
                     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 138.8360748 39.8824463" style="enable-background:new 0 0 138.8360748 39.8824463;" xml:space="preserve">
@@ -133,19 +135,22 @@
                    </svg>
 
                 </div> <!--logo-->
-                <div>
-                  <h4 class=""><strong>Sign In </strong>
+                <div">
+                  <h2 style="font-size: 16px;">Sign In</h2>
                   <form ng-submit="userLogin(LoginForm.$valid)" name="LoginForm" novalidate>
                     <input name="email" class="modal-username form-control" ng-model="user.email" type="email" placeholder="Email" required />
                     <p ng-show="LoginForm.email.$error.required">This field is required.</p>
                     <p ng-show="LoginForm.email.$error.email">Invalid email.</p>
                     
-                    <input name="pwd" class="modal-username" type="password" ng-model="user.password" placeholder="Password" ng-minlength=5 required />
+                    <input name="pwd" class="modal-username form-control" type="password" ng-model="user.password" placeholder="Password" ng-minlength=5 required />
                     <p ng-show="LoginForm.pwd.$error.minlength">Min 5 characters.</p>
-                    <button type="submit" class="btn btn-gradient btn-centered mt-2">SIGN IN</button>
+                    <button type="submit" class="btn btn-signin btn-centered mt-4 mb-3">SIGN IN</button>
+                    <a class="text-terms" href="#">Terms & Conditions</a>
                   </form>
                 </div>
               </div>
+            </div>
+            </div>
               </div>
             
           </div>

src/assets/styles/nomit.scss

@@ -113,6 +113,7 @@ h1{
     font-weight: bold;
     color: #fff;
 }
+
 .btn-border {
     box-shadow: 0 4px 15px 0 rgba(187, 187, 187, 0.5);
     color: #501db9;
@@ -165,40 +166,7 @@ h1{
 .icon-purple{
   color: #501db9;
 }
-// ***** TOGGLE BTN ***** //
-  
-  input[type="checkbox"].switch{
-    appearance: none;
-    width: 3.5em;
-    height: 1.5em;
-    background: #ddd;
-    border-radius: 3em;
-    position: relative;
-    cursor: pointer;
-    outline: none;
-    transition: all .2s ease-in-out;
-  }
-  
-  input[type="checkbox"].switch:checked{
-    background: #EE38A4;
-  }
-  
-  input[type="checkbox"].switch:after{
-    position: absolute;
-    content: "";
-    width: 1.5em;
-    height: 1.5em;
-    border-radius: 50%;
-    background: #fff;
-    box-shadow: 0 0 .25em rgba(0,0,0,.3);
-    transform: scale(.7);
-    left: 0;
-    transition: all .2s ease-in-out;
-  }
-  
-  input[type="checkbox"].switch:checked:after{
-    left: calc(100% - 1.5em);
-  }
+
 
 // ***** STAR RATING ***** /
   .star-rating-display {
@@ -466,7 +434,15 @@ textarea {
   margin: 200px auto;
 }
 
+.login-bg{
+  background-image: url('/assets/static/images/login-bkg-02.jpg');
+  border-radius: 10px;
+  background-size: 70% 105%;
+  background-position: left;
+}
+
 .modal-content {
+    z-index: 2;
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -477,7 +453,6 @@ textarea {
     flex-direction: column;
     width: 100%;
     pointer-events: auto;
-    background-color: rgb(148, 61, 129);
     color: #fff;
     font-size: 12px;
     background-clip: padding-box;
@@ -497,11 +472,12 @@ textarea {
     font-size: 20px;
 }
 
+
 .modal-right {
     background-color: #fff;
-    height: 400px;
+    height: 390px;
     color: #000;
-    width: 350px;
+    width: 300px;
     position: absolute;
     visibility: visible;
     top: -20px;
@@ -512,37 +488,86 @@ textarea {
     border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px;
     margin-left: auto;
-    padding: 100px;
+    padding: 30px 40px;
     text-align: center;
 }
 .logo-wisp-right{
-    width: 174px;
+    text-align: center;
+    padding: 30px 40px 10px 40px;
 }
 .modal-username{
-    font-size: 14px;
+    font-size: 12px;
+    padding: 8px 6px;
     margin-top: 10px;
     padding-left: 10px;
     border-radius: 50px;
     border-color: #501db9;
-    width: 180px;
+    
+}
+
+.signup-modal-left{
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: column;
 }
+
+
 .btn-signup{
     color: #fff;
     background-color: transparent;
     border: 1px solid #fff;
     border-radius: 50px;
-    height: 40px;
-    width: 180px;
-    margin-top: calc((#{$header-height} - 40px)/2);
+    width: 140px;
+    margin-top: 10px;
     margin-left: 15px;
     outline: none;
-    padding: 5px;
+    padding: 9px;
+    font-weight: bold;
+    letter-spacing: 0.05em;
+}
+
+.btn-signup:hover{
+  background: #501D89;
+  color: #FFFFFF;
 }
+
+.btn-signin {
+  box-shadow: 0 4px 15px 0 rgba(187, 187, 187, 0.5);
+  background-image: linear-gradient(to right,#ee38a4, #501db9);
+  color: #fff !important;
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  border-radius: 50px;
+  border: none;
+  margin-top: 30px;
+  outline: none;
+  padding: 12px 63px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: background .5s ease;
+}
+.btn-signin:hover {
+  background-image: linear-gradient(to left,#ee38a4, #501db9);
+  font-weight: bold;
+  color: #fff;
+}
+
+
 .mo-title{
     text-align: -webkit-center;
     margin-top: 20px;
 }
 
+a.text-terms{
+  font-size: 10px;
+  color: #454545;
+}
+
+a.text-terms:hover{
+  color:#EE38A4;
+}
+
 //companies
 .card-body-companies {
   border-top: 1px solid #9c9fa0;