Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
      <header id="nav-head">
        <img
          id="nav-img"
          src="https://upload.wikimedia.org/wikipedia/en/0/08/Path_of_Exile_Logo.png"
          alt="Path_of_Exile_Logo"
        />
        <h1>PoE League Documentation</h1>
      </header>
      <ul>
        <li><a href="#anarchy_league" class="nav-link">Anarchy League</a></li>
        <li><a href="#onslaught_league" class="nav-link">Onslaught League</a></li>
        <li><a href="#domination_league" class="nav-link">Domination League</a></li>
        <li><a href="#nemesis_league" class="nav-link">Nemesis League</a></li>
        <li><a href="#ambush_league" class="nav-link">Ambush League</a></li>
        <li><a href="#invasion_league" class="nav-link">Invasion League</a></li>
      </ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="anarchy_league">
        <header class="main-head" id="Anarchy_League">
          <h1>Anarchy League</h1>
        </header>
        <p class="release-end-date">07/06/2013 - 07/10-2013</p>
        <div class="league-mod">
          <h3><i>League modifier</i></h3>
          <h4><i>Rogue Exiles Roam Wraeclast</i></h4>
        </div>
        <p>
          The <code>Anarchy</code> challenge league was a four month softcore
          league. This league introduced rogue exiles. <br />
          It was announced on May 31, 2013, along with the Onslaught league, At
          the end of the league all characters and stashes were moved to
          Standard league.
        </p>
        <h2>Items</h2>
        <p>
          Anarchy had six exclusive base item types (all shared with Onslaught)
          and four exclusive uniques (two of which were shared with Onslaught).
        </p>
        <ul class="main-list">
          <li>Eternal Orb Imprints</li>
          <li>Agate Amulet</li>
          <li>Citrine Amulet</li>
          <li>Turquoise Amulet</li>
          <li>Diamond Ring</li>
          <li>Moonstone Ring</li>
          <li>Amethyst Ring</li>
        </ul>

        <p>The following uniques were shared between Onslaught and Anarchy</p>
        <ul class="main-list">
          <li>Shavronne's Revelation</li>
          <li>Voll's Devotion</li>
        </ul>
        <p>Those two uniques were specific to Anarchy</p>
        <ul class="main-list">
          <li>Daresso's Salute</li>
          <li>Gifts from Above</li>
        </ul>
        <hr />
      </section>
      <section class="main-section" id="onslaught_league">
        <header class="main-head" id="Onslaught_League">
          <h1>Onslaught League</h1>
        </header>
        <p class="release-end-date">07/06/2013 - 07/10-2013</p>
        <div class="league-mod">
          <h3><i>League Modifier</i></h3>
          <h4><i>20% increased Monster Movement Speed</i></h4>
          <h4><i>20% increased Monster Attack Speed</i></h4>
          <h4><i>20% increased Monster Cast Speed</i></h4>
        </div>
        <p>
          The <code>Onslaught</code> challenge league was a four month hardcore
          league that was aimed at players who are looking for more challenging
          gameplay. In this league the attack, cast and movement speed of
          monsters was increased.
        </p>
        <h2>Items</h2>
        <p>
          Onslaught had six exclusive base item types (all shared with Anarchy)
          and four exclusive uniques (two of which are shared with Anarchy).
        </p>
        <ul class="main-list">
          <li>Eternal Orb Imprints</li>
          <li>Agate Amulet</li>
          <li>Citrine Amulet</li>
          <li>Turquoise Amulet</li>
          <li>Diamond Ring</li>
          <li>Moonstone Ring</li>
          <li>Amethyst Ring</li>
        </ul>
        <p>Those two uniques were specific to Onslaught</p>
        <ul class="main-list">
          <li>Victario's Acuity</li>
          <li>Death Rush</li>
        </ul>
        <hr />
      </section>
      <section class="main-section" id="domination_league">
        <header class="main-head" id="Domination_League">
          <h1>Domination league</h1>
        </header>
        <p class="release-end-date">23/10/2013 - 23/02/2014</p>
        <div class="league-mod">
          <h3><i>League Modifier</i></h3>
          <h4><i>Powerful shrines can affect both monsters and you</i></h4>
        </div>
        <p>
          It started, along with the Nemesis league, on October 23, 2013 and
          lasted until February 23, 2014. At the end of the league all
          characters and stashes were moved to Standard league. Characters that
          died during the four months respawned in Domination.
        </p>
        <h2>Items</h2>
        <p>
          <code>Domination</code> had seven exclusive base item types (all
          shared with Nemesis) and seven exclusive uniques (six of which were
          shared with Nemesis). The base type Prismatic Ring could not drop, but
          could be obtained only by using a new vendor recipe.
        </p>
        <ul class="main-list">
          <li>Jade Flask</li>
          <li>Quartz Flask</li>
          <li>Sactified Life Flask</li>
          <li>Sanctified Mana Flask</li>
          <li>Two-Stone Ring (Fire and Cold Resistance)</li>
          <li>Two-Stone Ring (Cold and Lightning Resistance)</li>
          <li>Two-Stone Ring (Fire and Lightning Resistance)</li>
        </ul>
        <p>
          The following uniques were shared between Domination and Nemesis. Four
          unique rings and two unique flasks
        </p>
        <ul class="main-list">
          <li>Berek's Grip</li>
          <li>Berek's Pass</li>
          <li>Berek's Respite</li>
          <li>The Taming</li>
          <li>Blood of the Karui</li>
          <li>Lavianga's Spirit</li>
        </ul>
        <p>This unique was specific to Domination only</p>
        <ul class="main-list">
          <li>The Gull</li>
        </ul>
        <hr />
      </section>
      <section class="main-section" id="nemesis_league">
        <header class="main-head" id="Nemesis_League">
          <h1>Nemesis League</h1>
        </header>
        <p class="release-end-date">23/10/2013 - 23/02/2014</p>
        <div class="league-mod">
          <h3><i>League Modifier</i></h3>
          <h4><i>Rare monsters each have a Nemesis modifier</i></h4>
        </div>
        <p>
          The <code>Nemesis</code> league was a four month challenge league
          aimed at players who are looking for more challenging gameplay. In
          this league, every rare monster had one powerful Nemesis modifier,
          making them even more deadly. At the end of the league surviving
          characters and stashes were moved to the Hardcore league. As with
          regular Hardcore, characters that die during the four months were
          moved to the Standard league immediately.
        </p>
        <h2>Items</h2>
        <p>
          Nemesis had seven exclusive base item types (all shared with
          Domination) and seven exclusive uniques (six of which were shared with
          Domination). The base type Prismatic Ring could not drop, but could be
          obtained only by using a new vendor recipe.
        </p>
        <ul class="main-list">
          <li>Jade Flask</li>
          <li>Quartz Flask</li>
          <li>Sactified Life Flask</li>
          <li>Sanctified Mana Flask</li>
          <li>Two-Stone Ring (Fire and Cold Resistance)</li>
          <li>Two-Stone Ring (Cold and Lightning Resistance)</li>
          <li>Two-Stone Ring (Fire and Lightning Resistance)</li>
        </ul>
        <p>
          The following uniques were shared between Domination and Nemesis. Four
          unique rings and two unique flasks
        </p>
        <ul class="main-list">
          <li>Berek's Grip</li>
          <li>Berek's Pass</li>
          <li>Berek's Respite</li>
          <li>The Taming</li>
          <li>Blood of the Karui</li>
          <li>Lavianga's Spirit</li>
        </ul>
        <p>This unique was specific to Nemesis only</p>
        <ul class="main-list">
          <li>Headhunter</li>
        </ul>
        <hr />
      </section>
      <section class="main-section" id="ambush_league">
        <header class="main-head" id="Ambush_League">
          <h1>Ambush League</h1>
        </header>
        <p class="release-end-date">05/03/2014 - 05/07/2014</p>
        <div class="league-mod">
          <h3><i>League Modifier</i></h3>
          <h4><i>Strongboxes are guarded by ambushing monsters</i></h4>
        </div>
        <p>
          The <code>Ambush</code> league was a four month softcore league. This
          league introduced Strongboxes.
        </p>
        <p>
          It started along with the Invasion league. At the end of the league
          all characters and stashes were moved to Standard league.
        </p>
        <h2>Items</h2>
        <p>
          Ambush had nine exclusive base item types (all shared with Invasion)
          and three exclusive uniques (two of which were shared with Invasion).
        </p>
        <ul class="main-list">
          <li>Two-Point Arrow Quiver</li>
          <li>Serrated Arrow Quiver</li>
          <li>Unset Ring</li>
          <li>Sharktooth Arrow Quiver</li>
          <li>Blunt Arrow Quiver</li>
          <li>Fire Arrow Quiver</li>
          <li>Broadhead Arrow Quiver</li>
          <li>Penetrating Arrow Quiver</li>
          <li>Spike-Point Arrow Quiver</li>
        </ul>
        <p>The following uniques were shared between Invasion and Ambush.</p>
        <ul class="main-list">
          <li>Vaal Caress</li>
          <li>Voideye</li>
        </ul>
        <p>
          This unique was specific to Ambush, but was added as a drop to the
          core game at the league's end.
        </p>
        <ul class="main-list">
          <li>Drillneck</li>
        </ul>
        <hr />
      </section>
      <section class="main-section" id="invasion_league">
        <header class="main-head" id="Invasion_League">
          <h1>Invasion League</h1>
        </header>
        <div class="league-mod">
          <p class="release-end-date">05/03/2014 - 05/07/2014</p>
          <h3><i>League Modifier</i></h3>
          <h4><i>Monsters and bosses invade from elsewhere in Wraeclast</i></h4>
        </div>
        <p>
          The <code>Invasion</code> league was a four month league aimed at
          players who were looking for more challenging gameplay. In this league
          all areas had been invaded by monsters from all over Wraeclast. A
          unique Invasion Boss from an invading monster type was also lurking in
          each level. Higher difficulty levels contained expanded monster
          variety and invading bosses with more abilities.
        </p>
        <br />
        <p>
          At the end of the league all surviving characters and stashes were
          moved to the Hardcore league. Characters that died during the four
          months were moved to Standard league immediately.
        </p>
        <h2>Items</h2>
        <ul class="main-list">
          <li>Two-Point Arrow Quiver</li>
          <li>Serrated Arrow Quiver</li>
          <li>Unset Ring</li>
          <li>Sharktooth Arrow Quiver</li>
          <li>Blunt Arrow Quiver</li>
          <li>Fire Arrow Quiver</li>
          <li>Broadhead Arrow Quiver</li>
          <li>Penetrating Arrow Quiver</li>
          <li>Spike-Point Arrow Quiver</li>
        </ul>
        <p>The following uniques were shared between Invasion and Ambush.</p>
        <ul class="main-list">
          <li>Vaal Caress</li>
          <li>Voideye</li>
        </ul>
        <p>
          This unique was specific to Invasion, but was added as a drop to the
          core game at the league's end.
        </p>
        <ul class="main-list">
          <li>Drillneck</li>
        </ul>
      </section>
    </main>
              
            
