navbar ui
This commit is contained in:
parent
5aa99bfbc4
commit
b60df10e81
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||||
import '../homepage.css';
|
import '../homepage.css';
|
||||||
import LogInContainer from './LogInContainer';
|
import LogInContainer from './LogInContainer';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
|
import Navbar from './NavBar';
|
||||||
|
|
||||||
|
|
||||||
class HomePage extends Component {
|
class HomePage extends Component {
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,34 @@
|
||||||
import React from 'react';
|
import React, {Component} from 'react';
|
||||||
|
import '../navbar.css';
|
||||||
|
|
||||||
const Navbar = () => {
|
class NavBar extends Component {
|
||||||
|
|
||||||
|
render(){
|
||||||
return(
|
return(
|
||||||
<>
|
<div class="nav">
|
||||||
<Nav>
|
<input type="checkbox" id="nav-check" />
|
||||||
<NavLink to="/">
|
<div class="nav-header">
|
||||||
<h1 class="brand-name">Locaft</h1>
|
<div class="nav-title">
|
||||||
</NavLink>
|
locaft
|
||||||
<Bars />
|
</div>
|
||||||
<NavMenu>
|
</div>
|
||||||
<NavLink to="/about" activeStyle>About</NavLink>
|
<div class="nav-btn">
|
||||||
<NavLink to="/services" activeStyle>services</NavLink>
|
<label for="nav-check">
|
||||||
<NavLink to="/contact-us" activeStyle>contact-us</NavLink>
|
<span></span>
|
||||||
<NavLink to="/Users/sign-up" activeStyle>Sign-in</NavLink>
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
</NavMenu>
|
<div class="nav-links">
|
||||||
</Nav>
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
export default NavBar;
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
import { NavLink as Link } from 'react-router-dom';
|
|
||||||
import {FaBars} from 'react-icons/fa';
|
|
||||||
|
|
||||||
export const Nav = styled.nav`
|
|
||||||
background: #000;
|
|
||||||
height: 80px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.5rem calc((100vw - 1000px) / 2);
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
`
|
|
||||||
export const NavLink = styled(Link) `
|
|
||||||
|
|
||||||
`
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import './pricing-plan.css';
|
import './pricing-plan.css';
|
||||||
|
import NavBar from './NavBar';
|
||||||
|
|
||||||
class PricingPlan extends Component {
|
class PricingPlan extends Component {
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
return(
|
return(
|
||||||
<div className="body">
|
<div className="body">
|
||||||
|
<NavBar />
|
||||||
<div class='pricing-plan-container'>
|
<div class='pricing-plan-container'>
|
||||||
|
|
||||||
<section class='pricing-plan '>
|
<section class='pricing-plan '>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
|
||||||
|
* {
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
font-family: 'segoe ui';
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #4d4d4d;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > .nav-links > a:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav > #nav-check {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue