mirror of
https://github.com/Noratrieb/hugos-lieblingsflugzeuge.git
synced 2026-01-14 11:45:04 +01:00
hugo
This commit is contained in:
Nilstrieb
parent
9443cbd1b3
commit
5d87d4a1d3
6 changed files with 222 additions and 178 deletions
102
src/App.js
102
src/App.js
|
|
@ -1,102 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import f22 from './img/raptor-1040097_1920.png'
|
|
||||||
import harrier from './img/av-8b-harrier-1986422_1920.jpg'
|
|
||||||
import './app.css';
|
|
||||||
import './header.css'
|
|
||||||
|
|
||||||
class App 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'}/>);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id="parent">
|
|
||||||
<header>
|
|
||||||
<h1>Hugos Lieblingsflugzeuge</h1>
|
|
||||||
<Navigation/>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<div>
|
|
||||||
{items}
|
|
||||||
<ModelImage img={harrier} name="AV-8B Harrier"/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<Footer/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
|
|
||||||
class Navigation extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href=""><button>Seite A</button></a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href=""><button>Seite B</button></a>
|
|
||||||
<div className="content">
|
|
||||||
<a href="">Seite BA</a>
|
|
||||||
<a href="">Seite BB</a>
|
|
||||||
<a href="">Seite BC</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href=""><button>Seite C</button></a>
|
|
||||||
<div className="content">
|
|
||||||
<a href="">Seite CA</a>
|
|
||||||
<a href="">Seite CB</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href=""><button>Seite D</button></a>
|
|
||||||
<div className="content">
|
|
||||||
<a href="">Seite DA</a>
|
|
||||||
<a href="">Seite DB</a>
|
|
||||||
<a href="">Seite DC</a>
|
|
||||||
<a href="">Seite DD</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Footer extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<footer>
|
|
||||||
<div>hi</div>
|
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class ModelImage extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
img: '',
|
|
||||||
name: '',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps(props) {
|
|
||||||
return {img: props.img, name: props.name};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="model">
|
|
||||||
<img src={this.state.img} alt={this.state.name}/>
|
|
||||||
<div>{this.state.name}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
82
src/app.js
Normal file
82
src/app.js
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
43
src/content.js
Normal file
43
src/content.js
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
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 {
|
||||||
|
render() {
|
||||||
|
const items = Array(100).fill(1).map((x, y) => x + y)
|
||||||
|
.map(x => <ModelImage img={f22} name={'F' + (20 + x) + ' Raptor'}/>);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{items}
|
||||||
|
<ModelImage img={harrier} name="AV-8B Harrier"/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Content;
|
||||||
|
|
||||||
|
|
||||||
|
class ModelImage extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
img: '',
|
||||||
|
name: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromProps(props) {
|
||||||
|
return {img: props.img, name: props.name};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="model">
|
||||||
|
<img src={this.state.img} alt={this.state.name}/>
|
||||||
|
<div>{this.state.name}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
header {
|
|
||||||
grid-area: header;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Navigation*/
|
|
||||||
nav {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow: visible;
|
|
||||||
background-color: rgb(176, 194, 206);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li {
|
|
||||||
float: left;
|
|
||||||
border-right: 1px solid gray;
|
|
||||||
height: 100%;
|
|
||||||
width: 19.9%;
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li:hover {
|
|
||||||
background-color: darkgray;
|
|
||||||
color: #111111;
|
|
||||||
transition-duration: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li div a {
|
|
||||||
font-size: 18pt;
|
|
||||||
display: block;
|
|
||||||
color: #666666;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 8px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nav ul li > a button {
|
|
||||||
font-size: 20pt;
|
|
||||||
background-color: rgb(176, 194, 206);
|
|
||||||
border: none;
|
|
||||||
padding: 9px 0 9px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
nav ul li div {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li:hover div {
|
|
||||||
display: block;
|
|
||||||
background-color: rgb(206, 224, 236);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li div a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: black;
|
|
||||||
font-size: 16pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li div a:hover {
|
|
||||||
background-color: darkgray;
|
|
||||||
color: #111111;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import App from "./App";
|
import App from "./app";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<App/>
|
<App/>
|
||||||
|
|
|
||||||
96
src/template.css
Normal file
96
src/template.css
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
:root {
|
||||||
|
--nav-color: rgb(176, 194, 206);
|
||||||
|
--nav-hover-color: darkgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
grid-area: header;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin-top: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Navigation*/
|
||||||
|
nav {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: visible;
|
||||||
|
background-color: var(--nav-color);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*main ul*/
|
||||||
|
nav ul {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*nav li item*/
|
||||||
|
nav ul li {
|
||||||
|
float: left;
|
||||||
|
border-right: 1px solid gray;
|
||||||
|
height: 100%;
|
||||||
|
width: 15%;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
font-size: 1.5em;
|
||||||
|
background-color: var(--nav-color);
|
||||||
|
cursor: pointer;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*nav li item on hover*/
|
||||||
|
nav ul li:hover {
|
||||||
|
background-color: darkgray;
|
||||||
|
color: var(--nav-hover-color);
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*all nav button*/
|
||||||
|
nav ul li button {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--nav-color);
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*all nav button focus - remove outline so it looks like a normal link*/
|
||||||
|
nav ul li button:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*all nav a hover*/
|
||||||
|
nav ul li button:hover {
|
||||||
|
background-color: var(--nav-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*drop menu*/
|
||||||
|
nav ul li div {
|
||||||
|
display: none;
|
||||||
|
background-color: var(--nav-color);
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*drop menu main hover*/
|
||||||
|
nav ul li:hover div {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*drop menu button*/
|
||||||
|
nav ul li div button {
|
||||||
|
padding: 8px 0 8px 0;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue