Noratrieb/hugos-lieblingsflugzeuge
1
0
Fork 0
mirror of https://github.com/Noratrieb/hugos-lieblingsflugzeuge.git synced 2026-01-16 20:55:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

spa (mit hugo)

Browse source
This commit is contained in:
Nilstrieb 2021-02-13 17:24:18 +01:00
parent a395e0e8fb
commit 933ef702c6
8 changed files with 229 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/App.js Normal file
View file

@ -0,0 +1,89 @@
import React from 'react';
import {
Route, NavLink, HashRouter
} from 'react-router-dom'
import './app.css';
import './template.css'
import Modern from "./Militaer";
import Home from "./Home";
class App extends React.Component {
render() {
return (
<HashRouter>
<div id="parent">
<header>
<Navigation/>
<h1>Hugos Lieblingsflugzeuge</h1>
</header>
<main>
<Route exact path="/" component={Home}/>
<Route path="/flieger-modern" component={Modern}/>
</main>
<Footer/>
</div>
</HashRouter>
);
}
}
export default App;
class Navigation extends React.Component {
render() {
return (
<nav>
<ul>
<li>
<NavLink to="/">Start</NavLink>
</li>
<li>
<NavLink to="/">Militärflugzeuge</NavLink>
<div className="content">
<NavLink to="/">Erste Weltkrieg</NavLink>
<NavLink to="/">Zwischenkriegszeit</NavLink>
<NavLink to="/">Zweiter Weltkrieg</NavLink>
<NavLink to="/">Kalter Krieg</NavLink>
<NavLink to="/flieger-modern">Moderne</NavLink>
</div>
</li>
<li>
<NavLink to="/">Airliner</NavLink>
<div className="content">
<NavLink to="/">Boeing</NavLink>
<NavLink to="/">Airbus</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
<li>
<NavLink to="/">Sportflugzeuge</NavLink>
<div className="content">
<NavLink to="/">Doppeldecker</NavLink>
<NavLink to="/">Propellerflugzeuge</NavLink>
<NavLink to="/">Segelflugzeuge</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
<li>
<NavLink to="/">Spezielle</NavLink>
<div className="content">
<NavLink to="/">Helikopter</NavLink>
<NavLink to="/">Zeppeline</NavLink>
<NavLink to="/">Andere</NavLink>
</div>
</li>
</ul>
</nav>
)
}
}
class Footer extends React.Component {
render() {
return (
<footer>
<div>hi</div>
</footer>
)
}
}

11
src/Home.js Normal file
View file

@ -0,0 +1,11 @@
import React, {Component} from "react";
class Home extends Component {
render() {
return (
<h1>Willkommen bei Hugos Lieblingsflugzeugen!</h1>
)
}
}
export default Home;

9
src/content.js → src/Militaer.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import f22 from './img/raptor-1040097_1920.png'
import harrier from './img/av-8b-harrier-1986422_1920.jpg'
class Content extends React.Component {
class Modern extends React.Component {
render() {
const items = Array(100).fill(1).map((x, y) => x + y)
.map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
@ -16,9 +16,6 @@ class Content extends React.Component {
}
}
export default Content;
class ModelImage extends React.Component {
constructor(props) {
super(props);
@ -40,4 +37,6 @@ class ModelImage extends React.Component {
</div>
);
}
}
}
export default Modern;

82
src/app.js
View file

@ -1,82 +0,0 @@
import React from 'react';
import './app.css';
import './template.css'
import Content from "./content";
class App extends React.Component {
render() {
return (
<div id="parent">
<header>
<Navigation/>
<h1>Hugos Lieblingsflugzeuge</h1>
</header>
<main>
<Content/>
</main>
<Footer/>
</div>
);
}
}
export default App;
class Navigation extends React.Component {
render() {
return (
<nav>
<ul>
<li>
<button onClick="">Start</button>
</li>
<li>
<button onClick="">Militärflugzeuge</button>
<div>
<button onClick="">Erste Weltkrieg</button>
<button onClick="">Zwischenkriegszeit</button>
<button onClick="">Zweiter Weltkrieg</button>
<button onClick="">Kalter Krieg</button>
<button onClick="">Moderne</button>
</div>
</li>
<li>
<button onClick="">Airliner</button>
<div>
<button onClick="">Boeing</button>
<button onClick="">Airbus</button>
<button onClick="">Andere</button>
</div>
</li>
<li>
<button onClick="">Sportflugzeuge</button>
<div>
<button onClick="">Doppeldecker</button>
<button onClick="">Propellerflugzeuge</button>
<button onClick="">Segelflugzeuge</button>
<button onClick="">Andere</button>
</div>
</li>
<li>
<button onClick="">Spezielle</button>
<div>
<button onClick="">Helikopter</button>
<button onClick="">Zeppeline</button>
<button onClick="">Andere</button>
</div>
</li>
</ul>
</nav>
)
}
}
class Footer extends React.Component {
render() {
return (
<footer>
<div>hi</div>
</footer>
)
}
}

2
src/index.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./app";
import App from "./App";
ReactDOM.render(
<App/>

19
src/template.css
View file

@ -55,10 +55,11 @@ nav ul li:hover {
transition-duration: 0.4s;
}
/*all nav button*/
nav ul li button {
/*all nav a*/
nav ul li a {
display: block;
text-align: center;
text-decoration: none;
color: black;
width: 100%;
height: 100%;
@ -67,18 +68,18 @@ nav ul li button {
cursor: pointer;
}
/*all nav button focus - remove outline so it looks like a normal link*/
nav ul li button:focus {
/*all nav a focus - remove outline so it looks like a normal link*/
nav ul li a:focus {
outline: 0;
}
/*all nav a hover*/
nav ul li button:hover {
nav ul li a:hover {
background-color: var(--nav-hover-color);
}
/*drop menu*/
nav ul li div {
nav ul li .content {
display: none;
background-color: var(--nav-color);
z-index: 1;
@ -86,11 +87,11 @@ nav ul li div {
}
/*drop menu main hover*/
nav ul li:hover div {
nav ul li:hover .content {
display: block;
}
/*drop menu button*/
nav ul li div button {
/*drop menu a*/
nav ul li .content a {
padding: 8px 0 8px 0;
}