huugoo

src/Home.js

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

src/Militaer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ModelImage from './Plane'
-import f22 from './img/raptor-1040097_1920.png'
+import f22 from './img/f22.png'
-import harrier from './img/av-8b-harrier-1986422_1920.jpg'
+import harrier from './img/harrier.jpg'
 
 class Modern extends React.Component {
     render() {

src/Plane.js

@@ -16,6 +16,7 @@ class ModelImage extends Component {
     }
 
     render() {
+        //const style = {backgroundImage: `url('/img/${this.state.img}')`};
         return (
             <a href="" className="model">
                 <img src={this.state.img} alt={this.state.name}/>

src/app.css

@@ -70,7 +70,7 @@ nav ul li {
     position: relative;
     display: inline-block;
 
-    font-size: 1.5em;
+    font-size: 1.8em;
     background-color: var(--nav-color);
     cursor: pointer;
     margin: auto;