navbar ui
This commit is contained in:
parent
5aa99bfbc4
commit
b60df10e81
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||
import '../homepage.css';
|
||||
import LogInContainer from './LogInContainer';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import Navbar from './NavBar';
|
||||
|
||||
|
||||
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(
|
||||
<>
|
||||
<Nav>
|
||||
<NavLink to="/">
|
||||
<h1 class="brand-name">Locaft</h1>
|
||||
</NavLink>
|
||||
<Bars />
|
||||
<NavMenu>
|
||||
<NavLink to="/about" activeStyle>About</NavLink>
|
||||
<NavLink to="/services" activeStyle>services</NavLink>
|
||||
<NavLink to="/contact-us" activeStyle>contact-us</NavLink>
|
||||
<NavLink to="/Users/sign-up" activeStyle>Sign-in</NavLink>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
</NavMenu>
|
||||
</Nav>
|
||||
</>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
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 './pricing-plan.css';
|
||||
import NavBar from './NavBar';
|
||||
|
||||
class PricingPlan extends Component {
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div className="body">
|
||||
<NavBar />
|
||||
<div class='pricing-plan-container'>
|
||||
|
||||
<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