diff --git a/App.css b/App.css
new file mode 100644
index 0000000..d7f9891
--- /dev/null
+++ b/App.css
@@ -0,0 +1,75 @@
+/*.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);
+ }
+}
+*/
+/*
+thead,
+tfoot {
+ background-color: #3f87a6;
+ color: #fff;
+}
+
+tbody {
+ background-color: #e4f0f5;
+}
+
+
+caption {
+ padding: 10px;
+ caption-side: bottom;
+}
+
+table {
+ border-collapse: collapse;
+ border: 2px solid rgb(200, 200, 200);
+ letter-spacing: 1px;
+ font-family: sans-serif;
+ font-size: .8rem;
+ text-align: right;
+ align-items: right;
+}
+
+td,
+th {
+ border: 1px solid rgb(190, 190, 190);
+ padding: 5px 10px;
+}
+
+td {
+ text-align: center;
+}*/
\ No newline at end of file
diff --git a/App.js b/App.js
new file mode 100644
index 0000000..34adfee
--- /dev/null
+++ b/App.js
@@ -0,0 +1,80 @@
+// import React from 'react';
+// import logo from './logo.svg';
+// import './App.css';
+
+// function App() {
+// return (
+//
+//
+//
+//
+// {/* */}
+// {/* */}
+//
+//
+//
+//
+//
+//
+
+//
+//
+
+// {/* */}
+//
+//
+
+// );
+// }
+
+// export default App;
+
+import React from "react";
+import CityLine from './components/cityLine'
+import Operator from './components/operator'
+import Ticket from './components/ticket'
+import TravelPlanner from './components/travelplanner.jsx'
+import Vehicule from './components/vehicule'
+import { Container, Row, Col } from 'react-bootstrap'
+import './style.css'
+//import TravelPlanner from './components/travelplanner';
+
+
+class App extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ status: false
+ };
+
+ this.changeState = this.changeState.bind(this);
+ }
+
+ changeState() {
+ this.setState(prevState => {
+ return { status: !prevState.status };
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
John's app
+
+
+ )
+
+ }
+}
+
+export default App;
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..bd5bd6d
--- /dev/null
+++ b/index.css
@@ -0,0 +1,13 @@
+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/index.js b/index.js
new file mode 100644
index 0000000..deebaf4
--- /dev/null
+++ b/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(, document.getElementById("root"));
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d6c8ec
--- /dev/null
+++ b/style.css
@@ -0,0 +1,23 @@
+.span-class {
+ margin: 0;
+ padding: 0;
+ background-color: rgba(235, 21, 21, 0.5);
+ width: 30%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .mainGrid {
+ display: grid;
+ grid-template-rows: 1fr 1fr 1fr;
+ grid-template-columns: 1fr 1fr;
+ gap: 2px;
+ background-color: rgb(119, 101, 89);
+ text-align: center;
+ }
+
+
+
+
+
\ No newline at end of file