diff --git a/src/App.js b/src/App.js
index b9d74ec..32fd7a4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,11 @@
+import { Routes, Route } from 'react-router-dom';
+import MyProfile from './views/MyProfile';
+
function App() {
return (
-
-
Space Travelers Hub
-
+
+ } />
+
);
}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index 8a9b04c..bdee04c 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -29,6 +29,18 @@ body {
letter-spacing: normal;
}
+ul {
+ list-style: none;
+}
+
+main {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ padding: 3rem 0;
+}
+
.container {
width: 100%;
margin: 0 auto;
diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css
new file mode 100644
index 0000000..3ef5a70
--- /dev/null
+++ b/src/assets/styles/responsive.css
@@ -0,0 +1,28 @@
+@media (min-width: 576px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 720px;
+ }
+
+ .navbar {
+ flex-direction: row;
+ justify-content: space-between;
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1140px;
+ }
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 2a0dd7d..f76193c 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,4 +1,5 @@
import AppLogo from './AppLogo';
+import MenuLink from './MenuLink';
import '../assets/styles/Header.css';
const Header = () => (
@@ -6,7 +7,9 @@ const Header = () => (
diff --git a/src/index.js b/src/index.js
index 9168dc4..a90dd0b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,17 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+import './assets/styles/index.css';
import App from './App';
+import './assets/styles/responsive.css';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
+
+
,
);
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
new file mode 100644
index 0000000..f967413
--- /dev/null
+++ b/src/views/Layout.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import Header from '../components/Header';
+
+const Layout = ({ children }) => (
+ <>
+
+
+ { children }
+
+ >
+);
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default Layout;
diff --git a/src/views/MyProfile.jsx b/src/views/MyProfile.jsx
new file mode 100644
index 0000000..983f7bf
--- /dev/null
+++ b/src/views/MyProfile.jsx
@@ -0,0 +1,9 @@
+import Layout from './Layout';
+
+const MyProfile = () => (
+
+
+
+);
+
+export default MyProfile;