Noratrieb/hugos-lieblingsflugzeuge
1
0
Fork 0
mirror of https://github.com/Noratrieb/hugos-lieblingsflugzeuge.git synced 2026-01-14 11:45:04 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

hugo

Browse source
This commit is contained in:
Nilstrieb 2021-02-13 16:03:18 +01:00
parent 9443cbd1b3
commit 5d87d4a1d3
6 changed files with 222 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/App.js
View file

@ -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
View 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
View 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>
);
}
}

75
src/header.css
View file

@ -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;
}

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/>

96
src/template.css Normal file
View 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;
}