!

CSS

              
                *,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  height: 100%;
}

body {
  color: rgb(255, 255, 255);
  display: flex;
  height: 100%;
  font-family: "Merriweather", serif;
  background-color: rgb(27, 26, 26);
}

/* ===== NAV-BAR START ===== */

#navbar {
  position: fixed;
  background: linear-gradient(
    135deg,
    rgba(84, 27, 7, 1) 0%,
    rgba(133, 42, 18, 1) 19%,
    rgba(120, 56, 25, 1) 39%,
    rgba(173, 107, 18, 1) 58%,
    rgba(135, 56, 3, 1) 77%,
    rgba(222, 150, 75, 1) 100%
  );
  color: rgb(203, 231, 255);
  width: 18.75rem;
  height: 100%;
  overflow: auto;
  text-align: center;
}

#nav-img {
  width: 18.75rem;
  padding-top: 1.3rem;
}

#navbar h1 {
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.45);
  font-size: 1.75rem;
  margin: 0;
  padding-top: 1.2rem;
  padding-bottom: 3rem;
}

#navbar > ul {
  font-size: 1.25rem;
  list-style-type: none;
  font-weight: 600;
}

.nav-link {
  border-bottom: 2px solid rgb(203, 231, 255);
  display: block;
  color: inherit;
  margin-bottom: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.25);
}

/* ===== NAV-BAR END ===== */

/* ===== MAIN START ===== */

.main-section {
  display: flex;
  flex-direction: column;
  padding: 5rem 25rem;
}

@media (max-width: 1450px) {
  .main-section {
    padding: 5rem 5rem 5rem 25rem;
  }
}

.main-head {
  font-size: 2.5rem;
  /* padding-bottom: 1.5rem; */
}

.league-mod {
  color: darkgoldenrod;
  padding-bottom: 3.5rem;
}

.league-mod h4 {
  color: rgb(104, 104, 255);
  padding-top: 0.6rem;
}

.release-end-date {
  font-size: 1.5rem;
  font-style: italic;
  padding-bottom: 1.5rem;
}

.main-section p {
  line-height: 2.5rem;
  font-size: 1.15rem;
}

.main-section h2 {
  font-size: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 0.8rem;
  text-decoration: underline;
}

.main-list {
  padding: 2rem 4rem;
}

.main-list > li {
  color: rgb(184, 231, 253);
  font-size: 1.1rem;
  list-style-type: square;
  padding: 1rem 0;
}

code {
  font-size: 1.5rem;
}
/* ===== MAIN END ===== */

              
            
!

JS

              
                // To do -> Mobile
              
            
!
999px

Console