Jump to content

CSS-only Todo List Checkbox Animation

Recommended Posts

Site URL: https://www.gagroup.co.nz/accessible-bathroom

Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why?

Here's the code:

<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
  <defs>
    <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
      <stop offset="0%"   stop-color="#bfd788"/>
      <stop offset="100%" stop-color="#84BD00"/>
    </linearGradient>

    <linearGradient id="lineGradient">
      <stop offset="0%"    stop-color="#bfd788"/>
      <stop offset="100%"  stop-color="#84BD00"/>
    </linearGradient>

    <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
    <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
    <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
    <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
  </defs>
</svg>


<div class="todo-list">
  <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>

    <div class="todo__text">1. What bathroom activities require a user to need assistance?</div>
    
  </label>

  <label class="todo">

    <input class="todo__state" type="checkbox" />

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>

    <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div>
    
  </label>

  <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">3. Is a tub or shower preferred?</div>
  </label>
  
    <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div>
  </label>
    <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div>
  </label>
  
</div>

<style>
@duration: 0.8s;

.todo-list {
  background: #FFF; 
  font-size: 1.1rem;
  max-width: 33em;
  margin: auto;
  padding: 0.5em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.todo {
  display: block;
  position: relative;
  padding: 1em 1em 1em 16%;
  margin: 0 auto;
  cursor: pointer; 
  border-bottom: solid 1px #ddd;
  
  &:last-child { border-bottom: none; }
}

.todo__state {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.todo__text {
  color: saturate(#1B4A4E,15%);
  transition: all @duration/2 linear @duration/2;
}

.todo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
  
  fill: none;
  stroke: #27FDC7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.todo__line,
.todo__box,
.todo__check {
  transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1);
}


.todo__circle {
  stroke: #27FDC7;
  stroke-dasharray: 1 6;
  stroke-width: 0;
  
  transform-origin: 13.5px 12.5px;
  transform: scale(0.4) rotate(0deg);
  animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98);
  
  @keyframes explode {
    //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); }
    30% { 
      stroke-width: 3;
      stroke-opacity: 1;
      transform: scale(0.8) rotate(40deg);
      //animation-timing-function: cubic-bezier(.89,.01,.95,.51);
    }
    100% { 
      stroke-width: 0;
      stroke-opacity: 0;
      transform: scale(1.1) rotate(60deg);
      //animation-timing-function: cubic-bezier(.08,.56,.04,.98);
    }
  }
}

.todo__box { 
  stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0;
  transition-delay: @duration * 0.2; 
}
.todo__check {
  stroke: #27FDC7;
  stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995;
  transition-duration: @duration * 0.4; 
}
.todo__line {
  stroke-dasharray: 168, 1684; 
  stroke-dashoffset: 168;
}
.todo__circle { 
  animation-delay: @duration * 0.7; 
  animation-duration: @duration * 0.7; 
}

.todo__state:checked {
  
  ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; }
  
  ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; }
  ~ .todo__icon .todo__line { stroke-dashoffset: -8; }
  ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; }
  ~ .todo__icon .todo__circle { animation-name: explode; }
  
}

