From 1e3e23ece143b06d0bc8f65ff849e02198d87aa9 Mon Sep 17 00:00:00 2001
From: sweatshirt0 <sweatshirttt@proton.me>
Date: Mon, 30 Jan 2023 21:24:04 -0500
Subject: [PATCH] home page login form creation and styling.

---
 pages/about.html  |  2 +-
 pages/home.html   |  7 +++++++
 styles/styles.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/pages/about.html b/pages/about.html
index 5329029..ac6d860 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -15,7 +15,7 @@
 				<h1 class="about-title">About /376chan</h1>
 			</div>
 			<div class="about-content-wrapper">
-				<p class="about-content">/376chan is an imageboard that is sapiocentric -- centered and catered to the niche populatoin that would identify as sapiosexual in any way. From philosophy, ethics and politics to math, science and technology; this is a place to post your memes and to foster an environment for sapio's to thrive. Thems the breaks; thats the mission.</p>
+				<p class="about-content">/376chan is an imageboard that is sapiocentric -- centered and catered to the niche population that would identify as sapiosexual in any way. From philosophy, ethics and politics to math, science and technology; this is a place to post your memes and to foster an environment for sapio's to thrive. Thems the breaks; thats the mission.</p>
 			</div>
 		</div>
 	</body>
diff --git a/pages/home.html b/pages/home.html
index 45775f4..a4a4eb7 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -17,6 +17,13 @@
 			<div class="home-subtitle-wrapper">
 				<p class="home-subtitle">The sapiocentric imageboard.</p>
 			</div>
+			<div class="login-wrapper">
+				<form action="./../sys/login.js" method="POST" class="login">
+					<input type="text" class="username" id="username" placeholder="Username" /><br/><br/>
+					<input class="password" type="password" id="password" placeholder="Password" /><br/><br/>
+					<input type="submit" class="login-button" value="Log in" />
+				</form>
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/styles/styles.css b/styles/styles.css
index 7162a90..b5a7cfe 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -24,3 +24,56 @@ body {
 .home-subtitle {
 	font-size: 0.9rem;
 }
+
+.login-wrapper {
+	position: relative;
+	border: 1px solid black;
+	width: 400px;
+	padding-top: 15px;
+	padding-bottom: 15px;
+	border-radius: 5px;
+	background-color: #fff;
+}
+
+.username {
+	position: relative;
+	display: flex;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 15px;
+	border: 1px solid black;
+	border-radius: 5px;
+	width: 75%;
+	font-size: 1rem;
+}
+
+.password {
+	position: relative;
+	display: flex;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 15px;
+	border: 1px solid black;
+	width: 75%;
+	border-radius: 5px;
+	font-size: 1rem;
+}
+
+.login-button {
+	position: relative;
+	display: flex;
+	width: 35%;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 10px;
+	background-color: blue;
+	font-size: 1rem;
+	color: white;
+	font-weight: bold;
+	border-radius: 5px;
+}
+
+.about-content {
+	font-size: 1rem;
+}
+