Advertisement
Esme

rebel code

Oct 19th, 2019
146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.73 KB | None | 0 0
  1. <style>
  2. @import url('https://fonts.googleapis.com/css?family=Marcellus+SC|Kaushan+Script|Exo');
  3. body { background: url('http://i.imgur.com/yA0bES9.jpg'); background-size: 100% 100%; animation: pulse 5s infinite; }
  4. @keyframes pulse {
  5. 0% { opacity: 0.8; }
  6. 50% { opacity: 1; }
  7. 100% { opacity: 0.8; }
  8. }
  9. html { overflow: hidden; }
  10. body:hover #sheet { opacity: 0; transition-duration: 3s; }
  11. body:hover .ln { width: 5px; transition-duration: 1s; transition-delay: 2s; opacity: 0.6; height: 100%; }
  12. body:hover .bx { left: -120px; transition-duration: 1s; opacity: 1; transition-delay: 1.5s; }
  13. body:hover .t { top: 40%; transition-duration: 1s; opacity: 0.9; transition-delay: 1.5s; }
  14. body:hover .c { left: 28%; opacity: 0.9; transition-duration: 1s; transition-delay: 1.6s; }
  15. body:hover .bx2 { left:560px; top: 140%; transition-duration: 1s; opacity: 1; transition-delay: 1.5s; }
  16. body:hover .t2 { top: 11.5%; transition-duration: 1s; opacity: 0.9; transition-delay: 1.5s; }
  17. body:hover .c2 { right: 28%; top: 90px; opacity: 0.4; transition-duration: 1s; transition-delay: 1.6s; }
  18. #center {
  19. margin: 0px auto;
  20. width: 100px;
  21. height: 100%;
  22. }
  23.  
  24. #sheet {
  25. position: absolute;
  26. bottom: 0px;
  27. left: 0px;
  28. height: 100%;
  29. width: 100%;
  30. background: black;
  31. opacity: 1;
  32. z-index: 5;
  33. transition-duration: 5s;
  34. }
  35.  
  36. .ln {
  37. position: absolute;
  38. top: 0px;
  39. left: 50%;
  40. height: 0%;
  41. width: 3px;
  42. background: url('http://puu.sh/v9wxM.png');
  43. opacity: 0.1;
  44. transition-duration: 1s;
  45. }
  46.  
  47. #cont {
  48. position: absolute;
  49. bottom: 0px;
  50. left: 0px;
  51. height: 100%;
  52. width: 100%;
  53. }
  54.  
  55. .c {
  56. position: relative;
  57. top: 36%;
  58. left: 29%;
  59. font-family: 'Marcellus SC';
  60. font-size: 22px;
  61. color: rgba(0,0,0,0.6);
  62. text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
  63. letter-spacing: 5px;
  64. opacity: 0.3;
  65. transition-duration: 1s;
  66. }
  67.  
  68. .t {
  69. position: relative;
  70. top: 39%;
  71. left: 15%;
  72. font-family: 'Kaushan Script';
  73. font-size: 132px;
  74. color: rgba(144,35,127,0.5);
  75. text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
  76. opacity: 0.2;
  77. transition-duration: 1s;
  78. }
  79.  
  80. .bx {
  81. position: relative;
  82. bottom: -15px;
  83. left: -130px;
  84. height: 80px;
  85. width: 380px;
  86. border-radius: 3px;
  87. background: rgba(13,14,16,0.7);
  88. padding: 10px;
  89. font-family: 'Exo';
  90. color: rgba(255,255,255,0.4);
  91. font-size: 9px;
  92. letter-spacing: 2px;
  93. text-transform: uppercase;
  94. opacity: 0;
  95. transition-duration: 1s;
  96. }
  97.  
  98.  
  99. .c2 {
  100. position: relative;
  101. top: 7.8%;
  102. right: 29%;
  103. font-family: 'Marcellus SC';
  104. font-size: 22px;
  105. color: rgba(203,179,179,1);
  106. text-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  107. letter-spacing: 5px;
  108. opacity: 0.4;
  109. display:block;
  110. -moz-transform: scale(-1, 1);
  111. -webkit-transform: scale(-1, 1);
  112. -o-transform: scale(-1, 1);
  113. -ms-transform: scale(-1, 1);
  114. transform: scale(-1, 1);
  115. transition-duration: 1s;
  116. }
  117.  
  118. .t2 {
  119. position: relative;
  120. top: 10.9%;
  121. right: 15%;
  122. font-family: 'Kaushan Script';
  123. font-size: 132px;
  124. color: rgba(132,42,66,0.5);
  125. text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
  126. opacity: 0.2;
  127. display:block;
  128. -moz-transform: scale(-1, 1);
  129. -webkit-transform: scale(-1, 1);
  130. -o-transform: scale(-1, 1);
  131. -ms-transform: scale(-1, 1);
  132. transform: scale(-1, 1);
  133. transition-duration: 1s;
  134. }
  135.  
  136.  
  137. .mirror {
  138. display: block;
  139. transform: scale(-1, 1);
  140. -moz-transform: scale(-1, 1);
  141. -webkit-transform: scale(-1, 1);
  142. -o-transform: scale(-1, 1);
  143. -ms-transform: scale(-1, 1);
  144. }
  145. a {
  146. color: inherit;
  147. display: block;
  148. text-decoration: none;
  149. }
  150.  
  151. .ps {
  152. position: absolute;
  153. bottom: 0px;
  154. right: 0px;
  155. height: 100%;
  156. width: 50%;
  157. z-index: 20;
  158. }
  159.  
  160.  
  161. </style>
  162.  
  163. <a target="_blank" href="https://roleplay.chat/profile.php?user=Battledancer" target="_blank"><div class="ps"></div></a>
  164.  
  165.  
  166. <div id="center">
  167. <div class="ln"></div>
  168. </div>
  169.  
  170. <div id="sheet"></div>
  171.  
  172.  
  173. <div id="cont">
  174.  
  175. <div class="t">
  176. Xayah-
  177. </div>
  178.  
  179. <div class="c">
  180. the rebel
  181.  
  182. <div class="bx"><font style="color: rgba(132,42,66,0.8);">></font> . . _ you don't have to tell me twice. each enemy is just another
  183. target to sew together into the tapestry of our making. it's all for the greater--,
  184. a will to live and survive amongst our flourishing yet desolate life. you make fights worth every single
  185. wasted feather, every last beat of wing and charm of foe. no other shall claim my heart as thee.. . ' -- Daily log::
  186. <font style="color: #221133;">#</font>
  187. <font style="color: #552244;">0</font>
  188. <font style="color: #bb4444;">Z</font>
  189. <font style="color: #eeaa88;">8</font>
  190. <font style="color: #ee8855;">6</font>
  191. <font style="color: #996666;">H</font>
  192. <font style="color: #553344;">4</font>
  193. <font style="color: #221122;">'</font>
  194.  
  195. </div>
  196. </div>
  197.  
  198. <div class="t2">
  199. Rakan-
  200. </div>
  201.  
  202. <div class="c2">
  203. the charmer
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement