Scribd
Upload
59 views7 pages

HTML Header Template for Ads

The document contains two HTML templates for advertisement websites, each featuring a header and a grid or flex layout for displaying ads. The first template uses a flexbox layout with three ads, while the second template employs a grid layout with six ads and responsive design for different screen sizes. Both templates include styling for ad containers, images, content, and buttons.

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
59 views7 pages

HTML Header Template for Ads

The document contains two HTML templates for advertisement websites, each featuring a header and a grid or flex layout for displaying ads. The first template uses a flexbox layout with three ads, while the second template employs a grid layout with six ads and responsive design for different screen sizes. Both templates include styling for ad containers, images, content, and buttons.

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

HTML

```
<!DOCTYPE html>
<html lang="en">
<head>
<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="[Link]" 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="[Link]" 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="[Link]" 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>
```

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdZone</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</h1>
</header>
<div class="ad-container">
<div class="ad">
<img src="[Link]" 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="[Link]" 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="[Link]" 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="[Link]" 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="[Link]" 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="[Link]" 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>
</body>
</html>
```

You might also like