owltrash

minnie's new profile?

Nov 23rd, 2018
159
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.16 KB | None | 0 0
  1. <script defer>
  2. window.onload = function() {
  3. <!--
  4. function clickIE() {if (document.all) {(message);return false;}}
  5. function clickNS(e) {if
  6. (document.layers||(document.getElementById&&!document.all)) {
  7. if (e.which==2||e.which==3) {(message);return false;}}}
  8. if (document.layers)
  9. {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
  10. else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
  11. document.oncontextmenu=new Function("return false")
  12. // -->
  13.  
  14. var canvas = document.getElementById("canvas"),
  15. ctx = canvas.getContext('2d');
  16.  
  17. canvas.width = window.innerWidth;
  18. canvas.height = window.innerHeight;
  19.  
  20. var stars = [], // Array that contains the stars
  21. FPS = 60, // Frames per second
  22. x = canvas.width; // Number of stars
  23.  
  24. // Push stars to array
  25.  
  26. for (var i = 0; i < x; i++) {
  27. stars.push({
  28. x: Math.random() * canvas.width,
  29. y: Math.random() * canvas.height,
  30. radius: Math.random(),
  31. vx: Math.floor(Math.random() * 10) - 5,
  32. vy: Math.floor(Math.random() * 10) - 5
  33. });
  34. }
  35.  
  36. // Draw the scene
  37.  
  38. function draw() {
  39. ctx.clearRect(0,0,canvas.width,canvas.height);
  40.  
  41. ctx.globalCompositeOperation = "lighter";
  42.  
  43. for (var i = 0, x = stars.length; i < x; i++) {
  44. var s = stars[i];
  45.  
  46. ctx.fillStyle = "#fff";
  47. ctx.beginPath();
  48. ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
  49. ctx.fill();
  50. }
  51. }
  52.  
  53. // Update star locations
  54.  
  55. function update() {
  56. for (var i = 0, x = stars.length; i < x; i++) {
  57. var s = stars[i];
  58.  
  59. s.x += s.vx / FPS;
  60. s.y += s.vy / FPS;
  61.  
  62. if (s.x < 0 || s.x > canvas.width) s.x = -s.x;
  63. if (s.y < 0 || s.y > canvas.height) s.y = -s.y;
  64. }
  65. }
  66.  
  67. // Update and draw
  68.  
  69. function tick() {
  70. draw();
  71. update();
  72. requestAnimationFrame(tick);
  73. }
  74.  
  75. tick();
  76. };
  77. </script>
  78.  
  79.  
  80. <style>
  81. @import url('https://fonts.googleapis.com/css?family=Cardo|Cinzel+Decorative|Dancing+Script|IM+Fell+English+SC|Open+Sans+Condensed:300|Source+Serif+Pro|Teko|Zeyada');
  82. @import url('https://fonts.googleapis.com/css?family=Georgia');
  83.  
  84.  
  85. .pfor {display: none;
  86. background-color: transparent;}
  87. body {
  88. background:url('') top left fixed repeat;
  89. background-color: #fdc9c9;
  90. background-image: linear-gradient(#fdc9c9, #d76c6d);
  91. overflow: hidden;}
  92.  
  93. #profile {border: 0px; background-color: transparent;}
  94. *{cursor: url('https://i.imgur.com/eAVwijG.png'), default;}
  95.  
  96. ::-webkit-scrollbar {
  97. width: 5px; height: 0px;
  98. background:;
  99. }
  100. ::-webkit-scrollbar-thumb {
  101. background-color:#f48888; border:1px solid #ffafaf;
  102. -webkit-border-radius: 10px; border-radius: 10px;
  103. }
  104.  
  105.  
  106. /*------» intro «------*/ /*------» intro «------*/ /*------» intro «------*/
  107.  
  108. canvas {
  109. background-image: linear-gradient(#fdc9c9, #d76c6d);
  110. }
  111.  
  112. #opening {
  113. position:fixed; width:100%; height:100%; left:225px; bottom:180px;}
  114.  
  115. #opening-img {
  116. position:absolute; background-image:
  117. url('https://i.imgur.com/oFVMnvV.gif');
  118. background-position:0% 20%; background-size:450px;
  119. background-repeat:no-repeat;
  120. background-attachment: absolute;
  121. width:450px; height:617px;
  122. left:75px; bottom:-100px;
  123. box-shadow: inset 0px 0px 20px #ffafaf,
  124. 0px 0px 20px #ffafaf;
  125. filter: blur(0px); opacity:1.0; transition: 1s;}
  126.  
  127. body:hover #opening-img {filter: blur(10px); opacity:.0; transition: 2.5s;}
  128.  
  129.  
  130. /*------» images «------*/ /*------» images «------*/ /*------» images «------*/
  131.  
  132. #pic {position:absolute;
  133. left:105px; bottom:-130px;
  134. opacity:.0; transition: 1s;}
  135.  
  136. #sprite {position:absolute;
  137. bottom:-9px; left:410px;
  138. }
  139.  
  140.  
  141. /*------» info «------*/ /*------» info «------*/ /*------» info «------*/
  142.  
  143. #container {
  144. position:absolute;
  145. left:430px; bottom:30px;
  146. opacity:.0; transition: 1s;}
  147.  
  148. body:hover #pic {opacity:1.0; transition-delay: 1s;}
  149. body:hover #container {opacity:1.0; transition-delay: 1s;}
  150. body:hover #sprite {opacity:1.0; transition-delay: 1s;}
  151.  
  152.  
  153. #name {
  154. position:absolute;
  155. left:343px; bottom:97px;
  156. width:175px; height:195px;
  157. background-color:;
  158. color:#e58887;
  159. font-family: 'dancing script', cursive;
  160. font-size:69px;
  161. letter-spacing:1px;
  162. text-transform:;
  163. text-align:justify;
  164. padding:10px;
  165. float:left;
  166. overflow:auto;
  167. opacity:.0; transition: 1s;
  168. }
  169.  
  170. #subtitle {
  171. position:absolute;
  172. left:390px; bottom:32px;
  173. width:175px; height:195px;
  174. background-color:;
  175. color:#e58887;
  176. font-family: 'source serif pro', cursive;
  177. font-size:20px;
  178. letter-spacing:2px;
  179. text-transform:uppercase;
  180. text-align:justify;
  181. padding:10px;
  182. float:left;
  183. overflow:auto;
  184. opacity:.0; transition: 1s;
  185. }
  186.  
  187. #bio {
  188. position:absolute;
  189. left:325px; bottom:-2px;
  190. width:185px; height:193px;
  191. background-color:;
  192. color:#c05e5e;
  193. font-family:'cardo';
  194. font-size:13px;
  195. line-height:20px;
  196. letter-spacing:1px;
  197. text-transform:;
  198. text-align:justify;
  199. padding:10px;
  200. float:left;
  201. overflow:auto;
  202. opacity:.0; transition: 1s;
  203. }
  204.  
  205. #bio::first-letter {
  206. background-color:#f0bbbb;
  207. float:left;
  208. color:#e58887;
  209. font-family:'cinzel decorative', cursive;
  210. font-size:32px;
  211. line-height:32px;
  212. letter-spacing:1px;
  213. text-transform:uppercase;
  214. text-shadow: 1px 0px 0px #ffd0d0,
  215. 0px 1px 0px #ffd0d0,
  216. -1px 0px 0px #ffd0d0,
  217. 0px -1px 0px #ffbebe;
  218. margin: 0px 5px 0px;
  219. padding:10px;
  220. box-shadow: inset 0px 0px 20px #ffafaf,
  221. 0px 0px 20px #ffafaf;
  222. }
  223.  
  224. #stats {
  225. position:absolute;
  226. left:325px; bottom:-135px;
  227. width:195px; height:120px;
  228. background-color:;
  229. color:#c05e5e;
  230. font-family:'open sans condensed', sans-serif;
  231. font-size:13px;
  232. line-height:26px;
  233. letter-spacing:3px;
  234. text-transform:;
  235. text-align:justify;
  236. padding:10px;
  237. float:left;
  238. overflow:auto;
  239. opacity:.0; transition: 1s;
  240. }
  241.  
  242.  
  243. body:hover #pic {
  244. opacity:1.0; transition-delay: 1s;
  245. }
  246. body:hover #sprite {
  247. opacity:1.0; transition-delay: 1s;
  248. }
  249. body:hover #bio {
  250. opacity:1.0; transition-delay: 1s;
  251. }
  252. body:hover #name {
  253. opacity:1.0; transition-delay: 1s;
  254. }
  255. body:hover #subtitle {
  256. opacity:1.0; transition-delay: 1s;
  257. }
  258. body:hover #stats {
  259. opacity:1.0; transition-delay: 1s;
  260. }
  261.  
  262.  
  263. /*------» heels «------*/ /*------» heels «------*/ /*------» heels «------*/
  264.  
  265. a {color: #f7c4c4;
  266. text-decoration:none;
  267. text-transform:;
  268. font-family:'georgia', cursive;
  269. font-size:13px;
  270. font-weight:normal;
  271. line-height:15px;
  272. letter-spacing:1px;
  273. box-shadow: inset 0px 0px 20px #ffafaf,
  274. 0px 0px 20px #ffafaf;
  275. padding:2px;
  276. display:inline-block;
  277. }
  278. a:hover {color: #f7c4c4;
  279. text-decoration: none;
  280. transition: 1.5s;
  281. }
  282.  
  283. b {
  284. text-decoration:none;
  285. background-color:;
  286. color:#e58887;
  287. font-family:'georgia', cursive;
  288. font-size:13px;
  289. line-height:13px;
  290. letter-spacing:1px;
  291. text-shadow: 1px 0px 0px #ffd0d0,
  292. 0px 1px 0px #ffd0d0,
  293. -1px 0px 0px #ffd0d0,
  294. 0px -1px 0px #ffbebe;
  295. text-transform:;
  296. padding:2px;
  297. }
  298.  
  299. u {
  300. text-decoration:none;
  301. background-color:#f0bbbb;
  302. color:#e58887;
  303. font-family:'teko';
  304. font-size:14px;
  305. letter-spacing:1px;
  306. text-shadow: 1px 0px 0px #ffd0d0,
  307. 0px 1px 0px #ffd0d0,
  308. -1px 0px 0px #ffd0d0,
  309. 0px -1px 0px #ffbebe;
  310. text-transform:;
  311. box-shadow: inset 0px 0px 20px #ffafaf,
  312. 0px 0px 20px #ffafaf;
  313. padding:1px;
  314. }
  315.  
  316.  
  317. </style>
  318.  
  319.  
  320. <body>
  321. <canvas id="canvas"></canvas>
  322.  
  323. <div id="opening">
  324. <div id="opening-img">
  325.  
  326. <div id="sprite">
  327. <img src="https://i.imgur.com/TwU1kIA.gif">
  328. </div>
  329. </div>
  330.  
  331. <div id="pic">
  332. <img src="https://i.imgur.com/dvktrh0.png" height="550">
  333. </div>
  334.  
  335. <div id="name">
  336. Minthe,
  337. </div>
  338.  
  339. <div id="subtitle">
  340. the Skitty
  341. </div>
  342.  
  343. <div id="bio">
  344.  
  345. A former <i><b>sugar baby</b></i> and <i><b>foster kid</b></i>, Minthe spent most of her life relying on no one but herself (despite her many boyfriends’ generous financial assistance), until heartbreak and <i><b>second chances</b></i> taught her otherwise.
  346. <br>
  347. Now she lives with her boyfriend <a target="_blank" href="https://roleplay.chat/profile.php?user=westly"><b>Westly</b></a>, his ditto, rotom, and three dogs, trying to figure out what she wants for herself.
  348.  
  349. </div>
  350.  
  351. <div id="stats">
  352.  
  353. <u>KITTEN POKÉMON.</u> <u>20 YEARS OLD.</u>
  354. <u>SASSY.</u> <u>MATERIALISTIC.</u> <u>BOLD.</u>
  355. <u>5’02”.</u>
  356.  
  357. <br>
  358. <font style="float:right;">
  359. <u>TAKEN IC & OOC.</u>
  360. <u>PM-FRIENDLY!</u></a>
  361.  
  362. </div>
  363.  
  364.  
  365. </div>
  366.  
  367.  
  368. </body>
Advertisement
Add Comment
Please, Sign In to add comment