Okay, the issue is that the CSS is trying to load the background image from a local file path (C:/Users/ADMIN/Desktop/deads/logo/knhs.jpg). This won't work in a web context or for anyone else viewing the page.
To fix this, you need to place the image file within your project folder and use a relative path in your CSS.
Let's assume you create an images folder in your project and put knhs.jpg inside it.
Make sure you create an images folder next to your style.css file (or adjust the path images/knhs.jpg accordingly based on your project structure) and place the actual knhs.jpg file inside it.
Okay, to make the image visible to anyone on the web, you need to host the image file online and use its public URL in your CSS. You cannot directly link to a file on your local computer (C:/...).
Here's the full code structure. You'll need to:
knhs.jpg image to an image hosting service (like Imgur, Cloudinary, or your own web hosting)."YOUR_PUBLIC_IMAGE_URL_HERE" in the style.css file below with the actual URL you obtained.Remember to replace "YOUR_PUBLIC_IMAGE_URL_HERE" in style.css with the actual link to your hosted image. Once you do that and host these files (index.html and style.css) on a web server, the background image will be visible to anyone visiting the page.
Okay, I can help you restructure the HTML and CSS to achieve that layout.
knhs.jpg) will be placed below the header and styled to be large.I'll correct the HTML structure (removing the nested <body> tag) and adjust the CSS accordingly. I'll keep the knhs.jpg reference as is, assuming it's in the same folder as your HTML file. Remember, for others to see it online, you'll need to host the image and use its public URL.
<img class="logo" src="knhs.jpg" alt="KNHS Logo">
<main class="content-wrapper">
<!-- 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>
</main>
<script src="login.js"></script>
<!-- Basic script for toggling forms and ID fields (replace or integrate with login.js) -->
<script>
const loginContainer = document.getElementById('login-container');
const signupContainer = document.getElementById('signup-container');
const loginRoleSelect = document.getElementById('role');
const signupRoleSelect = document.getElementById('newRole');
const loginTeacherIdContainer = document.getElementById('loginTeacherIdContainer');
const loginStudentIdContainer = document.getElementById('loginStudentIdContainer');
const signupTeacherIdContainer = document.getElementById('signupTeacherIdContainer');
const signupStudentInfoContainer = document.getElementById('signupStudentInfoContainer');
function showSignup() {
loginContainer.classList.add('hidden');
signupContainer.classList.remove('hidden');
}
function showLogin() {
signupContainer.classList.add('hidden');
loginContainer.classList.remove('hidden');
}
// --- Event Listeners for Role Selection ---
loginRoleSelect.addEventListener('change', function() {
const selectedRole = this.value;
loginTeacherIdContainer.classList.toggle('hidden', selectedRole !== 'teacher
<img class="logo" src="knhs.jpg" alt="KNHS Logo">
<main class="content-wrapper">
<!-- 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>
</main>
<script src="login.js"></script>
<!-- Basic script for toggling forms and ID fields (replace or integrate with login.js) -->
<script>
const loginContainer = document.getElementById('login-container');
const signupContainer = document.getElementById('signup-container');
const loginRoleSelect = document.getElementById('role');
const signupRoleSelect = document.getElementById('newRole');
const loginTeacherIdContainer = document.getElementById('loginTeacherIdContainer');
const loginStudentIdContainer = document.getElementById('loginStudentIdContainer');
const signupTeacherIdContainer = document.getElementById('signupTeacherIdContainer');
const signupStudentInfoContainer = document.getElementById('signupStudentInfoContainer');
function showSignup() {
loginContainer.classList.add('hidden');
signupContainer.classList.remove('hidden');
}
function showLogin() {
signupContainer.classList.add('hidden');
loginContainer.classList.remove('hidden');
}
// --- Event Listeners for Role Selection ---
loginRoleSelect.addEventListener('change', function() {
const selectedRole = this.value;
loginTeacherIdContainer.classList.toggle('hidden', selectedRole !== 'teacher