From 7bcb937e6b63160087d2652cf2065b7eb9cf205f Mon Sep 17 00:00:00 2001
From: Alexander Tsiklidis <alex@Alexanders-Air.lan>
Date: Sun, 20 Aug 2023 16:56:08 -0400
Subject: [PATCH 1/3] makes some changes, not quite there yet

---
 package-lock.json                  | 29 +++++++++++++++++++++++
 package.json                       |  1 +
 src/App.jsx                        | 23 +++++++++++++++----
 src/Components/DisplayPosts.jsx    | 21 +++++++++++++++++
 src/Components/Footer.jsx          |  5 ++++
 src/Components/Header.jsx          | 10 ++++++++
 src/Components/Nav.jsx             | 12 ++++++++++
 src/Components/PostsByLocation.jsx | 30 ++++++++++++++++++++++++
 src/data/posts.json                | 37 ++++++++++++++++++++----------
 9 files changed, 152 insertions(+), 16 deletions(-)
 create mode 100644 src/Components/DisplayPosts.jsx
 create mode 100644 src/Components/Footer.jsx
 create mode 100644 src/Components/Header.jsx
 create mode 100644 src/Components/Nav.jsx
 create mode 100644 src/Components/PostsByLocation.jsx

diff --git a/package-lock.json b/package-lock.json
index 710ea9c..c4420e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "lab-bootstrap-css",
       "version": "0.1.0",
       "dependencies": {
+        "bootstrap": "^5.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -918,6 +919,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -1151,6 +1162,24 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/package.json b/package.json
index 078197d..ddacf63 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 564cf02..fe69789 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,26 @@
 import postData from "./data/posts.json";
+import React from "react";
+import DisplayPosts from "./Components/DisplayPosts";
+// import DisplayPosts from "./Components/DisplayPosts";
+import Nav from "./Components/Nav";
+// // import Footer from "./Components/Footer";
+import Header from "./Components/Header";
+import PostsByLocation from "./Components/PostsByLocation"
 
 function App() {
-  console.log(postData);
+  // console.log(postData);
   return (
-    <main>
-      <button className="btn">hi</button>
-    </main>
+    <>
+    <Nav />
+    <Header /> 
+    <DisplayPosts />
+    <PostsByLocation />
+    {/* <Footer /> */}
+    
+
+
+
+    </>
   );
 }
 
diff --git a/src/Components/DisplayPosts.jsx b/src/Components/DisplayPosts.jsx
new file mode 100644
index 0000000..0ef4f81
--- /dev/null
+++ b/src/Components/DisplayPosts.jsx
@@ -0,0 +1,21 @@
+
+import postData from "../data/posts.json";
+console.log(postData)
+
+export default function DisplayPosts() {
+    return (
+        <div className= "listOfPosts">
+            {postData.map((post)=> {
+                return <>
+                <div className="post" key= {post.id}>
+                <img src={post.image}/>
+                <h3>{post.title}</h3>
+                <h5>{post.location}</h5>
+                <p>{post.content}</p>
+                <a className="btn btn-outline-primary">Go to post</a>
+            </div>
+            </>
+            })}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..6f5e6c6
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,5 @@
+export default function Footer() {
+    return (
+        
+    )
+}
\ No newline at end of file
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
new file mode 100644
index 0000000..280cc7e
--- /dev/null
+++ b/src/Components/Header.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Header() {
+    return (
+        <div className="script-font">
+            <p className="text-center">Travel is the only thing you buy that makes you richer...</p>
+        </div>
+        
+    )
+}
\ No newline at end of file
diff --git a/src/Components/Nav.jsx b/src/Components/Nav.jsx
new file mode 100644
index 0000000..b594831
--- /dev/null
+++ b/src/Components/Nav.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Nav() {
+    return (
+        <nav>
+            <h1>Travel Blog</h1>
+           <p> <a href="#">About</a> 
+                <a href="#"> Popular Posts</a>
+            </p>
+        </nav>
+    )
+    }
\ No newline at end of file
diff --git a/src/Components/PostsByLocation.jsx b/src/Components/PostsByLocation.jsx
new file mode 100644
index 0000000..f7fe93b
--- /dev/null
+++ b/src/Components/PostsByLocation.jsx
@@ -0,0 +1,30 @@
+import postData from "../data/posts.json";
+
+export default function PostsByLocation() {
+  return (
+    <div className="postsByLocation">
+        <h4>Posts By Location</h4>
+        <div className= "location" >
+            <h5>Locations</h5>
+            {postData.map((post) => {
+                return (
+                    <ul>
+                        <li>{post.location}</li>
+                    </ul>
+                )
+            })}
+        </div>
+        <div className="countOfPosts">
+            <h5>Posts</h5>
+            {postData.map((post) => {
+                return (
+                    <ul>
+                        <article>1</article>
+                    </ul>
+                )
+            })}
+        </div>
+
+    </div>
+    )
+}
\ No newline at end of file
diff --git a/src/data/posts.json b/src/data/posts.json
index f50c93e..9c97d53 100644
--- a/src/data/posts.json
+++ b/src/data/posts.json
@@ -5,7 +5,9 @@
     "content": "Amet proident exercitation minim sint. Culpa pariatur Lorem culpa cupidatat pariatur pariatur sint dolore deserunt. Sint laboris reprehenderit elit duis. Elit dolore laborum elit est cupidatat ipsum Lorem aliqua. Ad ut consequat ad nostrud reprehenderit est laborum pariatur excepteur quis est.\n\nExcepteur proident elit ipsum fugiat. Laboris in Lorem tempor aliqua pariatur nisi eiusmod elit ipsum qui irure in ea laboris. Elit officia sunt ea pariatur laboris voluptate. Ad labore qui nisi Lorem exercitation duis consectetur nulla irure proident qui do nulla excepteur.\n\nEx reprehenderit aliquip id dolor fugiat aute. Est est duis do cupidatat consequat dolore irure. Quis amet anim voluptate minim minim consequat ipsum.",
     "location": "Seattle",
     "createdAt": "2022-04-11T02:58:15.102Z",
-    "updatedAt": "2022-04-12T02:58:15.102Z"
+    "updatedAt": "2022-04-12T02:58:15.102Z",
+    "image": "src/images/seattle.jpg"
+
   },
   {
     "id": "63ebd220e32dc49d8f9d8319",
@@ -13,7 +15,8 @@
     "content": "Quis excepteur mollit veniam enim aliquip ea incididunt voluptate exercitation eiusmod ipsum reprehenderit labore. Sit Lorem officia fugiat dolor veniam qui. Voluptate adipisicing proident eu aute minim ipsum cupidatat aute pariatur. Dolor eiusmod occaecat esse sint aliquip aute. Cillum irure voluptate cupidatat eu enim. Est laborum ad est aute ex irure consectetur esse elit ipsum ex exercitation commodo. Consectetur exercitation esse veniam veniam.\n\nNisi sunt id labore et eu anim ex est proident in eu ea. Elit adipisicing pariatur consequat mollit excepteur tempor ex magna Lorem. Minim tempor pariatur commodo cillum irure Lorem proident commodo duis incididunt esse anim consequat.\n\nEsse amet ullamco aute sunt cillum proident officia officia minim sint dolor. Dolor culpa ad sint consequat fugiat irure consequat sit excepteur pariatur. Amet adipisicing qui labore amet.",
     "location": "Shibuya",
     "createdAt": "2021-04-24T00:48:05.031Z",
-    "updatedAt": "2021-04-25T00:48:05.031Z"
+    "updatedAt": "2021-04-25T00:48:05.031Z",
+    "image": "src/images/shibuya.jpg"
   },
   {
     "id": "63ebd22030bb6b90e4fc0cde",
@@ -21,7 +24,8 @@
     "content": "Do cillum cupidatat occaecat exercitation ex quis et fugiat enim cupidatat minim laboris. Tempor amet irure deserunt aliqua laboris aute officia aliqua adipisicing eu minim commodo. Tempor sint qui fugiat minim esse officia qui occaecat aliqua enim eu. Culpa culpa velit magna eiusmod cillum proident nisi eiusmod adipisicing. Id ullamco quis sint do ullamco aute tempor voluptate sunt exercitation ut quis id voluptate. Culpa exercitation fugiat minim aliquip amet ullamco aliqua consectetur do sint adipisicing reprehenderit amet.\n\nEx do minim laboris dolore dolor mollit Lorem exercitation irure qui sunt. Est laboris deserunt dolor excepteur id nisi ullamco consectetur laboris veniam veniam in. Anim irure consectetur id exercitation amet id velit est duis dolor ut aliquip adipisicing. Dolore fugiat amet labore ullamco aute nostrud tempor amet enim sunt et adipisicing ut irure. Adipisicing officia occaecat excepteur ex ea sit ullamco. Id consequat veniam non pariatur irure nulla anim fugiat nulla elit est ipsum minim magna.\n\nEst eiusmod enim elit aute irure nisi sit adipisicing proident laborum incididunt aliqua. Amet eu duis quis et consectetur esse magna culpa irure magna officia. Ut reprehenderit est nulla ullamco. Laboris veniam irure laboris aute ut proident ullamco eiusmod ad. Deserunt sint voluptate officia sit magna culpa eiusmod incididunt sit. Laboris commodo excepteur fugiat labore eiusmod sit Lorem adipisicing eu tempor. Deserunt cillum et non enim.",
     "location": "Chicago",
     "createdAt": "2020-05-31T06:13:13.555Z",
-    "updatedAt": "2020-06-01T06:13:13.555Z"
+    "updatedAt": "2020-06-01T06:13:13.555Z",
+    "image" : "src/images/chicago.jpg"
   },
   {
     "id": "63ebd2202af4bd5386e6ea7f",
@@ -29,7 +33,8 @@
     "content": "Nulla nulla pariatur incididunt duis duis nisi. Voluptate nulla cillum laboris fugiat et. Sit commodo excepteur cupidatat aliqua pariatur minim cupidatat fugiat excepteur exercitation adipisicing ut ullamco. Ea velit nostrud cillum magna cillum dolore enim aliqua. Laboris amet magna ut aute laboris est commodo ad Lorem eiusmod aute voluptate eu nulla. Magna aute esse consequat ullamco amet elit laborum enim tempor proident. Sunt et laboris nostrud nulla amet officia anim.",
     "location": "San Francisco",
     "createdAt": "2020-02-24T14:28:43.046Z",
-    "updatedAt": "2020-02-25T14:28:43.046Z"
+    "updatedAt": "2020-02-25T14:28:43.046Z",
+    "image": "src/images/san-francisco.jpg"
   },
   {
     "id": "63ebd220b66610086f9643c1",
@@ -37,7 +42,8 @@
     "content": "Amet qui non est commodo velit tempor ut labore qui ea consequat incididunt. Sunt velit ipsum tempor ut nostrud dolore id id velit ullamco laboris. Duis velit culpa occaecat ad sunt adipisicing incididunt. Fugiat irure aliquip quis ad voluptate in in consequat.\n\nEnim aute excepteur sint nisi. Est occaecat consequat dolor commodo tempor consectetur. Qui minim labore officia sunt.",
     "location": "San Diego",
     "createdAt": "2019-11-11T06:58:05.059Z",
-    "updatedAt": "2019-11-12T06:58:05.059Z"
+    "updatedAt": "2019-11-12T06:58:05.059Z",
+    "image": "src/images/san-diego.jpg"
   },
   {
     "id": "63ebd22029ca123e7a31f85d",
@@ -45,7 +51,8 @@
     "content": "Labore labore sunt mollit adipisicing qui. Lorem aliqua amet dolor occaecat ullamco quis. Sit fugiat ipsum est eu ullamco tempor commodo ullamco ex. Est non quis ex deserunt culpa aliquip velit nisi nisi. Dolor enim exercitation ea aute est consectetur ullamco est.\n\nVelit ad aute do ex reprehenderit exercitation officia veniam dolore et. Cupidatat irure cupidatat velit eiusmod dolor exercitation deserunt. Exercitation adipisicing labore excepteur deserunt. Voluptate ea consequat eu dolore reprehenderit proident qui Lorem amet eu. Esse quis non sint ipsum ex et consequat dolor eiusmod dolore. Ipsum consequat ex ipsum excepteur. Est fugiat Lorem cillum ipsum mollit cillum minim minim mollit id.",
     "location": "Sevilla",
     "createdAt": "2019-09-25T19:25:03.664Z",
-    "updatedAt": "2019-09-26T19:25:03.664Z"
+    "updatedAt": "2019-09-26T19:25:03.664Z",
+    "image": "src/images/sevilla.jpg"
   },
   {
     "id": "63ebd22088f2a55c2d895a80",
@@ -53,7 +60,8 @@
     "content": "Veniam duis consequat velit sint consequat ad mollit cillum in aute deserunt est. Ad do cillum velit veniam ullamco ea tempor minim nostrud reprehenderit. Consectetur proident officia deserunt ad veniam nulla pariatur dolor. Est eu est elit ex non quis nisi magna ea sunt incididunt id. Ipsum fugiat sunt consequat incididunt enim. Eu occaecat nulla sit fugiat enim laboris duis pariatur officia nostrud. Cillum cillum laboris velit nostrud velit id id do amet nulla aliquip elit eu pariatur.",
     "location": "Porto",
     "createdAt": "2018-08-12T21:26:36.007Z",
-    "updatedAt": "2018-08-13T21:26:36.007Z"
+    "updatedAt": "2018-08-13T21:26:36.007Z",
+    "image": "src/images/porto.jpg"
   },
   {
     "id": "63ebd2205c0e7d4657b87675",
@@ -61,7 +69,8 @@
     "content": "Veniam anim adipisicing tempor nulla dolor laboris incididunt mollit. Magna tempor irure voluptate Lorem in velit cupidatat nulla eiusmod dolor et irure officia aliquip. Esse tempor fugiat irure consectetur labore. Laborum id do eiusmod nulla id eu mollit enim irure veniam labore dolore velit pariatur. Est cillum dolore enim magna esse proident amet est duis enim eu ex occaecat exercitation.\n\nEu quis cupidatat sint eiusmod sunt culpa ad exercitation pariatur sit id. Labore do incididunt ut in esse duis voluptate. Velit duis in velit irure magna anim duis tempor nulla. Ullamco adipisicing fugiat duis laboris velit amet nisi non ea.",
     "location": "Burano",
     "createdAt": "2018-07-21T13:08:50.234Z",
-    "updatedAt": "2018-07-22T13:08:50.234Z"
+    "updatedAt": "2018-07-22T13:08:50.234Z",
+    "image": "src/images/burano.jpg"
   },
   {
     "id": "63ebd2209106910a33825cc3",
@@ -69,7 +78,8 @@
     "content": "Lorem ex enim ut est commodo. Dolore deserunt et mollit ipsum ullamco ex. Mollit deserunt non ex irure occaecat fugiat esse culpa ad fugiat adipisicing duis elit eu. Fugiat velit ut pariatur laborum incididunt amet ex do irure exercitation.\n\nUllamco minim qui non nisi et veniam aliqua pariatur minim. Ut anim enim id est voluptate velit nostrud eiusmod nisi. Consectetur magna nisi deserunt magna non dolor dolor sit nostrud fugiat commodo culpa labore proident.\n\nCupidatat aute aliqua fugiat ipsum elit labore eu duis sit. Elit enim proident reprehenderit non aliqua dolore dolore in irure ipsum ut aliquip amet. Eu amet ad reprehenderit cupidatat. Ullamco ullamco esse incididunt velit nisi nisi.",
     "location": "London",
     "createdAt": "2017-08-30T01:53:15.785Z",
-    "updatedAt": "2017-08-31T01:53:15.785Z"
+    "updatedAt": "2017-08-31T01:53:15.785Z",
+    "image": "src/images/london.jpg"
   },
   {
     "id": "63ebd220c1be914e4c6be929",
@@ -77,7 +87,8 @@
     "content": "Elit ut sunt id voluptate. Tempor in aliquip enim adipisicing laboris. Ea aute quis nulla in minim. In aute deserunt velit exercitation eu anim ullamco ea duis aliquip Lorem ea nisi. Pariatur aliqua duis exercitation veniam aliquip amet eiusmod labore amet sunt aliquip. Reprehenderit excepteur aliqua ipsum ea proident eiusmod.",
     "location": "Chicago",
     "createdAt": "2017-04-24T00:08:59.679Z",
-    "updatedAt": "2017-04-25T00:08:59.679Z"
+    "updatedAt": "2017-04-25T00:08:59.679Z",
+    "image": "src/images/chicago.jpg"
   },
   {
     "id": "63ebd2206cf20d7205345971",
@@ -85,7 +96,8 @@
     "content": "Minim nulla labore non aliquip sunt reprehenderit magna velit labore aliqua nostrud officia ea. Dolore laboris veniam labore et et laborum nisi labore amet. Quis non eiusmod commodo aliquip anim velit enim Lorem officia. Pariatur eiusmod ipsum laboris Lorem mollit consectetur nulla reprehenderit eu sint. Sint elit officia fugiat incididunt enim eu.\n\nAdipisicing deserunt irure deserunt nisi qui elit deserunt cillum aliquip fugiat minim ad eiusmod nostrud. Sint veniam nulla est cillum dolore. Minim tempor eiusmod commodo proident. Velit culpa ad aliqua non et anim consequat elit enim.\n\nDo labore sit qui do dolor proident minim velit ut commodo. Lorem nulla nisi exercitation velit deserunt eiusmod ea exercitation dolor proident. Ullamco exercitation cupidatat irure est labore aliquip occaecat adipisicing deserunt ea. Commodo fugiat et ipsum tempor duis mollit sint elit pariatur duis elit. Aliqua duis ea officia reprehenderit. Pariatur voluptate deserunt incididunt nostrud dolor pariatur sint officia quis duis ex. Et laboris sunt est enim veniam voluptate ad mollit tempor.",
     "location": "Dubai",
     "createdAt": "2016-07-17T15:54:15.147Z",
-    "updatedAt": "2016-07-18T15:54:15.147Z"
+    "updatedAt": "2016-07-18T15:54:15.147Z",
+    "image": "src/images/dubai.jpg"
   },
   {
     "id": "63ebd2201302bdafe8dc20cc",
@@ -93,6 +105,7 @@
     "content": "Elit magna aute enim laborum nisi occaecat laboris sint ex cupidatat id commodo non est. Incididunt cupidatat et excepteur quis nostrud cillum est nulla in in laboris dolor quis. Ut anim enim aute sunt mollit non tempor aliquip. Dolore excepteur tempor laborum anim est. Esse laborum anim duis nulla nulla aliquip excepteur officia et velit velit.",
     "location": "Shibuya",
     "createdAt": "2016-01-04T13:35:37.847Z",
-    "updatedAt": "2016-01-05T13:35:37.847Z"
+    "updatedAt": "2016-01-05T13:35:37.847Z",
+    "image": "src/images/shibuya.jpg"
   }
 ]

From c92dde438717311ffd79a5abbfbd1dd562d2e914 Mon Sep 17 00:00:00 2001
From: Alexander Tsiklidis <alex@Alexanders-Air.lan>
Date: Sun, 24 Sep 2023 02:45:10 -0400
Subject: [PATCH 2/3] bit of issue with lab

---
 src/App.css                        | 240 +++++++++++++++++++++++++++++
 src/App.jsx                        | 168 +++++++++++++++++---
 src/Components/DisplayPosts.jsx    |  21 ---
 src/Components/Footer.jsx          |  22 ++-
 src/Components/Header.jsx          |  23 ++-
 src/Components/LocationTable.jsx   |  27 ++++
 src/Components/Nav.jsx             |  12 --
 src/Components/Post.jsx            |  28 ++++
 src/Components/PostsByLocation.jsx |  30 ----
 src/Components/PostsList.jsx       |  16 ++
 src/Components/Quote.jsx           |  11 ++
 src/Components/SearchBar.jsx       |  12 ++
 src/index.css                      |   9 --
 13 files changed, 513 insertions(+), 106 deletions(-)
 create mode 100644 src/App.css
 delete mode 100644 src/Components/DisplayPosts.jsx
 create mode 100644 src/Components/LocationTable.jsx
 delete mode 100644 src/Components/Nav.jsx
 create mode 100644 src/Components/Post.jsx
 delete mode 100644 src/Components/PostsByLocation.jsx
 create mode 100644 src/Components/PostsList.jsx
 create mode 100644 src/Components/Quote.jsx
 create mode 100644 src/Components/SearchBar.jsx
 delete mode 100644 src/index.css

diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..c97fba6
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,240 @@
+/* src/App.css */
+
+/* Reset some default margin and padding */
+body,
+h1,
+h2,
+h3,
+p,
+ul,
+li,
+table,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+/* Apply a background color to the whole page */
+body {
+  background-color: #f5f5f5;
+  font-family: Arial, sans-serif;
+}
+
+/* Header Styles */
+header {
+  background-color: white;
+  color: black;
+  text-align: center;
+  padding: 20px 0;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
+li {
+  font-size: 18px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+/* Quote Styles */
+.quote {
+  background-color: lightgrey;
+  color: black;
+  padding: 20px;
+  text-align: center;
+}
+
+.quote p {
+  font-size: 20px;
+  font-style: italic;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+/* SearchBar Styles */
+.search-bar {
+  max-width: 800px;
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+}
+
+input[type="text"] {
+  padding: 10px;
+  width: 70%;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+button {
+  background-color: #0074d9;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+/* Main Content Styles */
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
+  justify-content: space-between;
+}
+
+/* Add styles for the container */
+.main-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Update PostsList and LocationTable styles */
+.posts-list {
+  flex-basis: calc(70% - 20px); /* Adjust the width as needed */
+  margin-bottom: 20px;
+}
+
+.location-table {
+  flex-basis: calc(30% - 20px); /* Adjust the width as needed */
+  margin-bottom: 20px;
+}
+
+.post {
+  background-color: white;
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.post h2 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.post .location {
+  color: #3498db;
+}
+
+.post p {
+  font-size: 16px;
+  margin-top: 10px;
+  display: none; /* Initially hide the content */
+}
+
+.post img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #3498db;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease-in-out;
+}
+
+button:hover {
+  background-color: #2980b9;
+}
+
+/* LocationTable Styles */
+.location-table {
+  flex: 1;
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.location-table h3 {
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: lightyellow;
+  color: black;
+}
+
+/* Footer Styles */
+footer {
+  background-color: #2c3e50;
+  color: white;
+  text-align: center;
+  padding: 20px 0;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-links a {
+  color: white;
+  text-decoration: none;
+  margin: 0 10px;
+}
+
+.footer-text {
+  font-size: 14px;
+  margin-top: 10px;
+}
+.posts-list-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+/* Update PostsList and Post styles */
+.posts-list {
+  flex-basis: calc(50% - 20px); /* Two columns per row */
+  margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index fe69789..db18733 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,27 +1,153 @@
-import postData from "./data/posts.json";
-import React from "react";
-import DisplayPosts from "./Components/DisplayPosts";
-// import DisplayPosts from "./Components/DisplayPosts";
-import Nav from "./Components/Nav";
-// // import Footer from "./Components/Footer";
-import Header from "./Components/Header";
-import PostsByLocation from "./Components/PostsByLocation"
+import React from 'react';
+import Header from './Components/Header';
+import Quote from './Components/Quote';
+import SearchBar from './Components/SearchBar';
+import PostsList from './Components/PostsList';
+import LocationTable from './Components/LocationTable';
+import Footer from './Components/Footer';
+import "./App.css";
 
-function App() {
-  // console.log(postData);
-  return (
-    <>
-    <Nav />
-    <Header /> 
-    <DisplayPosts />
-    <PostsByLocation />
-    {/* <Footer /> */}
+const App = () => {
+  const data = [
+    [
+      {
+        "id": "63ebd220e80158f7948b8cb4",
+        "title": "A Sunny Day in Seattle",
+        "content": "Amet proident exercitation minim sint. Culpa pariatur Lorem culpa cupidatat pariatur pariatur sint dolore deserunt. Sint laboris reprehenderit elit duis. Elit dolore laborum elit est cupidatat ipsum Lorem aliqua. Ad ut consequat ad nostrud reprehenderit est laborum pariatur excepteur quis est.\n\nExcepteur proident elit ipsum fugiat. Laboris in Lorem tempor aliqua pariatur nisi eiusmod elit ipsum qui irure in ea laboris. Elit officia sunt ea pariatur laboris voluptate. Ad labore qui nisi Lorem exercitation duis consectetur nulla irure proident qui do nulla excepteur.\n\nEx reprehenderit aliquip id dolor fugiat aute. Est est duis do cupidatat consequat dolore irure. Quis amet anim voluptate minim minim consequat ipsum.",
+        "location": "Seattle",
+        "createdAt": "2022-04-11T02:58:15.102Z",
+        "updatedAt": "2022-04-12T02:58:15.102Z",
+        "image": "src/images/seattle.jpg"
     
+      },
+      {
+        "id": "63ebd220e32dc49d8f9d8319",
+        "title": "Memory Lane",
+        "content": "Quis excepteur mollit veniam enim aliquip ea incididunt voluptate exercitation eiusmod ipsum reprehenderit labore. Sit Lorem officia fugiat dolor veniam qui. Voluptate adipisicing proident eu aute minim ipsum cupidatat aute pariatur. Dolor eiusmod occaecat esse sint aliquip aute. Cillum irure voluptate cupidatat eu enim. Est laborum ad est aute ex irure consectetur esse elit ipsum ex exercitation commodo. Consectetur exercitation esse veniam veniam.\n\nNisi sunt id labore et eu anim ex est proident in eu ea. Elit adipisicing pariatur consequat mollit excepteur tempor ex magna Lorem. Minim tempor pariatur commodo cillum irure Lorem proident commodo duis incididunt esse anim consequat.\n\nEsse amet ullamco aute sunt cillum proident officia officia minim sint dolor. Dolor culpa ad sint consequat fugiat irure consequat sit excepteur pariatur. Amet adipisicing qui labore amet.",
+        "location": "Shibuya",
+        "createdAt": "2021-04-24T00:48:05.031Z",
+        "updatedAt": "2021-04-25T00:48:05.031Z",
+        "image": "src/images/shibuya.jpg"
+      },
+      {
+        "id": "63ebd22030bb6b90e4fc0cde",
+        "title": "Back to One of my Favorites",
+        "content": "Do cillum cupidatat occaecat exercitation ex quis et fugiat enim cupidatat minim laboris. Tempor amet irure deserunt aliqua laboris aute officia aliqua adipisicing eu minim commodo. Tempor sint qui fugiat minim esse officia qui occaecat aliqua enim eu. Culpa culpa velit magna eiusmod cillum proident nisi eiusmod adipisicing. Id ullamco quis sint do ullamco aute tempor voluptate sunt exercitation ut quis id voluptate. Culpa exercitation fugiat minim aliquip amet ullamco aliqua consectetur do sint adipisicing reprehenderit amet.\n\nEx do minim laboris dolore dolor mollit Lorem exercitation irure qui sunt. Est laboris deserunt dolor excepteur id nisi ullamco consectetur laboris veniam veniam in. Anim irure consectetur id exercitation amet id velit est duis dolor ut aliquip adipisicing. Dolore fugiat amet labore ullamco aute nostrud tempor amet enim sunt et adipisicing ut irure. Adipisicing officia occaecat excepteur ex ea sit ullamco. Id consequat veniam non pariatur irure nulla anim fugiat nulla elit est ipsum minim magna.\n\nEst eiusmod enim elit aute irure nisi sit adipisicing proident laborum incididunt aliqua. Amet eu duis quis et consectetur esse magna culpa irure magna officia. Ut reprehenderit est nulla ullamco. Laboris veniam irure laboris aute ut proident ullamco eiusmod ad. Deserunt sint voluptate officia sit magna culpa eiusmod incididunt sit. Laboris commodo excepteur fugiat labore eiusmod sit Lorem adipisicing eu tempor. Deserunt cillum et non enim.",
+        "location": "Chicago",
+        "createdAt": "2020-05-31T06:13:13.555Z",
+        "updatedAt": "2020-06-01T06:13:13.555Z",
+        "image" : "src/images/chicago.jpg"
+      },
+      {
+        "id": "63ebd2202af4bd5386e6ea7f",
+        "title": "Winter in July",
+        "content": "Nulla nulla pariatur incididunt duis duis nisi. Voluptate nulla cillum laboris fugiat et. Sit commodo excepteur cupidatat aliqua pariatur minim cupidatat fugiat excepteur exercitation adipisicing ut ullamco. Ea velit nostrud cillum magna cillum dolore enim aliqua. Laboris amet magna ut aute laboris est commodo ad Lorem eiusmod aute voluptate eu nulla. Magna aute esse consequat ullamco amet elit laborum enim tempor proident. Sunt et laboris nostrud nulla amet officia anim.",
+        "location": "San Francisco",
+        "createdAt": "2020-02-24T14:28:43.046Z",
+        "updatedAt": "2020-02-25T14:28:43.046Z",
+        "image": "src/images/san-francisco.jpg"
+      },
+      {
+        "id": "63ebd220b66610086f9643c1",
+        "title": "An Unexpected Journey",
+        "content": "Amet qui non est commodo velit tempor ut labore qui ea consequat incididunt. Sunt velit ipsum tempor ut nostrud dolore id id velit ullamco laboris. Duis velit culpa occaecat ad sunt adipisicing incididunt. Fugiat irure aliquip quis ad voluptate in in consequat.\n\nEnim aute excepteur sint nisi. Est occaecat consequat dolor commodo tempor consectetur. Qui minim labore officia sunt.",
+        "location": "San Diego",
+        "createdAt": "2019-11-11T06:58:05.059Z",
+        "updatedAt": "2019-11-12T06:58:05.059Z",
+        "image": "src/images/san-diego.jpg"
+      },
+      {
+        "id": "63ebd22029ca123e7a31f85d",
+        "title": "A Wondrous Gem",
+        "content": "Labore labore sunt mollit adipisicing qui. Lorem aliqua amet dolor occaecat ullamco quis. Sit fugiat ipsum est eu ullamco tempor commodo ullamco ex. Est non quis ex deserunt culpa aliquip velit nisi nisi. Dolor enim exercitation ea aute est consectetur ullamco est.\n\nVelit ad aute do ex reprehenderit exercitation officia veniam dolore et. Cupidatat irure cupidatat velit eiusmod dolor exercitation deserunt. Exercitation adipisicing labore excepteur deserunt. Voluptate ea consequat eu dolore reprehenderit proident qui Lorem amet eu. Esse quis non sint ipsum ex et consequat dolor eiusmod dolore. Ipsum consequat ex ipsum excepteur. Est fugiat Lorem cillum ipsum mollit cillum minim minim mollit id.",
+        "location": "Sevilla",
+        "createdAt": "2019-09-25T19:25:03.664Z",
+        "updatedAt": "2019-09-26T19:25:03.664Z",
+        "image": "src/images/sevilla.jpg"
+      },
+      {
+        "id": "63ebd22088f2a55c2d895a80",
+        "title": "Off the Well-known Path",
+        "content": "Veniam duis consequat velit sint consequat ad mollit cillum in aute deserunt est. Ad do cillum velit veniam ullamco ea tempor minim nostrud reprehenderit. Consectetur proident officia deserunt ad veniam nulla pariatur dolor. Est eu est elit ex non quis nisi magna ea sunt incididunt id. Ipsum fugiat sunt consequat incididunt enim. Eu occaecat nulla sit fugiat enim laboris duis pariatur officia nostrud. Cillum cillum laboris velit nostrud velit id id do amet nulla aliquip elit eu pariatur.",
+        "location": "Porto",
+        "createdAt": "2018-08-12T21:26:36.007Z",
+        "updatedAt": "2018-08-13T21:26:36.007Z",
+        "image": "src/images/porto.jpg"
+      },
+      {
+        "id": "63ebd2205c0e7d4657b87675",
+        "title": "The Sights of Burano",
+        "content": "Veniam anim adipisicing tempor nulla dolor laboris incididunt mollit. Magna tempor irure voluptate Lorem in velit cupidatat nulla eiusmod dolor et irure officia aliquip. Esse tempor fugiat irure consectetur labore. Laborum id do eiusmod nulla id eu mollit enim irure veniam labore dolore velit pariatur. Est cillum dolore enim magna esse proident amet est duis enim eu ex occaecat exercitation.\n\nEu quis cupidatat sint eiusmod sunt culpa ad exercitation pariatur sit id. Labore do incididunt ut in esse duis voluptate. Velit duis in velit irure magna anim duis tempor nulla. Ullamco adipisicing fugiat duis laboris velit amet nisi non ea.",
+        "location": "Burano",
+        "createdAt": "2018-07-21T13:08:50.234Z",
+        "updatedAt": "2018-07-22T13:08:50.234Z",
+        "image": "src/images/burano.jpg"
+      },
+      {
+        "id": "63ebd2209106910a33825cc3",
+        "title": "Across the Pond",
+        "content": "Lorem ex enim ut est commodo. Dolore deserunt et mollit ipsum ullamco ex. Mollit deserunt non ex irure occaecat fugiat esse culpa ad fugiat adipisicing duis elit eu. Fugiat velit ut pariatur laborum incididunt amet ex do irure exercitation.\n\nUllamco minim qui non nisi et veniam aliqua pariatur minim. Ut anim enim id est voluptate velit nostrud eiusmod nisi. Consectetur magna nisi deserunt magna non dolor dolor sit nostrud fugiat commodo culpa labore proident.\n\nCupidatat aute aliqua fugiat ipsum elit labore eu duis sit. Elit enim proident reprehenderit non aliqua dolore dolore in irure ipsum ut aliquip amet. Eu amet ad reprehenderit cupidatat. Ullamco ullamco esse incididunt velit nisi nisi.",
+        "location": "London",
+        "createdAt": "2017-08-30T01:53:15.785Z",
+        "updatedAt": "2017-08-31T01:53:15.785Z",
+        "image": "src/images/london.jpg"
+      },
+      {
+        "id": "63ebd220c1be914e4c6be929",
+        "title": "The Windy City Lives up to its Name",
+        "content": "Elit ut sunt id voluptate. Tempor in aliquip enim adipisicing laboris. Ea aute quis nulla in minim. In aute deserunt velit exercitation eu anim ullamco ea duis aliquip Lorem ea nisi. Pariatur aliqua duis exercitation veniam aliquip amet eiusmod labore amet sunt aliquip. Reprehenderit excepteur aliqua ipsum ea proident eiusmod.",
+        "location": "Chicago",
+        "createdAt": "2017-04-24T00:08:59.679Z",
+        "updatedAt": "2017-04-25T00:08:59.679Z",
+        "image": "src/images/chicago.jpg"
+      },
+      {
+        "id": "63ebd2206cf20d7205345971",
+        "title": "The Busy City of Dubai",
+        "content": "Minim nulla labore non aliquip sunt reprehenderit magna velit labore aliqua nostrud officia ea. Dolore laboris veniam labore et et laborum nisi labore amet. Quis non eiusmod commodo aliquip anim velit enim Lorem officia. Pariatur eiusmod ipsum laboris Lorem mollit consectetur nulla reprehenderit eu sint. Sint elit officia fugiat incididunt enim eu.\n\nAdipisicing deserunt irure deserunt nisi qui elit deserunt cillum aliquip fugiat minim ad eiusmod nostrud. Sint veniam nulla est cillum dolore. Minim tempor eiusmod commodo proident. Velit culpa ad aliqua non et anim consequat elit enim.\n\nDo labore sit qui do dolor proident minim velit ut commodo. Lorem nulla nisi exercitation velit deserunt eiusmod ea exercitation dolor proident. Ullamco exercitation cupidatat irure est labore aliquip occaecat adipisicing deserunt ea. Commodo fugiat et ipsum tempor duis mollit sint elit pariatur duis elit. Aliqua duis ea officia reprehenderit. Pariatur voluptate deserunt incididunt nostrud dolor pariatur sint officia quis duis ex. Et laboris sunt est enim veniam voluptate ad mollit tempor.",
+        "location": "Dubai",
+        "createdAt": "2016-07-17T15:54:15.147Z",
+        "updatedAt": "2016-07-18T15:54:15.147Z",
+        "image": "src/images/dubai.jpg"
+      },
+      {
+        "id": "63ebd2201302bdafe8dc20cc",
+        "title": "My First Trip Abroad",
+        "content": "Elit magna aute enim laborum nisi occaecat laboris sint ex cupidatat id commodo non est. Incididunt cupidatat et excepteur quis nostrud cillum est nulla in in laboris dolor quis. Ut anim enim aute sunt mollit non tempor aliquip. Dolore excepteur tempor laborum anim est. Esse laborum anim duis nulla nulla aliquip excepteur officia et velit velit.",
+        "location": "Shibuya",
+        "createdAt": "2016-01-04T13:35:37.847Z",
+        "updatedAt": "2016-01-05T13:35:37.847Z",
+        "image": "src/images/shibuya.jpg"
+      }
+    ]
+    
+  ];
 
+  // Flatten the nested array
+  const flattenedData = [].concat(...data);
+  const locationCounts = flattenedData.reduce((counts, post) => {
+    const location = post.location;
+    counts[location] = (counts[location] || 0) + 1;
+    return counts;
+  }, {});
+  
+  const locationData = Object.keys(locationCounts).map((location) => ({
+    name: location,
+    count: locationCounts[location],
+  }));
 
-
-    </>
+  return (
+    <div className="App">
+      <Header />
+      <Quote />
+      <SearchBar />
+      <main>
+        <PostsList posts={flattenedData} />
+        <LocationTable locations={locationData} />
+      </main>
+      <Footer />
+    </div>
   );
-}
+};
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Components/DisplayPosts.jsx b/src/Components/DisplayPosts.jsx
deleted file mode 100644
index 0ef4f81..0000000
--- a/src/Components/DisplayPosts.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-
-import postData from "../data/posts.json";
-console.log(postData)
-
-export default function DisplayPosts() {
-    return (
-        <div className= "listOfPosts">
-            {postData.map((post)=> {
-                return <>
-                <div className="post" key= {post.id}>
-                <img src={post.image}/>
-                <h3>{post.title}</h3>
-                <h5>{post.location}</h5>
-                <p>{post.content}</p>
-                <a className="btn btn-outline-primary">Go to post</a>
-            </div>
-            </>
-            })}
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
index 6f5e6c6..71be343 100644
--- a/src/Components/Footer.jsx
+++ b/src/Components/Footer.jsx
@@ -1,5 +1,17 @@
-export default function Footer() {
-    return (
-        
-    )
-}
\ No newline at end of file
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="footer-links">
+        <a href="#">Contact me</a>
+        <a href="#">About the author</a>
+      </div>
+      <div className="footer-text">
+        © 2023 Your Blog Name
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 280cc7e..6a3d267 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -1,10 +1,17 @@
 import React from 'react';
 
-export default function Header() {
-    return (
-        <div className="script-font">
-            <p className="text-center">Travel is the only thing you buy that makes you richer...</p>
-        </div>
-        
-    )
-}
\ No newline at end of file
+const Header = () => {
+  return (
+    <header>
+      <nav>
+        <div className="logo">Travel Blog</div>
+        <ul>
+          <li><a href="#">Popular Posts</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/Components/LocationTable.jsx b/src/Components/LocationTable.jsx
new file mode 100644
index 0000000..936ea8e
--- /dev/null
+++ b/src/Components/LocationTable.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+const LocationTable = ({ locations }) => {
+  return (
+    <section className="location-table">
+      <h3>Posts by Location</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Location</th>
+            <th>Posts</th>
+          </tr>
+        </thead>
+        <tbody>
+          {locations.map((location) => (
+            <tr key={location.name}>
+              <td>{location.name}</td>
+              <td>{location.count}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+export default LocationTable;
\ No newline at end of file
diff --git a/src/Components/Nav.jsx b/src/Components/Nav.jsx
deleted file mode 100644
index b594831..0000000
--- a/src/Components/Nav.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export default function Nav() {
-    return (
-        <nav>
-            <h1>Travel Blog</h1>
-           <p> <a href="#">About</a> 
-                <a href="#"> Popular Posts</a>
-            </p>
-        </nav>
-    )
-    }
\ No newline at end of file
diff --git a/src/Components/Post.jsx b/src/Components/Post.jsx
new file mode 100644
index 0000000..cb6ac29
--- /dev/null
+++ b/src/Components/Post.jsx
@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+
+const Post = ({ title, location, content, image }) => {
+  const [showContent, setShowContent] = useState(false);
+
+  useEffect(() => {
+    // Effect to hide content when component mounts
+    setShowContent(false);
+  }, []);
+
+  const toggleContent = () => {
+    setShowContent(!showContent);
+  };
+
+  return (
+    <div className="post">
+      <h2>{title}</h2>
+      <p className="location">{location}</p>
+      {showContent ? <p>{content}</p> : null}
+      <img src={image} alt={title} />
+      <button onClick={toggleContent}>
+        {showContent ? 'Hide Content' : 'Go to Post'}
+      </button>
+    </div>
+  );
+};
+
+export default Post;
\ No newline at end of file
diff --git a/src/Components/PostsByLocation.jsx b/src/Components/PostsByLocation.jsx
deleted file mode 100644
index f7fe93b..0000000
--- a/src/Components/PostsByLocation.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import postData from "../data/posts.json";
-
-export default function PostsByLocation() {
-  return (
-    <div className="postsByLocation">
-        <h4>Posts By Location</h4>
-        <div className= "location" >
-            <h5>Locations</h5>
-            {postData.map((post) => {
-                return (
-                    <ul>
-                        <li>{post.location}</li>
-                    </ul>
-                )
-            })}
-        </div>
-        <div className="countOfPosts">
-            <h5>Posts</h5>
-            {postData.map((post) => {
-                return (
-                    <ul>
-                        <article>1</article>
-                    </ul>
-                )
-            })}
-        </div>
-
-    </div>
-    )
-}
\ No newline at end of file
diff --git a/src/Components/PostsList.jsx b/src/Components/PostsList.jsx
new file mode 100644
index 0000000..de3f2d1
--- /dev/null
+++ b/src/Components/PostsList.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Post from './Post';
+
+const PostsList = ({ posts }) => {
+  return (
+    <section className="posts-list">
+      <div className="grid-container">
+        {posts.map((post) => (
+          <Post key={post.id} {...post} />
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default PostsList;
diff --git a/src/Components/Quote.jsx b/src/Components/Quote.jsx
new file mode 100644
index 0000000..c81450e
--- /dev/null
+++ b/src/Components/Quote.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Quote = () => {
+  return (
+    <section className="quote">
+      <p>"Travel is the only thing you buy that makes you richer..."</p>
+    </section>
+  );
+};
+
+export default Quote;
\ No newline at end of file
diff --git a/src/Components/SearchBar.jsx b/src/Components/SearchBar.jsx
new file mode 100644
index 0000000..66ee6bf
--- /dev/null
+++ b/src/Components/SearchBar.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const SearchBar = () => {
+  return (
+    <section className="search-bar">
+      <input type="text" placeholder="Search by title or location" />
+      <button>Search</button>
+    </section>
+  );
+};
+
+export default SearchBar;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 02c7b9f..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
-
-.script-font {
-  font-family: "Great Vibes", cursive;
-}
-
-.post-image-height {
-  height: 250px;
-}

From 953301b3a4bd255fc7433b8112ecd299f10ca1a7 Mon Sep 17 00:00:00 2001
From: Alexander Tsiklidis <alex@Alexanders-Air.lan>
Date: Sun, 24 Sep 2023 02:51:43 -0400
Subject: [PATCH 3/3] finishes this lab partially a bit from done

---
 src/App.css             | 40 +++++++++++++++++++++-------------------
 src/Components/Post.jsx |  9 ++-------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/App.css b/src/App.css
index c97fba6..3809161 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,9 @@
-/* src/App.css */
 
-/* Reset some default margin and padding */
+
+
+@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
+
+
 body,
 h1,
 h2,
@@ -15,7 +18,7 @@ td {
   padding: 0;
 }
 
-/* Apply a background color to the whole page */
+
 body {
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
@@ -108,11 +111,11 @@ main {
   margin: 0 auto;
   padding: 20px;
   display: flex;
-  flex-wrap: wrap; /* Allow items to wrap to the next row if needed */
+  flex-wrap: wrap; 
   justify-content: space-between;
 }
 
-/* Add styles for the container */
+
 .main-content {
   display: flex;
   flex-wrap: wrap;
@@ -120,14 +123,14 @@ main {
   width: 100%;
 }
 
-/* Update PostsList and LocationTable styles */
+
 .posts-list {
-  flex-basis: calc(70% - 20px); /* Adjust the width as needed */
+  flex-basis: calc(50% - 20px); 
   margin-bottom: 20px;
 }
 
 .location-table {
-  flex-basis: calc(30% - 20px); /* Adjust the width as needed */
+  flex-basis: calc(50% - 20px); 
   margin-bottom: 20px;
 }
 
@@ -151,7 +154,6 @@ main {
 .post p {
   font-size: 16px;
   margin-top: 10px;
-  display: none; /* Initially hide the content */
 }
 
 .post img {
@@ -176,7 +178,7 @@ button:hover {
   background-color: #2980b9;
 }
 
-/* LocationTable Styles */
+
 .location-table {
   flex: 1;
   background-color: white;
@@ -207,7 +209,7 @@ th {
   color: black;
 }
 
-/* Footer Styles */
+
 footer {
   background-color: #2c3e50;
   color: white;
@@ -227,14 +229,14 @@ footer {
   font-size: 14px;
   margin-top: 10px;
 }
-.posts-list-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+
+
+.container {
+  margin-top: 20px;
 }
 
-/* Update PostsList and Post styles */
-.posts-list {
-  flex-basis: calc(50% - 20px); /* Two columns per row */
-  margin-bottom: 20px;
+
+.navbar {
+  background-color: #0074d9 !important;
+  color: white !important;
 }
\ No newline at end of file
diff --git a/src/Components/Post.jsx b/src/Components/Post.jsx
index cb6ac29..bf24403 100644
--- a/src/Components/Post.jsx
+++ b/src/Components/Post.jsx
@@ -1,13 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 const Post = ({ title, location, content, image }) => {
   const [showContent, setShowContent] = useState(false);
 
-  useEffect(() => {
-    // Effect to hide content when component mounts
-    setShowContent(false);
-  }, []);
-
   const toggleContent = () => {
     setShowContent(!showContent);
   };
@@ -16,7 +11,7 @@ const Post = ({ title, location, content, image }) => {
     <div className="post">
       <h2>{title}</h2>
       <p className="location">{location}</p>
-      {showContent ? <p>{content}</p> : null}
+      <p className={showContent ? 'visible' : 'hidden'}>{content}</p>
       <img src={image} alt={title} />
       <button onClick={toggleContent}>
         {showContent ? 'Hide Content' : 'Go to Post'}