[Support request] Embed html & CSS Code

[Rika]

Hi there,

I am trying to embed this into my front page and can’t get it right. Please help.

html:

.wind-paper
  %div
    %div
      %div
        %div
          %div
            %div
              %div
                %div
                  %div
                    %div

CSS:

//colors
$bg: #CFE2F0;
$blue: #48809E;
$shadow-color: rgba($blue, 0.8);

$width: 300px;
$height: 430px;
$padding: 15px;
$radius: 5px;

@mixin animation( $flip-left, $opacity, $bottom: 4.2*$padding ){
    $flip-width: $width/8 - $flip-left*2;
    width: $flip-width;
    left: $flip-left;
    box-shadow: 0px 0px 10px $flip-left $shadow-color;
    opacity: $opacity;
    height: $height/2 - $bottom;
}

body{
  background: $bg;
}

//single div length 
$length : ($height/2 - 1.5*$padding)/10;
//flipping page clip
.wind-paper{
  position: absolute;
  top: 0;
  left:($width/2 - $width/16);
  z-index: 2;
  div{
    height: $length;
    width: $width/8;
    transform-origin: 100% 0;
    transform-style: preserve-3d;
    position: absolute;
    top: calc(100% - 1px);
    background: #fff;
    transform: rotateX(-5deg);
    animation: flip 3s ease-in-out infinite;
  }
  &:after{
    content: "";
    transform: translateZ(-1000px);
    display: block;
    background: rgba($blue, 0.8);
    position: absolute;
    top: 0;
    z-index: -1;
    animation: flip-shadow 3s ease-in-out infinite;
  }
}

@keyframes flip {
  0% { transform: rotateX(-5deg)
                    }
  50% { transform: rotateX(-8deg)
                   rotateY(-2deg);}
  100% { transform: rotateX(-5deg)
                    }
}

@keyframes flip-shadow {
  $color: rgba($blue, 0.8);
  0% { 
    @include animation(5px, 1);
  }
  50% { 
    @include animation(15px, 0.3, 100px);
    }
  100% {
    @include animation(5px, 1);
  }
}

[Tom]

Not too sure what you’re doing here. Are you following directions from somewhere? What are you trying to achieve exactly?

Let me know 🙂

[Rika]

Its a ribbon that looks like wind is blowing it. Got the code from another coding website. So I want to put it in a container on the home page.

[Tom]

Any chance you can link me to the article?

[Rika]

http://codepen.io/richardtbell/pen/VvqQBa

[Tom]

Weird, guess you learn something new every day.

How are you adding it? Inside the WordPress editor?

[Rika]

Using a plugin simple CSS. I’m thinking I need to place div into the theme somehow to be able to tag it with the css to show it up on the page. I’m not sure how to do that though.

[Tom]

You can try adding it in GP Hooks in one of the hooks just to test.

[Author]

Posts