Okay, I can help you with that. I'll adjust the HTML structure and CSS rules to achieve the desired layout.
<jitProject id="login-page-layout-fix" title="Fix Login Page Layout"> <jitFile type="file" filePath="index.html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login - Kalayaan National High School</title> <link rel="stylesheet" href="login.css"> </head> <body> <div class="header"> <h1>Kalayaan National High School</h1> <p>Q2JJ+GV9, 1428 Langit Rd, Caloocan, Metro Manila</p> </div> <div class="main-content">
<div class="logo-container">
<img src="knhs.jpg" alt="KNHS Logo">
</div>
<!-- Login Form -->
<div class="login-container" id="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Enter Username">
<input type="password" id="password" placeholder="Enter Password">
<select id="role">
<option value="">Select Role</option>
<option value="teacher">Teacher</option>
<option value="student">Junior High School Student</option>
<option value="parent">Parent</option>
</select>
<!-- Container for Teacher ID -->
<div id="loginTeacherIdContainer" class="hidden">
<input type="text" id="loginTeacherId" placeholder="Enter Teacher ID Number">
</div>
<!-- Container for Student ID -->
<div id="loginStudentIdContainer" class="hidden">
<input type="text" id="loginStudentId" placeholder="Enter Student ID Number">
</div>
<button onclick="login()">Login</button>
<p id="errorMessage" class="error-message"></p>
<p>Don't have an account? <a href="#" onclick="showSignup()">Sign up</a></p>
</div>
<!-- Sign Up Form -->
<div class="signup-container hidden" id="signup-container">
<h2>Sign Up</h2>
<input type="text" id="newUsername" placeholder="Choose a Username">
<input type="password" id="newPassword" placeholder="Choose a Password">
<select id="newRole">
<option value="">Select Role</option>
<option value="teacher">Teacher</option>
<option value="student">Junior High School Student</option>
<option value="parent">Parent</option>
</select>
<!-- Container for Teacher ID -->
<div id="signupTeacherIdContainer" class="hidden">
<input type="text" id="signupTeacherId" placeholder="Enter Teacher ID Number">
</div>
<!-- Container for Student Info (Full Name and ID) -->
<div id="signupStudentInfoContainer" class="hidden">
<input type="text" id="fullName" placeholder="Enter Full Name">
<input type="text" id="signupStudentId" placeholder="Enter Student ID Number">
</div>
<button onclick="signup()">Sign Up</button>
<p id="signupMessage" class="signup-message"></p>
<p>Already have an account? <a href="#" onclick="showLogin()">Log in</a></p>
</div>
</div>
<script src="login.js"></script>
</body>
</html>
<div class="main-content">
<div class="logo-container">
<img src="knhs.jpg" alt="KNHS Logo">
</div>
<!-- Login Form -->
<div class="login-container" id="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Enter Username">
<input type="password" id="password" placeholder="Enter Password">
<select id="role">
<option value="">Select Role</option>
<option value="teacher">Teacher</option>
<option value="student">Junior High School Student</option>
<option value="parent">Parent</option>
</select>
<!-- Container for Teacher ID -->
<div id="loginTeacherIdContainer" class="hidden">
<input type="text" id="loginTeacherId" placeholder="Enter Teacher ID Number">
</div>
<!-- Container for Student ID -->
<div id="loginStudentIdContainer" class="hidden">
<input type="text" id="loginStudentId" placeholder="Enter Student ID Number">
</div>
<button onclick="login()">Login</button>
<p id="errorMessage" class="error-message"></p>
<p>Don't have an account? <a href="#" onclick="showSignup()">Sign up</a></p>
</div>
<!-- Sign Up Form -->
<div class="signup-container hidden" id="signup-container">
<h2>Sign Up</h2>
<input type="text" id="newUsername" placeholder="Choose a Username">
<input type="password" id="newPassword" placeholder="Choose a Password">
<select id="newRole">
<option value="">Select Role</option>
<option value="teacher">Teacher</option>
<option value="student">Junior High School Student</option>
<option value="parent">Parent</option>
</select>
<!-- Container for Teacher ID -->
<div id="signupTeacherIdContainer" class="hidden">
<input type="text" id="signupTeacherId" placeholder="Enter Teacher ID Number">
</div>
<!-- Container for Student Info (Full Name and ID) -->
<div id="signupStudentInfoContainer" class="hidden">
<input type="text" id="fullName" placeholder="Enter Full Name">
<input type="text" id="signupStudentId" placeholder="Enter Student ID Number">
</div>
<button onclick="signup()">Sign Up</button>
<p id="signupMessage" class="signup-message"></p>
<p>Already have an account? <a href="#" onclick="showLogin()">Log in</a></p>
</div>
</div>
<script src="login.js"></script>
</body>
</html>
html, body {
height: 100%; /* Ensure body takes full height */
background-color: #f0f2f5; /* Light background for contrast */
}
body {
display: flex;
flex-direction: column; /* Stack header, main content vertically */
align-items: center; /* Center items horizontally */
text-align: center;
}
/* Header styles */
.header {
background: #003366; /* Dark blue background */
color: white;
padding: 15px 0; /* Vertical padding */
width: 100%; /* Full width */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: sticky; /* Keep header at the top */
top: 0;
z-index: 10; /* Ensure header is above other content */
}
.header h1 {
font-size: 22px;
margin-bottom: 5px;
}
.header p {
font-size: 14px;
color: #ccc; /* Lighter text for sub-header */
}
/* Main content area below header */
.main-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 400px; /* Limit width for better readability on large screens */
padding: 20px;
flex-grow: 1; /* Allow main content to fill remaining space */
}
/* Logo container */
.logo-container {
width: 100%;
margin-bottom: 20px; /* Space between logo and form */
max-height: 40vh; /* Limit logo height to roughly half the viewport height */
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 100%;
max-height: 100%; /* Ensure image fits within the container height */
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Scale image while preserving aspect ratio */
border-radius: 8px; /* Optional: slightly rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Login & Sign Up Containers */
.login-container, .signup-container {
background: white;
padding: 25px;
border-radius: 12px;
width: 100%; /* Take full width of parent (.main-content) */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 0; /* Remove previous top margin */
}
/* Form Elements */
h2 {
color: #003366; /* Dark blue */
margin-bottom: 20px;
}
input, select, button*
html, body {
height: 100%; /* Ensure body takes full height */
background-color: #f0f2f5; /* Light background for contrast */
}
body {
display: flex;
flex-direction: column; /* Stack header, main content vertically */
align-items: center; /* Center items horizontally */
text-align: center;
}
/* Header styles */
.header {
background: #003366; /* Dark blue background */
color: white;
padding: 15px 0; /* Vertical padding */
width: 100%; /* Full width */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: sticky; /* Keep header at the top */
top: 0;
z-index: 10; /* Ensure header is above other content */
}
.header h1 {
font-size: 22px;
margin-bottom: 5px;
}
.header p {
font-size: 14px;
color: #ccc; /* Lighter text for sub-header */
}
/* Main content area below header */
.main-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 400px; /* Limit width for better readability on large screens */
padding: 20px;
flex-grow: 1; /* Allow main content to fill remaining space */
}
/* Logo container */
.logo-container {
width: 100%;
margin-bottom: 20px; /* Space between logo and form */
max-height: 40vh; /* Limit logo height to roughly half the viewport height */
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 100%;
max-height: 100%; /* Ensure image fits within the container height */
height: auto; /* Maintain aspect ratio */
object-fit: contain; /* Scale image while preserving aspect ratio */
border-radius: 8px; /* Optional: slightly rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Login & Sign Up Containers */
.login-container, .signup-container {
background: white;
padding: 25px;
border-radius: 12px;
width: 100%; /* Take full width of parent (.main-content) */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-top: 0; /* Remove previous top margin */
}
/* Form Elements */
h2 {
color: #003366; /* Dark blue */
margin-bottom: 20px;
}
input, select, button*