Test – Al-Awael British Schools in Mosul

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Al Awael British School</title>
<style>
/* ======== RESET ======== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}

body {
background-color: #f7f9fc;
color: #112025;
scroll-behavior: smooth;
}

/* ======== NAVBAR ======== */
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
}

.logo {
font-size: 1.5rem;
font-weight: 700;
color: #38b6ff;
}

.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}

.nav-links a {
text-decoration: none;
color: #112025;
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: #38b6ff;
}

/* ======== HERO SECTION ======== */
.hero {
background: linear-gradient(to right, #38b6ff, #0d3b66);
color: white;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 10%;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}

.hero p {
font-size: 1.2rem;
max-width: 600px;
line-height: 1.6;
animation: fadeInUp 1.5s ease;
}

.btn {
margin-top: 2rem;
background-color: white;
color: #0d3b66;
padding: 0.8rem 2rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
}

.btn:hover {
background-color: #38b6ff;
color: white;
}

/* ======== ABOUT SECTION ======== */
.about {
padding: 5rem 10%;
text-align: center;
}

.about h2 {
color: #38b6ff;
margin-bottom: 1rem;
font-size: 2rem;
}

.about p {
font-size: 1.1rem;
line-height: 1.8;
max-width: 800px;
margin: auto;
}

/* ======== CONTACT SECTION ======== */
.contact {
background-color: #112025;
color: white;
padding: 4rem 10%;
text-align: center;
}

.contact h2 {
color: #38b6ff;
margin-bottom: 1rem;
}

form {
max-width: 600px;
margin: 2rem auto;
display: flex;
flex-direction: column;
gap: 1rem;
}

input, textarea {
padding: 1rem;
border-radius: 10px;
border: none;
outline: none;
font-size: 1rem;
}

textarea {
resize: none;
height: 120px;
}

button {
background-color: #38b6ff;
color: white;
border: none;
padding: 1rem;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}

button:hover {
background-color: #0d3b66;
}

/* ======== FOOTER ======== */
footer {
background-color: #0d3b66;
color: white;
text-align: center;
padding: 1rem 0;
}

/* ======== ANIMATIONS ======== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 1s;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
.nav-links {
display: none;
}

.hero h1 {
font-size: 2rem;
}
}
</style>
</head>

<body>
<!– ======== HEADER ======== –>
<header>
<nav>
<div class=”logo”>Al Awael British School</div>
<ul class=”nav-links”>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</header>

<!– ======== HERO SECTION ======== –>
<section class=”hero” id=”home”>
<h1>Welcome to Al Awael British School</h1>
<p>
A place where education meets excellence — inspiring young minds to become global citizens and lifelong learners.
</p>
<a href=”#about” class=”btn”>Learn More</a>
</section>

<!– ======== ABOUT SECTION ======== –>
<section class=”about fade-in” id=”about”>
<h2>About Us</h2>
<p>
Al Awael British School is an international institution that provides a world-class British curriculum,
encouraging creativity, innovation, and leadership. Our mission is to prepare students to succeed in a globalized world
while maintaining a strong foundation of values and integrity.
</p>
</section>

<!– ======== CONTACT SECTION ======== –>
<section class=”contact fade-in” id=”contact”>
<h2>Contact Us</h2>
<p>We’d love to hear from you! Get in touch with our team for admissions or inquiries.</p>
<form id=”contactForm”>
<input type=”text” placeholder=”Your Name” required />
<input type=”email” placeholder=”Your Email” required />
<textarea placeholder=”Your Message” required></textarea>
<button type=”submit”>Send Message</button>
</form>
</section>

<!– ======== JAVASCRIPT ======== –>
<script>
// Scroll fade-in animation
const elements = document.querySelectorAll(“.fade-in”);
function showOnScroll() {
const trigger = window.innerHeight * 0.8;
elements.forEach(el => {
const top = el.getBoundingClientRect().top;
if (top < trigger) {
el.classList.add(“visible”);
}
});
}
window.addEventListener(“scroll”, showOnScroll);
showOnScroll();

// Simple form submission alert
document.getElementById(“contactForm”).addEventListener(“submit”, function (e) {
e.preventDefault();
alert(“Thank you for contacting Al Awael British School!”);
this.reset();
});
</script>
</body>
</html>