cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div class="blur"></div>
<h1 class="page-title">Item Panel</h1>
<div class="item-grid">
  <div class="item item-isotope">
    <h5>Plutonium</h5>
    <h2>Pu</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/plutonium.png"></div>
  </div>
  <div class="item item-isotope">
    <h5>Thamium9</h5>
    <h2>Th</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/thamium9.png"></div>
  </div>
  <div class="item item-isotope">
    <h5>Carbon</h5>
    <h2>C</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/carbon.png"></div>
  </div>
  <div class="item item-oxide">
    <h5>Titanium</h5>
    <h2>Ti</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/titanium.png"></div>
  </div>
  <div class="item item-neutral">
    <h5>Emeril</h5>
    <h2>Em</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/emeril.png"></div>
  </div>
  <div class="item item-silicate">
    <h5>Platinum</h5>
    <h2>Pt</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/platinum.png"></div>
  </div>
  <div class="item item-precious">
    <h5>Calium</h5>
    <h2>Ca</h2>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/calium.png"></div>
  </div>
  <div class="item item-trade">
    <h5>Gravitino Ball</h5>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/gravitino.png"></div>
  </div>
  <div class="item item-tech">
    <h5>Dynamic Resonator</h5>
    <div class="item-img"><img src="http://axtn.io/codepen/nms/Product.dynamicres.png"></div>
  </div>
  <div class="item empty"></div>
  <div class="item empty"></div>
  <div class="item empty"></div>
</div>


<!-- PANELS -->

