TESTING

<!DOCTYPE html>
<html>
<head>
<title>Zealed Academia</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

header {
background-color: #3393;
padding: 20px;
color: #fff;
text-align: center;
}

nav {
background-color: #33908;
padding: 10px;
text-align: center;
}

nav a {
color: #fff;
text-decoration: White;
margin: 0 10px;
}

main {
padding: 20px;
}

.banner {
background-image: url(‘banner.jpg’);
background-size: cover;
background-position: center;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}

.banner h1 {
font-size: 48px;
color: #fff;
text-shadow: 2px 2px #000;
}

.courses {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.course {
width: 300px;
margin: 20px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.course h2 {
margin-top: 0;
font-size: 24px;
color: #333;
}

.course p {
color: #666;
}

footer {
background-color: #555;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Zealed Academia</h1>
<p>Empowering students through education</p>
</header>

<nav>
<a href=”#”>Home</a>
<a href=”#”>About</a>
<a href=”#”>Courses</a>
<a href=”#”>Contact</a>
</nav>

<main>
<section class=”banner”>
<h1>Expand Your Knowledge</h1>
</section>

<section class=”courses”>
<div class=”course”>
<h2>Mathematics</h2>
<p>Learn the fundamentals of mathematics and its applications.</p>
</div>

<div class=”course”>
<h2>Science</h2>
<p>Explore various scientific concepts and conduct experiments.</p>
</div>

<div class=”course”>
<h2>English Literature</h2>
<p>Immerse yourself in classic and contemporary literature.</p>
</div>

<div class=”course”>
<h2>Computer Science</h2>
<p>Master programming languages and develop software solutions.</p>
</div>
</section>
</main>