File 18.
html
Name: Ori Chukwuma Jonathan
Department : EE HND 2 Evening
Option: Telecommunication
*HTML (index.html)*
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Business Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to My Business</h1>
<p>We provide innovative solutions.</p>
<button>Learn More</button>
</section>
<section id="about">
<h2>About Us</h2>
<p>We have 10+ years of experience.</p>
<img src="team.jpg" alt="Team Picture">
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Development</li>
<li>Marketing</li>
<li>Consulting</li>
</ul>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<p>Contact us:</p>
<ul>
<li>Email: <a href="mailto:info@example.com">info@example.com</a></li>
<li>Phone: 555-555-5555</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 My Business</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
}
.ad-container {
max-width: 1200px;
margin: 40px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.ad {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.ad img {
width: 100%;
height: 200px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ad .content {
padding: 20px;
}
.ad .content h2 {
font-size: 18px;
margin-top: 0;
}
.ad .content p {
font-size: 14px;
color: #666;
}
.ad .button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.ad .button:hover {
background-color: #0069d9;
}
@media (max-width: 768px) {
.ad-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.ad-container {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
</head>
<body>
<header>
<h1>AdZone Plus</h1>
</header>
<div class="ad-container">
<!-- 18 advertisements -->
<div class="ad">
<img src="image1.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 1</h2>
<p>This is a sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image2.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 2</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image3.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 3</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image4.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 4</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image5.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 5</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image6.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 6</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image7.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 7</h2>
<p
```
```
<div class="ad">
<img src="image8.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 8</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image9.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 9</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image10.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 10</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image11.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 11</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image12.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 12</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image13.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 13</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image14.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 14</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image15.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 15</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image16.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 16</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image17.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 17</h2>
<p>This is another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
<div class="ad">
<img src="image18.jpg" alt="Ad Image">
<div class="content">
<h2>Ad Title 18</h2>
<p>This is yet another sample advertisement.</p>
<button class="button">Learn More</button>
</div>
</div>
</div>
<footer>
<p>© 2024 AdZone Plus. All rights reserved.</p>
</footer>
</body>
</html>
```
*CSS (styles.css)*
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
section {
background-color: #f0f0f0;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
font-weight: bold;
margin-top: 0;
}
p{
margin-bottom: 20px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
clear: both;
}
```
*JavaScript (script.js)*
```
// Add JavaScript code here
console.log("Hello, World!");
// Example: Toggle navigation menu
const navToggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('nav');
navToggle.addEventListener('click', () => {
nav.classList.toggle('active');
});
```
*Images*
