tristan/monotreme.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

expansion

Browse source
This commit is contained in:
Tristan Smith 2024-09-21 18:35:24 -04:00
parent acb3998068
commit 948b481bca
2 changed files with 102 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
login/index.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>monotreme.org</title>
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<table>
<!-- Header -->
<tr>
<td colspan="2" class="header">
<h1>Save the monotremes</h1>
</td>
</tr>
<!-- Navigation -->
<tr>
<td colspan="2" class="nav">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</td>
</tr>
<!-- Main Content and Sidebar -->
<tr>
<!-- Sidebar -->
<td class="sidebar">
<p><strong>Quick Links</strong></p>
<ul>
<li><a href="/platypus/">The Noble Platypus</a></li>
<li><a href="/echidna/">The Royal Echidna</a></li>
<li><a href="/monotremes/">About Monotremes</a></li>
</ul>
</td>
<!-- Main Content Area -->
<td class="content">
<h2>Login to monotreme.org</h2>
<!-- Login Form -->
<div class="login">
<form action="/login/" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Login">
</form>
</div>
<img src="../echidna.png" alt="echidna">
<img src="../platypus.png" alt="platypus">
</td>
</tr>
<!-- Footer -->
<tr>
<td colspan="2" class="footer">
<p>&copy; 2024 monotreme.org</p>
</td>
</tr>
</table>
</body>
</html>

36
styles.css
View file

@ -66,7 +66,7 @@ body {
.sidebar a { .sidebar a {
text-decoration: none; text-decoration: none;
color: #4682b4; color: #4682b4; /* Steel blue */
} }
.sidebar a:hover { .sidebar a:hover {
@ -78,9 +78,38 @@ body {
width: 600px; width: 600px;
vertical-align: top; vertical-align: top;
} }
.login {
width: 200px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #eeeeee;
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}
.login form {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.login label,
.login input {
margin: 5px 0;
width: 100%;
}
input[type="submit"] {
width: auto;
padding: 5px 10px;
}
h2 { h2 {
color: #ff6347; /* Tomato */ color: #ff6347; /* Tomato color */
} }
/* Footer styling */ /* Footer styling */
@ -94,6 +123,7 @@ body {
.footer p { .footer p {
margin: 0; margin: 0;
} }
/* Contact Section Styling */ /* Contact Section Styling */
.contact { .contact {
text-align: left; text-align: left;