London class 10-Junita Lama-react module-cyf hotel-week 1/2/3

src/App.css

@@ -1,40 +1,22 @@
-.App {
-  text-align: left;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body{
+  background-color: purple;
 }
-
 .App-header {
-  background-color: #222;
-  height: 50px;
-  padding: 20px;
+  background-color: antiquewhite;
+  height: 70px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
+  font-size: 2em;
   font-weight: bold;
+  margin-bottom: 4rem;
 }
 
 .App-title {
   font-size: 1.5em;
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
-}
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .search {
   padding: 5px 0 20px 0;
 }
@@ -53,5 +35,37 @@ tr {
 }
 
 .card {
-  width: 18rem;
+  width: 80rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+  column-gap: 40px;
+  background-color:purple;
 }
+
+.logo{
+  height: 70px;
+  width:100px;
+  display: flex;
+align-items: flex-end;
+ }
+
+ header {
+  display: flex;
+  flex-direction: row;
+}
+
+h2 {
+  font-size: 40px;
+  text-align: flex-start;
+  color: blue;
+}
+ .card-img-top {
+  height: 20rem;
+  width:25rem;
+ }
+
+ .card-text{
+  font-size: 1rem;
+  background-color: beige;
+ }

src/App.js

@@ -1,12 +1,14 @@
 import React from "react";
-
+import Heading from "./Heading";
+import TouristInfoCard from "./TouristInfoCards";
 import Bookings from "./Bookings";
 import "./App.css";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCard />
       <Bookings />
     </div>
   );

src/Heading.js

@@ -0,0 +1,10 @@
+import React from "react";
+const Heading = () => {
+    const name = "CYF HOTEL"
+    return <header className="App-header">
+    <div><img src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMiyT0CsbbuRmEjXFYugoingNpNK51BhAOtg&usqp=CAU" className = "logo"alt = "hotel-logo"></img></div>
+    <div><h2>{name}</h2></div>
+</header>
+}
+
+export default Heading;

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,33 @@
+import React from "react";
+
+const TouristInfoCard = () =>{
+    return <div class="card">
+      <div>
+  <img src="https://peoplemakeglasgow.com/imager/general/45177/East-End-Glasgow-Cathedral-Image-Block_8dc3bdbc8660ad389ec95cdf9b15d797.jpg" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">Glasgow</h5>
+    <p class="card-text">You’re guaranteed to find accommodation in Glasgow which suits your taste and budget. Whether you’re looking for something uniquely Glaswegian, a trendy hotel, a vibrant hostel or a comfortable city centre apartment, you can be assured of a warm welcome.</p>
+    <a href="https://peoplemakeglasgow.com/" class="btn btn-primary">MORE INFO</a>
+  </div></div>
+  <div>
+  <img src="https://eu-assets.simpleview-europe.com/manchester2016/imageresizer/?image=%2Fdbimgs%2FManOne-03%284%29.jpg&action=Background_Overlay" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">Manchester</h5>
+    <p class="card-text">Manchester city centre is jam-packed with unique and eclectic restaurants, bars, shops, museums, galleries, hotels and places to stay whilst the surrounding Greater Manchester boroughs offer a patch-work of visitor experiences including quaint market towns, traditional pubs and beautiful green spaces and waterways to be explored on foot or bike. The city region is easily navigated, with great transport links both in and around Greater Manchester..</p>
+    <a href="https://www.visitmanchester.com/" class="btn btn-primary">MORE INFO</a>
+  </div></div>
+  <div>
+  <img src="https://cdn-lnp.dataweavers.io/-/media/images/london/visit/things-to-do/sightseeing/london-attractions/coca-cola-london-eye/the-london-eye-2-640x360.jpg?rev=95097c3d2aab47109d7b0e944c804d1b?mw=640&hash=EA6D4D5963997B5F368154E65A7FA187" class="card-img-top" alt="glasgow-pic"></img>
+  <div class="card-body">
+    <h5 class="card-title">London</h5>
+    <p class="card-text">Welcome to London! Discover the best of London with Visit London, the official guide to England’s exciting capital. Find things to do in London, from iconic sightseeing spots and fun-filled days out to top restaurants, theatre and unmissable London events. If you’re not able to visit just yet, plan ahead to make the most of your next visit.</p>
+    <a href="https://www.visitlondon.com/" class="btn btn-primary">MORE INFO</a>
+  </div>
+</div>
+</div>
+
+
+
+}
+
+export default TouristInfoCard;