plane hugo

src/App.js

@@ -1,13 +1,12 @@
-import React from 'react';
+import React, {Component} 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 {
+class App extends Component {
     render() {
         return (
             <HashRouter>
@@ -29,7 +28,7 @@ class App extends React.Component {
 
 export default App;
 
-class Navigation extends React.Component {
+class Navigation extends Component {
     render() {
         return (
             <nav>
@@ -78,11 +77,11 @@ class Navigation extends React.Component {
     }
 }
 
-class Footer extends React.Component {
+class Footer extends Component {
     render() {
         return (
             <footer>
-                <div>hi</div>
+                <div>&copy; Hugo</div>
             </footer>
         )
     }

src/Home.js

@@ -1,9 +1,16 @@
 import React, {Component} from "react";
+import ModelImage from "./Plane";
+import f22 from './img/raptor-1040097_1920.png'
 
 class Home extends Component {
     render() {
         return (
-            <h1>Willkommen bei Hugos Lieblingsflugzeugen!</h1>
+            <div>
+                <h1>Hugos Favoriten</h1>
+                <ul>
+                    <li><ModelImage img={f22} name="F-22 Raptor"/></li>
+                </ul>
+            </div>
         )
     }
 }

src/Militaer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ModelImage from './Plane'
 import f22 from './img/raptor-1040097_1920.png'
 import harrier from './img/av-8b-harrier-1986422_1920.jpg'
 
@@ -16,27 +17,4 @@ class Modern extends React.Component {
     }
 }
 
-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>
-        );
-    }
-}
-
 export default Modern;

src/Plane.css

@@ -0,0 +1,47 @@
+.model {
+    position: relative;
+    text-align: center;
+    color: white;
+    display: inline-block;
+    transform: scale(1);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-out;
+}
+
+.model:hover {
+    color: white;
+    transform: scale(1.02);
+    transition-duration: 0.1s;
+    transition-timing-function: ease-out;
+}
+
+.model .model-info {
+    visibility: hidden;
+
+    height: 100%;
+    width: 100%;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    line-height: 200px;
+}
+
+.model:hover .model-info {
+    visibility: visible;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.model img {
+    height: 200px;
+}
+
+
+.model-info-text {
+    vertical-align: middle;
+    display: inline-block;
+
+    font-size: 1.5em;
+}

src/Plane.js

@@ -0,0 +1,30 @@
+import React, {Component} from "react";
+import './Plane.css'
+
+
+class ModelImage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            img: '',
+            name: '',
+        }
+    }
+
+    static getDerivedStateFromProps(props) {
+        return {img: props.img, name: props.name};
+    }
+
+    render() {
+        return (
+            <a href="" className="model">
+                <img src={this.state.img} alt={this.state.name}/>
+                <div className="model-info">
+                    <span className="model-info-text">{this.state.name}</span>
+                </div>
+            </a>
+        );
+    }
+}
+
+export default ModelImage;

src/app.css

@@ -21,10 +21,105 @@ main {
     grid-area: main;
 }
 
-.model {
+:root {
-    display: inline-block;
+    --nav-color: rgb(176, 194, 206);
+    --nav-hover-color: darkgrey;
 }
 
-.model img {
+header {
-    height: 200px;
+    grid-area: header;
+}
+
+header h1 {
+    margin-top: 50px;
+}
+
+main {
+    margin: 10px;
+}
+
+/*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;
+
+    z-index: 1;
+}
+
+/*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 a*/
+nav ul li a {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: black;
+    width: 100%;
+    height: 100%;
+    background-color: var(--nav-color);
+    border: none;
+    cursor: pointer;
+}
+
+/*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 a:hover {
+    background-color: var(--nav-hover-color);
+}
+
+/*drop menu*/
+nav ul li .content {
+    display: none;
+    background-color: var(--nav-color);
+    z-index: 1;
+    width: 100%;
+}
+
+/*drop menu main hover*/
+nav ul li:hover .content {
+    display: block;
+}
+
+/*drop menu a*/
+nav ul li .content a {
+    padding: 8px 0 8px 0;
 }

src/template.css

@@ -1,97 +0,0 @@
-: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 a*/
-nav ul li a {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    color: black;
-    width: 100%;
-    height: 100%;
-    background-color: var(--nav-color);
-    border: none;
-    cursor: pointer;
-}
-
-/*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 a:hover {
-    background-color: var(--nav-hover-color);
-}
-
-/*drop menu*/
-nav ul li .content {
-    display: none;
-    background-color: var(--nav-color);
-    z-index: 1;
-    width: 100%;
-}
-
-/*drop menu main hover*/
-nav ul li:hover .content {
-    display: block;
-}
-
-/*drop menu a*/
-nav ul li .content a {
-    padding: 8px 0 8px 0;
-}