Templates

Standard

We use the standard template on most pages. It works well for those pages that focus on a single topic, like most wiki pages. By default, this page uses a forest background, but it can be changed to a mountain background by adding the class mountains. We intend to add more variations as we release more artwork.

Open demo

Example markup

<body class="thefifthworld">
  <header>
    <nav class="personal">
      <ul>
        <li><a href="standard-loggedin.html">Log in</a></li>
        <li><a href="#">How to Join</a></li>
      </ul>
    </nav>
    <h1 class="logo">
      <a href="https://thefifthworld.com">
        <img src="/img/wordmark.black.svg" alt="The Fifth World" />
      </a>
    </h1>
  </header>
  <main>
    <!-- Content goes here -->
  </main>
  <footer>
    <nav class="site">
      <ul>
        <li class="explore"><a href="#">Explore</a></li>
        <li class="hear"><a href="#">Hear</a></li>
        <li class="see"><a href="#">See</a></li>
        <li class="play"><a href="#">Play</a></li>
      </ul>
    </nav>
    <section class="credits">
      <p><em>The Fifth World</em> exists thanks to the generosity of our supporters, partners, and friends on Patreon. <a href="https://www.patreon.com/thefifthworld">Would you like to join them and become part of our growing community?</a></p>
      <p class="copyleft">
        <span class="icons">
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/cc.svg" alt="Creative Commons" />
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/by.svg" alt="Attribution" />
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/sa.svg" alt="Share-Alike" />
        </span>
        <em>The Fifth World</em> is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0/deed.en_US">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
      </p>
    </section>
  </footer>
</body>

Stack

We use the stack template for a few important pages, like the homepage. It displays a “stack” of short sections.

Open demo

Example markup

<body class="thefifthworld stack">
  <header class="home">
    <nav class="personal">
      <ul>
        <li><a href="standard-loggedin.html">Log in</a></li>
        <li><a href="#">How to Join</a></li>
      </ul>
    </nav>
    <h1 class="logo">
      <a href="../index.html">
        <img src="/img/wordmark.white.svg" alt="The Fifth World" />
      </a>
    </h1>
    <p class="cta"><a href="#" class="cta button">Watch the Trailer</a></p>
  </header>
  <section class="stack">
    <!-- Content goes here -->
  </section>
  <section class="stack highlight wormwood">
    <div>
      <h1 class="novel" data-intro="Intro">Heading</h1>
      <!-- Content goes here -->
    </div>
  </section>
  <footer>
    <nav class="site">
      <ul>
        <li class="explore"><a href="#">Explore</a></li>
        <li class="hear"><a href="#">Hear</a></li>
        <li class="see"><a href="#">See</a></li>
        <li class="play"><a href="#">Play</a></li>
      </ul>
    </nav>
    <section class="credits">
      <p><em>The Fifth World</em> exists thanks to the generosity of our supporters, partners, and friends on Patreon. <a href="https://www.patreon.com/thefifthworld">Would you like to join them and become part of our growing community?</a></p>
      <p class="copyleft">
        <span class="icons">
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/cc.svg" alt="Creative Commons" />
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/by.svg" alt="Attribution" />
          <img src="https://s3.amazonaws.com/thefifthworld/website/images/sa.svg" alt="Share-Alike" />
        </span>
        <em>The Fifth World</em> is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0/deed.en_US">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
      </p>
    </section>
  </footer>
</body>