API tools faq
paste
Advertisement
rptgoddess

ZAHARINA BIO THEME.

rptgoddess
Sep 21st, 2017
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.22 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/ccc2ea0a69b63d846a2104350d4d7eb9/tumblr_inline_oypgtyWerT1s2sak3_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/779d523b1e7a1b2d0a14dd43df449306/tumblr_inline_oypgu2fanG1s2sak3_540.gif">
  180. <!-- END HEADER IMAGE -->
  181.  
  182. <div class="cname">
  183. <h2><b>zaharina jennings.</b></h2>
  184.  
  185. <h3><p><i>the celebrity; she loves to</p></i></h3>
  186. <h3><p><i>have a high & public profile. </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>ari & zari.</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 three.</td>
  204. </tr>
  205.  
  206. <tr>
  207. <th><i class="fa fa-calendar fa-fw" aria-hidden="true" title="birthday"></i></th>
  208. <td>february tenth.</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>cisfemale.</td>
  214. </tr>
  215.  
  216. <tr>
  217. <th><i class="fa fa-deaf fa-fw" aria-hidden="true" title="pronouns"></i></th>
  218. <td>she/her.</td>
  219. </tr>
  220.  
  221. <tr>
  222. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  223. <td>oscar jennings. </td>
  224. </tr>
  225.  
  226. <tr>
  227. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  228. <td>katherine jennings. </td>
  229. </tr>
  230.  
  231. <tr>
  232. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  233. <td>actress.</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>sweet & manipulative zari has been holding quite the secret
  245. <p>in fact we're wondering if her mother knows? that she knows <p>about her father cheating on her mother? it turns out zari <p>has been using it against her father blackmailing him for it.</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>lily collins.</td>
  259. </tr>
  260.  
  261. <tr>
  262. <th><i class="fa fa-home fa-fw" aria-hidden="true" title="hometown"></i></th>
  263. <td>guildford, uk.</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>aquarius.</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>engaging & ingenious.</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>impetuous & conceited.</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>325 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: i like me better.</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/32b8e63ecb81ab26650570f08c933c18/tumblr_inline_oypgtuqEpj1s2sak3_540.gif">
  317. <img src="https://78.media.tumblr.com/98cdf62133180f9a7a68e257a1a86f3c/tumblr_inline_oypgtv85pA1s2sak3_540.gif">
  318. <img src="https://78.media.tumblr.com/3b677376086d84d91e9f08612c6a07d7/tumblr_inline_oypgtvruQa1s2sak3_540.gif">
  319. <h2>Extra Extra Read All About Her <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 here is a place where the applicant will express their ideas on how they envisioned zari's past. we'd love to know more about her family, friends or anything that is important to you to be put in her bio.</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>next comes her biography, this can be as long or as short as you'd please. but the one thing we ask is that you keep it at least a paragraph long! we want to get to know her as much as possible!</p>
  334. </div>
  335. <!--END PERSONALITY TEXT-->
  336.  
  337. </div>
  338. </div>
  339. <!--END BIO TAB-->
  340.  
  341.  
  342. <!-- !! START FAMILY / CONNECTIONS TAB !! -->
  343. <div id="family" class="tab" style="display:none">
  344. <div class="contentcontainer">
  345. <!-- START CONNECTION CONTAINER (FAMILY) -->
  346. <div class="fcontainer">
  347. <!-- START CONNECTION-->
  348. <div class="fmember">
  349. <img src="https://78.media.tumblr.com/ebfffb839ca76504e900109c0966f94c/tumblr_inline_oyaz61TtIV1s2sak3_540.gif" title="marnie">
  350. <h1>marnie katona.</h1>
  351. <p>' you're my best fucking friend. literally this is how we talk to each other. we can't even go a solid hour without referring to each other as some sort of fucking somebody. marnie & i met through our mothers. they were pretty good friends back in their younger days & i guess they just thought that we should become the best of friends too. but that's not really how it started, i actually hated marnie from the beginning of when we first met. but the more we hungout the cooler she was in my eyes. she's a great person & a wonderful friend. she's literally the only one who can put up with my bitchy personality. i wouldn't know what to do without her by my side. the funny thing is ... i think i might actually have some sort of feelings for her but i don't know if i should even tell her that because one, i'm sure she's not interested & two i'm kind of with kieran. but she's my soulmate, i know it. '</big></p>
  352. </div>
  353. <!-- END CONNECTION-->
  354. </div>
  355. <!-- END CONNECTION CONTAINER (FAMILY) -->
  356.  
  357. <!-- CONNECTION HEADER (FAMILY)-->
  358. <div class="fheader" style="margin-left:-300px; margin-top:410px;">
  359. <h2><i class="fa fa-arrow-up" aria-hidden="true"></i> Her <b>Frienship.</b></h2>
  360. </div>
  361. <!-- END CONNECTION HEADER (FAMILY)-->
  362.  
  363. <!-- DIVIDING IMAGE-->
  364. <img src="https://68.media.tumblr.com/b8ee05124953962e0bd8c51969d0f436/tumblr_inline_ow6mgkpD8X1s2sak3_540.gif" style="float:left; padding:10px;">
  365. <!-- END DIVIDING IMAGE-->
  366.  
  367. <!-- CONNECTION HEADER (FRIENDS)-->
  368. <div class="fheader" style="margin-left:0px;">
  369. <h2><i class="fa fa-arrow-down" aria-hidden="true"></i>Her <b>Relationship.</b></h2>
  370. </div>
  371. <!-- END CONNECTION HEADER (FRIENDS)-->
  372.  
  373. <!-- START CONNECTION CONTAINER (FRIENDS) -->
  374. <div class="fcontainer" style="margin-left:420px; margin-top:-400px; height:390px;">
  375. <!-- START CONNECTION-->
  376. <div class="fmember">
  377. <img src="https://78.media.tumblr.com/46d45107e40462342f004eea5ed682f9/tumblr_inline_oyaz61L2Ow1s2sak3_540.gif" title="kieran">
  378. <h1>kieran avila</h1>
  379. <p>' kieran & i met two years ago in a hotel bar. he was singing at a gig & i was there with my girlfriends just having a girls night. well, needless to say i kind of fell for him that night? he swept me right off my feet the moment he peered through the entire crowd just searching for my eyes to meet his. it was funny really, he had me so smitten i'm pretty sure i might've fainted when he asked me my name. i was such a fan girl back then, but now things are kind of different. he's really into me & i'm not really sure how i feel exactly? like i love him i do. but i just feel like i could be missing out on something else with someone i also care dearly about. but i know for a fact that if i break up with him ... i might be letting go of someone who cares so much about me. like i'm battling with my heart because my heart wants him but it wants someone else too. kieran is such a great guy & i would hate to be the one who breaks his heart all over again. ' </big></p>
  380. </div>
  381. <!-- END CONNECTION-->
  382. </div>
  383. <!-- END CONNECTION CONATINER (FRIENDS) -->
  384. </div>
  385. </div>
  386. <!--END FAMILY / CONNECTIONS TAB -->
  387.  
  388. <!-- !! START AESTHETIC TAB !! -->
  389. <div id="aes" class="tab" style="display:none">
  390. <div class="contentcontainer">
  391.  
  392. <!--START SPOTIFY-->
  393.  
  394. <!-- INSTRUCTIONS FOR GETTING SPOTIFY EMBED CODE:
  395.  
  396. 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.
  397.  
  398. go to the bottom of the menu and click on share
  399.  
  400. right next to the tumblr button there's a button with "</>". click that and it'll copy the embed code to the clipboard.
  401.  
  402. 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>"
  403.  
  404. then just plop the source link in the src="" section and u gucci.
  405.  
  406. -->
  407. <div class="aspotify">
  408. <iframe src="https://open.spotify.com/embed/user/prominencehq/playlist/4Rm63iZvnzPHQowgRkDjAo" width="300" height="470" frameborder="0" allowtransparency="true"></iframe>
  409. </div>
  410.  
  411. <!-- END SPOTIFY-->
  412.  
  413. <!-- START PINTEREST-->
  414.  
  415. <!-- INSTUCTIONS FOR GETTING PINTEREST EMBED CODE:
  416.  
  417. this one's easy just copy the link of ur board and put it in the href. simple.
  418. -->
  419. <div class="apinterest">
  420. <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/zaharina-jennings/"></a>
  421. </div>
  422. <!--END PINTEREST-->
  423. </div>
  424. </div>
  425. <!-- END AESTHETICS TAB -->
  426.  
  427. <!-- !! START NAV TAB !! -->
  428. <div id="navi" class="tab" style="display:none">
  429. <div class="contentcontainer">
  430. <!-- START TAG ICONS -->
  431. <div class="niconbox">
  432. <a href="/" title="INSPO TAG"><i class="fa fa-tag fa-fw" aria-hidden="true"></i></a>
  433. <a href="/" title="PROMPT TAG"><i class="fa fa-pencil-square fa-fw" aria-hidden="true"></i></a>
  434. <a href="https://prominenceteasers.tumblr.com/tagged/%3Bzaharina." title="THE VIDEO"><i class="fa fa-play fa-fw" aria-hidden="true"></i></a><br>
  435. <a href="" title="FIVE STAR RATING"><i class="fa fa-star fa-fw" aria-hidden="true"></i></a>
  436. <a href="" title="PLAYED BY: "><i class="fa fa-info fa-fw" aria-hidden="true"></i></a>
  437. <a href="/" title="RELATIONSHIP TAG"><i class="fa fa-heart fa-fw" aria-hidden="true"></i></a><br>
  438. <a href="https://www.pinterest.com/prominencehq/zaharina-jennings/" title="PINTEREST"><i class="fa fa-pinterest-square fa-fw" aria-hidden="true"></i></a>
  439. <a href="spotify:user:prominencehq:playlist:58dKlKusWuZAfogbjP0p4u" title="SPOTIFY PLAYLIST"><i class="fa fa-spotify fa-fw" aria-hidden="true"></i></a>
  440. <a href="/" title="BACK HOME"><i class="fa fa-share fa-fw" aria-hidden="true"></i></a><br>
  441. </div>
  442. <!--END TAG ICONS-->
  443.  
  444. <!-- START ROW ONE ICONS -->
  445. <div class="nav">
  446. <img src="https://68.media.tumblr.com/d242c5594ae7d25e7c51fa024dea91d8/tumblr_inline_owjhe34SLE1s2sak3_540.gif">
  447. <img src="https://78.media.tumblr.com/030a8ce0f684f5547d9d07f70945a22a/tumblr_inline_oypgtvIkPf1s2sak3_540.gif">
  448. <img src="https://68.media.tumblr.com/0f0e626373f43ed6ce5b87626398e11e/tumblr_inline_owjhe3hCqh1s2sak3_540.gif">
  449. </div>
  450. <!-- END ROW ONE ICONS -->
  451.  
  452. <!-- START ROW TWO ICONS-->
  453. <div class="nav2">
  454. <img src="https://78.media.tumblr.com/e3bf38b40493681d192f58df64ab4a6b/tumblr_inline_oypgtwD03b1s2sak3_540.gif">
  455. <img src="https://68.media.tumblr.com/b0aaec6be9506b9519c1b6da188e9d07/tumblr_inline_owjhe3qkZY1s2sak3_540.gif">
  456. <img src="https://78.media.tumblr.com/49712d12474efff1d43398b07350fa26/tumblr_inline_oypgtwy1sa1s2sak3_540.gif">
  457. <img src="https://68.media.tumblr.com/e053fc2dfc2a9000e06ced256413420e/tumblr_inline_owjhe4D1Iy1s2sak3_540.gif">
  458. </div>
  459. <!-- END ROW TWO ICONS -->
  460.  
  461. <!-- START NAGIVATION FOOTER-->
  462. <div class="nheader">
  463. <h2>WELCOME TO <b>HOLLYWOOD. i heard it's hell here.</b></h2>
  464. </div>
  465. <!-- END NAGIVATION FOOTER-->
  466.  
  467.  
  468. <!-- START NAGIVATION IMAGE-->
  469. <div class="nbottom">
  470. <img src="https://i.imgur.com/bayerar.gif">
  471. </div>
  472. <!-- END NAGIVATION IMAGE-->
  473.  
  474.  
  475.  
  476. </div>
  477. </div>
  478. <!-- END NAV TAB-->
  479.  
  480. <!-- END TAB CONTENT-->
  481. </div>
  482. <!-- END CONTAINER-->
  483.  
  484. <!-- CREDIT // would be nice if u left intact -->
  485. <div class="credit">
  486. <a href="http://chaaostheory.tumblr.com" title="chaaostheory"><i class="fa fa-gitlab fa-fw" aria-hidden="true"></i></a>
  487. </div>
  488.  
  489. </body>
  490. </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!