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" 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">
            <label for="remember">Remember me</label>
          </div>

          <div>
            <label>
              <input type="checkbox" name="in-label" id="in-label" checked>
              Is this checkbox inside a <code>&lt;label&gt;</code> element?
            </label>
          </div>

          <div>
            <fieldset>
              <legend>Choose a cardinal direction:</legend>

              <div>
                <input type="radio" id="north" name="direction" value="north" checked>
                <label for="north">North</label>
              </div>

              <div>
                <input type="radio" id="east" name="direction" value="east">
                <label for="east">East</label>
              </div>

              <div>
                <input type="radio" id="south" name="direction" value="south">
                <label for="south">South</label>
              </div>

              <div>
                <input type="radio" id="west" name="direction" value="west">
                <label for="west">West</label>
              </div>

            </fieldset>
          </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>