From 6f1fbaa19bdcfd032a2ec22d6f63b74b30258d43 Mon Sep 17 00:00:00 2001
From: ruksan_emirali <ruksanemirali@gmail.com>
Date: Thu, 1 Aug 2024 15:58:53 +0100
Subject: [PATCH] adds styling to enter name form

---
 src/Home/Home.scss | 19 +++++++++++++++++++
 src/Home/Home.tsx  |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/Home/Home.scss b/src/Home/Home.scss
index 190044f..881be06 100644
--- a/src/Home/Home.scss
+++ b/src/Home/Home.scss
@@ -2,4 +2,23 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+label {
+    margin: 10pix
+}
+
+input {
+    margin: 10px;
+}
+
+button {
+    margin: 10px;
 }
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index ebc186c..d620daf 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -19,7 +19,7 @@ function Home() {
             <main className="home-content" style={{ backgroundImage: `url(${homeBackgroundImage})` }}>
 
                 {/* Other components and content */}
-                <form onSubmit={handleSubmit}>
+                <form className="form" onSubmit={handleSubmit}>
                     <label>Enter name:
                         <input type="text"
                             value={username}