Hexagon design not displaying in exported Codepen project on server

“I exported this project from Codepen: https://codepen.io/xhammyfy/pen/araqvQ. However, when I open index.html on a server, the hexagon design does not show up. Can anyone please take a look at the code? Thanks.”But in codepen it works perfectly

html

<div class="honeycomb">
  <div class="tiles">
    <div class="tiles-border"></div>
    <div class="tiles-inner">
      <div class="tiles-wrap -front">
        <div class="tiles-wrap-layer1">
          <div class="tiles-wrap-layer2">
            <div class="tiles-main" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ee19333d-f4d0-4cbf-aa7a-9c9788414301/d4rrv86-ecf718b3-5d1c-4c6b-9115-7c59dafb3b36.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VlMTkzMzNkLWY0ZDAtNGNiZi1hYTdhLTljOTc4ODQxNDMwMVwvZDRycnY4Ni1lY2Y3MThiMy01ZDFjLTRjNmItOTExNS03YzU5ZGFmYjNiMzYuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.W4aGh_AjanySoZjznTwcGxLFmQ6zzE58FzuLnCHObEs')">
              <div class="tiles-main--inner">
                <p>Title</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tiles-wrap -back">
        <div class="tiles-wrap-layer1">
          <div class="tiles-wrap-layer2">
            <div class="tiles-main" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de5078b-0f34-4dec-a334-5a867ea4f7b5/d2ec8mg-00035e49-0047-48b8-84c8-3bf45b50d1c8.jpg/v1/fill/w_375,h_250,q_70,strp/cat_by_cucat_d2ec8mg-250t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NjAwIiwicGF0aCI6IlwvZlwvMmRlNTA3OGItMGYzNC00ZGVjLWEzMzQtNWE4NjdlYTRmN2I1XC9kMmVjOG1nLTAwMDM1ZTQ5LTAwNDctNDhiOC04NGM4LTNiZjQ1YjUwZDFjOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.Kb-g1-dgZ47eHMW2FKVV7khTRBCzBhF-m_IOXyIbvO8')">
              <div class="tiles-main--inner">
                <p>Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>







  <div class="tiles">
    <div class="tiles-border"></div>
    <div class="tiles-inner">
      <div class="tiles-wrap -front">
        <div class="tiles-wrap-layer1">
          <div class="tiles-wrap-layer2">
            <div class="tiles-main" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ee19333d-f4d0-4cbf-aa7a-9c9788414301/d4shzfa-60fcef30-5b95-4c56-b463-446a4158813e.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2VlMTkzMzNkLWY0ZDAtNGNiZi1hYTdhLTljOTc4ODQxNDMwMVwvZDRzaHpmYS02MGZjZWYzMC01Yjk1LTRjNTYtYjQ2My00NDZhNDE1ODgxM2UuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.XnLjzlpaaMqolLNVdYppovOnsjqk7hnqRTaFX_VlAoU')">
              <div class="tiles-main--inner">
                <p>Title</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="tiles-wrap -back">
        <div class="tiles-wrap-layer1">
          <div class="tiles-wrap-layer2">
            <div class="tiles-main" style="background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1eb2e376-74fa-4d77-bab5-30ac9ab8285f/d2svgpu-7036edb2-d631-4feb-a383-02ebddff81a5.jpg/v1/fill/w_373,h_250,q_70,strp/cat_by_maryanak_d2svgpu-250t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NDAyIiwicGF0aCI6IlwvZlwvMWViMmUzNzYtNzRmYS00ZDc3LWJhYjUtMzBhYzlhYjgyODVmXC9kMnN2Z3B1LTcwMzZlZGIyLWQ2MzEtNGZlYi1hMzgzLTAyZWJkZGZmODFhNS5qcGciLCJ3aWR0aCI6Ijw9NjAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.6I0CFuQ0w56x3ZwuzQq0PkQSTA2ygF13p_WGeqzlWYk')">
              <div class="tiles-main--inner">
                <p>Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css

html, body {
  background-color: #1a1a1a;
}

.tiles-main,
.tiles-wrap-layer1,
.tiles-wrap-layer2,
.tiles-inner,
.tiles {
  pointer-events: none;
}

.honeycomb {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  width: 80%;
}

.tiles {
  position: relative;
  width: calc(100% / 6);
  perspective: 1000px;

  &:not(:last-child) { margin-right: -2% }

  &:hover {
    .tiles-inner {
      transform: rotateY(180deg);
    }
  }
}

.tiles-inner {
  height: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  transition: transform 0.6s cubic-bezier(0.35, 0.1, 0.6, 1.51);
  transform-style: preserve-3d;
  width: 100%;
}

.tiles-border {
  margin: 0 auto;

  &:before, &:after {
    content: '';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
  }

  &:before  {
    transform: rotate(60deg) translate(18%, -18%);
  }

  &:after {
    transform: rotate(-60deg) translate(18%, 18%);
  }

  &, &:before, &:after {
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    cursor: pointer;
    display: block;
    padding-bottom: 100%;
    width: 58%;
    pointer-events: auto;
  }
}

.tiles-wrap {
  overflow: hidden;
  position: absolute;
  top: 1px;
  transform: rotate(120deg);
  visibility: hidden;

  &.-front, &.-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  &.-back {
    transform: rotateY(180deg);

    .tiles-main {
      transform: rotate(120deg);
    }
  }
}

.tiles-wrap-layer1 {
  height: 100%;
  overflow: hidden;
  transform: rotate(-60deg);
  visibility: hidden;
  width: 100%;
}

.tiles-wrap-layer2 {
  height: 100%;
  overflow: hidden;
  position: relative;
  transform: rotate(-60deg);
  visibility: visible;
  width: 100%;
}

.tiles-main {
  background: {
    size: cover;
    position: center center;
  }
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: background 0.5s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiles-main--inner {
  padding: 20px 30px;

  p {
    color: #fff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.93);
    text-align: center;
  }
}

js

let tiles = document.querySelectorAll('.tiles')
  let tilesBg = document.querySelectorAll('.tiles-wrap')
  let tilesBorder = document.querySelectorAll('.tiles-border')

  let setDimensions = () => {
    let tileWidth = document.querySelector('.tiles-border').clientWidth
    let tileHeight = document.querySelector('.tiles-border').clientHeight
    let dimensions

    for (let y = 0; y < tilesBorder.length; y++) {
      dimensions = (tilesBorder[y].offsetLeft / 2.8)
    }

    for (let i = 0; i < tilesBg.length; i++) {
      tilesBg[i].style.height = tileHeight + 'px'
      tilesBg[i].style.width = (tileWidth * 2) + 'px'
      tilesBg[i].style.left = '-' + dimensions + 'px'
    }

    for (let x = 0; x < tiles.length; x++) {
      if (x % 2 !== 0) {
        tiles[x].style.top = (tileHeight / 2) + 'px'
      }
    }
  }

  setDimensions()
  window.addEventListener('resize', () => { setDimensions() })

Hexagon design not displaying in exported Codepen project on server