MrMirror21

route to main-page

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Landing from './Landing';
import Main from './Main';
class App extends React.Component {
......@@ -9,6 +10,7 @@ class App extends React.Component {
<Router>
<Switch>
<Route exact path="/landing" component={Landing} />
<Route exact path="/main" component={Main} />
<Redirect path="*" to="/landing" />
</Switch>
</Router>
......
......@@ -5,10 +5,9 @@ import "../style/Landing.css";
const Button = () => {
return (
<div className="mainBtnContainer">
<Link to='./main'>
<Link to="/main">
<button className="startBtn">Get Started!</button>
</Link>
</div>
)
}
......
import React from 'react'
import { Link } from 'react-router-dom';
import logo from '../style/Logo.JPG';
const Header = () => {
return (
<div className="Header">
<img src="../style/Logo.jpg" alt="Logo"></img>
<div className="HeaderContainer"
style={{
display: 'inline-block',
width: '100vw',
height: '100px',
background: '#2f3640'
}}
>
<div className="logo">
<Link to="/landing">
<img
src={logo}
width='100px'
height='100px'
alt="Logo"></img>
</Link>
</div>
</div>
)
}
......
......@@ -17,6 +17,7 @@ body {
width: 100vw;
height: 100vh;
}
/*
.Landingbg:after {
content: '';
position: absolute;
......@@ -28,7 +29,7 @@ body {
background: rgba(0,0,0,0.001);
box-shadow: inset 100px 100px 250px #000000, inset -100px -100px 250px #000000;
}
*/
.mainTextContainer{
text-align: center;
position: relative;
......@@ -60,5 +61,5 @@ body {
}
.startBtn:hover {
opacity: 0.5;
opacity: 0.8;
}
\ No newline at end of file
......