HTML
TOPIC: School Website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDIA INTERNATIONAL SCHOOL</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body{
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
header{
background: linear-gradient(135deg,#0056b3,#00a8ff);
color: white;
text-align: center;
padding: 60px 20px;
}
header h1{
font-size: 45px;
}
header p{
font-size: 20px;
margin-top: 10px;
}
nav{
background: #003366;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 15px;
position: sticky;
top: 0;
z-index: 1000;
}
nav a{
color: white;
text-decoration: none;
margin: 10px 20px;
font-weight: 600;
transition: .3s;
}
nav a:hover{
color: #ffd700;
}
section{
max-width: 1100px;
margin: 50px auto;
padding: 20px;
}
section h2{
text-align: center;
color: #003366;
margin-bottom: 20px;
font-size: 35px;
}
#home img{
width: 100%;
border-radius: 12px;
margin: 20px 0;
box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
#about p{
text-align: center;
font-size: 18px
}
ul{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap: 20px;
list-style: none;
margin-top: 30px;
}
ul li{
background: white;
padding: 25px;
text-align: center;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
transition: .3sec;
font-size: 18px;
}
ul li:hover{
transform: translateY(-8px);
}
#gallery{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
gap: 20px;
}
#gallery img{
width:100%;
border-radius: 12px;
transition: 4sec;
box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
#gallery img:hover{
transform:scale(1.05)
}
form{
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,.1);
}
input,
textarea{
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
}
input:focus,
textarea:focus{
border-color: #0077ff;
}
button{
background: #0056b3;
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: 3sec;
}
button:hover{
background: #003366;
}
#contact h3{
margin-top: 30px;
}
#contact p{
margin-top: 10px;
}
footer{
background: #003366;
color: white;
text-align: center;
padding: 20px;
margin-top: 50px;
}
@media(max-width:768px){
header h1{
font-size: 32px;
}
header p{
font-size: 16px;
}
section h2{
font-size: 28px;
}
nav{
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<header>
<h1>INDIA INTERNATIONAL SCHOOL</h1>
<P>Learning Today, Leading Tomorrow</P>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#courses">courses</a>
<a href="#gallery">gallery</a>
<a href="#contact">contact</a>
</nav>
<hr>
<section id="home">
<h2>Welcome to INDIA INTERNATIONAL SCHOOL</h2>
<img src="int [Link]" alt="School banner">
<p>Welcomne to INDIA INTERNATIONAL SCHOOL . We provide qulity education
and help students build a bright future.
</p>
</section>
<hr>
<section id="about">
<h2>About us</h2>
<p>Our school was established in 2005. We focus on academic
excellence, sports, discipline, and personality development.
</p>
</section>
<hr>
<section id="courses">
<h2>Our Facilities</h2>
<ul>
<li>Library</li>
<li>Computer Lab</li>
<li>Science Laboratory</li>
<li>Playground</li>
<li>School Transport</li>
</ul>
</section>
<hr>
<section id="gallery">
<h2>Gallery</h2>
<img src="[Link]">
<img src="[Link]">
<img src="[Link]">
</section>
<hr>
<section id="contact us">
<h2>Contact Us</h2>
<form>
<label>Name:</label><br>
<input type="text" placeholder="Enter your name"><br><br>
<label>Email:</label><br>
<input type="Email" placeholder="Enter your Email"><br><br>
<label>Message:</label>
<textarea rows="5" cols="40"></textarea><br><br>
<button>Send</button>
</form>
<h3>School Address</h3>
<p>
INDIA INTERNATIONAL SCHOOL <br>
Guwahati, Assam <br>
phone: +91 6932540202 <br>
Email:info@[Link]
</p>
</section>
<hr>
<footer>
<p>© 2026 INDIA INTERNATIONAL [Link] Rights reserved</p>
</footer>
</body>
</html>
OUTPUT