<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>School Website</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align:
center; }
header { background-color: #0044cc; color: white; padding: 20px; }
nav ul { list-style-type: none; padding: 0; }
nav ul li { display: inline; margin: 10px; }
nav ul li a { color: white; text-decoration: none; }
section { margin: 20px; }
footer { background-color: #333; color: white; padding: 10px; position:
fixed; bottom: 0; width: 100%; }
form { background-color: #f4f4f4; padding: 20px; margin: 20px auto;
width: 50%; border-radius: 10px; }
input, textarea { width: 100%; padding: 10px; margin: 10px 0; }
button { padding: 10px; background-color: #0044cc; color: white;
border: none; cursor: pointer; }
table { width: 80%; margin: auto; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: center; }
</style>
</head>
<body>
<header>
<h1>Welcome to Our School</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portal">Student Portal</a></li>
<li><a href="#timetable">Timetable</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Latest Announcements</h2>
<p id="announcement-text">No new announcements.</p>
<button onclick="updateAnnouncement()">Update
Announcement</button>
</section>
<section id="about">
<h2>About Our School</h2>
<p>We strive to provide quality education and shape future
leaders.</p>
</section>
<section id="portal">
<h2>Student Login</h2>
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password"
required>
<button onclick="login()">Login</button>
</section>
<section id="timetable">
<h2>Class Timetable</h2>
<table>
<tr> <th>Day</th> <th>Time</th> <th>Subject</th>
<th>Teacher</th> </tr>
<tr> <td>Monday</td> <td>08:00 - 10:00</td> <td>Math</td>
<td>Mr. Smith</td> </tr>
<tr> <td>Tuesday</td> <td>10:00 - 12:00</td>
<td>Physics</td> <td>Ms. Lee</td> </tr>
</table>
</section>
<section id="events">
<h2>Upcoming Events</h2>
<p id="event-details">No events scheduled.</p>
<button onclick="updateEvent()">Check Events</button>
</section>
<section id="assignments">
<h2>Submit Your Homework</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="file" required>
<button type="submit">Upload</button>
</form>
</section>
<section id="forum">
<h2>Discussion Forum</h2>
<textarea id="forum-post" placeholder="Write your
thoughts..."></textarea>
<button onclick="postMessage()">Post</button>
<div id="forum-messages"></div>
</section>
<section id="blog">
<h2>School News</h2>
<p>New science lab inaugurated!</p>
<p>Sports day scheduled for next week.</p>
</section>
<section id="results">
<h2>Student Results</h2>
<table>
<tr> <th>Subject</th> <th>Grade</th> </tr>
<tr> <td>Math</td> <td>A</td> </tr>
<tr> <td>Physics</td> <td>B+</td> </tr>
</table>
</section>
<section id="library">
<h2>Library Catalog</h2>
<p>Available Books:</p>
<ul>
<li>"Introduction to Programming"</li>
<li>"Physics for Beginners"</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form id="contactForm">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message"></textarea>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<p>© 2025 Our School. All rights reserved.</p>
</footer>
<script>
function updateAnnouncement() {
document.getElementById("announcement-text").textContent =
"Upcoming school event on Friday!";
function updateEvent() {
document.getElementById("event-details").textContent = "Next
event: School Science Fair on July 20!";
function login() {
let user = document.getElementById("username").value;
let pass = document.getElementById("password").value;
if (user === "student" && pass === "1234") {
alert("Login successful!");
window.location.href = "#results";
} else {
alert("Invalid credentials!");
function postMessage() {
let post = document.getElementById("forum-post").value;
document.getElementById("forum-messages").innerHTML += "<p>"
+ post + "</p>";
}
document.getElementById("contactForm").addEventListener("submit",
function(event) {
event.preventDefault();
alert("Thank you for your message!");
});
</script>
</body>
</html>
