Animated arrow from codepen into code block

Site URL: https://terrier-cornet-s4fa.squarespace.com/

I am trying to add - https://codepen.io/jurbank/pen/WZovGE as a clickable arrow that shifts down to the next point on the page. I've added it to the code block but it's just appearing as text and not showing at all. I'm not sure which form of CSS I am supposed to copy over.

Any help would be much appreciated.

9 hours ago, robertmackenzie said:

Site URL: https://terrier-cornet-s4fa.squarespace.com/

I am trying to add - https://codepen.io/jurbank/pen/WZovGE as a clickable arrow that shifts down to the next point on the page. I've added it to the code block but it's just appearing as text and not showing at all. I'm not sure which form of CSS I am supposed to copy over.

Any help would be much appreciated.

I think you should complie the scss to css before using it

.arrow-container {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
}
.arrow-container:hover {
  cursor: pointer;
}
.arrow-container:hover .arrow {
  top: 50%;
}
.arrow-container:hover .arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}
.arrow-container:hover .arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position: absolute;
  left: 50%;
  transition: all 0.4s ease;
}
.arrow:before, .arrow:after {
  transition: all 0.4s ease;
  content: "";
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 4px;
  height: 50px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.arrow:nth-child(1) {
  opacity: 0.3;
  top: 35%;
}
.arrow:nth-child(2) {
  opacity: 0.6;
  top: 55%;
}
.arrow:nth-child(3) {
  opacity: 0.9;
  top: 75%;
}

14 hours ago, bangank36 said:

I think you should complie the scss to css before using it

.arrow-container {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
}
.arrow-container:hover {
  cursor: pointer;
}
.arrow-container:hover .arrow {
  top: 50%;
}
.arrow-container:hover .arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}
.arrow-container:hover .arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position: absolute;
  left: 50%;
  transition: all 0.4s ease;
}
.arrow:before, .arrow:after {
  transition: all 0.4s ease;
  content: "";
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 4px;
  height: 50px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}
.arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}
.arrow:nth-child(1) {
  opacity: 0.3;
  top: 35%;
}
.arrow:nth-child(2) {
  opacity: 0.6;
  top: 55%;
}
.arrow:nth-child(3) {
  opacity: 0.9;
  top: 75%;
}

Thanks for getting back to me, I tried that and unfortunately it still just shows as code.

5 hours ago, robertmackenzie said:

Thanks for getting back to me, I tried that and unfortunately it still just shows as code.

Have you made sure display as source is unchecked

what is your site password