A little room to tell the story.
Half page
300 × 600A roomier vertical format for a composed sequence of brand, promise, proof, and action.
Exact 300 px wide × 600 px high, including the border. No resizing. Scroll the preview when needed.
Two formats. One exact canvas.
Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 300 × 600 CSS pixels; the GIF’s encoded canvas is exactly 300 × 600 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.
Both versions show three scenes, two seconds per scene, repeated three times. The GIF contains nine encoded frames and no infinite-loop extension; it plays for 18 seconds and ends on the third scene. Play restarts the selected example; Stop shows its final frame. Reduced-motion preferences use a still preview.
Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF
View the complete 300 × 600 HTML + CSS source
<!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=600"><title>ClickToll 300 × 600 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:600px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:600px;min-height:600px;max-height:600px;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:24px 23px 30px}.ct-copy{font-size:59px;line-height:1.04;letter-spacing:-3px}.ct-brand{font-size:16px}.ct-caption{font-size:12px}.ct-cta{font-size:13px}.ct-art{width:180px;height:180px;right:-40px;top:32px;border-width:24px}
</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-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">GOOD
ADS.
CLEAR
IDEAS.</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-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE
STORY.
LESS
NOISE.</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">A GOOD
IDEA
STARTS
HERE.</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>View the exact-size animated GIF embed
<a href="https://clicktoll.com/display-advertising/">
<img src="https://clicktoll.com/assets/banners/300x600/clicktoll-300x600-animated.gif"
width="300" height="600"
style="display:block;width:300px;height:600px;min-width:300px;max-width:none;flex:none;border:0"
alt="Explore the ClickToll display advertising guide">
</a>Where this canvas fits
A vertical desktop placement where the publisher supports the format and the message benefits from additional height. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.
A useful way to compose the message
Create a top-to-bottom story with generous separation. Make the core promise understandable without requiring every detail to be read. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.
The mistake to avoid
Treating the extra area as permission to build a miniature brochure. Use space to improve hierarchy instead of adding unrelated claims. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.
What the blank canvas includes
The download is a simple SVG at exactly 300 × 600 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.
Before you deliver
Check the actual output dimensions, file weight, supported format, destination, language, creative version, and any animation or click-handling rules. A browser preview is not a substitute for the receiving platform’s approval process. The ad specifications page explains the difference between a static image and an HTML creative package.
Compare a related shape
See the 160 × 600 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.