The element below will hide after 5 seconds automatically. If there is no element, refresh the page because then 5 seconds has probably already passed.

It's not hard to create a parallax scroll image with CSS. Just add background-attachment: fixed; to it.

Scroll down to see the effect.

Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

The trick is to use a pseudo element that spans all the way out.

Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

HTML

<figure>
  <img src="http://csspoo.com/assets/images/remixicons/link.svg">
</figure>

CSS

figure {
  display: inline-block;
  padding: 1rem;
  background: #eee;
}

figure img {
  filter: invert(1);
  vertical-align: top;
}

figure:hover {
  background: #000;
}

figure:hover img {
  filter: invert(0);
}

The list numbers are automatically generated.

<ol>
  <li>Primary 1
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
  <li>Primary 2
    <ol>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ol>
  </li>
</ol>

ol {
  counter-reset: section;
  list-style-type: none;
  padding: 0;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  color: #aaa;
  width: 2rem;
  display: inline-block;
}