Add header styled like Biosphere Capital site

- Adds Biosphere Capital logo
- Adds dummy nav with no dropdown links
This commit is contained in:
Dana Lambert 2021-10-18 10:38:59 +13:00
parent 530089c19c
commit aa95005fd2
8 changed files with 72 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -0,0 +1,18 @@
.top-header {
padding-bottom: 3.2vw;
}
.header-logo {
max-height: 110px;
}
.nav-link {
color: white !important;
font-weight: 200;
font-size: 16px !important;
padding: 0px !important;
}
.nav-item {
margin-left: 26.8667px;
}

View file

@ -1,8 +1,13 @@
@import "./theme.scss"; @import "./theme.scss";
@import "./header.scss";
// Core styles here... // Core styles here...
.App { .App {
font-family: $primary-font; font-family: $primary-font;
color: $text-color-primary; color: $text-color-primary;
background-color: $background-color-primary; background-color: $background-color-primary;
padding-top: 3.2vw;
padding-left: 3vw;
padding-right: 3vw;
padding-bottom: 3.2vw;
} }

View file

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
// COLOURS // COLOURS
$background-color-primary: #000000; $background-color-primary: #000000;

View file

@ -0,0 +1,13 @@
import TopNav from './TopNav'
import logo from '../assets/img/logo.png'
export default function Header() {
return (
<div className='d-flex justify-content-between top-header'>
<a href="https://www.b4c3.com/">
<img className='header-logo' src={logo} alt="Biosphere Capital Limited" />
</a>
<TopNav />
</div>
);
}

View file

@ -0,0 +1,30 @@
export default function TopNav() {
return (
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Advisory</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ecology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Renewables</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.b4c3.com/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
);
}

View file

@ -5,9 +5,9 @@ import { Container } from 'reactstrap';
export default class Step1 extends React.Component { export default class Step1 extends React.Component {
render() { render() {
return ( return (
<Container className="pt-4"> <div className="pt-4">
<p>Please choose your location...</p> <p>Please choose your location...</p>
</Container> </div>
) )
} }
} }

View file

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import { Container } from 'reactstrap'; import { Container } from 'reactstrap';
import Stepper from '../components/Stepper' import Stepper from '../components/Stepper'
import Header from '../components/Header'
import PlantRepsostory from '../repository/PlantRepository' import PlantRepsostory from '../repository/PlantRepository'
@ -30,9 +31,8 @@ export default class SamplePage extends React.Component {
render() { render() {
return ( return (
<Container className="p-2"> <Container fluid className='p-0'>
<h1>Right Tree</h1> <Header/>
<h4>Right Plant Right Place Right Time</h4>
<div className="pt-4"> <div className="pt-4">
<Stepper plants={this.state.plants} /> <Stepper plants={this.state.plants} />