diff --git a/src/App.css b/src/App.css
index 74b5e05..221c2cf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,8 @@
.App {
- text-align: center;
+ height: 100%;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
}
.App-logo {
@@ -35,4 +38,4 @@
to {
transform: rotate(360deg);
}
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 1dadba9..90e3565 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,29 +1,21 @@
import './App.css';
import React, { Component } from 'react';
-
+import NavigationDrawer from './components/NavigationDrawer.js'
+import Header from './components/Header.js'
+import PageArea from './components/PageArea.js'
+import BottomMenu from './components/BottomMenu.js'
class App extends Component {
render() {
return (
-
-
-
-
-
-
-
-
+
);
}
}
-const app = document.getElementById('App');
-
export default App;
diff --git a/src/components/BottomMenu.js b/src/components/BottomMenu.js
new file mode 100644
index 0000000..aec7f52
--- /dev/null
+++ b/src/components/BottomMenu.js
@@ -0,0 +1,16 @@
+import './css/BottomMenu.css';
+import React, { Component } from 'react';
+
+class BottomMenu extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default BottomMenu;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..ec3aae6
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,14 @@
+import './css/Header.css';
+import React, { Component } from 'react';
+
+class Header extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js
new file mode 100644
index 0000000..2eec721
--- /dev/null
+++ b/src/components/NavigationDrawer.js
@@ -0,0 +1,12 @@
+import './css/NavigationDrawer.css';
+import React, { Component } from 'react';
+
+class NavigationDrawer extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default NavigationDrawer;
\ No newline at end of file
diff --git a/src/components/PageArea.js b/src/components/PageArea.js
new file mode 100644
index 0000000..6b25283
--- /dev/null
+++ b/src/components/PageArea.js
@@ -0,0 +1,12 @@
+import './css/PageArea.css';
+import React, { Component } from 'react';
+
+class PageArea extends Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default PageArea;
\ No newline at end of file
diff --git a/src/components/css/BottomMenu.css b/src/components/css/BottomMenu.css
new file mode 100644
index 0000000..e227caa
--- /dev/null
+++ b/src/components/css/BottomMenu.css
@@ -0,0 +1,18 @@
+#bottomMenu {
+ width: 100%;
+ height: 8vh;
+ background: lightcoral;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+#bottomMenu button {
+ background: none;
+ border: none;
+ font-size: 0.9em;
+ margin-bottom: 5px;
+ flex-basis: calc(100%/3);
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-evenly;
+}
\ No newline at end of file
diff --git a/src/components/css/Header.css b/src/components/css/Header.css
new file mode 100644
index 0000000..16482b5
--- /dev/null
+++ b/src/components/css/Header.css
@@ -0,0 +1,5 @@
+header {
+ width: 100vw;
+ height: 15vh;
+ background: burlywood;
+}
\ No newline at end of file
diff --git a/src/components/css/NavigationDrawer.css b/src/components/css/NavigationDrawer.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/css/PageArea.css b/src/components/css/PageArea.css
new file mode 100644
index 0000000..9d54cb6
--- /dev/null
+++ b/src/components/css/PageArea.css
@@ -0,0 +1,4 @@
+#pageArea {
+ width: 100vw;
+ flex: 1 1 auto;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 3660f04..1d0fe0a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,43 +13,4 @@
html, body, #root, #app {
width: 100%;
height: 100%;
-}
-
-#app {
- display: flex;
- flex-direction: column;
-}
-
-header {
- width: 100vw;
- height: 15vh;
- background: burlywood;
-}
-
-#pageArea {
- width: 100vw;
- flex: 1 1 auto;
-}
-
-#bottomMenu {
- width: 100%;
- height: 8vh;
- background: lightcoral;
- display: flex;
- justify-content: space-evenly;
-}
-
-#bottomMenu button {
- background: none;
- border: none;
- font-size: 0.9em;
- margin-bottom: 5px;
- flex-basis: calc(100%/3);
- display: flex;
- align-items: flex-end;
- justify-content: space-evenly;
-}
-
-#bottomMenu button:active {
-
}
\ No newline at end of file