navbar done

src/components/HomePage.js

@@ -3,49 +3,27 @@ import '../homepage.css';
 import LogInContainer from './LogInContainer';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Navbar from './NavBar';
+import NavBar from './NavBar';
 
 
 class  HomePage extends Component {
 
+  
+
+  
   render(){
-    return (
+       return (
       
       <div className="HomePage">
+        < NavBar />
+        
+
+        
+        
   <section class="colored-section" id="title">
 
     <div class="container-fluid">
        
-      
-      <nav class="navbar navbar-expand-lg navbar-dark">
-
-        <a class="navbar-brand" href="">locaft</a>
-
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item">
-              <a class="nav-link" href="#footer">Contact Us</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#about-us">About Us</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#cta">Blog</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#login">Sign up or Sign in</a>
-            </li>
-          </ul>
-
-        </div>
-      </nav>
-
-
-
       <div className="row">
         
         <div className="col-lg-6">

src/components/LogInContainer.js

@@ -8,13 +8,17 @@ import '../login_reg.css';
 class LogInContainer extends Component {
   render() {
     return (
-      <BrowserRouter basename="/user/">
+      <BrowserRouter>
         <div className="Apper">
-          <div className="Apper__Aside"></div>
+          <div className="Apper__Aside">
+            <div className="Apper__Aside__text">
+              locaft
+            </div>
+          </div>
           <div className="Apper__Form">
               <div className="PageSwitcher">
                 <NavLink to="/sign-in" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
-                <NavLink exact to="/sign-up" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
+                <NavLink to="/sign-up" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
               </div>
               <div className="FormTitle">
                   <NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/sign-up" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>

src/components/NavBar.js

@@ -4,30 +4,25 @@ import '../navbar.css';
 class  NavBar extends Component {
 
     render(){
-    return(
+      window.addEventListener("scroll", () =>{
-      <div class="nav">
+        var header = document.querySelector("header");
-  <input type="checkbox" id="nav-check" />
+        header.classList.toggle("sticky",window.scrollY > 0);
-  <div class="nav-header">
+
-    <div class="nav-title">
+      })
-        locaft
+    return(
-    </div>
+      <div class="navbar">
-  </div>
+        <header>
-  <div class="nav-btn">
+          <a href="/home" class="logo">locaft</a>
-    <label for="nav-check">
+          <ul>
-      <span></span>
+            <li><a href="#">Home</a></li>
-      <span></span>
+            <li><a href="#">About</a></li>
-      <span></span>
+            <li><a href="#">Services</a></li>
-    </label>
+            <li><a href="#">Contact us</a></li>
-  </div>
+            <li><a href="#">Log In</a></li>
+          </ul>
+        </header>
+      </div>
       
-  <div class="nav-links">
-    <a href="//github.io/jo_geek" target="_blank">Github</a>
-    <a href="http://stackoverflow.com/users/4084003/" target="_blank">Stackoverflow</a>
-    <a href="https://in.linkedin.com/in/jonesvinothjoseph" target="_blank">LinkedIn</a>
-    <a href="https://codepen.io/jo_Geek/" target="_blank">Codepen</a>
-    <a href="https://jsfiddle.net/user/jo_Geek/" target="_blank">JsFiddle</a>
-  </div>
-    </div> 
     )
     }
 }

src/homepage.css

@@ -1,4 +1,4 @@
-
+@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
 div {
   font-family: "Montserrat";
   text-align: center;
@@ -51,9 +51,15 @@ p {
 }
 
 /* Navigation Bar */
+.header{
+  position:sticky;
+  top:0;
+}
 
 .navbar {
   padding: 0 0 4.5rem;
+  position: sticky;
+  top: 0;
 }
 
 .navbar-brand {

src/login_reg.css

@@ -7,11 +7,12 @@
 .Apper__Aside {
   width: 50%;
   background-color: #66DAC7;
+  text-align: center;
 }
 
 .Apper__Form {
   width: 50%;
-  background-color: #2E4158;
+  background-color: #ffffff;
   padding: 25px 40px;
   overflow: auto;
 }
@@ -21,10 +22,16 @@
   justify-content: flex-end;
   margin-bottom: 10%;
 }
+.Apper__Aside__Text{
+ display: -webkit-flex;
+ display: flex;
+ align-items: center;
+ justify-self: center;
+}
 
 .PageSwitcher__Item {
   background-color: #4C5D72;
-  color: #9DA6B1;
+  color: white;
   padding: 10px 25px;
   cursor: pointer;
   font-size: .9em;
@@ -35,7 +42,7 @@
 }
 
 .PageSwitcher__Item--Active {
-  background-color: #5ED0C0;
+  background-color: #66bfbf;
   color: white;
 }
 
@@ -53,7 +60,7 @@
 }
 
 .FormTitle {
-  color: #707C8B;
+  color: #000000;
   font-weight: 300;
   margin-bottom: 50px;
 }
@@ -72,7 +79,7 @@
 }
 
 .FormTitle__Link--Active {
-  color: white;
+  color: #707c8b;
   border-bottom: 1px solid #199087;
 }
 
@@ -84,7 +91,7 @@
   display: block;
   text-transform: uppercase;
   font-size: .9em;
-  color: white;
+  color: #000000;
   text-align: start;
   margin-left:45px;
   

src/navbar.css

@@ -1,99 +1,72 @@
-
+@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
 * {
 
   box-sizing: border-box;
 }
 
 body {
-  margin: 0px;
+background: #66bfbf;
-  font-family: 'segoe ui';
 }
 
-.nav {
+header{
-  height: 50px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
-  background-color: #4d4d4d;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: 0.6s;
+  padding: 20px 25px;
+  z-index: 100000;
+  font-family: Ubuntu;
+
+}
+header.sticky{
+
+  padding: 3px 50px;
+  background: #66bfbf;
+  opacity: 0.85;
+}
+header .logo{
+  font-family: "Ubuntu";
+  font-size: 2rem;
+  font-weight: bold;
   position: relative;
-}
-
-.nav > .nav-header {
-  display: inline;
-}
-
-.nav > .nav-header > .nav-title {
-  display: inline-block;
-  font-size: 22px;
   color: #fff;
-  padding: 10px 10px 10px 10px;
-}
-
-.nav > .nav-btn {
-  display: none;
-}
-
-.nav > .nav-links {
-  display: inline;
-  float: right;
-  font-size: 18px;
-}
-
-.nav > .nav-links > a {
-  display: inline-block;
-  padding: 13px 10px 13px 10px;
   text-decoration: none;
-  color: #efefef;
+  text-transform: lowercase;
-}
+  padding-left: 100px;
 
-.nav > .nav-links > a:hover {
+  transition: 0.6s;
-  background-color: rgba(0, 0, 0, 0.3);
 }
+header ul {
 
-.nav > #nav-check {
+  position: relative;
-  display: none;
+  display: flex;
-}
+  justify-content: center;
+  align-items: center;
+
+}
+header ul li {
+
+  position: relative;
+  list-style: none;
+}
+header ul li a {
+
+  position: relative;
+  margin: 0 15px;
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 2px;
+  font-weight: 500px;
+  transition: 0.6s;
+
+
+}
+header.sticky ul li a{
+  color: #fff;
   
-@media (max-width:600px) {
-  .nav > .nav-btn {
-    display: inline-block;
-    position: absolute;
-    right: 0px;
-    top: 0px;
-  }
-  .nav > .nav-btn > label {
-    display: inline-block;
-    width: 50px;
-    height: 50px;
-    padding: 13px;
-  }
-  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-  .nav > .nav-btn > label > span {
-    display: block;
-    width: 25px;
-    height: 10px;
-    border-top: 2px solid #eee;
-  }
-  .nav > .nav-links {
-    position: absolute;
-    display: block;
-    width: 100%;
-    background-color: #333;
-    height: 0px;
-    transition: all 0.3s ease-in;
-    overflow-y: hidden;
-    top: 50px;
-    left: 0px;
-  }
-  .nav > .nav-links > a {
-    display: block;
-    width: 100%;
-  }
-  .nav > #nav-check:not(:checked) ~ .nav-links {
-    height: 0px;
-  }
-  .nav > #nav-check:checked ~ .nav-links {
-    height: calc(100vh - 50px);
-    overflow-y: auto;
-  }
 }