home page login form creation and styling.

This commit is contained in:
sweatshirt0 2023-01-30 21:24:04 -05:00
parent 1600e36d29
commit 1e3e23ece1
3 changed files with 61 additions and 1 deletions

View File

@ -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>

View File

@ -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>

View File

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