diff --git a/.gitignore b/.gitignore index 4d29575..092b338 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +test diff --git a/.idea/untitled.iml b/.idea/hugos_flugzeuge.iml similarity index 100% rename from .idea/untitled.iml rename to .idea/hugos_flugzeuge.iml diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml index aeb7613..f25a982 100644 --- a/.idea/modules.xml +++ b/.idea/modules.xml @@ -2,7 +2,7 @@ - + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index aa069f2..6103efa 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Hugo diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..f4fad47 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,102 @@ -import logo from './logo.svg'; -import './App.css'; +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' -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); +class App extends React.Component { + render() { + const items = Array(100).fill(1).map((x, y) => x + y) + .map(x => ); + + return ( +
+
+

Hugos Lieblingsflugzeuge

+ +
+
+
+ {items} + +
+
+
+
+ ); + } } export default App; + +class Navigation extends React.Component { + render() { + return ( + + ) + } +} + +class Footer extends React.Component { + render() { + return ( + + ) + } +} + + +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 ( +
+ {this.state.name}/ +
{this.state.name}
+
+ ); + } +} \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..08b6cf9 --- /dev/null +++ b/src/app.css @@ -0,0 +1,30 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + background-color: #282c34; + color: white; +} + +#parent { + display: grid; + grid-template-rows: 150px auto; + grid-template-areas: "header" + "main"; +} + +main { + grid-area: main; +} + +.model { + display: inline-block; +} + +.model img { + height: 200px; +} \ No newline at end of file diff --git a/src/header.css b/src/header.css new file mode 100644 index 0000000..4cea75e --- /dev/null +++ b/src/header.css @@ -0,0 +1,75 @@ +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; +} diff --git a/src/img/av-8b-harrier-1986422_1920.jpg b/src/img/av-8b-harrier-1986422_1920.jpg new file mode 100644 index 0000000..1e385bd Binary files /dev/null and b/src/img/av-8b-harrier-1986422_1920.jpg differ diff --git a/src/img/raptor-1040097_1920.png b/src/img/raptor-1040097_1920.png new file mode 100644 index 0000000..464340e Binary files /dev/null and b/src/img/raptor-1040097_1920.png differ diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.js b/src/index.js index ef2edf8..2a431a4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import App from "./App"; ReactDOM.render( - - - , - document.getElementById('root') -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); + + , document.getElementById('root') +); \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';