Merge pull request #21 from techswitch-learners/mm-008-homepage-styling

Mm 008 homepage styling

src/App.scss

@@ -45,4 +45,10 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }

src/App.tsx

@@ -9,7 +9,7 @@ import Footer from './Footer/Footer';
 function App() {
   const [username, setUsername] = useState("");
   return (
-    <div className="App">
+    <div className="app">
       <Router>
         <Header/>
         <Routes>

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;
+    }
+}

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>

src/Home/Home.scss

@@ -0,0 +1,5 @@
+.home-content {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}

src/Home/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
+import './Home.scss'
 
 interface getUserProp{
     username:string;