Basic HTML5 Half Page Fitness Ad

Test and preview Basic HTML5 Half Page Fitness Ad - An HTML5 half page ad promoting a fitness product. Interactive Banner ad example with code sample.

Input Your Ad Tag below to Preview and Validate

Paste your ad tag HTML/JavaScript/iframe content directly for preview

Paste HTML/JavaScript/Iframe

<!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>

</body>
</html>

Accepts HTML, JavaScript, or iframe code

Preview and Validate All Major Display Ad Tag Formats

Test HTML5, Display, and JavaScript Ad Tags With Confidence.

to view the full ad tag test report not just a preview.

The AdMeIn ad tag tester lets you inspect and troubleshoot a wide variety of formats, including HTML5 display ads, standard display ad tags, JavaScript tags, and other third-party ad scripts.

When you load a tag, the tester shows how the creative renders in a live preview, confirming your creative behaves exactly as intended before it’s used in a campaign.

Supports HTML5, JavaScript, iframe, and third-party ad tags
Sandboxed preview for safe testing of untrusted ad code
Real-time rendering to see exactly how ads will appear to users

The ad tag tester report includes:1. Reports on what scripts are executed, and which network calls are made. It’s ideal for catching errors and validating tracking2. Resource load weight to ensure heavy ads don’t impact ad performance.3. Checks total HTTP call count to ensure your ad stays within industry limits.4. Verifies total file size of all loaded assets for optimal performance and compliance.5. Detects and validates clickTag presence for proper click tracking and ad server compatibility.6. Flags unauthorized autoplay of audio or video to meet publisher and platform standards.7. Detects pop-ups and surveys to ensure a non-intrusive user experience.

Banner

basic

Basic HTML5 Half Page Fitness Ad

An HTML5 half page ad promoting a fitness product.

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.

Dimensions: 300x600

File Size: 9KB

Format: Half Page

Duration: 15s

Last Updated: Dec 2, 2025

Ad library gallery

Browse more ad examples in the gallery for more ads and code samples.

View more Ad Examples in Gallery

Advanced CSS3 animations

Optimized for performance

Cross-browser compatibility

+1 more

html5

css3

animation

interactive

banner

half-page

What is Banner Ads

A banner ad is a digital display advertisement that appears within a webpage or mobile app, typically occupying a designated ad slot defined by the publisher. Banner ads are one of the most widely used formats in online advertising and are designed to visually capture attention, promote a product or message, and drive users to a landing page or conversion event. From a technical standpoint, banner ads can be delivered as static images (such as JPG or PNG), animated creatives (such as GIFs or MP4s), or more advanced HTML5 and Rich Media units that support interactivity, animations, expandable panels, dynamic content, and JavaScript-driven behaviors. Modern banner ads often rely on HTML5 to ensure compatibility across browsers, responsive layouts, and high-performance rendering on both desktop and mobile devices. Banner ads are typically served through an ad server or programmatic exchange, where they are selected and delivered based on targeting rules, auctions, or campaign settings. When loaded, the ad creative is rendered inside an iframe or container within the page, making calls to load assets, tracking pixels, and measurement scripts. Most banner ads follow standardized IAB display sizes, such as: leaderboard (728x90), medium rectangle (300x250), skyscraper (160x600), and mobile banner (320x50). Advertisers can leverage banner ads for a variety of campaign objectives, including brand awareness, direct response, retargeting, and lead generation. Effective banner ad design focuses on clear messaging, compelling visuals, strong calls to action, and optimized file sizes to ensure fast loading times and a positive user experience.

Our banner ad examples feature a variety of standard IAB sizes, including leaderboard, skyscraper, medium rectangle, and more. Each example includes clean HTML5 code with CSS animations and interactive elements to enhance user engagement. Learn how to create effective banner ads that perform well across different devices and screen sizes while adhering to industry best practices.

Explore more Banner ad examples

Technical Details

More Banner Examples

Basic HTML5 Half Page Fitness Ad

Test and preview Basic HTML5 Half Page Fitness Ad - An HTML5 half page ad promoting a fitness product. Interactive Banner ad example with code sample.

Input Your Ad Tag below to Preview and Validate

Preview and Validate All Major Display Ad Tag Formats

Test HTML5, Display, and JavaScript Ad Tags With Confidence.

Basic HTML5 Half Page Fitness Ad

Ad library gallery

What is Banner Ads