classless-css/screenshot-page.html

<!DOCTYPE html>
<html>

<head>
  <title>Lorem ipsum dolor sit amet</title>
  
  <!-- <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" type="text/css"> -->
  <style>
    %CSS_HERE%
  </style>
</head>

<body>
  <!--
    This page is derived from the water.css demo by Kognise.
    For the license see
    https://github.com/kognise/water.css/blob/master/LICENSE.md
  -->

  <main>
    <section id="content" container class="container">
      <article>
        <h1>Lorem ipsum dolor sit amet</h1>
        <h2>Element demos</h2>
        <p>
          This is supposed to be a demo page so we need more elements!
        </p>

        <h3>Form elements</h3>
        <form>
          <div>
            <label for='email'>Email</label>
            <input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
          </div>

          <div>
            <label for='id'>User id (read only)</label>
            <input readonly name='id' id='id' value='04D6H89Z'>
          </div>

          <div>
            <label for='disabled'>Random disabled input</label>
            <input disabled name='disabled' id='disabled' placeholder='Because why not?'>
          </div>

          <div>
            <label for='about'>About me</label>
            <textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
          </div>

          <div>
            <input type='checkbox' name='remember' id='remember' checked>
            <label for='remember'>Remember me</label>
          </div>

          <input type='submit'>
        </form>

        <h3>Code</h3>
        <p>
          Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
          Did you know, <code>alert(1)</code> can show an alert in JavaScript!
        </p>
        <pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>

        <h3>Other</h3>
        <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
        <img src='http://via.placeholder.com/408x287' alt='Example image'>
        <hr>

        <p>And here's a nicely marked up table!</p>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Quantity</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Godzilla</td>
              <td>2</td>
              <td>$299.99</td>
            </tr>
            <tr>
              <td>Mozilla</td>
              <td>10</td>
              <td>$100,000.00</td>
            </tr>
            <tr>
              <td>Quesadilla</td>
              <td>1</td>
              <td>$2.22</td>
            </tr>
          </tbody>
        </table>

        <h3>Typography</h3>
        <blockquote>
          This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
        </blockquote>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
        </p>
        <ul>
          <li>Unordered list item 1</li>
          <li>Unordered list item 2</li>
          <li>Unordered list item 3</li>
        </ul>
        <ol>
          <li>Ordered list item 1</li>
          <li>Ordered list item 2</li>
          <li>Ordered list item 3</li>
        </ol>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </article>
    </section>
  </main>
</body>
</html>
feat: add screenshots 6 years ago			`<!DOCTYPE html>`
			`<html>`

			`<head>`
			`<title>Lorem ipsum dolor sit amet</title>`

			`<!-- <link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" type="text/css"> -->`
generate-item.tcl: replace with gen-screenshot.ts 1 year ago			`<style>`
			`%CSS_HERE%`
			`</style>`
feat: add screenshots 6 years ago			`</head>`

			`<body>`
			`<!--`
			`This page is derived from the water.css demo by Kognise.`
			`For the license see`
			`https://github.com/kognise/water.css/blob/master/LICENSE.md`
			`-->`

			`<main>`
SASS-ZERO: add Closes #21. 1 year ago			`<section id="content" container class="container">`
feat(tacit): add tacit 6 years ago			`<article>`
			`<h1>Lorem ipsum dolor sit amet</h1>`
			`<h2>Element demos</h2>`
			`<p>`
			`This is supposed to be a demo page so we need more elements!`
			`</p>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<h3>Form elements</h3>`
			`<form>`
			`<div>`
			`<label for='email'>Email</label>`
			`<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>`
			`</div>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<div>`
			`<label for='id'>User id (read only)</label>`
			`<input readonly name='id' id='id' value='04D6H89Z'>`
			`</div>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<div>`
			`<label for='disabled'>Random disabled input</label>`
			`<input disabled name='disabled' id='disabled' placeholder='Because why not?'>`
			`</div>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<div>`
			`<label for='about'>About me</label>`
			`<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>`
			`</div>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<div>`
			`<input type='checkbox' name='remember' id='remember' checked>`
			`<label for='remember'>Remember me</label>`
			`</div>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<input type='submit'>`
			`</form>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<h3>Code</h3>`
			`<p>`
			`Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.`
			`Did you know, <code>alert(1)</code> can show an alert in JavaScript!`
			`</p>`
			`<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<h3>Other</h3>`
			`<p>Here's a horizontal rule and image because I don't know where else to put them.</p>`
			`<img src='http://via.placeholder.com/408x287' alt='Example image'>`
			`<hr>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<p>And here's a nicely marked up table!</p>`
			`<table>`
			`<thead>`
			`<tr>`
			`<th>Name</th>`
			`<th>Quantity</th>`
			`<th>Price</th>`
			`</tr>`
			`</thead>`
			`<tbody>`
			`<tr>`
			`<td>Godzilla</td>`
			`<td>2</td>`
			`<td>$299.99</td>`
			`</tr>`
			`<tr>`
			`<td>Mozilla</td>`
			`<td>10</td>`
			`<td>$100,000.00</td>`
			`</tr>`
			`<tr>`
			`<td>Quesadilla</td>`
			`<td>1</td>`
			`<td>$2.22</td>`
			`</tr>`
			`</tbody>`
			`</table>`
feat: add screenshots 6 years ago
feat(tacit): add tacit 6 years ago			`<h3>Typography</h3>`
			`<blockquote>`
			`This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.`
			`</blockquote>`
			`<p>`
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
			`<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.`
			`</p>`
			`<ul>`
			`<li>Unordered list item 1</li>`
			`<li>Unordered list item 2</li>`
			`<li>Unordered list item 3</li>`
			`</ul>`
			`<ol>`
			`<li>Ordered list item 1</li>`
			`<li>Ordered list item 2</li>`
			`<li>Ordered list item 3</li>`
			`</ol>`
			`<h1>Heading 1</h1>`
			`<h2>Heading 2</h2>`
			`<h3>Heading 3</h3>`
			`<h4>Heading 4</h4>`
			`<h5>Heading 5</h5>`
			`<h6>Heading 6</h6>`
			`</article>`
feat: add screenshots 6 years ago			`</section>`
			`</main>`
			`</body>`
			`</html>`