FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<div class="product"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='180'><rect width='100%' height='100%' fill='%23ddd'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='%23666' font-family='Arial' font-size='20'>Product</text></svg>" alt="Product"> <span class="badge">NEW</span> </div>
# CSS
/* TODOs: 1) Make .product a positioned container (position: relative). 2) Absolutely position .badge inside it using top/right offsets. 3) Add padding, border-radius, and a red background for visibility. */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; line-height: 1.6; background: #fafafa; } .product { display: inline-block; } .badge { background: #e63946; color: #fff; font-weight: 600; letter-spacing: 0.5px; /* Your positioning and spacing here */ } img { display: block; max-width: 100%; border-radius: 8px; }
Preview
Live preview updates as you type
Building preview…
Show preview