<html>
<head>
  <title>Helpers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.css"/>
</head>
<body>
  <div class="p4">
    <p><a href="https://www.google.com">Link</a></p>
    <p><a class="pseudo" href="#pseudo">Pseudo link</a></p>
    <p class="unselectable">Unselectable</p>
    <p class="uppercase">Uppercase text</p>
    <p class="lowercase">Lowercase text</p>
    <p class="nowrap">Nowrap text construction</p>
    <p class="hyphens">Auto hyphens, if browser support</p>
    <p>Video wrapped with class .video, for proportional resizing:</p>
    <div class="ratio16x9 max600"><iframe width="560" height="315" src="https://www.youtube.com/embed/z-gcqNKMK-E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <p class="breakWord">
      Wordwithmanycharswhichcanbreakonsmallscreendevicebecauseithasclassbreakword :)
    </p>
    <p class="visuallyHidden">Visually hidden block</p>
    <p class="hidden">Hidden block</p>
    <p class="hiddenNext">This block visible</p>
    <p>This block hidden</p>
    <p>Table with horizontal scrolling</p>
    <div class="tableResponsive">
      <table>
        <tr>
          <td>Column 1</td>
          <td>Column 2</td>
          <td>Column 3</td>
          <td>Column 4</td>
          <td>Column 5</td>
          <td>Column 6</td>
          <td>Column 7</td>
          <td>Column 8</td>
          <td>Column 9</td>
          <td>Column 10</td>
          <td>Column 11</td>
          <td>Column 12</td>
          <td>Column 13</td>
          <td>Column 14</td>
          <td>Column 15</td>
          <td>Column 16</td>
          <td>Column 17</td>
          <td>Column 18</td>
          <td>Column 19</td>
          <td>Column 20</td>
        </tr>
      </table>
    </div>
    <p>
      Sync hovered links:
      <a class="syncHover" href="#link">Link</a>
      and his <a class="syncHover" href="#link">Copy</a>
    </p>
    <p class="isAppeared">
      Block, which must appear.
      <span class="appeared">Appear!</span>
      <span class="visible">And visible!</span>
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.js"></script>
  <script>auto.init()</script>
</body>
</html>
body {
  padding: 20px;
}
.isAppeared span {
  display: none;
}
.isAppeared.appeared span.appeared {
  display: inline;
}
.isAppeared.visible span.visible {
  display: inline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.