Changes on landing page CSS

web/src/pages/landing/LandingPage.scss

@@ -0,0 +1,29 @@
+body {
+    margin: 0 auto;
+    text-align: center;
+    background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+}
+@keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+div {
+    padding: 2%;
+}
+button {
+    font-size: 1rem;
+}
+#body-format {
+    margin: auto;
+    max-width: 20%;
+}

web/src/pages/landing/LandingPage.tsx

@@ -6,6 +6,7 @@ import {
 } from "interface";
 import React, { ChangeEvent } from "react";
 import { Socket } from "socket.io-client";
+import "./LandingPage.scss";
 
 export interface LandingPageProps {
   socket: Socket;
@@ -25,29 +26,32 @@ const LandingPage = (props: LandingPageProps) => {
 
   return (
     <React.Fragment>
-      <div className="landing-page-title">
+      <div className="landing-page-title" id="landing-page-title">
         <h1>Trains And Roads</h1>
       </div>
-      <div className="user-name-input">
+      <div id="body-format">
-        <input placeholder="Enter username" onChange={registerUsername}></input>
+        <div className="user-name-input" id="user-name-input">
-      </div>
+          <input
-      <div className="create-lobby-button">
+            placeholder="Enter username"
-        <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
+            onChange={registerUsername}
-          Create Lobby
+          ></input>
-        </button>
+          <button onClick={() => handleCreateLobby(socket, createLobbyPayload)}>
-      </div>
+            Create Lobby
-      <div className="join-lobby">
+          </button>
-        <input
+        </div>
-          className="lobby-id-input"
+        <div className="join-lobby" id="join-lobby">
-          placeholder="Enter Lobby Id"
+          <input
-          onChange={registerLobbyId}
+            className="lobby-id-input"
-        ></input>
+            placeholder="Enter Lobby Id"
-        <button
+            onChange={registerLobbyId}
-          className="join-lobby-button secondary"
+          ></input>
-          onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
+          <button
-        >
+            className="join-lobby-button secondary"
-          Join Lobby
+            onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
-        </button>
+          >
+            Join Lobby
+          </button>
+        </div>
       </div>
     </React.Fragment>
   );