From 67de731eabf8d97281b2b0e05589c940954933c8 Mon Sep 17 00:00:00 2001
From: Mariia Shabelnik <>
Date: Wed, 27 Jul 2022 16:36:16 +0200
Subject: [PATCH] create nav + base css

---
 src/About.jsx             |  9 ---------
 src/App.css               | 25 +++++++++++++++++++++++++
 src/App.jsx               | 10 ++++++----
 src/Home.jsx              |  9 ---------
 src/components/Footer.jsx |  2 +-
 src/components/Header.jsx | 23 ++++++++++++++++++++++-
 src/index.css             |  3 +++
 src/pages/Contact.jsx     |  9 +++++++++
 src/pages/Experiance.jsx  |  9 +++++++++
 src/pages/Home.jsx        |  9 +++++++++
 10 files changed, 84 insertions(+), 24 deletions(-)
 delete mode 100644 src/About.jsx
 delete mode 100644 src/Home.jsx
 create mode 100644 src/pages/Contact.jsx
 create mode 100644 src/pages/Experiance.jsx
 create mode 100644 src/pages/Home.jsx

diff --git a/src/About.jsx b/src/About.jsx
deleted file mode 100644
index f552826..0000000
--- a/src/About.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function About() {
-  return (
-    <div>
-      <h1>Welcome to About</h1>
-    </div>
-  );
-}
-
-export default About;
diff --git a/src/App.css b/src/App.css
index e69de29..fca64ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,25 @@
+.container {
+  border: 2px solid red;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.nav {
+  background-color: rgb(84, 84, 84);
+  height: 3em;
+}
+
+.nav-items {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  align-items: center;
+}
+
+.menu-items {
+  display: flex;
+}
+
+.menu-items div {
+  margin-right: 1em;
+}
diff --git a/src/App.jsx b/src/App.jsx
index 2afd8d6..c52074f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,19 @@
 import "./App.css";
 import { Routes, Route, Link } from "react-router-dom";
-import Home from "./Home";
-import About from "./About";
+import Home from "./pages/Home";
+import Experiance from "./pages/Experiance";
+import Contact from "./pages/Contact";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 
 function App() {
   return (
-    <div className="App">
+    <div>
       <Header />
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="about" element={<About />} />
+        <Route path="experiance" element={<Experiance />} />
+        <Route path="contact" element={<Contact />} />
       </Routes>
       <Footer />
     </div>
diff --git a/src/Home.jsx b/src/Home.jsx
deleted file mode 100644
index a3658ba..0000000
--- a/src/Home.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Home() {
-  return (
-    <div>
-      <h1>Welcome to Home</h1>
-    </div>
-  );
-}
-
-export default Home;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 5d7eee2..80c6c4e 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,5 @@
 function Footer() {
-  return <div>Footer</div>;
+  return <div className="container">Footer</div>;
 }
 
 export default Footer;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e488017..1bc7cca 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,5 +1,26 @@
+import { Routes, Route, Link } from "react-router-dom";
+
 function Header() {
-  return <div>Header</div>;
+  return (
+    <div className="nav">
+      <div className="container nav-items">
+        <div className="logo">
+          <Link to="/">LOGO</Link>
+        </div>
+        <div className="menu-items">
+          <div>
+            <Link to="/">About</Link>
+          </div>
+          <div>
+            <Link to="/experiance">Experiance</Link>
+          </div>
+          <div>
+            <Link to="/contact">Contact</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Header;
diff --git a/src/index.css b/src/index.css
index e69de29..293d3b1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
new file mode 100644
index 0000000..002cbb3
--- /dev/null
+++ b/src/pages/Contact.jsx
@@ -0,0 +1,9 @@
+function Contact() {
+  return (
+    <div className="container">
+      <h1>Welcome to Contact</h1>
+    </div>
+  );
+}
+
+export default Contact;
diff --git a/src/pages/Experiance.jsx b/src/pages/Experiance.jsx
new file mode 100644
index 0000000..1e0123a
--- /dev/null
+++ b/src/pages/Experiance.jsx
@@ -0,0 +1,9 @@
+function Experiance() {
+  return (
+    <div className="container">
+      <h1>Welcome to Experiance</h1>
+    </div>
+  );
+}
+
+export default Experiance;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..9d07bc3
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <div className="container">
+      <h1>Welcome to Home + About me</h1>
+    </div>
+  );
+}
+
+export default Home;