Scribd
Upload
3 views9 pages

File 14.html

The document contains an advertisement webpage titled 'AdZone Plus' designed for displaying multiple advertisements in a grid layout. It includes styling for responsiveness and features a header, advertisement containers, and buttons for user interaction. The page showcases 18 sample advertisements with images and descriptions.

Uploaded by

easygoing000999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views9 pages

File 14.html

The document contains an advertisement webpage titled 'AdZone Plus' designed for displaying multiple advertisements in a grid layout. It includes styling for responsiveness and features a header, advertisement containers, and buttons for user interaction. The page showcases 18 sample advertisements with images and descriptions.

Uploaded by

easygoing000999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

File_14.

html

Name: Samuel Stephen Onyeka

Department : EE HND 2 Evening

Option : Telecommunication

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdZone Plus</title>
<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>&copy; 2024 AdZone Plus. All rights reserved.</p>
</footer>
</body>
</html>
```

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advertisement Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

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

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

.ad {
margin: 20px;
width: 300px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.ad img {
width: 100%;
height: 150px;
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: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.ad .button:hover {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>Advertisement Website</h1>
</header>
<div class="ad-container">
<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>
</body>
</html>
```

You might also like