From a77a026cb26e392a053316087dd02db0802deff7 Mon Sep 17 00:00:00 2001 From: Priyatham-sai-chand Date: Sun, 22 Nov 2020 19:22:50 +0530 Subject: [PATCH] navbar done --- src/components/HomePage.js | 44 +++------- src/components/LogInContainer.js | 10 ++- src/components/NavBar.js | 41 ++++----- src/homepage.css | 8 +- src/login_reg.css | 19 +++-- src/navbar.css | 137 +++++++++++++------------------ 6 files changed, 111 insertions(+), 148 deletions(-) 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 (
+ < NavBar /> + + + +
- - - - - - +
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 ( - +
-
+
+
+ locaft +
+
Sign In - Sign Up + Sign Up
Sign In or Sign Up 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( -
- -
-
- locaft -
-
-
- -
- -
- Github - Stackoverflow - LinkedIn - Codepen - JsFiddle -
-
+
+
+ + +
+
+ ) } } 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; + +}