Advertisement
cat_inthe_cradle

Elliot Kane

Jun 16th, 2018
266
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.08 KB | None | 0 0
  1. <style>
  2. #profile-container {
  3. background: none;
  4. }
  5.  
  6. body {
  7. background: url(https://storage.investagrams.com/files/Account/128418/HeaderPicture/2018/03/User_128418_Header_Picture_20180325-133726_f65ea870-ef18-401a-945f-2c1099aa5815.jpg);
  8. }
  9.  
  10. body,
  11. a:hover {
  12. cursor: url(http://i.imgur.com/cd7ZHDh.png), progress !important;
  13. }
  14.  
  15. @font-face {
  16. font-family: text;
  17. src: url(https://dl.dropbox.com/s/ytsmc8t6zmzn8tx/Raleway-Regular.ttf?dl=0);
  18. }
  19.  
  20. @font-face {
  21. font-family: name;
  22. src: url(https://dl.dropbox.com/s/ytsmc8t6zmzn8tx/Raleway-Regular.ttf?dl=0);
  23. }
  24.  
  25. .name {
  26. z-index: 2;
  27. position: absolute;
  28. width: 370px;
  29. left: 140px;
  30. top: 38px;
  31. font-family: name;
  32. text-align: center;
  33. font-size: 25px;
  34. color: #1F223B;
  35. }
  36.  
  37. .pic {
  38. z-index: 1;
  39. position: absolute;
  40. top: 135px;
  41. left: 120px;
  42. padding: 5px;
  43. border: 0px solid #1F223B;
  44. width: 390px;
  45. height: 385px;
  46. background: url(https://d1o51r9qdgnnlz.cloudfront.net/static_image/696dc92e-2481-4c60-8a9f-4a83d2b8bc14/static.jpg) center;
  47. background-size: 100%;
  48. }
  49.  
  50. .backbox {
  51. z-index: 0;
  52. position: absolute;
  53. width: 430px;
  54. height: 500px;
  55. background: #C6E1FE;
  56. left: 105px;
  57. top: 50px;
  58. }
  59.  
  60. .tabbox {
  61. z-index: 1;
  62. position: absolute;
  63. width: 410px;
  64. background: #C6E1FE;
  65. left: 115px;
  66. top: 60px;
  67. height: 69px;
  68. }
  69.  
  70. .tabco {
  71. z-index: 1;
  72. position: absolute;
  73. width: 330px;
  74. background: #C6E1FE;
  75. left: 155px;
  76. top: 60px;
  77. height: 34px;
  78. }
  79.  
  80. .tabs {
  81. position: absolute;
  82. margin: 25px 0px;
  83. width: 280px;
  84. }
  85.  
  86. .tab label {
  87. top: 69px;
  88. left: 210px;
  89. height: 25px;
  90. float: left;
  91. margin-left: 0px;
  92. background: #C6E1FE;
  93. width: 36px;
  94. padding: 5px;
  95. position: relative;
  96. z-index: 400;
  97. color: #1F223B;
  98. font-size: 20;
  99. text-align: center;
  100. font-family: comic sans serif;
  101. -webkit-transition: all .5s ease;
  102. }
  103.  
  104. .tab label:hover {
  105. background: #99B6C5;
  106. -webkit-transition: all .5s ease;
  107. }
  108.  
  109. .content {
  110. position: absolute;
  111. top: 110px;
  112. left: 120px;
  113. width: 390px;
  114. height: 390px;
  115. background: #C6E1FE;
  116. padding: 5px;
  117. color: #000;
  118. border: 0px solid #1F223B;
  119. font-family: text;
  120. font-size: 15px;
  121. overflow: auto;
  122. z-index: 20;
  123. opacity: 0;
  124. -webkit-transition: all .5s ease;
  125. }
  126.  
  127. [type=radio]:checked ~ label {
  128. -webkit-transition: all .5s ease;
  129. }
  130.  
  131. [type=radio]:checked ~ label ~ .content {
  132. z-index: 30;
  133. opacity: 1;
  134. -webkit-transition: all .5s ease;
  135. }
  136.  
  137. .tab [type=radio] {
  138. display: none;
  139. }
  140.  
  141. table,
  142. th,
  143. td {
  144. font-family: text;
  145. font-size: 13px;
  146. padding: 3px;
  147. }
  148.  
  149. td:nth-child(odd) {
  150. color: #1E0037;
  151. }
  152.  
  153. td:nth-child(even) {
  154. color: #000;
  155. }
  156.  
  157. a:link,
  158. a:visited,
  159. a:active {
  160. text-decoration: none;
  161. color: #1E0037;
  162. -webkit-transition: all .5s ease;
  163. }
  164.  
  165. a:hover {
  166. color: #000;
  167. -webkit-transition: all .5s ease;
  168. }
  169.  
  170. hr {
  171. border: none;
  172. height: 1px;
  173. background: #1E0037;
  174. width: 280px;
  175. }
  176.  
  177. ::-webkit-scrollbar {
  178. width: 3px;
  179. height: 5px;
  180. }
  181.  
  182. ::-webkit-scrollbar-thumb {
  183. background: #1E0037;
  184. border: 1px solid #5E5A80;
  185. }
  186.  
  187. ::-webkit-scrollbar-track {
  188. background: #5E5A80;
  189. }
  190.  
  191. .Credit {
  192. z-index: 0;
  193. position: fixed;
  194. right: 50px;
  195. bottom: 50px;
  196. width: 20px;
  197. height: 20px;
  198. border-radius: 20px;
  199. border-color: #fff;
  200. border-style: dotted;
  201. border-width: 2px;
  202. background: #000;
  203. -webkit-transition: all 1s ease;
  204. }
  205.  
  206. .Credit:hover {
  207. background: #fff;
  208. border-color: #000;
  209. }
  210.  
  211. </style>
  212. </head>
  213. <body>
  214. <div class="name">
  215. <p>ELLIOT KANE</p>
  216. </div>
  217. <div class="pic">
  218. <p> </p>
  219. </div>
  220. <div class="tabbox">
  221. <p> </p>
  222. </div>
  223. <div class="backbox">
  224. <p> </p>
  225. </div>
  226. <div class="tabco">
  227. <p> </p>
  228. </div>
  229. <div class="tabs">
  230. <div class="tab">
  231. <div class="tab">
  232. <input id="tab-5" name="tab-group-2" type="radio" />
  233. <label for="tab-5">☠</label>
  234. <div class="content">
  235. <p style="text-align: center;"> </p>
  236. <p style="text-align: center;">Stats</p>
  237. <hr />
  238. <table border="0" cellspacing="0" width="351" height="160">
  239. <tbody>
  240. <tr>
  241. <td style="text-align: right;">Year</td>
  242. <td>Sixth</td>
  243. <td style="text-align: right; padding-left: 30px;">House</td>
  244. <td>Ravenclaw</td>
  245. </tr>
  246. <tr>
  247. <td style="text-align: right;">Blood-status</td>
  248. <td>Pureblood</td>
  249. <td style="text-align: right;">Wand</td>
  250. <td>Willow-wood, thestral hair, whispy</td>
  251. </tr>
  252. <tr>
  253. <td style="text-align: right;">Patronus</td>
  254. <td>Bat</td>
  255. <td style="text-align: right;">Boggart</td>
  256. <td>Dementor (Formally his Grandfather)</td>
  257. </tr>
  258. <tr>
  259. <td style="text-align: right;">Hair</td>
  260. <td>Jet Black</td>
  261. <td style="text-align: right;">Eyes</td>
  262. <td>Hazel</td>
  263. </tr>
  264. <tr>
  265. <td style="text-align: right;">Height</td>
  266. <td>5' 11"</td>
  267. <td style="text-align: right;">Weight</td>
  268. <td>145lbs</td>
  269. </tr>
  270. <tr>
  271. <td style="text-align: right;">Orientation</td>
  272. <td>Pansexual</td>
  273. <td style="text-align: right;">Status</td>
  274. <td>Single</td>
  275. </tr>
  276. <tr>
  277. <td style="text-align: right;">Theme I</td>
  278. <td><a target="_blank" href="https://youtu.be/CbeNRHtpgOk" target="_blank">New Dawn Fades</td>
  279. <td style="text-align: right;">Theme II</td>
  280. <td><a target="_blank" href="https://youtu.be/WcfxFxWI9R8" target="_blank">Gymnopédie No. 1</td>
  281. </tr>
  282. </tbody>
  283. </table>
  284. </div>
  285. </div>
  286. <div class="tab">
  287. <input id="tab-4" name="tab-group-2" type="radio" />
  288. <label for="tab-4">☠</label>
  289. <div class="content">
  290. <p style="text-align: center;"></p>
  291. <hr />
  292. <img src="https://i.ytimg.com/vi/vRf8OZ7zXls/maxresdefault.jpg" style="align: center; width:380px;background:transparent;margin:0px;border-radius:40px;">
  293.  
  294. <img src="https://i.pinimg.com/originals/77/8e/34/778e3437356eef3ca549969c0484f668.jpg" style="width:380px;background:transparent;margin:0px;border-radius:40px;">
  295.  
  296. <img src="http://40.media.tumblr.com/99d3e87f0ac5e0dcc395b23a89ffcb19/tumblr_nga6lpa7Fj1tahpkeo1_500.jpg" style="width:380px;background:transparent;margin:0px;border-radius:40px;">
  297.  
  298. <img src="https://media.giphy.com/media/YqR7cd6OsiVpu/giphy-facebook_s.jpg" style="width:380px;background:transparent;margin:0px;border-radius:40px;">
  299.  
  300. </div>
  301. </div>
  302. <div class="tab">
  303. <input id="tab-3" name="tab-group-2" type="radio" />
  304. <label for="tab-3">☠</label>
  305. <div style="text-align: center;" class="content">
  306. <hr />
  307. <p style="text-align: left;"><img src='https://img.etsystatic.com/il/566ceb/1369381822/il_fullxfull.1369381822_kmwa.jpg'style="width:380px;">
  308. <br>
  309. <br>OWLS:
  310. <br>Transfiguration: O
  311. <br>Charms: E
  312. <Br>Potions: A
  313. <br>History of Magic: P
  314. <br>Defence Against the Dark Arts: E
  315. <br>Astronomy: A
  316. <br>Herbology: A
  317. <br>Arithmancy: P
  318. <br>Muggle Studies: P
  319. <br>Divination: A
  320. <br>Study of Ancient Runes: D
  321. <br>Care of Magical Creatures: O
  322.  
  323. </div>
  324. </div>
  325. <div class="tab">
  326. <input id="tab-2" name="tab-group-2" type="radio" />
  327. <label for="tab-2">☠</label>
  328. <div style="text-align: center;" class="content">BIO
  329. <hr />
  330. <p style="text-align: left;">
  331. "I SOLEMNLY SWEAR THAT I AM UP TO NO GOOD."
  332. <br>
  333. <br>
  334. <br>Elliot was born into a proud, pureblooded family. His grandfather, Belial Kane, was a powerful dark wizard in his hay-day, before he was sent to Azkaban. Elliot's father would ramble on and on through the day and night about how powerful and proud Grandfather Kane was, and how Elliot should be working harder to honor his legacy. Elliot had no interest in this, whatsoever.
  335. <br>It was much to his parents' chagrin that he was placed in the house of Ravenclaw, a choice from the sorting hat that Elliot had to admit even he was confused by. He never counted himself particularly bright nor gifted, for it didn't take long for Elliot's father to realize that the young boy would never live up to his grandfather's legacy, and Elliot's father made sure to constantly remind him of this.
  336. <br>It was the summer after his Fifth Year that Belial was finally given his sentence - the Dementor's Kiss. Elliot and his family made a trip to Azkaban to pay their respects and watch as his grandfather receive the Kiss and had his soul sucked from his body, but the Kiss never happened. They had all been gathered with the Minister of Magic and a number of vengeful aurors, his grandfather sat in an adjacent room, separated by a window which had been enchanted with a sort of Patronus-shield. Belial sat in a seemingly empty room, shackled to a metal chair. The floor of the room was covered in about three inches of water, which went up to the old man's ankles. The metal chair he was locked into sat facing away from his onlooking family and the Minister and the aurors, and towards the far end of the room which disappeared altogether in an empty blackness. Elliot is still plagued by the memory of that single dementor emerging from the shadows, gliding silently towards his grandfather. The horrible old man took one look at the dementor and went into a histerical fit, succumbing to a stroke and dying right there on the spot before he could even receive the Kiss.
  337. <br>This event had severely shaken both Elliot and his father, who spent the next month locked in his study, not only having lost his great hero but also having seen him completely reduced to a pathetic mess. That day drove an even greater wedge between Elliot and his family, and by the end of that summer, Elliot's parents had altogether disowned him, leaving him to his own devices and asking him not to return home from school the following year.
  338. <br>Elliot is a bright kid, unbeknownst to himself. Having no proper outlet, he often resorts to acts of mischief to cope with his boredom or feelings of anxiety. Though he has a soft heart, he's been through quite a bit and has developed rather thick skin. Hesitant to let in new strangers, once his trust is earned he's a steadfast and lifelong companion. </a> </p>
  339. </div>
  340. </div>
  341. <div class="tab">
  342. <input id="tab-1" checked="checked" name="tab-group-2" type="radio" />
  343. <label for="tab-1">←</label>
  344. </div>
  345. <div class="content">
  346. <p style="text-align: left;"> </p>
  347. </div>
  348. </div>
  349. </div>
  350. <div class="Credit">
  351. <p style="text-align: center;"><a target="_blank" href="https://[FILTERED].tumblr.com/" target="_blank">♠</a></p>
  352. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement