API tools faq
paste
Advertisement
flormzel

02. redirect by @flormzel

flormzel
Jul 7th, 2018
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.88 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="image:icon2" content=""/>
  23. <meta name="color:circle" content="#83b0d9"/>
  24. <meta name="color:text" content="#fff"/>
  25. <meta name="color:new url" content="#fff"/>
  26. <meta name="color:new url shadow" content="#03589b"/>
  27. <meta name="color:border 1" content="#83b0d9"/>
  28. <meta name="color:border 2" content="#83b0d9"/>
  29.  
  30.  
  31. <meta name="text:text" content="i'm now at"/>
  32. <meta name="text:new url" content="new"/>
  33. <meta name="text:link" content="link"/>
  34.  
  35. <meta name="select:title font size" content="64px" title="60"/>
  36. <meta name="select:title font size" content="27px" title="50"/>
  37. <meta name="select:title font size" content="36px" title="40"/>
  38. <meta name="select:title font size" content="50px" title="30"/>
  39.  
  40.  
  41. <!-- font -->
  42. <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  43.  
  44.  
  45. <style type="text/css">
  46.  
  47. /* BASIC */
  48.  
  49. body {font-family: 'Inconsolata', monospace;
  50. background-color:{color:background};
  51. background-image:url('{image:background}');
  52. -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size:cover;}
  53.  
  54. a {color:{color:text}; text-decoration: none;}
  55. a:hover {color:{color:text}; text-decoration: none;}
  56.  
  57. .icon {display: inline-block;vertical-align: middle;}
  58. img {max-width: 100%;height: auto;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
  59. img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  60.  
  61. /* end of BASIC */
  62.  
  63. /* fonts */
  64. @font-face { font-family: "axis"; src: url('https://static.tumblr.com/eytkop6/wmZpbioqt/axis.otf'); }
  65. @font-face { font-family: "chantel"; src: url('https://static.tumblr.com/eytkop6/jpspbiopb/chantel.otf'); }
  66.  
  67. #container{position:absolute;width:350px;height:150px;left:50%;top:50%;border-radius: 10px;z-index:9999; -webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  68. -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  69. #cont{position:absolute;opacity: 0.8;border: 30px solid {color:border 1};width:200px;height:200px;left:50%;top:50%;border-radius: 50%; z-index:1;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  70. -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  71. #cont2{position:absolute;opacity: 0.9;border: 30px solid {color:border 2};width:100px;height:100px;left:50%;top:50%;border-radius: 50%; z-index:1;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  72. -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  73.  
  74. /* icon */
  75. #icon {position:absolute;display:static;top: 50%;left:50%;z-index:9;padding:0px;border-radius: 50%;
  76. margin: 0 2px 0 2px;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;
  77. -webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  78. -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  79. #icon img {width:70px;height:70px;background-color: transparent;overflow:hidden;border-radius: 50%;border:20px solid {color:circle};}
  80. #icon img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  81.  
  82. /* moved to */
  83. .move {position:absolute;margin-left:150px;margin-top:10px;font-size: 10px;color:{color:text};}
  84.  
  85. /* new title */
  86. .new {position:absolute;font-family:"chantel"; font-size: {select:title font size};color:{color:new url};text-align:center; text-shadow: 2px 2px {color:new url shadow};
  87. top: 30px;left:60px;padding:10px;overflow:hidden; }
  88.  
  89. /* click text */
  90. .cli {position:absolute;margin-left:135px;margin-top:120px;font-size: 10px;color:{color:text};}
  91.  
  92.  
  93. /* credit */
  94. .credit {position:fixed;right:40px;bottom:40px;width:20px;height:20px;border-radius:50%;padding:5px;line-height:100%;opacity:0.9;
  95. -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;}
  96. .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;}
  97. .credit a:hover {opacity:1;background:none;background:none;}
  98. .credit a:hover img{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;transition: all 0.5s ease;}
  99. .ci {line-height:100%;opacity:0.9;position:fixed;right:40px;bottom:40px;width:20px;height:20px;border-radius:50%;
  100. padding: 5px;border: 1px solid {color:circle};height: 20px;border-radius: 50%;}
  101. .credit:hover {opacity:1;background:none;}
  102. .credit span{width: 45px;height: auto;padding: 3px;right: -100%;margin-left: 15px;line-height: 130% ; font-weight: 400; font-size:7px;
  103. text-align: center;border: 4px solid {color:circle};background: {color:circle};text-transform:uppercase;
  104. border-radius: 5px;position: absolute;{color:text};pointer-events: none;opacity: 0;
  105. transition: all 0.3s ease-in-out;-webkit-transform: translate3d(20px,20px,0px) rotate(45deg);transform: translate3d(20px,20px,0px) rotate(45deg);}
  106. .credit span:before, .credit span:after{content: '';position: absolute;bottom: -10px;left: 80%;margin-left: -21px;width: 0;
  107. height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid {color:circle};}
  108. .credit a:hover span{opacity: 1;-webkit-transform: translate3d(-20px,-55px,0px) rotate(0deg);transform: translate3d(-20px,-55px,0px) rotate(0deg);}
  109. .credit span b{font-weight:600;font-size:12px;font-family:'dalmais';text-transform:lowercase;}
  110.  
  111. </style>
  112.  
  113. <body>
  114. <div id="container">
  115. <a href="{text:link}">
  116. <div class="move">{text:text}</div>
  117. <div class="cli">click to proceed</div>
  118. <div class="new">{text:new url}</div>
  119. </a>
  120. </div>
  121. <div id="cont"></div><div id="cont2"></div>
  122. <div id="icon"><img src="{image:icon}"></div>
  123.  
  124. <!------ DO NOT REMOVE THE CREDIT! -------->
  125. <div class="credit">
  126. <a href="http://flormzel.tumblr.com">
  127. <span>made by <b>flormzel</b></span>
  128. <img class="icon ci" src="https://i.imgur.com/WC7bvcS.jpg"></a>
  129. </div>
  130.  
  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!