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

The css in the codepen is SCSS did you plug it into a SCSS pre-processor?

Or if you go to the codepen and in the CSS panel click the down arrow on the top right and select “View Complied CSS” and then you can copy the raw 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;
}
.tiles:not(:last-child) {
  margin-right: -2%;
}
.tiles: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;
}
.tiles-border:before, .tiles-border:after {
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}
.tiles-border:before {
  transform: rotate(60deg) translate(18%, -18%);
}
.tiles-border:after {
  transform: rotate(-60deg) translate(18%, 18%);
}
.tiles-border, .tiles-border:before, .tiles-border: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;
}
.tiles-wrap.-front, .tiles-wrap.-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.tiles-wrap.-back {
  transform: rotateY(180deg);
}
.tiles-wrap.-back .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;
  background-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;
}
.tiles-main--inner p {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.93);
  text-align: center;
}

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