html { background: #ddd; }
html { height: 100%; display: flex; }
body { width: 100%; margin: auto; }</style>

<script>console.clear();

setTimeout(function(){
  document.querySelector('input[type="checkbox"]').setAttribute('checked',true);
},100);

var todoTemplate = function(id){ 
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon">
    <defs>
      <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0">
        <g stroke="#FFF" fill="none">
          <path class="todo__line" d="M21 12.3h168"/>
          <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/>
          <path class="todo__check" d="M10 13l2 2 5-5"/>
        </g>
      </mask>
    </defs>
    <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" />
    <circle class="todo__circle" cx="13.5" cy="12.5" r="10" />
  </svg>`
};

var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo);

function offsetPath(path, offset){
  var length = path.getTotalLength();
  path.style.transition = 'none';
  path.style.strokeDasharray = length + ' ' + length + offset;
  path.style.strokeDashoffset = length; 
  setTimeout(function(){ path.style.transition = null; },20);
  return length;
}

function togglePath(path, toggle, offset = 0){
  var length = offsetPath(path, offset);

  function updatePath(toggle){
    return path.style.strokeDashoffset = ( toggle ? -offset : length );
  }

  updatePath(toggle);
  return updatePath;
}

function activateTodo(todo, i){
  
  todo.insertAdjacentHTML('afterbegin', todoTemplate(i));
  
  var line = todo.querySelector('.todo__line'),
      updateLine = togglePath(line, false, 4);

  var box = todo.querySelector('.todo__box'),
      updateBox = togglePath(box, true);

  var check = todo.querySelector('.todo__check'),
      updateCheck = togglePath(check);

  var toggle = false;

  todo.addEventListener('click', function(){
    toggle = !toggle;
    updateLine(toggle);
    updateBox(!toggle);
    updateCheck(toggle);
    if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); }
  });
  
}

</script>

 

Edited by S74
updating code
Link to comment
2 minutes ago, S74 said:

Site URL: https://www.gagroup.co.nz/accessible-bathroom

Hello I tried to use this code: https://codepen.io/shshaw/pen/WXMdwE on my website here: https://www.gagroup.co.nz/accessible-bathroom but the animation and tick isnt working. Does anyone know why?

Here's the code:

<svg viewBox="0 0 0 0" style="position: absolute; z-index: -1; opacity: 0;">
  <defs>
    <linearGradient id="boxGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="25" y2="25">
      <stop offset="0%"   stop-color="#bfd788"/>
      <stop offset="100%" stop-color="#84BD00"/>
    </linearGradient>

    <linearGradient id="lineGradient">
      <stop offset="0%"    stop-color="#bfd788"/>
      <stop offset="100%"  stop-color="#84BD00"/>
    </linearGradient>

    <path id="todo__line" stroke="url(#lineGradient)" d="M21 12.3h168v0.1z"></path>
    <path id="todo__box" stroke="url(#boxGradient)" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"></path>
    <path id="todo__check" stroke="url(#boxGradient)" d="M10 13l2 2 5-5"></path>
    <circle id="todo__circle" cx="13.5" cy="12.5" r="10"></circle>
  </defs>
</svg>


<div class="todo-list">
  <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>

    <div class="todo__text">1. What bathroom activities require a user to need assistance?</div>
    
  </label>

  <label class="todo">

    <input class="todo__state" type="checkbox" />

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>

    <div class="todo__text">2. Are there medical supplies necessary and where do they need to be placed?</div>
    
  </label>

  <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">3. Is a tub or shower preferred?</div>
  </label>
  
    <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">4. What activities does a user do independently where grab bars should be placed?</div>
  </label>
    <label class="todo">
    <input class="todo__state" type="checkbox" />
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 25" class="todo__icon">
      <use xlink:href="#todo__line" class="todo__line"></use>
      <use xlink:href="#todo__box" class="todo__box"></use>
      <use xlink:href="#todo__check" class="todo__check"></use>
      <use xlink:href="#todo__circle" class="todo__circle"></use>
    </svg>
    
    <div class="todo__text">5. Will users condition deteriorate over time and what will users needs be in the future?</div>
  </label>
  
</div>

<style>
@duration: 0.8s;

.todo-list {
  background: #FFF; 
  font-size: 1.1rem;
  max-width: 33em;
  margin: auto;
  padding: 0.5em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.todo {
  display: block;
  position: relative;
  padding: 1em 1em 1em 16%;
  margin: 0 auto;
  cursor: pointer; 
  border-bottom: solid 1px #ddd;
  
  &:last-child { border-bottom: none; }
}

.todo__state {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.todo__text {
  color: saturate(#1B4A4E,15%);
  transition: all @duration/2 linear @duration/2;
}

.todo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
  
  fill: none;
  stroke: #27FDC7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.todo__line,
.todo__box,
.todo__check {
  transition: stroke-dashoffset @duration cubic-bezier(.9,.0,.5,1);
}


.todo__circle {
  stroke: #27FDC7;
  stroke-dasharray: 1 6;
  stroke-width: 0;
  
  transform-origin: 13.5px 12.5px;
  transform: scale(0.4) rotate(0deg);
  animation: none @duration linear; //cubic-bezier(.08,.56,.04,.98);
  
  @keyframes explode {
    //0% { stroke-width: 0; transform: scale(0.5) rotate(0deg); }
    30% { 
      stroke-width: 3;
      stroke-opacity: 1;
      transform: scale(0.8) rotate(40deg);
      //animation-timing-function: cubic-bezier(.89,.01,.95,.51);
    }
    100% { 
      stroke-width: 0;
      stroke-opacity: 0;
      transform: scale(1.1) rotate(60deg);
      //animation-timing-function: cubic-bezier(.08,.56,.04,.98);
    }
  }
}

.todo__box { 
  stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0;
  transition-delay: @duration * 0.2; 
}
.todo__check {
  stroke: #27FDC7;
  stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995;
  transition-duration: @duration * 0.4; 
}
.todo__line {
  stroke-dasharray: 168, 1684; 
  stroke-dashoffset: 168;
}
.todo__circle { 
  animation-delay: @duration * 0.7; 
  animation-duration: @duration * 0.7; 
}

.todo__state:checked {
  
  ~ .todo__text { transition-delay: 0s; color: #5EBEC1; opacity: 0.6; }
  
  ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; transition-delay: 0s; }
  ~ .todo__icon .todo__line { stroke-dashoffset: -8; }
  ~ .todo__icon .todo__check { stroke-dashoffset: 0; transition-delay: @duration * 0.6; }
  ~ .todo__icon .todo__circle { animation-name: explode; }
  
}

html { background: #ddd; }
html { height: 100%; display: flex; }
body { width: 100%; margin: auto; }</style>

<script>console.clear();

setTimeout(function(){
  document.querySelector('input[type="checkbox"]').setAttribute('checked',true);
},100);
/*

// Javascript was initially used, but wasn't really necessary. Javascript droppped, but left here for archival purposes.

var todoTemplate = function(id){ 
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 25" class="todo__icon">
    <defs>
      <mask id="myMask${id}" maskUnits="userSpaceOnUse" x="0" y="0">
        <g stroke="#FFF" fill="none">
          <path class="todo__line" d="M21 12.3h168"/>
          <path class="todo__box" d="M21 12.7v5c0 1.3-1 2.3-2.3 2.3H8.3C7 20 6 19 6 17.7V7.3C6 6 7 5 8.3 5h10.4C20 5 21 6 21 7.3v5.4"/>
          <path class="todo__check" d="M10 13l2 2 5-5"/>
        </g>
      </mask>
    </defs>
    <rect fill="url(#todoGradient)" mask="url(#myMask${id})" width="100%" height="100%" />
    <circle class="todo__circle" cx="13.5" cy="12.5" r="10" />
  </svg>`
};

var todos = [ ...document.querySelectorAll('.todo') ].forEach(activateTodo);

function offsetPath(path, offset){
  var length = path.getTotalLength();
  path.style.transition = 'none';
  path.style.strokeDasharray = length + ' ' + length + offset;
  path.style.strokeDashoffset = length; 
  setTimeout(function(){ path.style.transition = null; },20);
  return length;
}

function togglePath(path, toggle, offset = 0){
  var length = offsetPath(path, offset);

  function updatePath(toggle){
    return path.style.strokeDashoffset = ( toggle ? -offset : length );
  }

  updatePath(toggle);
  return updatePath;
}

function activateTodo(todo, i){
  
  todo.insertAdjacentHTML('afterbegin', todoTemplate(i));
  
  var line = todo.querySelector('.todo__line'),
      updateLine = togglePath(line, false, 4);

  var box = todo.querySelector('.todo__box'),
      updateBox = togglePath(box, true);

  var check = todo.querySelector('.todo__check'),
      updateCheck = togglePath(check);

  var toggle = false;

  todo.addEventListener('click', function(){
    toggle = !toggle;
    updateLine(toggle);
    updateBox(!toggle);
    updateCheck(toggle);
    if ( todo.classList ) { todo.classList[ toggle ? 'add' : 'remove' ]('todo--checked'); }
  });
  
}

*/</script>

 

hi. i just review the code. sometimes i also faces this problem due to the variable they took.
@duration: 0.8s;

May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try.

Link to comment
12 minutes ago, Agha_Waqas said:

hi. i just review the code. sometimes i also faces this problem due to the variable they took.
@duration: 0.8s;

May be that will be the issue. you need to add 0.8s to each code where it uses that variable. give it a try.

Thanks, I tried that - but still not working. Thanks for the help though! 

Link to comment

As with all "codepen doesn't work" posts on these forums, you really need to be careful as it isn't always pure HTML, CSS or JavaScript you're looking at: they allow pre-processors to be used (and also external dependencies but that's another story and not relevant here). In this case, it isn't real CSS you're looking at, it's actually being compiled using LESS, which is a well-known CSS pre-processor.

to get it to work you need to use pure CSS. replace the style section you've included with this and you'll find it works just fine.

<style>
.todo-list {
  background: #FFF;
  font-size: 20px;
  max-width: 15em;
  margin: auto;
  padding: 0.5em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.todo {
  display: block;
  position: relative;
  padding: 1em 1em 1em 16%;
  margin: 0 auto;
  cursor: pointer;
  border-bottom: solid 1px #ddd;
}
.todo:last-child {
  border-bottom: none;
}
.todo__state {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.todo__text {
  color: #135156;
  transition: all 0.4s linear 0.4s;
}
.todo__icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
  fill: none;
  stroke: #27FDC7;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.todo__line,
.todo__box,
.todo__check {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1);
}
.todo__circle {
  stroke: #27FDC7;
  stroke-dasharray: 1 6;
  stroke-width: 0;
  transform-origin: 13.5px 12.5px;
  transform: scale(0.4) rotate(0deg);
  -webkit-animation: none 0.8s linear;
          animation: none 0.8s linear;
}
@-webkit-keyframes explode {
  30% {
    stroke-width: 3;
    stroke-opacity: 1;
    transform: scale(0.8) rotate(40deg);
  }
  100% {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(1.1) rotate(60deg);
  }
}
@keyframes explode {
  30% {
    stroke-width: 3;
    stroke-opacity: 1;
    transform: scale(0.8) rotate(40deg);
  }
  100% {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(1.1) rotate(60deg);
  }
}
.todo__box {
  stroke-dasharray: 56.1053, 56.1053;
  stroke-dashoffset: 0;
  transition-delay: 0.16s;
}
.todo__check {
  stroke: #27FDC7;
  stroke-dasharray: 9.8995, 9.8995;
  stroke-dashoffset: 9.8995;
  transition-duration: 0.32s;
}
.todo__line {
  stroke-dasharray: 168, 1684;
  stroke-dashoffset: 168;
}
.todo__circle {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
  -webkit-animation-duration: 0.56s;
          animation-duration: 0.56s;
}
.todo__state:checked ~ .todo__text {
  transition-delay: 0s;
  color: #5EBEC1;
  opacity: 0.6;
}
.todo__state:checked ~ .todo__icon .todo__box {
  stroke-dashoffset: 56.1053;
  transition-delay: 0s;
}
.todo__state:checked ~ .todo__icon .todo__line {
  stroke-dashoffset: -8;
}
.todo__state:checked ~ .todo__icon .todo__check {
  stroke-dashoffset: 0;
  transition-delay: 0.48s;
}
.todo__state:checked ~ .todo__icon .todo__circle {
  -webkit-animation-name: explode;
          animation-name: explode;
}
html {
  background: #ddd;
}
html {
  height: 100%;
  display: flex;
}
body {
  width: 100%;
  margin: auto;
}
</style>

 

you might need to edit it a bit, I just lifted this straight from the _processed_ CSS output from the original codepen. 

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
41 minutes ago, iamdavehart said:

As with all "codepen doesn't work" posts on these forums, you really need to be careful as it isn't always pure HTML, CSS or JavaScript you're looking at: they allow pre-processors to be used (and also external dependencies but that's another story and not relevant here). In this case, it isn't real CSS you're looking at, it's actually being compiled using LESS, which is a well-known CSS pre-processor.

to get it to work you need to use pure CSS. replace the style section you've included with this and you'll find it works just fine.

 

Thank you so much for your help. I am very new to this, so I appreciate the patience and understanding. I'm slowly learning more and more. Your suggestion worked great! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.