London10 - Khalil Alhaydr - CYF-hotel-challenge

src/App.css

@@ -8,11 +8,11 @@
 }
 
 .App-header {
-  background-color: #222;
+  background-color: rgb(34, 34, 34);
   height: 50px;
   padding: 20px;
   color: white;
-  text-align: left;
+  text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
@@ -26,7 +26,30 @@
   padding-top: 20px;
   font-size: large;
 }
+.Logo-image {
+  width: 50%;
+  height: 500px;
+  background-repeat: none;
+ margin: 10px 500px;
+
+}
+.OuterBorder {
+  color: green;
+  width: max-content;
+  border-style: solid;
+}
 
+.CityDives {
+  display: flex;
+  flex-direction: row;
+  justify-content:space-evenly;
+  margin-top: 300px;
+}
+
+.card-img-top {
+  width: 400px;
+  height: 400px;
+}
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

src/App.js

@@ -1,13 +1,21 @@
 import React from "react";
-
+import Heading from "./Heading"
 import Bookings from "./Bookings";
 import "./App.css";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <div className="CityDives">
+        <TouristInfoCards cityId={0} />
+        <TouristInfoCards cityId={1} />
+        <TouristInfoCards cityId={2} />
+      </div>
       <Bookings />
+      <Footer />
     </div>
   );
 };

src/Footer.js

@@ -0,0 +1,18 @@
+const FooterElement = [
+    {address: "123 Fake Street, London, E1 4UD", email: "[email protected]", phoneNumber: "0123 456789",}
+];
+
+function Footer(FooterElement) {
+  return (
+    <>
+      <ul>
+        <li>{FooterElement.address}</li>
+        <li>{FooterElement.email}</li>
+        <li>{FooterElement.phoneNumber}</li>
+      </ul>
+    </>
+  );
+}
+
+
+export default Footer;

src/Heading.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const header = () => {
+    return (
+      <div>
+        <header className="App-header">CYF Hotel</header>;
+        <img className="Logo-image" src="https://images.unsplash.com/photo-1615880484746-a134be9a6ecf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bW91bnRhaW4lMjBob3RlbHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"></img>
+      </div>
+    );
+}
+
+export default header;
+

src/Search.js

@@ -1,4 +1,5 @@
 import React from "react";
+import SearchButton from "./SearchButton";
 
 const Search = () => {
   return (
@@ -17,7 +18,7 @@ const Search = () => {
                 className="form-control"
                 placeholder="Customer name"
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>

src/SearchButton.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SearchButton = () => {
+    return (<button className="btn btn-primary">Search</button> ) 
+}
+
+export default SearchButton;

src/TouristInfoCards.js

@@ -0,0 +1,42 @@
+import React from "react";
+
+const city = [
+  {
+    name: "London",
+    src: "https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TG9uZG9ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",
+    description: "London is the capital of the UK",
+    href: "https://www.visitlondon.com/",
+  },
+  {
+    name: "Manchester",
+    src: "https://images.unsplash.com/photo-1627226890711-fd1fdc35d77e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8bWFuY2hlc3RlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60",
+    description: "Manchester is the biggest city in the north of England",
+    href: "https://www.visitmanchester.com/",
+  },
+  {
+    name: "Glasgow",
+    src: "https://images.unsplash.com/photo-1558098362-b1ee175ef8d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fEdsYXNnb3d8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60",
+    description: "Glasgow is the second most important city in Scotland",
+    href: "http://peoplemakeglasgow.com/",
+  },
+];
+
+const TouristInfoCards = ({cityId}) => {
+
+    return (
+      <div className="CitiesDiv">
+        <div className="card">
+          <img src={city[cityId].src} className="card-img-top" />
+          <div className="card-body">
+            <h2>{city[cityId].description}</h2>
+            <p>{city[cityId].description}</p>
+            <a href={city[cityId].href} className="btn btn-primary">
+              More information.
+            </a> 
+          </div> 
+        </div>
+      </div>
+    )
+}
+
+export default TouristInfoCards;