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

Use the dist folder instead of src otherwise:

  1. You need to link to the CSS and JS in the HTML.

  2. The src code has SCSS that needs to be compiled.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.