Chibi-Elle

Treble Profile

Jun 19th, 2018
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.56 KB | None | 0 0
  1. <html>
  2. <head>
  3. <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  5. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  9. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  13. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  14. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  15. <script defer>
  16. window.onload = function() {
  17.  
  18. };
  19. </script>
  20. <style>
  21.  
  22. </style>
  23. </head>
  24. <body>
  25. <style>
  26. @import url(https://fonts.googleapis.com/css?family=Montserrat);
  27. @import url(https://fonts.googleapis.com/css?family=Playfair Display SC);
  28. @import url(https://fonts.googleapis.com/css?family=Questrial);
  29. @import url(https://fonts.googleapis.com/css?family=Roboto);
  30. @import url(https://fonts.googleapis.com/css?family=Merriweather);
  31. @import url(https://fonts.googleapis.com/css?family=Oxygen);
  32.  
  33. /*coded by [punpun]. do not steal the concept. do not remove the credit. do not remove this.*/
  34. ::-webkit-scrollbar-thumb {background-color: #8B9BA8; width: 1px; }
  35. ::-webkit-scrollbar {background-color: transparent; width: 1px;}
  36.  
  37. body {background: linear-gradient(to bottom, #fff 0%,#8F8F8F 250%); cursor:url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important; }
  38.  
  39. a {
  40. color: #aeaeae;
  41. text-decoration: none;
  42. transition: all 0.4s ease-in-out;
  43. -moz-transition: all 0.4s ease-in-out;
  44. -webkit-transition: all 0.4s ease-in-out;}
  45. a:hover {
  46. color: #fff;background-color: #aeaeae; cursor:url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important;
  47. text-decoration: none;
  48. transition: all 0.4s ease-in-out;
  49. -moz-transition: all 0.4s ease-in-out;
  50. -webkit-transition: all 0.4s ease-in-out;}
  51.  
  52. .tatami1
  53. { position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  54. height: 145px;
  55. width: 145px;
  56. border: 7px solid #fff;
  57. z-index:10;
  58. background-image: url('https://s1.zerochan.net/Bort.%28Houseki.no.Kuni%29.600.1840383.jpg');
  59. background-repeat: no-repeat;
  60. background-size: 270px; /*width, height*/
  61. background-position: -80px 0px;
  62. -webkit-filter: grayscale(0%);
  63. filter: grayscale(0%);
  64. opacity:0.75;
  65. transition:all 0.6s ease-out;
  66. }
  67. .text1
  68. { position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  69. height: 105px;
  70. width: 105px;
  71. border: 0px solid #fff;
  72. z-index:9;
  73. font-size:19px;
  74. background:#f3f3f3;
  75. line-height:5;
  76. border-right: 2px solid #fff;
  77. border-left: 2px solid #fff;
  78. padding:30px;
  79. color: #aeaeae;
  80. letter-spacing: 0.1px;
  81. text-align: justify;
  82. font-family: roboto;
  83. overflow-y:auto;
  84. overflow-x:hidden;
  85. opacity:0.2;
  86. -webkit-transition: all 0.6s ease-out;
  87. transition: all 0.6s ease-out;
  88. }
  89. .tatami1:hover {opacity:0;}
  90.  
  91.  
  92.  
  93.  
  94. .tatami2
  95. { position: fixed; margin: auto; right: 157px; left:0; top: 0; bottom: 315;
  96. height: 145px;
  97. width: 303px;
  98. border: 7px solid #fff;
  99. z-index:10;
  100. background-image: url('https://static.zerochan.net/Bort.%28Houseki.no.Kuni%29.full.2218998.jpg');
  101. background-repeat: no-repeat;
  102. background-size: 400px; /*width, height*/
  103. background-position: -25px -5px;
  104. -webkit-filter: grayscale(10%);
  105. filter: grayscale(10%);
  106. opacity:0.75;
  107. transition:all 0.6s ease-out;
  108. }
  109.  
  110.  
  111.  
  112. .tatami3
  113. { position: fixed; margin: auto; right: 0; left:157px; top: 315; bottom: 0;
  114. height: 145px;
  115. width: 303px;
  116. border: 7px solid #fff;
  117. z-index:10;
  118. background-image: url('https://s1.zerochan.net/Bort.%28Houseki.no.Kuni%29.600.2317783.jpg');
  119. background-repeat: no-repeat;
  120. background-size: 400px; /*width, height*/
  121. background-position: -75px 1px;
  122. -webkit-filter: hue-rotate(0deg);
  123. filter: hue-rotate(0deg);
  124. opacity:0.75;
  125. transition:all 0.6s ease-out;}
  126.  
  127. .tatami4
  128. { position: fixed; margin: auto; right: 315px; left:0; top: 160; bottom: 0;
  129. height: 301px;
  130. width: 145px;
  131. border: 7px solid #fff;
  132. z-index:10;
  133. background-image: url('https://s1.zerochan.net/Bort.%28Houseki.no.Kuni%29.600.2272322.jpg');
  134. background-repeat: no-repeat;
  135. background-size: 500px; /*width, height*/
  136. background-position: -250px -20px;
  137. -webkit-filter: hue-rotate(30deg);
  138. filter: hue-rotate(30deg);
  139. opacity:0.75;
  140. transition:all 0.6s ease-out;
  141. }
  142.  
  143. .tatami5
  144. { position: fixed; margin: auto; right: 0px; left:315; top: 0; bottom: 159;
  145. height: 301px;
  146. width: 145px;
  147. border: 7px solid #fff;
  148. z-index:10;
  149. background-image: url('https://static.zerochan.net/Bort.%28Houseki.no.Kuni%29.full.1680171.jpg');
  150. background-repeat: no-repeat;
  151. background-size: 550px; /*width, height*/
  152. background-position: -205px 0px;
  153. -webkit-filter: hue-rotate(90deg);
  154. filter: hue-rotate(90deg);
  155. opacity:0.75;
  156. transition:all 0.6s ease-out;
  157. }
  158.  
  159.  
  160.  
  161. .was {
  162. position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height: 100%;
  163. background-color:#fff;
  164. opacity: 0; border: 20.99px solid #;
  165. z-index: 5;
  166. text-align: justify;
  167. transition: all 1.6s linear;
  168. }
  169.  
  170. .was:target {
  171. z-index: 30;
  172. opacity: 1;
  173. transition: all 1.6s linear;
  174. }
  175.  
  176.  
  177. .container {position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height:100%;
  178. background-color:#;
  179. opacity: 0; border: 1px solid #;
  180. z-index: 11;
  181. text-align: justify;
  182. -webkit-transition: all 0.6s ease-out;
  183. transition: all 0.6s ease-out;}
  184.  
  185. .tat1
  186. { position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
  187. height: 145px;
  188. width: 145px;
  189. border: 7px solid #eee;
  190. z-index:30;
  191. background-image: url('https://78.media.tumblr.com/5ea2608ff42fe76a22bc117123e7b73d/tumblr_p0qbehFl7z1v6bs4yo4_250.gif');
  192. background-repeat: no-repeat;
  193. background-size: 270px; /*width, height*/
  194. background-position: -20px -30px;
  195. -webkit-filter: grayscale(0%);
  196. filter: grayscale(0%);
  197. opacity:0.75;
  198. transition:all 1.5s ease-out;
  199. }
  200.  
  201.  
  202. .tattxt
  203. {
  204. height: 125px;
  205. width: 215px;
  206. border: px solid #aeaeae;
  207. z-index:30;
  208. font-size:12px;
  209. background:#;
  210. padding:px;
  211. color: #636363;
  212. letter-spacing: 0.1px;
  213. text-align: justify;
  214. font-family: Questrial;
  215. overflow-y:auto;
  216. overflow-x:hidden;
  217. opacity:0;
  218. -webkit-transition: all 0.6s ease-out;
  219. transition: all 0.6s ease-out;
  220. }
  221. .was:hover .tattxt{opacity:1;}
  222.  
  223.  
  224. .tattxta
  225. {
  226. height: 145px;
  227. width: 105px;
  228. border: px solid #000;
  229. z-index:30;
  230. font-size:12px;
  231. background:#;
  232. padding:10px;
  233. color: #636363;
  234. letter-spacing: 0.1px;
  235. text-align: justify;
  236. font-family: Questrial;
  237. overflow-y:auto;
  238. overflow-x:hidden;
  239. opacity:0;
  240. -webkit-transition: all 0.6s ease-out;
  241. transition: all 0.6s ease-out;
  242. }
  243. .was:hover .tattxta{opacity:1;}
  244.  
  245. .sts2 {
  246. font-family: Questrial;
  247. font-size: 10px;width:95px; height: 8px;
  248. text-align: left;
  249. font-weight:100;
  250. color: #636363;
  251. background-color: #;
  252. padding: 3px;
  253. margin-bottom: px;
  254. margin-top: px;
  255. line-height: 10px;
  256. border-bottom: 1px solid #636363; border-right: 2px solid #636363;
  257. }
  258. .sts2:hover{ background-color: #D99EAD;-webkit-transition: all 0.6s ease-out;
  259. transition: all 0.6s ease-out;}
  260.  
  261. </style>
  262.  
  263. <a href="#1"><div class="tatami1"></div></a>
  264. <a href="#3"><div class="tatami2"></div></a>
  265. <a href="#4"><div class="tatami3"></div></a>
  266. <a href="#2"><div class="tatami4"></div></a>
  267. <a href="#5"><div class="tatami5"></div></a>
  268.  
  269. <div class="text1"><center><b>TREBLE</B></center></div>
  270.  
  271.  
  272. <div id="1" class="was">
  273.  
  274. <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>
  275. <a href="#"><div class="tat1" ></div></a>
  276. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:400; top: 0; bottom: 0;"><b>/ ᴏᴜᴛ ᴏғ ᴄʜᴀʀᴀᴄᴛᴇʀ /</b> Hi! This is the typist here, thank you for entering into my profile. :) I greatly appreciate the time you've taken to get this far. I don't plan on putting a lot here, so your read will be quick.<br><br>
  277. <B>o1.</B> Kindness begets kindness. Be respectful of me and of my character and I'll return the favor.<br><br>
  278. <B>o2.</B> No godmodding or being meta. Please. Nobody enjoys that.<br><br>
  279. <B>o3.</B> IC isn't OOC. Know the difference.<br><br>
  280. <B>o4.</B> Let's have fun, okay? Don't take everything so seriously. </div>
  281.  
  282. <div class="tattxta" style="position: absolute; margin: auto; right: 300px; left:0; top: 20; bottom: 0;">
  283.  
  284. CONTACT:
  285. <div class="sts2">PM-friendly: √</div>
  286. <div class="sts2">Discord: ?</div>
  287. <div class="sts2">Timezone: EST</div><br>
  288. ALTS:
  289. <div class="sts2">---</div>
  290. <div class="sts2">---</div><br>
  291. <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#4">▼</a> / <a href="#5">►</a>
  292. </div></div>
  293.  
  294. <div id="2" class="was">
  295.  
  296. <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>
  297. <a href="#"><div class="tatami4"></div></a>
  298. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:100; top: 0; bottom: 0;"><b>/ ᴘᴇʀsᴏɴᴀʟɪᴛʏ /</b> Treble is a quiet, observant girl. She doesn't spend a lot of time talking but when she does, she's sure to deliver some wry commentary. Her sense of humor is as black as her hair, streaked with stains of crimson macabre. She walks her own path, plays her own music, and keeps to herself as best she can while making a name for Silver Owl.<br><br>
  299. Treble prefers her independence. "Teamwork" isn't a word she accepts, referring to it, instead, as "<I>a practice in tolerance.</I>" To whose tolerance the phrase refers to is unknown. She isn't used to doing things that piggyback onto others, and always takes her missions alone. It isn't a surprise that she put so much work into rising in rank before really taking on any quests. Her hard work and diligence knows no bounds.<br><br>
  300. While easy-going, Treble is known to be a <i>bit</i> sensitive on the subject of "family." She strives to be <I>fine</I> with her mother's love-life and all gossip surrounding the incident that took her father's life 11 years prior, as she strives to be fine in all situations that make her grossly uncomfortable. But the concept of family, in particular, seems to be her trigger. Disrespecting something as sacred as a bond between family (blood or not) is sure to earn her ire.<br> <br>
  301. Making her uncomfortable can be done just by simply showing any form of moderate affection. Treble doesn't know how to handle one-on-one and any form of emotional intimacy makes it worse. She can play it off, has been doing so all her life, keeping others at an arm's length has become a professional skill. But it can become difficult when forced to work in tandem with others.<br><br>
  302. She hates feeling attached. Attachment forges dependency. Becoming an S-Rank became her goal because it allowed her to take on missions that only select few members could accompany her on. That means reducing her association, and, consequently, her heartbreak. She values her freedom and solitude more than anyone in Silver Owl, maybe more so than Wynn Rowlett herself.
  303. </div>
  304.  
  305. <div class="tattxta" style="position: absolute; margin: auto; right: 12px; left:0; top: 300; bottom: 0;">
  306.  
  307. ALIAS:
  308. <div class="sts2">"SILENT MAGUS"</div>
  309. <div class="sts2">Treble Barclay</div>
  310. <div class="sts2"><a title="MAR. 13TH, X806.">Nineteen</a></div>
  311. <div class="sts2">Silver Owl: S-Rank</div><br>
  312. FAMILY:
  313. <div class="sts2"><a title="DECEASED">Ryder Barclay</a></div>
  314. <div class="sts2"><a title="MOTHER. ALIVE.">Melody</a></div><br>
  315. <a href="#1">◥</a> / <a href="#3">▲</a> / <a href="#4">►</a> / <a href="#5">◥</a>
  316. </div></div>
  317.  
  318.  
  319. <div id="3" class="was">
  320.  
  321. <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>
  322. <a href="#"><div class="tatami2"></div></a>
  323.  
  324. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 20;"><b>/ ʙᴀᴄᴋsᴛᴏʀʏ /</b> The past is the past, it cannot be changed. Know the person before you delve into their story because not all is as the history books say.<br><br>
  325. Treble Clefa Barclay was born March 13th, X806 to Ryder and Melody Barclay in Clover Town. For the first eight years of her life, everything seemed to be normal. Her parents loved her, taught her what magic they could, and exposed her to the wonderful world of Fiore-- in particular, to the atmosphere of Crocus, the kingdom's <B>Flower Blooming Capital</B>. <br><br>
  326. There, Ryder and Melody often visited with childhood friends Wynn Rowlett and Jabral Lyontail and took their daughter through tours around the garden and to concerts live on the streets. The ambient air uplifted the girl's spirit; for a while, it seemed as though she would grow into an effervescent young woman with a natural buoyancy. Alas, this illusion was shattered shortly after her 8th birthday.<br><br>
  327. Ryder, head of the Black Dog Guild, had joined Jabral and Wynn on a classified mission sent directly to them by the Queen of Fiore herself. When something went awry and the ominous guild, Nightshade, attacked them after their perceived completion-- their surprise appearance was marked with a spear shoved through Ryder's chest. Wynn and Jabral were able to fight them off, but it was too late for Ryder Barclay. They watched the light leave their best friend's eyes and were tasked with the burden of reporting his death not only to the Queen and Magic Council but to Melody and his young daughter.
  328. <br><br>
  329. The Black Dog Guild disbanded shortly after when Melody, too distraught to take over, issued the order to dissipate it. Shortly thereafter, they Barclays were invited to live with Jabral in his family home within the dormitory for female guild members. Little Treble withdrew into herself. The bright girl they remembered disappeared after word of her father's death. At the age of 12, she moved out and into the Silver Owl Guildhall, becoming the youngest member to date. She studied fervently under the tutelage of Wynn Rowlett, and 3.5 years later, she rose to S-Rank and has remained in that position since.
  330.  
  331. </div>
  332.  
  333. <div class="tattxta" style="position: absolute; margin: auto; right: 350px; left:0; top: 0; bottom: 0;">
  334.  
  335. MAGIC:
  336. <div class="sts2"><a title="TYPE: Caster
  337. DESC: This Magic allows the users to perceive, generate and manipulate any type of sound, attacking the opponents with sounds of various intensity. The caster can create powerful sound waves from any part of their body or anywhere in the nearby surroundings, making it effective for mid-range to long-range combat. Depending on how much sound is generated, and the pressure in it, Sound Magic can easily deafen the caster's opponents. In addition, the sound waves can even be strong enough to destroy buildings with ease and can kill multiple people.">Sound Magic</a></div>
  338. <div class="sts2"><a title="TYPE: Caster
  339. DESC: A Magic that allows the user to manipulate and create threads. This Magic can be used to create gigantic webs to damage the opponents. The full capability of this Magic, however, is unknown.">Thread Magic</a></div><br>
  340. ITEMS:
  341. <div class="sts2"><a title="TYPE: Non-Magical
  342. CONTENTS:
  343. 25,000 Jewels (weekly rent)
  344. 5,000 Jewels (Enderman Polish)
  345. 10,500 Jewels (Enderman Strings [30])
  346. x1 Diamond
  347. x2 Amethyst
  348. x5 Emerald
  349. x6 Ruby
  350. x7 Bortz
  351. x7 Sapphire
  352. x15 Rose Quartz">Jewel Pouch</a></div>
  353. <div class="sts2"><a title="TYPE: Everyday Item
  354. PURPOSE: Amplify Sound Magic
  355. CASE CONTENTS:
  356. x1 Violin
  357. x1 Bow
  358. x1 Polisher
  359. x1 Cleaning Cloth
  360. x1 Peg Compound
  361. x1 Pitch Pipe
  362. x1 Chinrest Key
  363. x5 Bowstrings
  364. x15 Spare Strings">Violin</a></div>
  365. <div class="sts2"><a title="TYPE: Non-Magical
  366. SWORD: Odachi
  367. LENGTH: 90.91 cm.">Sword</a></div><br>
  368. <a href="#1">◢ </a> / <a href="#2">◣</a> / <a href="#4">▼</a> / <a href="#5">►</a>
  369. </div></div>
  370.  
  371.  
  372. <div id="4" class="was">
  373.  
  374. <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>
  375. <a href="#"><div class="tatami3"></div></a>
  376.  
  377. <div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;"><b>/ ɢᴏᴀʟs /</b> Currently, Treble's goals are as followed (in no particular order):<br><br>
  378. <B>o1.</B> Travel the world.
  379. <br><br>
  380. <b>o2.</B> Become wealthy and retire as a mage.
  381. <br><br>
  382. <b>o3.</B> Start a successful band.
  383. <br><br>
  384. <b>o4.</B> Avenge her father's death.
  385. <br><br>
  386. <B>o5.</B> Settle somewhere luxurious -- somewhere far away from her mother and soon-to-be step-father.
  387. </div>
  388.  
  389.  
  390. <div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:350; top: 20; bottom: 0;">
  391.  
  392. ALLIES:
  393. <div class="sts2">n/a</div>
  394. <div class="sts2">n/a</div>
  395. <div class="sts2">n/a</div><br>
  396. ENEMIES:
  397. <div class="sts2">n/a</div>
  398. <div class="sts2">n/a</div><br>
  399. <a href="#1">◤</a> / <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#5">◥</a>
  400. </div></div>
  401.  
  402.  
  403. <div id="5" class="was">
  404.  
  405. <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>
  406. <a href="#"><div class="tatami5"></div></a>
  407.  
  408. <div class="tattxt" style="position: absolute; margin: auto; right: 80px; left:0; top: 0; bottom: 280;"><b>/ ᴊᴏᴜʀɴᴀʟ ᴇɴᴛʀɪᴇs /</b>
  409. <br><br>
  410. <font style=float:right><I>Written as they come along...</I></div>
  411.  
  412. <div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:30; top: 20; bottom: 0;">
  413. EVENTS:
  414. <div class="sts2">n/a</div>
  415. <div class="sts2">n/a</div>
  416. <div class="sts2">n/a</div>
  417. <div class="sts2">n/a</div>
  418. <div class="sts2">n/a</div><br>
  419. <a href="#2">◣</a> / <a href="#1">◄</a> / <a href="#3">◤</a> / <a href="#4">▼</a>
  420. </div></div>
  421.  
  422.  
  423. <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>
  424. </body>
  425. </html>
Advertisement
Add Comment
Please, Sign In to add comment