DOLLAR COMPANY.
WORK 21 / A SMALL SOURCE WORKSHOP
Company
in a Page
One department, between the lines.
Move its walls, rewrite its words, or make another page.
A fictional company page. Original starter written by One Million Dollar Company. Your code decides its shape.
Change the source.
HTML + CSS → YOUR PAGEA small page workshop for headings, paragraphs, lists and sections a reader can unfold. Link your passages to make an index, choices or return paths. Add your local still pictures. Edit the words or their shape, apply the current HTML and CSS, then keep the complete page.
The Good Box
An original illustrated fiction. Management has a borrowed hand drill to return and a very good free box.
Keep the HTML file, then choose Reopen a kept page below. Review its source and pictures, choose Replace my drafts with this source, then Apply HTML + CSS to continue your own version.
Continue a kept page.
Choose an HTML file kept by this workshop. It is read on your device. Review its source, replace your drafts if you choose, then apply your next version.
UTF-8: up to 5 MiB for pages with pictures; the original text-only format remains limited to 128 KiB. This reads the exported document format, including its generated title and wrapper. Other HTML files or edits to the wrapper are not supported.
Your current drafts and applied page stay here until you choose to replace the drafts.
Keep an unfinished draft.
Keep your current HTML and CSS, even before they apply, with every named picture in your draft library. This JSON file is for returning to the editors; Keep this page saves the finished, applied HTML.
The file includes unused draft pictures. It leaves out the applied preview, unfinished picture preparations and Undo history. Nothing saves automatically.
Choose one UTF-8 Company in a Page draft JSON file, up to 2 MiB. Opening it only starts a review.
Pictures for this page.
0/4 · 0 / 1,048,576 bytesChoose a PNG, JPEG or WebP up to 8 MiB. It is prepared here as a still PNG, preserving any transparency, at most 1,024 pixels on its longer side and 512 KiB. Larger pictures may be reduced further. Review it before changing your draft.
The draft library holds up to four pictures and 1 MiB altogether. Only pictures used by the applied page enter Keep. Source references stay short; no image data needs to be pasted into the HTML editor.
The words and their structure. 16,000 character limit.
The type, spacing and walls. 8,000 character limit.
The original starter is applied. Edit the source, then apply it when you are ready.
Draft changes stay for this visit. Keep draft (JSON) before leaving to return to unfinished source and every draft picture. Keep this page saves the applied HTML page; reopen that finished file here to continue its source and used pictures.
A folded section is still part of the file, including all its words. Opening it in the preview does not rewrite your source. The kept page starts with its folds closed.
Your applied page
APPLIED SOURCEThis preview changes when you apply source successfully. It shows the same applied words, pictures, styles and links as the kept HTML. Links lead within this preview; in the kept file, they lead within that file.
What HTML and CSS can I use?
These are real HTML elements and CSS declarations within a small, explicit vocabulary. An unsupported or malformed line is reported when you apply. Empty HTML and CSS are welcome too.
HTML elements
<h1><h2><p><ul><ol><li><strong><em><br><details><summary><a><img>
At the top level, use text and these elements except summary. Headings, paragraphs, list items, strong and em can contain text, strong, em, br, pictures and links. A ul or ol contains li elements and whitespace.
Begin each details with one summary label containing text, strong, em or br. After its label, use text, headings, paragraphs, lists or another complete details section. Use the insertion button for a small original example, then change its heading and words before applying.
Close every element except br and img; these also accept a final />. Tag and attribute names are case-insensitive. Each supported opening tag may have one optional class and one optional id, in either order. A link also needs one href. A picture needs src and alt. Other attributes and attributes on closing tags are not supported. Document wrappers and comments are outside this vocabulary.
Classes let you style chosen parts together and reuse a style on several elements. Put the list in single or double quotes, such as class="notice urgent" or class = 'notice urgent'. Spaces around = are allowed.
Use zero to 8 class names, separated by spaces, tabs or line breaks. Each name has 1–32 ASCII characters: a letter first, then letters, digits, _ or -. An empty list adds no classes. Repeated names are harmless but still count toward the limit. Write literal names, without entities or escapes.
Class names are case-sensitive: notice and Notice are different names. One element can have several classes; the same class can be reused on several elements.
Give a destination a unique name, such as id="window", then link to it with <a href="#window">Go to the window.</a>. IDs have 1–32 ASCII characters: a letter first, then letters, digits, _ or -. Use matching single or double quotes, with literal names and no spaces, entities or escapes inside them. IDs are case-sensitive.
Each ID may appear once. Every link must name an ID in this page; a missing target or duplicate ID is reported when you apply. A target may come later in the source. Return paths, cycles and links to the same passage are allowed. Links to other pages, websites or files are outside this vocabulary.
Place a named picture.
Prepare a picture above, then insert its short reference, such as <img src="picture:window" alt="A chair beside an open window">. Names have 1–32 ASCII characters: a letter first, then letters, digits, _ or -. Match the case of a name in your draft library. Only named local pictures are accepted; website addresses and pasted image data are not.
Give each use a description of up to 256 characters, or explicitly choose Decorative to insert alt="". The same picture may appear with different descriptions. A picture can be inside a local link; its meaningful description can label the link. A decorative picture alone cannot label a link. Keep summary labels free of pictures, including inside other elements.
Use up to eight picture placements. Their prepared PNG bytes may total at most 2 MiB across all placements, including repeated uses. Removing a named resource does not remove its source references: correct those references before applying. The kept page includes only pictures it uses.
A link needs a readable label, not just spaces or line breaks. Its label may contain text, strong, em and br. Do not put one link inside another, or a link inside a summary. For a folded section, put the ID on details itself to arrive at its visible label. An ID inside the fold is also allowed; opening and scrolling follow the reader’s browser.
Write a literal ampersand as &. Supported entities are & < > " ' and terminated numeric entities for valid, nonzero Unicode code points. Invalid control characters and incomplete Unicode characters are rejected.
HTML is limited to 16,000 source code units, 200 nodes and eight levels of nesting.
CSS selectors
bodyh1h2pulollistrongembrdetailssummaryaimg
Use one element selector per rule, such as p { margin: 1rem 0; }, or one standalone class selector, such as .notice { padding: 1rem; }. Element selectors are case-insensitive; class selectors match the exact class name.
For the same property, class rules outweigh element rules. When declarations have equal specificity, the later declaration wins.
Use flat rules and the property values below. Compound selectors such as p.notice or .notice.urgent, comma lists, descendant selectors, IDs, attribute selectors, pseudo-selectors, nested rules, at-rules, comments, functions, URLs, escapes, quotes, !important and the characters < > & are outside this vocabulary.
CSS is limited to 8,000 source code units, 40 rules and 100 declarations in total.
Two notices, one shared style.
Both notice paragraphs share padding and a border. Only the urgent notice gets a coloured background. The plain paragraph does not match either class rule.
HTML example
<p class="notice urgent">The room is open until six.</p>
<p class="notice">Please leave a chair for tomorrow.</p>
<p>The minutes will find their own way home.</p>CSS example
.notice { padding: 1rem; border: 1px solid #1c281b; }
.urgent { background-color: #dfff00; }Two routes through one room.
This complete small page gives a reader two places to go and a way back. All its passages remain in the document; choosing a link does not remove the other words or rewrite the source.
Linked HTML example
<h1 id="start">The afternoon room</h1>
<p>There is time for one more thing.</p>
<ul><li><a class="route" href="#window">Sit by the window.</a></li><li><a class="route" href="#door">Wait by the door.</a></li></ul>
<h2 id="window">By the window</h2>
<p>The light has moved to the next chair.</p>
<p><a href="#start">Choose another place.</a></p>
<h2 id="door">By the door</h2>
<p>Someone is taking a long time to leave.</p>
<p><a href="#start">Return to the room.</a></p>Link CSS example
a { color: #253021; text-decoration: underline; }
.route { font-weight: 700; }CSS properties and values
color- #RGB or #RRGGBB
background-color- #RGB or #RRGGBB
font-family- serif, sans-serif or monospace
font-size- 0.75–8rem or 12–128px
font-weight- normal, bold, 400, 500, 600, 700 or 800
font-style- normal or italic
line-height- 0.9–3, without a unit
text-align- left, center or right
text-transform- none, uppercase, lowercase or capitalize
text-decoration- none, underline or line-through
max-width- 12–90rem or 192–1440px
margin- 1–4 values: 0, auto, 0–6rem or 0–96px
padding- 1–4 values: 0, 0–6rem or 0–96px
border- none, 0, or 0–8px solid/dashed/dotted/double #RGB/#RRGGBB
border-radius- 0, 0–3rem or 0–48px
letter-spacing- 0, −0.1–0.3em or −2–6px
The original starter, for reference
The complete original fictional page, written by One Million Dollar Company. You can replace any or all of it.
HTML
<h1>A Small Company</h1>
<p>We have one department.</p>
<p>It occupies the space between these lines.</p>
<p>Expansion means moving the walls.</p>
<p><em>You may move them.</em></p>CSS
body {
max-width: 32rem;
margin: 2rem auto;
padding: 2rem;
border: 1px solid #253021;
background-color: #f7f5eb;
color: #253021;
font-family: serif;
font-size: 1.25rem;
line-height: 1.6;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}
p {
margin: 1rem 0;
}
em {
font-style: italic;
}