API tools faq
paste
Advertisement
rptgoddess

kieran bio pAGE.

rptgoddess
Sep 26th, 2017
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. PAGE 001: SAGE BY @CHAAOSTHEORY
  5.  
  6. it'd be cool if you left the credit intact my dude but you know
  7. live your life
  8. -->
  9. <head>
  10. <!-- SCRIPTS-->
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  12. <!-- TOOLTIPS SCRIPTS-->
  13. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  14. <script>
  15. (function($){
  16. $(document).ready(function(){
  17. $("[title]").style_my_tooltips({tip_delay_time:20});
  18. });
  19. })(jQuery);
  20. </script>
  21.  
  22. <!-- TAB SCRIPT-->
  23. <script> function openCity(cityName) {
  24. var i;
  25. var x = document.getElementsByClassName("tab");
  26. for (i = 0; i < x.length; i++) {
  27. x[i].style.display = "none";
  28. }
  29. document.getElementById(cityName).style.display = "block";
  30. } </script>
  31.  
  32.  
  33. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  34. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  35.  
  36. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans" rel="stylesheet">
  37. <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
  38. <link href="https://fonts.googleapis.com/css?family=Chango" rel="stylesheet">
  39.  
  40. <!-- FULL CSS FOUND HERE-->
  41. <link href="http://static.tumblr.com/ewjs2wm/ezxoubwkt/sage.css" rel="stylesheet" type="text/css">
  42.  
  43. <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
  44.  
  45. <title>{title}</title>
  46. <style type="text/css">
  47.  
  48. body {
  49. background: url('https://68.media.tumblr.com/131e029ab45ab993b7f4cd033c9e789f/tumblr_inline_ow6ihmgIIz1s2sak3_540.gif');
  50. background-size: cover;
  51. font-family: 'open sans';
  52. font-size:12px; }
  53.  
  54.  
  55. a {
  56. color:#000;
  57. }
  58.  
  59. h1 {
  60. font-family:'exo',sans-serif;
  61. font-weight:500;
  62. font-size:20px;
  63. background:#ddd;
  64. border-radius:5px;
  65. padding:5px;
  66. }
  67.  
  68. h2 {
  69. text-decoration:none;
  70. border-bottom: 1px solid #000;
  71. display: inline-block;
  72. line-height: 1;
  73. font-family: 'Exo', sans-serif;
  74. font-size:26px;
  75. font-weight:200;
  76. margin-bottom:0px;
  77. text-align:left;
  78. text-transform:uppercase;
  79. }
  80.  
  81. .btext h1{
  82. font-weight:100;
  83. margin-top:0px;
  84. }
  85.  
  86. .btext h1:before {
  87. content:'· · · ';
  88. font-weight:800;
  89. font-family:'chango';
  90. }
  91.  
  92. .cstats2 {
  93. background:#eee;
  94. height:auto;
  95. width:405px;
  96. display:block;
  97. position:absolute;
  98. float:right;
  99. margin-left:0px;
  100. margin-top:15px;
  101. line-height:0;
  102. }
  103.  
  104. .cstats2 table {
  105. width:100%;
  106.  
  107. }
  108.  
  109. .cstats2 tr {
  110. border: 1px #e0e0e0 solid;
  111. font-variant: small-caps;
  112. font-weight: 600;
  113. margin-top:3px;
  114. font-size:14px;
  115. overflow:visible;
  116. }
  117.  
  118. .cstats2 tr:nth-child(odd) {
  119. background-color: #f4f4f4;
  120. }
  121.  
  122. .cstats2 th {
  123. width: 25px;
  124. }
  125.  
  126. .cstats2 td {
  127. border: 1px #e0e0e0 solid;
  128. padding: 10px;
  129. text-align: right;
  130.  
  131. }
  132.  
  133. .cstats2 i {
  134. padding:3px;
  135. }
  136.  
  137. {CustomCSS}</style></head>
  138. <!-- END CSS-->
  139.  
  140. <body>
  141. <!-- CONTAINER -->
  142. <div id="container">
  143. <!-- NAVIGATION CONTAINER-->
  144. <div class="tabcontainer">
  145. <!-- TAB NAVIGATION-->
  146. <div class="buttons" style="">
  147. <a href="#" onclick="openCity('home')" title="home"><i class="fa fa-home fa-fw" aria-hidden="true"></i></a><br><br>
  148.  
  149. <a href="#" onclick="openCity('bio')" title="biography"><i class="fa fa-book fa-fw" aria-hidden="true"></i></a><br><br>
  150.  
  151. <a href="#" onclick="openCity('family')" title="connections"><i class="fa fa-users fa-fw" aria-hidden="true"></i></a><br><br>
  152.  
  153. <a href="#" onclick="openCity('aes')" title="aesthetics"><i class="fa fa-heart fa-fw" aria-hidden="true"></i></a><br><br>
  154.  
  155. <a href="#" onclick="openCity('navi')" title="mavigation"><i class="fa fa-bars fa-fw" aria-hidden="true"></i></a><br><br>
  156.  
  157. <a href="/" title="go back"><i class="fa fa-undo fa-fw" aria-hidden="true" style="margin-top:250px;"></i></a><br><br>
  158. </div>
  159. <!-- END TAB NAVIGATION-->
  160. </div>
  161. <!-- END TAB NAVIGATION-->
  162.  
  163. <!-- TAB CONTENT -->
  164.  
  165. <!-- !! CHARACTER TAB !! -->
  166.  
  167. <div id="home" class="tab">
  168. <div class="contentcontainer">
  169. <!--SIDE CHARACTER IMG-->
  170. <div class="cside">
  171. <img src="https://78.media.tumblr.com/f7eeed0f02547e06604046ebfa771c59/tumblr_inline_owwr9fupJc1s2sak3_540.gif">
  172. </div>
  173. <!-- END SIDE CHARACTER IMG-->
  174.  
  175. <!-- CHARACTER HEADER-->
  176. <div class="cheader">
  177.  
  178. <!-- HEADER IMAGE -->
  179. <img src="https://78.media.tumblr.com/521b5a6d519ea3d98f0a04e48eb3015d/tumblr_inline_owwr9doX4h1s2sak3_540.gif">
  180. <!-- END HEADER IMAGE -->
  181.  
  182. <div class="cname">
  183. <h2><b>kieran avila.</b></h2>
  184.  
  185. <h3><p><i>the luminary; he is someone who <p></i></h3>
  186. <h3><p><i>inspires & influences others.</ </h3></i></p>
  187.  
  188. </div>
  189.  
  190. </div>
  191. <!--END CHARACTER HEADER-->
  192.  
  193. <!-- STAT COLUMN ONE-->
  194. <div class="cstats">
  195. <table>
  196. <tr>
  197. <th><i class="fa fa-user-secret fa-fw" aria-hidden="true" title="alias"></i></th>
  198. <td>kier & k.</td>
  199. </tr>
  200.  
  201. <tr>
  202. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="age"></i></th>
  203. <td>twenty four.</td>
  204. </tr>
  205.  
  206. <tr>
  207. <th><i class="fa fa-calendar fa-fw" aria-hidden="true" title="birthday"></i></th>
  208. <td>july fourth.</td>
  209. </tr>
  210.  
  211. <tr>
  212. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  213. <td>cismale.</td>
  214. </tr>
  215.  
  216. <tr>
  217. <th><i class="fa fa-deaf fa-fw" aria-hidden="true" title="pronouns"></i></th>
  218. <td>him/him.</td>
  219. </tr>
  220.  
  221. <tr>
  222. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  223. <td>nathan avila. </td>
  224. </tr>
  225.  
  226. <tr>
  227. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  228. <td>sophia reyes. </td>
  229. </tr>
  230.  
  231. <tr>
  232. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  233. <td>rockstar.</td>
  234. </tr>
  235.  
  236. <tr>
  237. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="availability"></i></th>
  238. <td>available.</td>
  239. </tr>
  240. </table>
  241. <div class="cstats2">
  242. <table>
  243. <tr>
  244. <th><i class="fa fa-camera-retro" aria-hidden="true" title="secret"></i><td>years after his sister's death, kieran has yet to find a
  245. <p>way to get over her death. so he turns to the one<p>thing that helps his heartbreak. drugs & alcohol. he's<p> gotten to the point where he knows it's a problem <p>but refuses to get the help he should want & need.</td>
  246. </tr></table>
  247. </div>
  248. </table>
  249. </div>
  250. <!-- END STAT COLUMN ONE-->
  251.  
  252. <!-- STAT COLUMN TWO -->
  253. <div class="cstats" style="margin-left:528px;">
  254. <table>
  255.  
  256. <tr>
  257. <th><i class="fa fa-smile-o fa-fw" aria-hidden="true" title="faceclaim"></i></th>
  258. <td>tyler posey.</td>
  259. </tr>
  260.  
  261. <tr>
  262. <th><i class="fa fa-home fa-fw" aria-hidden="true" title="hometown"></i></th>
  263. <td>santa monica, california.</td>
  264. </tr>
  265.  
  266. <tr>
  267. <th><i class="fa fa-map-marker fa-fw" aria-hidden="true" title="residence"></i></th>
  268. <td>hidden hills, california.</td>
  269. </tr>
  270.  
  271. <tr>
  272. <th><i class="fa fa-moon-o fa-fw" aria-hidden="true" title="zodiac"></i></th>
  273. <td>cancer.</td>
  274. </tr>
  275.  
  276. <tr>
  277. <th><i class="fa fa-plus-circle fa-fw" aria-hidden="true" title="positive"></i></th>
  278. <td>winsome & audacious.</td>
  279. </tr>
  280.  
  281. <tr>
  282. <th><i class="fa fa-minus-circle fa-fw" aria-hidden="true" title="negative"></i></th>
  283. <td>debauched & fastidious.</td>
  284. </tr>
  285.  
  286. <tr>
  287. <th><i class="fa fa-graduation-cap fa-fw" aria-hidden="true" title="schooling"></i></th>
  288. <td>no college.</td>
  289. </tr>
  290.  
  291. <tr>
  292. <th><i class="fa fa-money fa-fw" aria-hidden="true" title="net worth"></i></th>
  293. <td>275 million</td>
  294. </tr>
  295.  
  296. <tr>
  297. <th><i class="fa fa-play fa-fw" aria-hidden="true" title="currently playing"></i></th>
  298. <td>playing: black parade.</td>
  299. </tr>
  300. </table>
  301. </div>
  302. <!-- END STATS COLUMN TWO -->
  303.  
  304.  
  305.  
  306. </div>
  307. </div>
  308. <!-- END CHARACTER TAB-->
  309.  
  310. <!-- !! START BIO TAB !! -->
  311. <div id="bio" class="tab" style="display:none">
  312. <div class="contentcontainer">
  313.  
  314. <!-- START BIO HEADER-->
  315. <div class="bheader">
  316. <img src="https://78.media.tumblr.com/d44f71630b965c2e30595d971ced2cb3/tumblr_inline_owwr938u3W1s2sak3_540.gif">
  317. <img src="https://78.media.tumblr.com/1f874ab4776655171127cefa5f134350/tumblr_inline_owwr96N8pG1s2sak3_540.gif">
  318. <img src="https://78.media.tumblr.com/69f6c70374f530f5f1a2a6fff5c591b9/tumblr_inline_owwr93dxXl1s2sak3_540.gif">
  319. <h2>Extra Extra Read All About His <b>Biography</b></h2>
  320. </div>
  321. <!--END BIO HEADER-->
  322.  
  323. <!-- START HISTORY TEXT-->
  324. <div class="btext">
  325. <h1>history</h1>
  326. <p>this part is up to the player. you will be in charge of coming up with his history.</p>
  327. </div>
  328. <!--END HISTORY TEXT-->
  329.  
  330. <!-- START PERSONALITY TEXT-->
  331. <div class="btext" style="margin-left:375px; margin-top:-395px;">
  332. <h1>personality</h1>
  333. <p>same goes for his personality, this is entirely up to the player.</p>
  334. <h1>fun facts</h1>
  335. <p>he's in a band that is named after his sister reina, reina is a huge part in his life & has influenced him in countless ways. she's his muse, to be exact. reina passed away. that part of his past, is up to you to create. we just wanted the applicants to know that this is a major part in his career! his band is named after her. we have decided on the bands name being called .... this is totally up to the player to decide. otherwise what i had in mind was --- finding reina. </p>
  336. </div>
  337. <!--END PERSONALITY TEXT-->
  338.  
  339. </div>
  340. </div>
  341. <!--END BIO TAB-->
  342.  
  343.  
  344. <!-- !! START FAMILY / CONNECTIONS TAB !! -->
  345. <div id="family" class="tab" style="display:none">
  346. <div class="contentcontainer">
  347. <!-- START CONNECTION CONTAINER (FAMILY) -->
  348. <div class="fcontainer">
  349. <!-- START CONNECTION-->
  350. <div class="fmember">
  351. <img src="https://78.media.tumblr.com/99008af368d984fca7963988461cd385/tumblr_inline_owwtcrv6E21s2sak3_540.gif" title="aiden">
  352. <h1><center>aiden mcallister.</center></h1>
  353. <p><center>‘ i put out an add a while ago stating that i was searching for a drummer along with a couple of other guitar players to help full fill my hollywood dreams of becoming a band. well aiden was the first one to answer my ad & i’ve been lucky ever since. i’ve never met a guy who’s been so laid back & so understanding. he puts up with my anger issues & is really the only person who can calm me down from them. he’s like my best friend & my brother from another mother. literally though, he’s like a brother to me. it was hard to feel that kind of love ever since i lost my sister reina a couple years back. i just love how he’s okay with the band being named after her, i would’ve thought most people would’ve been like ... that’s a bad idea. but really, everything has been so successful. all thanks to him & the other guys! ’ </center></big></p>
  354. </div>
  355. <!-- END CONNECTION-->
  356. </div>
  357. <!-- END CONNECTION CONTAINER (FAMILY) -->
  358.  
  359. <!-- CONNECTION HEADER (FAMILY)-->
  360. <div class="fheader" style="margin-left:-300px; margin-top:410px;">
  361. <h2><i class="fa fa-arrow-up" aria-hidden="true"></i> His <b>Bandmate</b></h2>
  362. </div>
  363. <!-- END CONNECTION HEADER (FAMILY)-->
  364.  
  365. <!-- DIVIDING IMAGE-->
  366. <img src="https://68.media.tumblr.com/b8ee05124953962e0bd8c51969d0f436/tumblr_inline_ow6mgkpD8X1s2sak3_540.gif" style="float:left; padding:10px;">
  367. <!-- END DIVIDING IMAGE-->
  368.  
  369. <!-- CONNECTION HEADER (FRIENDS)-->
  370. <div class="fheader" style="margin-left:0px;">
  371. <h2><i class="fa fa-arrow-down" aria-hidden="true"></i>His <b>Relationship.</b></h2>
  372. </div>
  373. <!-- END CONNECTION HEADER (FRIENDS)-->
  374.  
  375. <!-- START CONNECTION CONTAINER (FRIENDS) -->
  376. <div class="fcontainer" style="margin-left:420px; margin-top:-400px; height:390px;">
  377. <!-- START CONNECTION-->
  378. <div class="fmember">
  379. <img src="https://78.media.tumblr.com/e5dd38b6e48f17ed117cb8ce218b8077/tumblr_inline_ozf36fk6Ro1s76vky_540.gif" title="zaharina">
  380. <h1><center>zaharina jennings.</center></h1>
  381. <p><center>‘ this sounds so cliche but zari happens to be one of my best friends who wound up to be the girl that i write all of my music about... well, other than my sister but we're not talking about her. zari & i met about two years ago in a bar in new york when i was doing a show there. we instantly hit it off, she wound up in my room that night & we haven't stopped since. she's a very unique soul & she's my muse for a lot of things now. i was in a dark place when i met her & she basically saved my soul. she's an angel. my angel, to be exact. it's so hard to explain, she's literally brought so much light into my life. it's like she's my own personal angel. i seriously might be in love with this girl but i don't think i can admit that to her yet.’</center></big></p>
  382. </div>
  383. <!-- END CONNECTION-->
  384. </div>
  385. <!-- END CONNECTION CONATINER (FRIENDS) -->
  386. </div>
  387. </div>
  388. <!--END FAMILY / CONNECTIONS TAB -->
  389.  
  390. <!-- !! START AESTHETIC TAB !! -->
  391. <div id="aes" class="tab" style="display:none">
  392. <div class="contentcontainer">
  393.  
  394. <!--START SPOTIFY-->
  395.  
  396. <!-- INSTRUCTIONS FOR GETTING SPOTIFY EMBED CODE:
  397.  
  398. ok so when you go to ur playlist ur gonna wanna click the circlualr button with the dots next to play. it should have a hover that says more.
  399.  
  400. go to the bottom of the menu and click on share
  401.  
  402. right next to the tumblr button there's a button with "</>". click that and it'll copy the embed code to the clipboard.
  403.  
  404. it'll look like this: "<iframe src="https://open.spotify.com/embed/user/1238632077/playlist/1NVItQRqiiGA3k0E6JL9BE" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>"
  405.  
  406. then just plop the source link in the src="" section and u gucci.
  407.  
  408. -->
  409. <div class="aspotify">
  410. <iframe src="https://open.spotify.com/embed/user/prominencehq/playlist/4b0ohQHkQq5j5cDpAhewOp" width="300" height="470" frameborder="0" allowtransparency="true"></iframe>
  411.  
  412. </div>
  413.  
  414. <!-- END SPOTIFY-->
  415.  
  416. <!-- START PINTEREST-->
  417.  
  418. <!-- INSTUCTIONS FOR GETTING PINTEREST EMBED CODE:
  419.  
  420. this one's easy just copy the link of ur board and put it in the href. simple.
  421. -->
  422. <div class="apinterest">
  423. <a data-pin-do="embedBoard" data-pin-board-width="900" data-pin-scale-height="352" data-pin-scale-width="115" href="https://www.pinterest.com/prominencehq/kieran-avila/"></a>
  424. </div>
  425. <!--END PINTEREST-->
  426. </div>
  427. </div>
  428. <!-- END AESTHETICS TAB -->
  429.  
  430. <!-- !! START NAV TAB !! -->
  431. <div id="navi" class="tab" style="display:none">
  432. <div class="contentcontainer">
  433. <!-- START TAG ICONS -->
  434. <div class="niconbox">
  435. <a href="/" title="INSPO TAG"><i class="fa fa-tag fa-fw" aria-hidden="true"></i></a>
  436. <a href="/" title="PROMPT TAG"><i class="fa fa-pencil-square fa-fw" aria-hidden="true"></i></a>
  437. <a href="https://prominenceteasers.tumblr.com/tagged/%3Bkieran." title="TEASER"><i class="fa fa-play fa-fw" aria-hidden="true"></i></a><br>
  438. <a href="" title="FIVE STAR RATING"><i class="fa fa-star fa-fw" aria-hidden="true"></i></a>
  439. <a href="" title="PLAYED BY: "><i class="fa fa-info fa-fw" aria-hidden="true"></i></a>
  440. <a href="/" title="HIS RELATIONSHIP TAG"><i class="fa fa-heart fa-fw" aria-hidden="true"></i></a><br>
  441. <a href="https://www.pinterest.com/prominencehq/kieran-avila/" title="PINTEREST"><i class="fa fa-pinterest-square fa-fw" aria-hidden="true"></i></a>
  442. <a href="spotify:user:prominencehq:playlist:4b0ohQHkQq5j5cDpAhewOp" title="SPOTIFY PLAYLIST"><i class="fa fa-spotify fa-fw" aria-hidden="true"></i></a>
  443. <a href="/" title="BACK HOME"><i class="fa fa-share fa-fw" aria-hidden="true"></i></a><br>
  444. </div>
  445. <!--END TAG ICONS-->
  446.  
  447. <!-- START ROW ONE ICONS -->
  448. <div class="nav">
  449. <img src="https://78.media.tumblr.com/82092262518c7a61491d5eff6d2e1835/tumblr_inline_owwr977VKJ1s2sak3_540.gif">
  450. <img src="https://78.media.tumblr.com/06f10786ddd2f9aac216368849d5ae35/tumblr_inline_owwr975zTk1s2sak3_540.gif">
  451. <img src="https://78.media.tumblr.com/d63ef65256e9e9d5dc999f1a8c5653ec/tumblr_inline_owwr98Ch821s2sak3_540.gif">
  452. </div>
  453. <!-- END ROW ONE ICONS -->
  454.  
  455. <!-- START ROW TWO ICONS-->
  456. <div class="nav2">
  457. <img src="https://78.media.tumblr.com/6555bc35d50b7ef0518e4f07994df7cf/tumblr_inline_owwr97s2As1s2sak3_540.gif">
  458. <img src="https://78.media.tumblr.com/b92f9897da0abcc45875a4e6d563cf71/tumblr_inline_owwr997A2s1s2sak3_540.gif">
  459. <img src="https://78.media.tumblr.com/abc00dee6faed211b2ebf9727f1101e7/tumblr_inline_owwripx0r71s2sak3_540.gif">
  460. <img src="https://78.media.tumblr.com/5bc1e26e04d5abe999500114ad1dbfba/tumblr_inline_owwr9911bq1s2sak3_540.gif">
  461. </div>
  462. <!-- END ROW TWO ICONS -->
  463.  
  464. <!-- START NAGIVATION FOOTER-->
  465. <div class="nheader">
  466. <h2>WELCOME TO <b>HOLLYWOOD. i heard it's hell here.</b></h2>
  467. </div>
  468. <!-- END NAGIVATION FOOTER-->
  469.  
  470.  
  471. <!-- START NAGIVATION IMAGE-->
  472. <div class="nbottom">
  473. <img src="https://i.imgur.com/bayerar.gif">
  474. </div>
  475. <!-- END NAGIVATION IMAGE-->
  476.  
  477.  
  478.  
  479. </div>
  480. </div>
  481. <!-- END NAV TAB-->
  482.  
  483. <!-- END TAB CONTENT-->
  484. </div>
  485. <!-- END CONTAINER-->
  486.  
  487. <!-- CREDIT // would be nice if u left intact -->
  488. <div class="credit">
  489. <a href="http://chaaostheory.tumblr.com" title="chaaostheory"><i class="fa fa-gitlab fa-fw" aria-hidden="true"></i></a>
  490. </div>
  491.  
  492. </body>
  493. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!