API tools faq
paste
owltrash

Raven's profile (purple version; imperfect)

owltrash
Jun 14th, 2018
159
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.82 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  8. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  12. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  13. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  14. <script defer>
  15. window.onload = function() {
  16.  
  17. };
  18. </script>
  19. <style>
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <style>
  25. @import url(https://fonts.googleapis.com/css?family=Montserrat);
  26. @import url(https://fonts.googleapis.com/css?family=Playfair Display SC);
  27. @import url(https://fonts.googleapis.com/css?family=Questrial);
  28. @import url(https://fonts.googleapis.com/css?family=Roboto);
  29. @import url(https://fonts.googleapis.com/css?family=Merriweather);
  30. @import url(https://fonts.googleapis.com/css?family=Oxygen);
  31.  
  32. /*coded by [punpun]. do not steal the concept. do not remove the credit. do not remove this.*/
  33. ::-webkit-scrollbar-thumb {background-color: #8661C2; width: 1px; }
  34. ::-webkit-scrollbar {background-color: transparent; width: 1px;}
  35.  
  36. body {background: linear-gradient(to bottom, #BEAFE7 0%,#cccccc 250%); cursor:url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important; }
  37.  
  38. a {
  39. color: #CF4796;
  40. text-decoration: none;
  41. transition: all 0.4s ease-in-out;
  42. -moz-transition: all 0.4s ease-in-out;
  43. -webkit-transition: all 0.4s ease-in-out;}
  44. a:hover {
  45. color: #ffffff;background-color: #000; cursor:url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important;
  46. text-decoration: none;
  47. transition: all 0.4s ease-in-out;
  48. -moz-transition: all 0.4s ease-in-out;
  49. -webkit-transition: all 0.4s ease-in-out;}
  50.  
  51. .tatami1
  52. { position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  53. height: 145px;
  54. width: 145px;
  55. border: 7px solid #BEAFE7;
  56. z-index:10;
  57. background-image: url('https://i.imgur.com/ABVohIC.png');
  58. background-repeat: no-repeat;
  59. background-size: 270px; /*width, height*/
  60. background-position: -80px 0px;
  61. -webkit-filter: grayscale(0%);
  62. filter: grayscale(0%);
  63. opacity:0.75;
  64. transition:all 0.3s ease-out;
  65. }
  66. .text1
  67. { position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  68. height: 105px;
  69. width: 105px;
  70. border: 0px solid #BEAFE7;
  71. z-index:9;
  72. font-size:19px;
  73. background:#f3f3f3;
  74. line-height:5;
  75. border-right: 2px solid #BEAFE7;
  76. border-left: 2px solid #BEAFE7;
  77. padding:30px;
  78. color: #aeaeae;
  79. letter-spacing: 0.3px;
  80. text-align: justify;
  81. font-family: roboto;
  82. overflow-y:auto;
  83. overflow-x:hidden;
  84. opacity:0.2;
  85. -webkit-transition: all 0.3s ease-out;
  86. transition: all 0.3s ease-out;
  87. }
  88. .tatami1:hover {opacity:0;}
  89.  
  90.  
  91.  
  92.  
  93. .tatami2
  94. { position: fixed; margin: auto; right: 157px; left:0; top: 0; bottom: 315;
  95. height: 145px;
  96. width: 303px;
  97. border: 7px solid #BEAFE7;
  98. z-index:10;
  99. background-image: url('https://i.imgur.com/Ucr6SKx.png');
  100. background-repeat: no-repeat;
  101. background-size: 400px; /*width, height*/
  102. background-position: -15px -30px;
  103. -webkit-filter: grayscale(10%);
  104. filter: grayscale(10%);
  105. opacity:0.75;
  106. transition:all 0.3s ease-out;
  107. }
  108.  
  109.  
  110.  
  111. .tatami3
  112. { position: fixed; margin: auto; right: 0; left:157px; top: 315; bottom: 0;
  113. height: 145px;
  114. width: 303px;
  115. border: 7px solid #BEAFE7;
  116. z-index:10;
  117. background-image: url('https://i.imgur.com/Bl3PfCd.png');
  118. background-repeat: no-repeat;
  119. background-size: 400px; /*width, height*/
  120. background-position: -15px -50px;
  121. -webkit-filter: hue-rotate(0deg);
  122. filter: hue-rotate(0deg);
  123. opacity:0.75;
  124. transition:all 0.3s ease-out;}
  125.  
  126. .tatami4
  127. { position: fixed; margin: auto; right: 315px; left:0; top: 160; bottom: 0;
  128. height: 301px;
  129. width: 145px;
  130. border: 7px solid #BEAFE7;
  131. z-index:10;
  132. background-image: url('https://i.imgur.com/eVxDYMt.png');
  133. background-repeat: no-repeat;
  134. background-size: 500px; /*width, height*/
  135. background-position: -45px -20px;
  136. -webkit-filter: hue-rotate(30deg);
  137. filter: hue-rotate(30deg);
  138. opacity:0.75;
  139. transition:all 0.3s ease-out;
  140. }
  141.  
  142. .tatami5
  143. { position: fixed; margin: auto; right: 0px; left:315; top: 0; bottom: 159;
  144. height: 301px;
  145. width: 145px;
  146. border: 7px solid #BEAFE7;
  147. z-index:10;
  148. background-image: url('https://i.imgur.com/YNiZ2dm.png');
  149. background-repeat: no-repeat;
  150. background-size: 550px; /*width, height*/
  151. background-position: -265px 0px;
  152. opacity:0.75;
  153. transition:all 0.3s ease-out;
  154. }
  155.  
  156.  
  157.  
  158. .was {
  159. position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height: 100%;
  160. background-color:#BEAFE7;
  161. opacity: 0; border: 20.99px solid #;
  162. z-index: 5;
  163. text-align: justify;
  164. transition: all 0.3s linear;
  165. }
  166.  
  167. .was:target {
  168. z-index: 30;
  169. opacity: 1;
  170. transition: all 0.3s linear;
  171. }
  172.  
  173.  
  174. .container {position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height:100%;
  175. background-color:#;
  176. opacity: 0; border: 1px solid #;
  177. z-index: 11;
  178. text-align: justify;
  179. -webkit-transition: all 0.3s ease-out;
  180. transition: all 0.3s ease-out;}
  181.  
  182. .tat1
  183. { position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  184. height: 145px;
  185. width: 145px;
  186. border: 7px solid #BEAFE7;
  187. z-index:30;
  188. background-image: url('https://i.imgur.com/ABVohIC.png');
  189. background-repeat: no-repeat;
  190. background-size: 270px; /*width, height*/
  191. background-position: -80px 0px;
  192. -webkit-filter: grayscale(0%);
  193. filter: grayscale(0%);
  194. opacity:0.75;
  195. transition:all 1.5s ease-out;
  196. }
  197.  
  198.  
  199. .tattxt
  200. {
  201. height: 125px;
  202. width: 215px;
  203. border: px solid #BEAFE7;
  204. z-index:30;
  205. font-size:11px;
  206. background:#;
  207. padding:px;
  208. color: #8661C2;
  209. letter-spacing: 0.3px;
  210. text-align: justify;
  211. font-family: Questrial;
  212. overflow-y:auto;
  213. overflow-x:hidden;
  214. opacity:0;
  215. -webkit-transition: all 0.3s ease-out;
  216. transition: all 0.3s ease-out;
  217. }
  218. .was:hover .tattxt{opacity:1;}
  219.  
  220.  
  221. .tattxta
  222. {
  223. height: 145px;
  224. width: 105px;
  225. border: px solid #000;
  226. z-index:30;
  227. font-size:11px;
  228. background:#;
  229. padding:10px;
  230. color: #8661C2;
  231. letter-spacing: 0.3px;
  232. text-align: justify;
  233. font-family: Questrial;
  234. overflow-y:auto;
  235. overflow-x:hidden;
  236. opacity:0;
  237. -webkit-transition: all 0.3s ease-out;
  238. transition: all 0.3s ease-out;
  239. }
  240. .was:hover .tattxta{opacity:1;}
  241.  
  242. .sts2 {
  243. font-family: Questrial;
  244. font-size: 10px;width:100px; height: 8px;
  245. text-align: left;
  246. font-weight:100;
  247. color: #8661C2;
  248. background-color: #;
  249. padding: 3px;
  250. margin-bottom: px;
  251. margin-top: px;
  252. line-height: 10px;
  253. border-bottom: 1px solid #8661C2; border-right: 2px solid #8661C2;
  254. }
  255. .sts2:hover{ background-color: #000;-webkit-transition: all 0.3s ease-out;
  256. transition: all 0.3s ease-out;}
  257.  
  258. </style>
  259.  
  260. <a href="#1"><div class="tatami1"></div></a>
  261. <a href="#3"><div class="tatami2"></div></a>
  262. <a href="#4"><div class="tatami3"></div></a>
  263. <a href="#2"><div class="tatami4"></div></a>
  264. <a href="#5"><div class="tatami5"></div></a>
  265.  
  266. <div class="text1"><center><i>ENTER</i></center></div>
  267.  
  268.  
  269. <div id="1" class="was">
  270.  
  271. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  272. <a href="#"><div class="tat1" ></div></a>
  273. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:400; top: 0; bottom: 0;"><b>[ out of character ]</b>
  274.  
  275. <p>Basic rules apply; IC ≠ OOC, real life over roleplay, no means no. Shitposter until otherwise. <br><br>
  276.  
  277. TTGO is lit. Eat me. </div>
  278.  
  279. <div class="tattxta" style="position: absolute; margin: auto; right: 300px; left:0; top: 20; bottom: 0;">
  280.  
  281. CONTACT INFO:
  282. <div class="sts2">PM-FRIENDLY: ---</div>
  283. <div class="sts2">DISCORD: ✓ </div>
  284. <div class="sts2">TIMEZONE: EST</div><br>
  285. ALTS:
  286. <div class="sts2">n/a</div>
  287. <br>
  288. <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#4">▼</a> / <a href="#5">►</a>
  289. </div></div>
  290.  
  291. <div id="2" class="was">
  292.  
  293. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  294. <a href="#"><div class="tatami4"></div></a>
  295. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:100; top: 0; bottom: 0;"><b>[ personality ]</b>
  296.  
  297. <br><br>Because her emotions are tied to both her magical abilities and her father, most of Raven’s childhood and teenage years were spent suppressing them. As such, she may seem uncomfortable around large outbursts of emotion, or even just expressing her own. </div>
  298.  
  299. <div class="tattxta" style="position: absolute; margin: auto; right: 12px; left:0; top: 300; bottom: 0;">
  300.  
  301. TRAITS:
  302. <div class="sts2">DRY HUMOR</div>
  303. <div class="sts2">INTROVERTED</div>
  304. <div class="sts2">CYNICAL</div>
  305. <div class="sts2">QUIET</div>
  306. <div class="sts2">SECRETIVE</div><br>
  307. <a href="#1">◥</a> / <a href="#3">▲</a> / <a href="#4">►</a> / <a href="#5">◥</a>
  308. </div></div>
  309.  
  310.  
  311. <div id="3" class="was">
  312.  
  313. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  314. <a href="#"><div class="tatami2"></div></a>
  315.  
  316. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 20;"><b>[ basics ]</b>
  317.  
  318. <br><br><br><center>Half-demon; firstborn and only daughter of <b>Trigon</b> and a human woman, Raven has come a long way, but still struggles from time to time. </center></div>
  319.  
  320. <div class="tattxta" style="position: absolute; margin: auto; right: 350px; left:0; top: 0; bottom: 0;">
  321.  
  322. STATS:
  323. <div class="sts2">RAVEN “ROTH”</div>
  324. <div class="sts2">NINETEEN</div>
  325. <div class="sts2">FIVE-FIVE</div>
  326. <div class="sts2">AZARATH</div>
  327. <div class="sts2">TEEN TITANS</div>
  328. <br>
  329. <div class="sts2">DC UNIVERSE</div><br>
  330. <a href="#1">◢ </a> / <a href="#2">◣</a> / <a href="#4">▼</a> / <a href="#5">►</a>
  331. </div></div>
  332.  
  333.  
  334. <div id="4" class="was">
  335.  
  336. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  337. <a href="#"><div class="tatami3"></div></a>
  338.  
  339. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;"><b>[ relationships ]</b>
  340.  
  341. <br><br><br><center>Hard-fought and hard-won, Raven keeps those she’s deemed family close to her heart.</center></div>
  342.  
  343.  
  344. <div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:350; top: 20; bottom: 0;">
  345.  
  346. FRIENDS:
  347. <a target="_blank" href="https://roleplay.chat/profile.php?user=we+love+gar" title=""><div class="sts2">STARFIRE</div></a>
  348. <a target="_blank" href="https://roleplay.chat/profile.php?user=beast+boy" title=""><div class="sts2">BEAST BOY</div></a>
  349. <a target="_blank" href="https://roleplay.chat/profile.php?user=cyborg." title=""><div class="sts2">CYBORG</div></a>
  350. <div class="sts2">n/a</div>
  351. <div class="sts2">n/a</div><br>
  352. <a href="#1">◤</a> / <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#5">◥</a>
  353. </div></div>
  354.  
  355.  
  356. <div id="5" class="was">
  357.  
  358. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  359. <a href="#"><div class="tatami5"></div></a>
  360.  
  361. <div class="tattxt" style="position: absolute; margin: auto; right: 80px; left:0; top: 0; bottom: 280;"><b>[ abilities ]</b>
  362.  
  363. <br><br><br>Raven’s demonic parentage and Azar’s teachings guarantee powerful magical abilities, yet tenuous control. </div>
  364.  
  365. <div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:30; top: 20; bottom: 0;">
  366.  
  367. <div class="sts2">ASTL. PROJECTION </div>
  368. <div class="sts2">— “SOUL SELF”</div>
  369. <div class="sts2">EMPATHY</div>
  370. <div class="sts2">TELEKINESIS</div>
  371. <div class="sts2">TELEPORTATION</div>
  372. <div class="sts2">FLIGHT</div>
  373. <div class="sts2">HEALING</div><br>
  374. <a href="#2">◣</a> / <a href="#1">◄</a> / <a href="#3">◤</a> / <a href="#4">▼</a>
  375. </div></div>
  376.  
  377.  
  378. <a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; left:10; bottom:0;width:25;-webkit-transform: scaleX(-1); filter: FlipH;"></a>
  379. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!