<div class="panel panel-tech dynamicresonator">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/Product.dynamicres.png">
    <h1>Dynamic Resonator</h1>
    <h4>Technology component</h4>
  </div>
  <div class="description">
    <p>Electromagnetic frequency oscillator.</p>
    <p>A device necessary in the construction of many of the technologies that aid in the exploration of the galaxy.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/Product.dynamicres.png">
      <h4>Dynamic Resonator</h4>
      <h5>Craft products in inventory slots</h5>
      <div class="inv-bar">
        <h1>1 of 1</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>27,500 Units</span></h4>
      <p>(27,500.0 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-isotope plutonium">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/plutonium.png">
    <h1>Plutonium</h1>
    <h4>Isotope Element - Rare</h4>
  </div>
  <div class="description">
    <p>Extremely powerful element that can be used to charge weaponry, mining equipment and exosuit power packs.</p>
    <p>A vital ingredient in the creation of many advanced technologies, components and products.</p>
    <p>Found in red crystalline structures, and often within planetary cave networks.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/plutonium.png">
      <h4>Plutonium</h4>
      <h5>Gather elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>10,312 Units</span></h4>
      <p>(41.3 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-isotope thamium9">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/thamium9.png">
    <h1>Thamium9</h1>
    <h4>Isotope Element - Uncommon</h4>
  </div>
  <div class="description">
    <p>Powerful element used to charge mining equipment, weaponry and life support systems. Also used in the creation of products and experimental tech devices.</p>
    <p>Found in red flowering vegetation and planetary flora.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/thamium9.png">
      <h4>Thamium9</h4>
      <h5>Gather elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>5,150 Units</span></h4>
      <p>(20.6 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-isotope carbon">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/carbon.png">
    <h1>Carbon</h1>
    <h4>Isotope Element - Common</h4>
  </div>
  <div class="description">
    <p>Important and abundant element used to recharge weaponry, mining equipment and exosuit life support.</p>
    <p>Found in planetary trees, plants and other vegetation.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/carbon.png">
      <h4>Carbon</h4>
      <h5>Gather elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>1,725 Units</span></h4>
      <p>(6.9 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-oxide titanium">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/titanium.png">
    <h1>Titanium</h1>
    <h4>Oxide Element - Rare</h4>
  </div>
  <div class="description">
    <p>Extremely powerful oxide that can be used to recharge defensive technologies.</p>
    <p>A vital ingredient in the creation of many advanced devices, products, and components.</p>
    <p>Found in yellow crystal clusters during planetary exploration.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/titanium.png">
      <h4>Titanium</h4>
      <h5>Gather elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>15,475 Units</span></h4>
      <p>(61.9 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-neutral emeril">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/emeril.png">
    <h1>Emeril</h1>
    <h4>Neutral Element - Rare</h4>
  </div>
  <div class="description">
    <p>A silver-black metal that emits low levels of radiation.</p>
    <p>A highly sought after element that's used in the construction of planetary outposts.</p>
    <p>Can be combined with other elements to create valuable alloys if recipe is available.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/emeril.png">
      <h4>Emeril</h4>
      <h5>Gather Elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>68,750 Units</span></h4>
      <p>(275 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-silicate platinum">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/platinum.png">
    <h1>Platinum</h1>
    <h4>Silicate Element - Uncommon</h4>
  </div>
  <div class="description">
    <p>Powerful element used to create valuable ship and exosuit components. A vital ingredient in many technological blueprints.</p>
    <p>Found in blue vegetation during planetary exploration.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/platinum.png">
      <h4>Platinum</h4>
      <h5>Gather Elements</h5>
      <div class="inv-bar">
        <h1>250 of 250</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>13,750 Units</span></h4>
      <p>(55 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-precious calium">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/calium.png">
    <h1>Calium</h1>
    <h4>Precious Element - Very Rare</h4>
  </div>
  <div class="description">
    <p>Rare substance found in many blob-like species throughout the Galaxy.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/calium.png">
      <h4>Calium</h4>
      <h5>Gather Elements</h5>
      <div class="inv-bar">
        <h1>100 of 100</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>28,880 Units</span></h4>
      <p>(288.8 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<div class="panel panel-trade gravitinoball">
  <div class="bar">
    <img src="http://axtn.io/codepen/nms/gravitino.png">
    <h1>Gravitino Ball</h1>
    <h4>Trade commodity</h4>
  </div>
  <div class="description">
    <p>Supersymmetric particle cluster.</p>
    <p>Extremely rare and valuable. A product of divergent super-gravitational forces.</p>
    <div class="quantity">
      <img src="http://axtn.io/codepen/nms/gravitino.png">
      <h4>Gravitino Ball</h4>
      <h5>Craft products in inventory slots</h5>
      <div class="inv-bar">
        <h1>100 of 100</h1></div>
    </div>
    <div class="price">
      <h4>Total Value <span>2,750,000 Units</span></h4>
      <p>(27,500.0 Units each)</p>
      <div class="u">
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
        <div>U</div>
      </div>
    </div>
    <hr>
  </div>
  <div class="legend">
    <div>
      <div>a</div>
      <h3>Discard</h3>
      <p>Destroy unwanted resources</p>
    </div>
    <div>
      <div>x</div>
      <h3>Transfer Items</h3>
      <p>Teleport elements carried in your exosuit inventory to your starship</p>
    </div>
    <div>
      <div>o</div>
      <h3>Move and Stack</h3>
      <p>Move and Stack Inventory Items</p>
    </div>
  </div>
</div>

<a href="https://codepen.io/axtn" target="_blank"><img class="axtn" src="http://axtn.io/codepen/logo.png"></a>
            
          
!
            
              *,
*:before,
*:after {
  box-sizing: border-box;
}
@font-face {
  font-family: "geonms";
  src: url("https://cors-anywhere.herokuapp.com/http://axtn.io/codepen/nms/geonms-webfont.ttf");
}

$font-stack: Helvetica, sans-serif;
$font-stack-nms: "geonms", Helvetica, sans-serif;

$dynamic-1: #f4aa1f;
$dynamic-2: #916622;

$isotope-1: #ba3935;
$isotope-2: #732d2a;
$isotope-3: #82423f;

$oxide-1: #ffc356;
$oxide-2: #957144;
$oxide-3: #a07f55;

$silicate-1: #0149a3;
$silicate-2: #1e375e;
$silicate-3: #344a6f;

$neutral-1: #5fcc93;
$neutral-2: #427058;
$neutral-3: #577f6b;

$precious-1: #6f187e;
$precious-2: #4e1b4e;
$precious-3: #613360;

$gravitino-1: #007951;
$gravitino-2: #1f563f;
$gravitino-3: #1e845c;

$panel: #2e2224;
$panel-text: #9a9a9a;

%hide-after {
  &:after {
    display: none;
  }
}

@mixin panel-color($c1, $c2, $c3, $c4) {
  border-color: $c1;
  .bar {
    background: $c2;
    border-color: darken($c2, 7%);
    img {
      background: $c3;
    }
  }
  .quantity {
    img {
      background-color: $c4;
    }
  }
}
@mixin item-color($c1) {
  .item-img {
    background: $c1;
  }
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADb0lEQVRYhcXZQYhVdRTH8c/c0QbLzAmkKVAYF7lqNrZQ2ojMInCiWdQEOrWKIoKkDFJwkbQwUIqMFkErSUNrYTnMKsiN5KKCbFULB2rRhIshs0KnRhf/80bnzf3fe9/4Xn3h8Xj/c+45v/d/9/+//3Ne3/T0tBVQYATb4n0YD+DusP+F3zCDi7gQ7wudJlrVof8QnsOTeLDC7y6sxxY8HmO/4nMcx2zThH0NZ3AQr+IZrG4aPMM8TuFdzNU5Fw0C7sKXmHTn4kSMyYg5VudcJbAfb+F9aQa7zSCORY7+nFNO4Bp8iD3d17WMPZFrTZmxbJH04z3sbBD8Bn7CN9KKvRLj66SV/SgeRl9NnJ2R8yX8WyfwEEZrAv6Bj6Wb/eca303S4prEvRV+o5H74O2D7T/xGHbXJPwUO3CkgTjhcySuOV3juxtP5AQOSt8gxzW8gjc02B5KmMP+iHGtwu8Q7i8T+Jr8ar2O5zG1AmHtTEWs6xn7+tCyROBD0n2S43Wc74K4FucjZo6J0LQocFL+sfeZ7sxcO1MRu4xVoUkRr/GM4xUc7rq0Wxx2a2tqZxxF61QylHE6YWULoilz0nZVxhBGCmzPONyQ9rlecypylbGtwCMZ44+a7XN3yi+Rq4yRApszxm97o6eU7zLjmwtsyBhneiSmjEuZ8Q0F1maMv/dITCe51jY5sP6vFLiasd33H+rI5bpa4HLGONwjMZ3kulzI36BbeySmk1yXCvyQMW7Bxt7oWcLGyFXGxUIqqsvoU33C6RYT8iXBhQLfyxfSk3pT0bUYxLMZ26yYwQWcyTitw4EeCGuxP3KUcQYLrX3wuFTxl/GUVLx3m114OmObD02LB9ZZ1SeXo3isa9JSrKMV9tOhaUlNUtUrGcBHGrQqGjAWsQYy9jm80/pQtBnerAg8ILUq3rayhTMY1x6rEEeq6hYnqv1ZfBYnaxJN4Bz2SUV5HZvC91xcW8Un+OL2gbL222p8oL67QH3rY6u0Cde1Pkjdrpe1LdaySm4ee0PkjpqgfSEg9yRoyleRc9lOkjtu/Y0X1P/c3eAkXoycy6g6D/4jNXL26k1lNxexD0auUpocWM9K9+MJ+c28E+Yj1mjErqRpj7pFq4k+Ll9L55iVHl89aaK30yr4t0tl67Ak+J6w/xkiZqTj3NdW+DfETSswsEsEfaNdAAAAAElFTkSuQmCC"),
    auto;
  * {
    font-family: $font-stack;
    font-weight: 400;
  }
}
h1,
h3 {
  font-family: $font-stack-nms;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
}
h1 {
  font-size: 1.4em;
  letter-spacing: 0.2em;
}
h3 {
  letter-spacing: 0.18em;
}
h4 {
  color: white;
}
.page-title {
  position: absolute;
  top: 0;
  left: 80px;
  margin-top: 40px;
  margin-left: 20px;
}
.panel {
  opacity: 0;
  display: none;
  width: 650px;
  background: $panel;
  border-top: 5px solid;
  position: relative;
  color: $panel-text;
  letter-spacing: 0.1em;
  opacity: 0.95;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  //Add new colors for elements below (1/2)
  &.panel-isotope {
    @include panel-color($isotope-1, $isotope-2, $isotope-3, $isotope-1);
  }
  &.panel-oxide {
    @include panel-color($oxide-1, $oxide-2, $oxide-3, $oxide-1);
  }
  &.panel-silicate {
    @include panel-color($silicate-1, $silicate-2, $silicate-3, $silicate-1);
  }
  &.panel-neutral {
    @include panel-color($neutral-1, $neutral-2, $neutral-3, $neutral-1);
  }
  &.panel-precious {
    @include panel-color($precious-1, $precious-2, $precious-3, $precious-1);
  }
  &.panel-trade {
    @include panel-color($gravitino-1, $gravitino-2, $gravitino-1, $gravitino-1);
  }
  &.panel-tech {
    @include panel-color($dynamic-1, $dynamic-2, $dynamic-1, $dynamic-1);
  }
}
.bar {
  color: #fff;
  width: 100%;
  height: 63px;
  position: relative;
  padding-top: 7px;
  border-top: 3px solid;
  h1,
  h4 {
    margin: 0 0 0 70px;
  }
  h4 {
    font-weight: 300;
    margin-top: 3px;
  }
  img {
    position: absolute;
    top: 0;
    height: 58px;
  }
  &:after {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: 5px;
    right: 7px;
  }
}

.description {
  padding: 10px 35px;
  hr {
    border-color: $panel-text;
  }
}

.quantity {
  position: relative;
  padding: 0 55px;
  width: 100%;
  margin-left: 24px;
  h4,
  h5 {
    margin: 0;
  }
  img {
    height: 38px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .inv-bar {
    margin-top: 2px;
    margin-left: -5px;
    position: relative;
    width: 100%;
    height: 3px;
    background-color: white;
    z-index: 1;
    h1 {
      font-family: $font-stack;
      font-weight: 400;
      position: absolute;
      right: 0;
      bottom: -10px;
      text-transform: none;
    }
  }
}
.price {
  position: relative;
  margin-left: 12px;
  h4 {
    margin-bottom: 0;
    span {
      color: $dynamic-1;
    }
  }
  p {
    margin-top: 0;
  }
  .u {
    position: absolute;
    top: -4px;
    right: 40px;
    color: white;
    font-size: 1.5em;
    margin: 0;
    div {
      position: relative;
      display: inline-block;
      font-weight: 300;
      border: 2px solid $panel-text;
      border-radius: 50%;
      width: 1.45em;
      text-align: center;
      padding-left: 1px;
      padding-top: 1px;
      &:before,
      &:after {
        content: "";
        width: 20px;
        height: 2px;
        background-color: white;
        position: absolute;
        left: 5px;
      }
      &:before {
        top: 10px;
      }
      &:after {
        top: 16px;
      }
      &:not(:first-child) {
        margin-left: -7px;
      }
    }
  }
}
.legend {
  margin-left: 23px;
  :first-child h3 {
    margin-top: 0;
  }
  h3 {
    display: inline;
    font-family: $font-stack-nms;
    text-transform: uppercase;
    margin-bottom: 0;
  }
  p {
    margin-top: 0;
    margin-bottom: 20px;
  }
  div > div {
    display: inline-block;
    color: white;
    font-weight: 400;
    border: 2px solid white;
    border-radius: 4px;
    text-align: center;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 5px 2px 7px;
    margin-bottom: 2px;
  }
  > :not(:first-child) {
    margin-top: 30px;
  }
}

.item-grid {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  width: 484px;
  .item {
    position: relative;
    background: white;
    width: 112px;
    height: 112px;
    padding: 4px;
    float: left;
    overflow: hidden;

    &:not(:nth-child(4n + 1)) {
      margin-left: 12px;
    }
    &:nth-child(n + 5) {
      margin-top: 12px;
    }

    .item-img {
      position: absolute;
      bottom: 4px;
      width: 104px;
      img {
        width: 88px;
        display: block;
        margin: auto;
      }
    }
    h2,
    h5 {
      margin: 0;
    }
    h5 {
      font-weight: 600;
      text-align: center;
    }
    h2 {
      color: white;
      position: absolute;
      bottom: 11px;
      left: 9px;
      z-index: 1;
    }
    //Add new colors for elements below (2/2)
    &.item-isotope {
      @include item-color($isotope-1);
    }
    &.item-oxide {
      @include item-color($oxide-1);
    }
    &.item-neutral {
      @include item-color($neutral-1);
    }
    &.item-silicate {
      @include item-color($silicate-1);
    }
    &.item-precious {
      @include item-color($precious-1);
    }
    &.item-trade {
      @include item-color($gravitino-1);
      @extend %hide-after;
    }
    &.item-tech {
      @include item-color($dynamic-1);
      &:before {
        content: "";
        height: 20px;
        width: 4px;
        background-color: white;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      @extend %hide-after;

      h5 {
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        position: relative;
        left: 0%;
        animation-name: scrolling-text;
        animation-iteration-count: infinite;
        animation-duration: 4s;
        animation-delay: 1.8s;
        animation-timing-function: ease;
      }
    }
    &:after {
      content: "";
      width: 98px;
      height: 5px;
      background: white;
      position: absolute;
      bottom: 7px;
      left: 7px;
    }
    &.empty {
      background: rgba(255, 255, 255, 0.25);
      @extend %hide-after;
    }
  }
}
@keyframes scrolling-text {
  50% {
    left: -27%;
    width: 130%;
  }
  60% {
    left: 0%;
    width: 100%;
  }
}
img.axtn {
  width: 100px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.blur {
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://media.giphy.com/media/xUNd9ZLpLVKk3nQZeU/giphy.gif");
  background-size: cover;
  background-repeat: no-repeat;
  //probably dont ever do this ever. Pre blur your gif, save cpu's
  filter: blur(5px);
}

            
          
!
            
              //Just a bit of good ol' jquery
(function($) {
  $(document).ready(function() {
    
    // Opens the individual inventory items
    function openItemHandler() {
      let item = $(".item-grid").find(".item");
      let panel;
      item.mouseenter(function() {
          if (!$(this).hasClass("empty")) {
            let type = $(this)
              .find("h5")
              .text()
              .replace(/ /g, "")
              .toLowerCase();
            panel = $(".panel." + type);
            panel.css("left", $(this).offset().left + 116).fadeIn(100);
          }
        }).mouseleave(function() {
          panel.fadeOut(100);
        });
    }

    // Animates panel based on mouse movement on page
    function panelMovement() {
      let body = $("body");
      let itemGrid = $(".item-grid");
      let dimensions = {};
      let maxMove = { x: 30, y: 5 };
      let currentPos = { left: 100, top: 50 };

      $(window).resize(function() {
          dimensions.width = body.width();
          dimensions.height = body.height();
        }).resize();

      // Default left positioning is in px, top is in %. Retains value type
      body.mousemove(function(event) {
        let percentageX = event.pageX / dimensions.width;
        let percentageY = event.pageY / dimensions.height;
        itemGrid.css({
          left: currentPos.left - maxMove.x * percentageX,
          top: currentPos.top - maxMove.y * percentageY + "%"
        });
      });
    }

    openItemHandler();
    panelMovement();
  });
})(jQuery);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console