From eed0a047bfe57f097fdf184526d5278bd3f46c97 Mon Sep 17 00:00:00 2001 From: AdrianIlovan Date: Thu, 15 Jun 2023 12:45:27 +0100 Subject: [PATCH 01/27] Lesson1/####1. Done --- src/Search.js | 4 +++- src/SearchButton.js | 10 ++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 src/SearchButton.js diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..18fdc4c9d 100644 --- a/src/Search.js +++ b/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" /> - + @@ -26,4 +27,5 @@ const Search = () => { ); }; + export default Search; diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..8493d2830 --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,10 @@ +import React from "react"; + + +const SearchButton = () => { + return( + + ); + } + + export default SearchButton; \ No newline at end of file From bf1879b17d81e61f19cc450518f3de3b8657b838 Mon Sep 17 00:00:00 2001 From: AdrianIlovan Date: Thu, 15 Jun 2023 13:28:18 +0100 Subject: [PATCH 02/27] ####2 Done --- src/App.css | 4 ++-- src/App.js | 5 +++-- src/Heading.js | 12 ++++++++++++ 3 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 src/Heading.js diff --git a/src/App.css b/src/App.css index 05fe2d52e..65fda68fe 100644 --- a/src/App.css +++ b/src/App.css @@ -4,7 +4,7 @@ .App-logo { animation: App-logo-spin infinite 20s linear; - height: 80px; + height: 100px; } .App-header { @@ -54,4 +54,4 @@ tr { .card { width: 18rem; -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 953c98560..5460c3dc8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,13 @@ import React from "react"; - import Bookings from "./Bookings"; import "./App.css"; +import Heading from "./Heading"; + const App = () => { return (
-
CYF Hotel
+
); diff --git a/src/Heading.js b/src/Heading.js new file mode 100644 index 000000000..60bbec09b --- /dev/null +++ b/src/Heading.js @@ -0,0 +1,12 @@ +import React from "react"; +import "./App.css"; + +const Heading = () => { + return( +
+ App-logo +

CYF Hotel

+ ); +} + +export default Heading; \ No newline at end of file From 55b8b8d515492921fdd017c422a08d2de89ff4e7 Mon Sep 17 00:00:00 2001 From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com> Date: Thu, 15 Jun 2023 16:05:16 +0100 Subject: [PATCH 03/27] ####3 Done --- src/App.css | 15 ++++++++++++++- src/App.js | 2 ++ src/TouristInfoCards.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/TouristInfoCards.js diff --git a/src/App.css b/src/App.css index 65fda68fe..e695ba93d 100644 --- a/src/App.css +++ b/src/App.css @@ -4,9 +4,10 @@ .App-logo { animation: App-logo-spin infinite 20s linear; - height: 100px; + height: 60px; } + .App-header { background-color: #222; height: 50px; @@ -52,6 +53,18 @@ tr { text-align: center; } +.card-img { + width: 100%; + height: auto; + flex-grow: 1; +} + +.card-container { + display: flex; + justify-content: center; + margin-top: 50px; +} + .card { width: 18rem; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5460c3dc8..a73f5e0a6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,12 +2,14 @@ import React from "react"; import Bookings from "./Bookings"; import "./App.css"; import Heading from "./Heading"; +import TouristInfoCards from "./TouristInfoCards" const App = () => { return (
+
); diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..15906ed7a --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,31 @@ +import React from "react"; + +const TouristInfoCards = () => { + return( +
+ +
+ glasgow +

Glasgow

+

Glasgow's city centre is home to flagship stores, impressive shopping centres and designer favourites all within an easily walkable area.

+ More Information +
+ +
+ manchester +

Manchester

+

Manchester is one of the most exciting places to visit in the UK right now where everybody and anybody is very warmly welcomed.

+ More Information +
+ +
+ london +

London

+

Visit London, the official guide to England’s exciting capital. For more Information click the link and visit the wonders of London

+ More Information +
+
+ ) +} + +export default TouristInfoCards; \ No newline at end of file From 8660d90714d2c0a8203b3af6a85ce35e211f4cb0 Mon Sep 17 00:00:00 2001 From: AdrianIlovan <62564810+AdrianIlovan@users.noreply.github.com> Date: Thu, 15 Jun 2023 21:02:53 +0100 Subject: [PATCH 04/27] ###4 Updates --- src/App.css | 14 ++++++++++++++ src/App.js | 2 ++ src/Footer.js | 11 +++++++++++ 3 files changed, 27 insertions(+) create mode 100644 src/Footer.js diff --git a/src/App.css b/src/App.css index e695ba93d..07e1e644e 100644 --- a/src/App.css +++ b/src/App.css @@ -67,4 +67,18 @@ tr { .card { width: 18rem; +} + +.footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + padding: 10px; + text-align: center; + background-color: #222; +} + +.footer, h1 { + color:white; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index a73f5e0a6..4aa4eb355 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Bookings from "./Bookings"; import "./App.css"; import Heading from "./Heading"; import TouristInfoCards from "./TouristInfoCards" +import Footer from "./Footer"; const App = () => { @@ -11,6 +12,7 @@ const App = () => { +