log in ui revamp

public/index.html

@@ -27,6 +27,7 @@
     -->
     <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css?family=Montserrat|Ubuntu" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- CSS Stylesheets -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

src/components/LogInContainer.js

@@ -12,7 +12,8 @@ class LogInContainer extends Component {
         <div className="Apper">
           <div className="Apper__Aside">
             <div className="Apper__Aside__text">
-              locaft
+              <p>locaft</p>
+              
             </div>
           </div>
           <div className="Apper__Form">

src/components/NavBar.js

@@ -12,6 +12,12 @@ class  NavBar extends Component {
     return(
       <div class="navbar">
         <header>
+          <input type="checkbox" id="check"/>
+          <label for="check" class="checkbtn">
+            <i class="fas fa-bars" id="btn"></i>
+            </label>
+
+
           <a href="/home" class="logo">locaft</a>
           <ul>
             <li><a href="#">Home</a></li>
@@ -20,6 +26,7 @@ class  NavBar extends Component {
             <li><a href="#">Contact us</a></li>
             <li><a href="#">Log In</a></li>
           </ul>
+          
         </header>
       </div>
       

src/components/PricingPlan.js

@@ -8,6 +8,9 @@ class PricingPlan extends Component {
         return(
             <div className="body">
                 <NavBar />
+                <br />
+                <br />
+                <br />
                 <div class='pricing-plan-container'>
 
                 <section class='pricing-plan '>

src/components/SignIn.js

@@ -46,7 +46,7 @@ class SignInForm extends Component {
               </div>
 
               <div className="FormField">
-                  <button className="FormField__Button mr-20">Sign In</button> <Link to="/" className="FormField__Link">Create an account</Link>
+                  <button className="FormField__Button mr-20">Sign In</button> <Link exact to="/sign-up" className="FormField__Link">Not a member?</Link>
               </div>
             </form>
           </div>

src/components/SignUp.js

@@ -57,7 +57,7 @@ class SignUpForm extends Component {
               </div>
 
               <div className="FormField">
-                  <button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">I'm already member</Link>
+                  <button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
               </div>
             </form>
           </div>

src/components/pricing-plan.css

@@ -1,5 +1,10 @@
-.pricing-plan {
+.pricing-plan-container
+{
 
+    background: white;
+}
+.pricing-plan {
+    background: white;
     width:300px;
     border-radius: 25px;
     box-shadow: 0 0 5px rgba(0,0,0,0.2);

src/login_reg.css

@@ -7,7 +7,11 @@
 .Apper__Aside {
   width: 50%;
   background-color: #66DAC7;
-  text-align: center;
+  display:flex;
+  align-items: center;
+  justify-self: center;
+  
+
 }
 
 .Apper__Form {
@@ -22,11 +26,27 @@
   justify-content: flex-end;
   margin-bottom: 10%;
 }
-.Apper__Aside__Text{
- display: -webkit-flex;
- display: flex;
- align-items: center;
- justify-self: center;
+.Apper__Aside__text{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Apper__Aside__text p{
+
+  font-family: "Ubuntu";
+  font-size: 5rem;
+  font-weight: bold;
+  position: relative;
+  color: white;
+  text-decoration: none;
+  text-transform: lowercase;
+  left: 150%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  
+  flex-grow: 1;
+  
 }
 
 .PageSwitcher__Item {
@@ -90,8 +110,8 @@
 .FormField__Label {
   display: block;
   text-transform: uppercase;
-  font-size: .9em;
-  color: #000000;
+  font-size: 1.25em;
+  color: #4C5D72;
   text-align: start;
   margin-left:45px;
   
@@ -100,10 +120,10 @@
   width: 85%;
   background-color: transparent;
   border: none;
-  color: white;
+  color: #4C5D72;
   outline: none;
   border-bottom: 1px solid #445366;
-  font-size: 1em;
+  font-size: .9em;
   font-weight: 300;
   padding-bottom: 10px;
   margin-top: 10px;
@@ -128,8 +148,8 @@
   color: #66707D;
   text-decoration: none;
   display: inline-block;
-  border-bottom: 1.5px solid #225E62;
   padding-bottom: 5px;
+  margin-left: 12px;
 }
 
 .FormField__CheckboxLabel {
@@ -143,7 +163,7 @@
 }
 
 .FormField__TermsLink {
-  color: white;
+  color: #646F7D;
   border-bottom: 1px solid #199087;
   text-decoration: none;
   display: inline-block;

src/navbar.css

@@ -2,14 +2,15 @@
 * {
 
   box-sizing: border-box;
+  
+  text-decoration: none;
 }
 
 body {
-background: #66bfbf;
 }
 
 header{
-
+background: #66bfbf;
   position: fixed;
   top: 0;
   left: 0;
@@ -18,7 +19,7 @@ header{
   justify-content: space-between;
   align-items: center;
   transition: 0.6s;
-  padding: 20px 25px;
+  padding: 10px 15px;
   z-index: 100000;
   font-family: Ubuntu;
 
@@ -38,7 +39,6 @@ header .logo{
   text-decoration: none;
   text-transform: lowercase;
   padding-left: 100px;
-
   transition: 0.6s;
 }
 header ul {
@@ -53,20 +53,99 @@ header ul li {
 
   position: relative;
   list-style: none;
+  
+  
 }
 header ul li a {
 
   position: relative;
-  margin: 0 15px;
-  text-decoration: none;
+  margin: 5px 15px;
+  text-transform: uppercase;
   color: #fff;
   letter-spacing: 2px;
   font-weight: 500px;
+  padding: 5px 0;
   transition: 0.6s;
 
 
+}
+header ul li a:before{
+  position: absolute;
+  content: '';
+  left:0;
+  bottom: 0;
+  height: 15px;
+  width:100%;
+  background: #ffffff;
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform .4s linear;
+}
+header ul li a:hover:before{
+
+  transform: scaleX(1);
+  transform-origin: left;
 }
 header.sticky ul li a{
   color: #fff;
   
+}
+.checkbtn
+{
+  color:white;
+  font-size: 30px;
+  float:right;
+  line-height: 80px;
+  margin-right: 40px;
+  cursor: pointer;
+  display: none;
+  
+}
+#check{
+  display: none;
+}
+
+@media (max-width: 1118px){
+  header .logo{
+    left: 8%;
+  }
+}
+@media (max-width: 944px){
+  header .logo{
+    left: 6%;
+    top: 20px;
+    width: 1030px;
+
+  }
+}
+@media (max-width: 860px){
+  label #btn{
+    display: block;
+  }
+  ul {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    background: #66bfbf;
+    text-align: center;
+    transition: all .5s;
+  }
+  header ul li{
+
+    display: block;
+    margin: 50px 0;
+    line-height: 30px;
+
+  }
+  nav ul li a{
+    
+    font-size: 20px;
+  }
+  label #check:checked ~ ul{
+
+
+  }
+  
+
+  
 }