[Support request] Embed html & CSS Code

Home Forums Support [Support request] Embed html & CSS Code

Home Forums Support Embed html & CSS Code

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #275147
    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);
      }
    }
    GP Premium 1.2.94
    #275337
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #275365
    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.

    #275368
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to the article?

    #275369
    Rika
    #275608
    Tom
    Lead Developer
    Lead Developer

    Weird, guess you learn something new every day.

    How are you adding it? Inside the WordPress editor?

    #275637
    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.

    #275656
    Tom
    Lead Developer
    Lead Developer

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.