Basic HTML5 Half Page Fitness Ad
Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
About This Ad Tag Example
This HTML5 half page ad example features a clean design with a focus on a fitness product. It includes smooth transitions and is optimized for performance across various devices and browsers.
Key Features
Advanced CSS3 animations
Optimized for performance
Cross-browser compatibility
Lightweight (< 10KB)
Code Sample for this Banner Ad
Below is the code implementation for this ad. You're free to copy and use this as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Creative - Half Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.ad-container {
position: relative;
width: 300px;
height: 600px;
border: 1px solid #560606;
box-sizing: border-box;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.ad-container {
cursor: pointer;
transition: all 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
from { opacity: 0; transform: scale(1.2); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomInInfinite {
from { transform: scale(1); }
to { transform: scale(1.3); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes rotateIn {
from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes blurInLeft {
from { opacity: 0; filter: blur(8px); transform: translateX(-30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInRight {
from { opacity: 0; filter: blur(8px); transform: translateX(30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInUp {
from { opacity: 0; filter: blur(8px); transform: translateY(30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes blurInDown {
from { opacity: 0; filter: blur(8px); transform: translateY(-30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fadeOutAfter {
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes keyframeCTAButtonHover {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.element-gradient-1758753504757-0 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 600px;
animation: fadeIn 800ms ease-out 0ms both;
background: linear-gradient(to bottom, rgba(239, 68, 68, 1) 0%, rgba(144, 24, 24, 1) 100%);
}
.element-button-1764530186714 {
position: absolute;
left: 46.875px;
top: 531px;
width: 208.25px;
height: 41px;
background-color: #fbbf24;
color: #000000;
font-size: 21px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
font-weight: normal;
justify-content: center;
cursor: pointer;
border: none;
text-decoration: none;
transition: opacity 200ms ease, transform 200ms ease-in-out, filter 300ms ease-in-out;
border-radius: 6px;
}
.element-button-1764530186714.hover-active:hover {
transform: scale(1.05);
}
.element-button-1764530186714.animate-in {
animation: slideUp 600ms ease-out 2200ms both;
}
.element-text-1758753504757-1 {
position: absolute;
left: 20px;
top: 60px;
width: 260px;
height: 80px;
animation: bounceIn 900ms ease-out 300ms both;
color: #ffffff;
font-size: 42px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764530499247 {
position: absolute;
left: 79.25px;
top: 163px;
width: 141.5px;
height: 38px;
animation: slideRight 700ms ease-out 1100ms both;
color: #fef3c7;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1758753504757-2 {
position: absolute;
left: 79.25px;
top: 125px;
width: 141.5px;
height: 38px;
animation: slideLeft 700ms ease-out 800ms both;
color: #fef3c7;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764530959525 {
position: absolute;
left: 20.625px;
top: 247px;
width: 258.75px;
height: 74px;
animation: slideDown 600ms ease-out 9000ms both, fadeOutAfter 1ms 11700ms forwards;
color: #ffffff;
font-size: 20px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764530694388 {
position: absolute;
left: 20.625px;
top: 247px;
width: 258.75px;
height: 74px;
animation: slideDown 600ms ease-out 3900ms both, fadeOutAfter 1ms 6600ms forwards;
color: #ffffff;
font-size: 20px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1758753504757-3 {
position: absolute;
left: 19.75px;
top: 288px;
width: 260.5px;
height: 42px;
animation: slideUp 600ms ease-out 1200ms both, fadeOutAfter 1ms 4000ms forwards;
color: #ffffff;
font-size: 20px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764531033406 {
position: absolute;
left: 20.625px;
top: 247px;
width: 258.75px;
height: 74px;
animation: slideUp 600ms ease-out 6500ms both, fadeOutAfter 1ms 9200ms forwards;
color: #ffffff;
font-size: 20px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764531176114 {
position: absolute;
left: 20.625px;
top: 247px;
width: 258.75px;
height: 74px;
animation: slideUp 600ms ease-out 11500ms both;
color: #ffffff;
font-size: 20px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-shape-1758753504757-4 {
position: absolute;
left: 51px;
top: 331px;
width: 200px;
height: 3px;
animation: slideRight 500ms ease-out 1600ms both;
background-color: #fbbf24;
}
.element-text-1758753504757-5 {
position: absolute;
left: 30px;
top: 360px;
width: 240px;
height: 140px;
animation: fadeIn 800ms ease-out 2000ms both;
color: #ffffff;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.cta {
animation: pulse 2s ease-in-out 0.6s infinite;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="window.open(window.clickTag)">
<div class="ad-container">
<div class="element-gradient-1758753504757-0"></div>
<div class="element-button-1764530186714 animate-in cta">Start
Today</div>
<div class="element-text-1758753504757-1">TRANSFORM</div>
<div class="element-text-1764530499247">In 30 days</div>
<div class="element-text-1758753504757-2">Your Body</div>
<div class="element-text-1764530959525">The 30-day plan built around
your lifestyle</div>
<div class="element-text-1764530694388">Unlock the program that actually
keeps you motivated</div>
<div class="element-text-1758753504757-3">30 Days to a New You</div>
<div class="element-text-1764531033406">Train smarter, see faster
results</div>
<div class="element-text-1764531176114">Your results. Your routine. Your
rules.</div>
<div class="element-shape-1758753504757-4"></div>
<div class="element-text-1758753504757-5">Personal
Training<br />Nutrition Plans<br />Progress Tracking<br />24/7
Support<br />Money Back Guarantee</div>
</div>
</a>
<script>
// Ad server replaces this value
var clickTag = "https://example.com";
</script>
<script>
const allButtons = document.querySelectorAll("[class*='element-button-']");
allButtons.forEach(button => {
if (button.className.includes('animate-in')) {
button.addEventListener('animationend', () => {
button.classList.add('hover-active');
button.classList.remove('animate-in');
});
} else {
button.classList.add('hover-active');
}
});
</script>
</body>
</html>Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
Technical Details
Dimensions300x600
File Size9KB
Duration15s
IAB CategoryFitness
Tags
html5
css3
animation
interactive
banner
half-page
