New Leaf Redirection Page Clone

<!--

// [Page:Revamp]

A New Leaf redirect page

by eggdesigns //

    + html and css knowledge is required to customize this page
    + feel free to edit and custom the theme to your liking,
      but don't redistribute, use as a base, or claim as your own
    + please report any bugs to eggdesigns.co/contact

Link to Original Paste: https://pastebin.com/NNtWGnTU
-->


<!DOCTYPE html>
<html>
    <head>

     <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <meta name="color:background" content="#fff" />
    <meta name="color:plant pot" content="#452C18" />
    <meta name="color:plant pot shadow" content="#301D0D" />
    <meta name="color:text" content="#bbb" />
    <meta name="color:stem" content="#BED6AB" />
    <meta name="color:leaf" content="#95A868" />
    <meta name="color:link hover" content="#0E2430" />
    <meta name="if:auto redirect" content="" />
    <meta name="if:full background" content="" />
    <meta name="text:old username" content="username" />
    <meta name="text:new username" content="espoirthemes" />
    <meta name="text:text" content="I've moved to a new url" />
    <meta name="image:background" content="" />


    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
    <style type="text/css">


/* I really don't recommend editing much of this if you don't know HTML or CSS. This page is based around CSS shapes and animations. If you want to edit colors or text, all of that can already be done on the regular customizing page.

*/


    .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{display:none;}
    /* general styling */
    body{
        font-family:Amatic SC;
        color:{color:text};
        font-size:1.4em;
        font-weight:bold;
        background:{color:background} url({image:background})
        {block:iffullbackground} no-repeat center center fixed;
        background-size: cover; {/block:iffullbackground};
        background-attachment:fixed;
    }

    /* moved to a new url text */

    .intro {
        width:200px;
        font-size:40px;
        position:absolute;
        top:20%;
        left:30%;
        height:auto;
        animation-name:intro;
        animation-fill-mode:forwards;
        animation-duration:6s;
        animation-iteration-count:1; opacity:0;

    }
     @keyframes intro{
        from{opacity:0;}
        to{opacity:1;}
    }
    /* plant container */
    main {
        width:500px;
        margin:10px auto;
        height:600px;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    /* plant pot */

    .potbottom {
        top:400px;
        background:white;
        height:90px;
        width: 90px;
        position:absolute;
        border-radius:10% 10% 100% 100%;
        box-shadow:inset -14px -10px rgba(0,0,0,.04);
    }


    .potbottom:before {
        position:absolute;
        height:10px;
        bottom:-5px;
        z-index:-9;
        content:'';
        border-radius:100%;
        background:rgba(0,0,0,.088);
        width:100%;
    }

    /* stem */

    .plantstem{
        width:3.2px;
        height:100px;
        background:{color:leaf};
        margin-top:380px;
        position:absolute;
        animation-name: stem;
        margin-left:0px;
        border-radius:4px;
        opacity:.8;
        animation-duration: 2s; animation-fill-mode:forwards;
        animation-iteration-count: 1;

    }

    /* bottom leaf */

    .leaf {
        width: 40px;
        position:absolute;
        height: 60px;
        animation-name: leaf;
        opacity:0;
        transform:rotate(-20deg);
        margin-left:-50px;
        background: {color:leaf};
        border-bottom-left-radius:60px;
        border-top-right-radius:60px;
        animation-duration: 5s;
        animation-fill-mode:forwards;
        transform-style: preserve-3d;
        animation-iteration-count: 1; transition:1s;color:{color:leaf};

    }

    @keyframes stem{
        from{top:0px; height:100px;}
        to{top:-170px;height:250px;}
    }

    @keyframes leaf{
        from{opacity:0; }
        to{opacity:1;}
    }

    /* top leaf */

     .leaf2 {
        width: 40px;
        position:absolute;
        height:60px;
        transform:rotate(20deg);
        border-top-left-radius:60px;
        border-bottom-right-radius:60px;
        background: {color:leaf};
        animation-delay:1s;
        opacity:0;
        transform-style: preserve-3d;
        margin-left:10px;
        margin-top:-80px;
        animation-name: leaf2;
        animation-duration:5s; animation-fill-mode:forwards;
        animation-iteration-count: 1;
        transition:1s; color:{color:leaf};

     }
     /* url labels */

    .text{
        margin-top:-22px;
        opacity:1;
        width:100px;
        height:auto;
        font-size:1.2em;
        margin-left:-10px;
    }

    .leaf .text {
          transform:rotate(20deg);
    }
     .leaf2 .text {
         transform:rotate(-20deg);
         margin-top:-40px;
    }
    @keyframes leaf2{
        from{opacity:0;}
        to{opacity:1;}
    }


        #egg { opacity:.8; right:10px; bottom:10px; position:fixed;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
font-family: "bitxmap";
border:1px solid #444;  z-index:4;

}
 #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
    @keyframes egg{
        0%{}
        10%{transform:rotate(20deg)}
        80%{transform:rotate(-20deg)}
        100%{}
    }

    </style>
    </head>
    <body>
<!-- autoredirect script -->
    {block:ifautoredirect}
<script>
 setTimeout( redirectTumblr, 12000 );
 function redirectTumblr() {
  location.replace('http://{text:new username}.tumblr.com' + location.pathname);
 }
</script>
{/block:ifautoredirect}

    <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
    <!-- text -->
    <div class="intro">{text:text}</div>
    <!-- plant container -->
    <main>
   <a href="http://{text:new username}.tumblr.com">
   <div class="leaf2">
   <div class="text">new url</div>
   </div></a>

   <a href="http://{text:old username}.tumblr.com">
   <div class="leaf">
   <div class="text">old url</div>
   </div></a>

   <!-- plant -->
    <div class="plantstem"></div>
    <div class="pottop"></div>
    <div class="potbottom"></div>
    </main>
    <!-- end page -->
    </body>
</html>