Used notebook listing template
HTML for this example
Select the code and use your copy shortcut. Changes in this preview are temporary.
<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Used notebook listing template</title><style>*{box-sizing:border-box} :root{color-scheme:light;--ink:#20303b;--muted:#536570;--line:#d3dce1;--accent:#245c76;--paper:#fff;--soft:#edf3f6}body{margin:0;background:#f3f5f5;color:var(--ink);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1080px;margin:auto;padding:30px 32px 64px}header{margin-bottom:20px}h1{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.18;letter-spacing:-.035em;margin:0 0 8px}h2{font-size:1.22rem;line-height:1.3;margin:0 0 16px}h3{font-size:1rem;margin:0 0 8px}p{margin:8px 0 16px}small,.muted{color:var(--muted)}.eyebrow{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:750;color:var(--accent);margin-bottom:8px}.panel{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:16px}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.stack{display:grid;gap:18px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:block;font-size:.9rem;font-weight:650}input,select,textarea,button{font:inherit}input,select,textarea{display:block;width:100%;min-width:0;margin-top:6px;border:1px solid #8b9ca6;border-radius:7px;padding:10px 12px;background:white;color:var(--ink)}input,select{min-height:46px}textarea{resize:vertical}button{border:1px solid var(--accent);border-radius:7px;padding:10px 16px;min-height:44px;background:var(--accent);color:white;cursor:pointer;font-weight:650}button.secondary{background:white;color:var(--accent)}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #d06e1c;outline-offset:3px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.answer{background:var(--ink);color:white;padding:26px;border-radius:14px}.answer .muted{color:#d9e5eb}.big{font-size:clamp(2.1rem,5vw,3.8rem);font-weight:750;line-height:1.16;letter-spacing:-.045em;margin:8px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.subresult{font-size:1.2rem;font-weight:650} .formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.note{border-left:3px solid #b47029;padding:10px 14px;background:#fff5e5;margin:14px 0;color:#66451b}.error{color:#a22621;font-weight:650;min-height:24px;margin:8px 0}.below{margin-top:28px}table{border-collapse:collapse;width:100%;font-size:.94rem}th{text-align:left;color:var(--muted);font-weight:650;font-size:.84rem}th,td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:650}svg{display:block;width:100%;height:auto}.tag{display:inline-block;font-size:.78rem;font-weight:650;padding:3px 8px;border-radius:30px;background:var(--soft);color:var(--accent)}.rule{height:1px;background:var(--line);margin:20px 0}.checklabel{display:flex;gap:10px;align-items:flex-start;font-weight:500}.checklabel input{width:20px;min-height:20px;flex:none;margin:2px 0}pre{white-space:pre-wrap;word-break:break-word;font: .86rem/1.6 ui-monospace,Consolas,monospace;background:#edf1f3;padding:20px;border-radius:8px}a{color:var(--accent)}[hidden]{display:none!important}@media(max-width:720px){main{padding:22px 20px 40px}.grid{grid-template-columns:1fr;gap:18px}.panel{padding:20px}.answer{padding:22px}.big{font-size:2.65rem}}@media(max-width:400px){main{padding:18px 16px 36px}.fields{gap:12px}th,td{padding:9px 6px}.panel{padding:16px}.big{font-size:2.25rem}}@media print{body{background:white}main{max-width:none;padding:0}.actions,button{display:none}.panel{break-inside:avoid}details>*{display:block}}:root{--accent:#6d563c}body{background:#f3f0ea}.listing-sheet{padding:26px 32px;background:#fffdf8;border:1px solid #d7cbb9;border-left:6px solid #a88555;max-width:850px}.listing-sheet h2{font-size:1.8rem;margin:14px 0 8px}.listing-sheet h3{margin-top:18px}.sheet-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#7d694c}.reconcile{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid #d7cbb9;padding-top:18px;margin-top:20px;color:#725a34}.listing-fields{margin:0}.listing-fields>div{display:grid;grid-template-columns:160px 1fr;gap:20px;border-top:1px solid var(--line);padding:14px 0}.listing-fields dt{font-weight:650;color:var(--muted)}.listing-fields dd{margin:0}.photo-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.photo-plan>div{border-top:3px solid #bda47c;padding-top:12px}@media(max-width:600px){.listing-sheet{padding:20px}.listing-fields>div{grid-template-columns:1fr;gap:5px}.photo-plan{grid-template-columns:1fr;gap:8px}.photo-plan p{margin:6px 0}}</style></head><body><main><header><div class="eyebrow">Fictional item · description preparation</div><h1>Used notebook listing template</h1></header>
<p>A ready-to-reuse static description, with seller fields kept separate.</p>
<section class="listing-sheet"><div class="sheet-label">Description preview</div><!-- DESCRIPTION_START --><div style="font-family:Arial,sans-serif;line-height:1.6;color:#25323a;width:100%;">
<h2>Used spiral notebook</h2>
<p>148 by 210 millimeters. 48 pages: the first 6 have writing and the remaining 42 are blank.</p>
<h3>Page condition</h3>
<p>The first six pages have writing. The remaining 42 pages are blank.</p>
<h3>Cover condition</h3>
<p>Light wear at a front-cover corner.</p>
<h3>Included items</h3>
<ul><li>One notebook included.</li><li>A pen is not included.</li></ul>
</div><!-- DESCRIPTION_END --><div class="reconcile"><b>6 with writing</b><span>+</span><b>42 blank</b><span>=</span><b>48 pages</b></div></section>
<section class="below panel"><h2>Listing-field worksheet</h2><dl class="listing-fields"><div><dt>Draft title</dt><dd>Used Spiral Notebook 148 by 210 mm - 48 Pages, 6 with Writing</dd></div><div><dt>Condition / category</dt><dd>Confirm the appropriate current option for the actual item and category.</dd></div><div><dt>Item specifics</dt><dd>Size: 148 by 210 mm. Pages: 48. Verify the actual available fields.</dd></div><div><dt>Brand / identifiers</dt><dd>Not supplied. Inspect the item and confirm field requirements.</dd></div><div><dt>Price</dt><dd>TO CONFIRM by seller</dd></div><div><dt>Shipping / returns</dt><dd>Actual seller terms TO CONFIRM</dd></div><div><dt>Native preview</dt><dd>Pending actual eBay desktop and mobile preview</dd></div></dl></section>
<section class="below panel"><h2>Planned photo evidence</h2><div class="photo-plan"><div><b>P01 · Corner wear</b><p>Show the front-cover corner.</p></div><div><b>P02 · Marked pages</b><p>Show the writing condition without exposing personal identifiers.</p></div><div><b>P03 · Remaining pages</b><p>Show the remaining page condition.</p></div></div><p class="muted">Planned references only. No photographs or physical inspection were performed. A styling pen must remain clearly excluded from the sale.</p></section>
<details class="below"><summary>Static HTML fragment · select and copy</summary><p>Only the fragment below belongs in the description field. Check its handling in the native marketplace preview before use.</p><pre aria-label="Static item description HTML"><div style="font-family:Arial,sans-serif;line-height:1.6;color:#25323a;width:100%;">
<h2>Used spiral notebook</h2>
<p>148 by 210 millimeters. 48 pages: the first 6 have writing and the remaining 42 are blank.</p>
<h3>Page condition</h3>
<p>The first six pages have writing. The remaining 42 pages are blank.</p>
<h3>Cover condition</h3>
<p>Light wear at a front-cover corner.</p>
<h3>Included items</h3>
<ul><li>One notebook included.</li><li>A pen is not included.</li></ul>
</div></pre></details>
<details><summary>Consistency checklist before native preview</summary><ul><li>Title, condition, description, and specifics agree on the used item and marked pages.</li><li>6 marked + 42 blank = 48 total; “all pages blank” contradicts this record.</li><li>One notebook is included; a pen is excluded.</li><li>Actual photos support the facts, rather than serving as placeholders.</li><li>Brand, identifiers, category, seller terms, and required fields are confirmed from actual evidence.</li><li>Native desktop and mobile previews preserve the description.</li></ul><p>This is a fictional preparation packet, not a published listing or policy approval. The fragment has no links or active content. It does not replace eBay’s structured fields or native selling-template workflow.</p></details></main></body></html>