diff --git a/src/components/HomePage.js b/src/components/HomePage.js
index 75dfe10..ff5aac0 100644
--- a/src/components/HomePage.js
+++ b/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">
diff --git a/src/components/LogInContainer.js b/src/components/LogInContainer.js
index af21125..fb11718 100644
--- a/src/components/LogInContainer.js
+++ b/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>
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 5d15aa3..9e5231d 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -4,30 +4,25 @@ import '../navbar.css';
class NavBar extends Component {
render(){
+ window.addEventListener("scroll", () =>{
+ var header = document.querySelector("header");
+ header.classList.toggle("sticky",window.scrollY > 0);
+
+ })
return(
- <div class="nav">
- <input type="checkbox" id="nav-check" />
- <div class="nav-header">
- <div class="nav-title">
- locaft
- </div>
- </div>
- <div class="nav-btn">
- <label for="nav-check">
- <span></span>
- <span></span>
- <span></span>
- </label>
- </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>
+ <div class="navbar">
+ <header>
+ <a href="/home" class="logo">locaft</a>
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Services</a></li>
+ <li><a href="#">Contact us</a></li>
+ <li><a href="#">Log In</a></li>
+ </ul>
+ </header>
+ </div>
+
)
}
}
diff --git a/src/homepage.css b/src/homepage.css
index 0d392e8..999ebea 100644
--- a/src/homepage.css
+++ b/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 {
diff --git a/src/login_reg.css b/src/login_reg.css
index 89a43af..0fd1cbb 100644
--- a/src/login_reg.css
+++ b/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;
diff --git a/src/navbar.css b/src/navbar.css
index 43eb842..1d67a0e 100644
--- a/src/navbar.css
+++ b/src/navbar.css
@@ -1,99 +1,72 @@
-
+@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
* {
box-sizing: border-box;
}
body {
- margin: 0px;
- font-family: 'segoe ui';
+background: #66bfbf;
}
-.nav {
- height: 50px;
+header{
+
+ 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 {
- background-color: rgba(0, 0, 0, 0.3);
+ transition: 0.6s;
}
+header ul {
+
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
-.nav > #nav-check {
- display: none;
}
+header ul li {
-@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;
- }
-}
\ No newline at end of file
+ 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;
+
+}