API tools faq
paste
Advertisement
flormzel

01. redirect by @flormzel

flormzel
Jul 7th, 2018
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     : page by @flormzel
  4.    
  5.     DONT — steal or claim as
  6.     your own.
  7.     - do not remove the credit
  8.     DO - edit whoever you like
  9.  
  10. -->
  11.  
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15.     <meta charset="UTF-8">
  16.     <title>{Title}</title>
  17.     <link rel="shortcut icon" href="{Favicon}">
  18.    
  19.     <meta name="image:background" content=""/>
  20.     <meta name="color:background" content="#eee"/>
  21.     <meta name="image:icon" content=""/>
  22.     <meta name="color:circle" content="#f9f9f9"/>
  23.     <meta name="color:text" content="#fff"/>
  24.     <meta name="color:old url" content="#83b0d9"/>
  25.     <meta name="color:new url" content="#fff"/>
  26.     <meta name="color:box" content="#83b0d9"/>
  27.    
  28.    
  29.     <meta name="text:old url" content="old url"/>
  30.     <meta name="text:new url" content="new url ex. flormzel"/>
  31.    
  32.  
  33.     <!-- font -->
  34.     <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  35.    
  36.  
  37. <style type="text/css">
  38.  
  39.     /* BASIC */
  40.  
  41.     body {font-family: 'Inconsolata', monospace;
  42.     background-color:{color:background};
  43.     background-image:url('{image:background}');
  44.     -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size:cover;}
  45.    
  46.     a {color:{color:text}; text-decoration: none;}
  47.     a:hover {color:{color:text}; text-decoration: none;}
  48.  
  49.     .icon {display: inline-block;vertical-align: middle;}
  50.     img {max-width: 100%;height: auto;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
  51.     img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  52.    
  53.     /* end of BASIC */
  54.  
  55.     /* fonts */
  56.     @font-face { font-family: "bijay"; src: url('https://static.tumblr.com/eytkop6/3XSpbioqn/bijay.otf'); }
  57.     @font-face { font-family: "dalmais"; src: url('https://static.tumblr.com/eytkop6/MNzpbippw/dalmais.otf'); }
  58.        
  59.     #container{position:absolute;width:350px;height:150px;left:50%;top:50%;border-radius: 10px; z-index:100;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  60.     -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  61.     #cont{position:absolute;opacity: 0.8;background: {color:box};width:350px;height:150px;left:50%;top:50%;border-radius: 10px; z-index:1;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  62.     -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  63.  
  64.     /* old title */
  65.     .old {position:absolute;margin-left:100px;margin-top:-30px;font-family:"bijay"; font-size: 25px;
  66.     -webkit-text-stroke: 1px {color:old url}; color:transparent;}
  67.  
  68.     /* icon */
  69.     #icon {display:static;position:relative;top: -40px;left:10px;z-index:999999;padding:0px;border-radius: 50%;
  70.     margin: 0 2px 0 2px;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}  
  71.     #icon img  {width:70px;height:70px;background-color: transparent;overflow:hidden;border-radius: 50%;border:5px solid {color:circle};}
  72.     #icon img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  73.  
  74.     /* moved to */
  75.     .move {position:absolute;margin-left:240px;margin-top:-70px;font-size: 15px;color:{color:text};}
  76.  
  77.     /* new title */
  78.     .new {position:absolute;margin-left:80px;margin-top:-40px;font-family:"dalmais"; font-size: 60px;color:{color:new url};}
  79.  
  80.     /* redirecting text */
  81.     .red {position:absolute;margin-left:15px;margin-top:45px;font-size: 12px;color:{color:text};}
  82.  
  83.     /* credit */
  84.     .credit {position:fixed;right:40px;bottom:40px;width:20px;height:20px;border-radius:50%;padding:5px;line-height:100%;opacity:0.9;
  85.     -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;}
  86.     .credit img{border-radius: 50%;margin: 0 2px 0 2px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;}
  87.     .credit a:hover {opacity:1;background:none;background:none;}
  88.     .credit a:hover img{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;}
  89.     .ci {line-height:100%;opacity:0.9;position:fixed;right:40px;bottom:40px;width:20px;height:20px;border-radius:50%;
  90.     padding: 5px;border: 1px solid {color:box};height: 20px;border-radius: 50%;}
  91.     .credit:hover {opacity:1;background:none;}
  92.     .credit span{width: 45px;height: auto;padding: 3px;right: -100%;margin-left: 15px;line-height: 130% ; font-weight: 400; font-size:7px;
  93.     text-align: center;border: 4px solid {color:box};background: {color:box};text-transform:uppercase;
  94.     border-radius: 5px;position: absolute;{color:text};pointer-events: none;opacity: 0;
  95.     transition: all 0.3s ease-in-out;-webkit-transform: translate3d(20px,20px,0px) rotate(45deg);transform: translate3d(20px,20px,0px) rotate(45deg);}
  96.     .credit span:before, .credit span:after{content: '';position: absolute;bottom: -10px;left: 80%;margin-left: -21px;width: 0;
  97.     height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid {color:box};}
  98.     .credit a:hover span{opacity: 1;-webkit-transform: translate3d(-20px,-55px,0px) rotate(0deg);transform: translate3d(-20px,-55px,0px) rotate(0deg);}
  99.     .credit span b{font-weight:600;font-size:12px;font-family:'dalmais';text-transform:lowercase;}
  100.  
  101.    
  102.          
  103. </style>
  104. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  105. <script src="https://static.tumblr.com/eytkop6/df9pbivil/q.js"></script>
  106. </head>
  107. <body>
  108.     <div id="container">
  109.         <div class="old">{text:old url}</div>
  110.         <div id="icon">
  111.             <img src="{image:icon}">
  112.         </div>
  113.         <div class="move">has moved to</div>
  114.         <div class="new">{text:new url}</div>
  115.         <div class="red">redirecting...</div>
  116.     </div>
  117.     <div id="cont"></div>
  118.  
  119.      <!------  DO NOT REMOVE THE CREDIT! -------->
  120.     <div class="credit">
  121.         <a href="http://flormzel.tumblr.com">
  122.         <span>made by <b>flormzel</b></span>
  123.         <img class="icon ci" src="https://i.imgur.com/WC7bvcS.jpg"></a>
  124.     </div>
  125.  
  126.     <script>
  127.         setTimeout( redirectTumblr, 5000 );
  128.         function redirectTumblr() {
  129.         location.replace('http://{text:new url}.tumblr.com' + location.pathname);}
  130.     </script>
  131.  
  132.  
  133. </body>
  134. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!