<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=50"><title>ClickToll 300 × 50 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:50px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:50px;min-height:50px;max-height:50px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}

.ct-scene{padding:5px 7px 8px;flex-direction:row;align-items:center;gap:6px}.ct-brand{font-size:9px;letter-spacing:-.5px;width:64px;flex-shrink:0}.ct-copy{font-size:12px;line-height:1.05;letter-spacing:-.35px;flex:1}.ct-bottom{border:0;padding:0;flex-shrink:0}.ct-caption,.ct-art{display:none}.ct-cta{font-size:8px;padding:7px 5px;border-width:1px;box-shadow:2px 2px 0 #17131f}.ct-rainbow{height:4px;border-top-width:1px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">LESS CLUTTER.
MORE CLARITY.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE MESSAGE.
ONE NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">SMALL SPACE.
BIG IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
 if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
 const action=event.data.action;
 if(action==='play'){
  root.setAttribute('data-frame','0');void document.body.offsetWidth;
  root.removeAttribute('data-frame');root.removeAttribute('data-paused');
 }else if(action==='stop'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
 }else if(action==='reset'){
  root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
 }
});})();
</script></body></html>