From a7d1e214d78845421615caa82ded6b4873bfd224 Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 14:48:12 +0100
Subject: [PATCH 1/5] CSS added for background image of homepage

Co-authored-by: Natasha Buckham <natashaisobel@gmail.com>
---
 src/Home/Home.scss | 5 +++++
 src/Home/Home.tsx  | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 src/Home/Home.scss

diff --git a/src/Home/Home.scss b/src/Home/Home.scss
new file mode 100644
index 0000000..190044f
--- /dev/null
+++ b/src/Home/Home.scss
@@ -0,0 +1,5 @@
+.home-content {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index aa598b1..ebc186c 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
+import './Home.scss'
 
 function Home() {
 

From e0c4b62d5d5d3f38d18a027aefea00fee2c6ba75 Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 15:03:40 +0100
Subject: [PATCH 2/5] Adds style to the logo in header

---
 src/Header/Header.scss | 19 +++++++++++++++++++
 src/Header/Header.tsx  |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/Header/Header.scss

diff --git a/src/Header/Header.scss b/src/Header/Header.scss
new file mode 100644
index 0000000..33bc7da
--- /dev/null
+++ b/src/Header/Header.scss
@@ -0,0 +1,19 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    background-color: #2D3047;
+}
+
+@media only screen and (min-width: 480px) {
+    img {
+        width: 70vw;
+        align-self: center;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    img {
+        width: 40vw;
+        align-self: center;
+    }
+}
\ No newline at end of file
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index d19c730..760c4df 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+import './Header.scss'
 
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
@@ -9,7 +10,7 @@ const Header: React.FC = () => {
   };
 
   return (
-    <div className="App">
+    <div className="header">
       <Hamburger onClick={handleHamburgerClick} label={""}/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>

From 3d7c178131a28a57bd30071318bb867b59a26aa1 Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 14:48:12 +0100
Subject: [PATCH 3/5] CSS added for background image of homepage

Co-authored-by: Natasha Buckham <natashaisobel@gmail.com>
---
 src/Home/Home.scss | 5 +++++
 src/Home/Home.tsx  | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 src/Home/Home.scss

diff --git a/src/Home/Home.scss b/src/Home/Home.scss
new file mode 100644
index 0000000..190044f
--- /dev/null
+++ b/src/Home/Home.scss
@@ -0,0 +1,5 @@
+.home-content {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index aa598b1..ebc186c 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
+import './Home.scss'
 
 function Home() {
 

From 420ab18cb94e3bb6f426eb3a96f2c06748b336a8 Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 15:08:35 +0100
Subject: [PATCH 4/5] Resolves merge conflicts

---
 src/Header/Header.scss | 19 +++++++++++++++++++
 src/Header/Header.tsx  |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/Header/Header.scss

diff --git a/src/Header/Header.scss b/src/Header/Header.scss
new file mode 100644
index 0000000..33bc7da
--- /dev/null
+++ b/src/Header/Header.scss
@@ -0,0 +1,19 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    background-color: #2D3047;
+}
+
+@media only screen and (min-width: 480px) {
+    img {
+        width: 70vw;
+        align-self: center;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    img {
+        width: 40vw;
+        align-self: center;
+    }
+}
\ No newline at end of file
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
index 0558966..f745c21 100644
--- a/src/Header/Header.tsx
+++ b/src/Header/Header.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+import './Header.scss'
 
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
 
   return (
-    <div className="App">
+    <div className="header">
       <Hamburger/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>

From 027a519a4bcec6d57ef2bbf3a4b1d85cf3e99e6f Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 15:16:54 +0100
Subject: [PATCH 5/5] all homepage elements fit the view without scrolling

---
 src/App.scss | 6 ++++++
 src/App.tsx  | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index c1e1e98..9211e61 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -45,4 +45,10 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index c02a630..54da0d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import Footer from './Footer/Footer';
 
 function App() {
   return (
-    <div className="App">
+    <div className="app">
       <Router>
         <Header/>
         <Routes>