API tools faq
paste
Advertisement
rptgoddess

mari bio pAGE

rptgoddess
Oct 28th, 2017
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.28 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/71f7d4a6c73904afe7be8ef4dea31675/tumblr_inline_oyjr8aAbmA1s2sak3_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/48465412c9e156565d93e0d527806e9f/tumblr_inline_oyjr8l1dKu1s2sak3_540.gif">
  180. <!-- END HEADER IMAGE -->
  181.  
  182. <div class="cname">
  183. <h2><b>mari wickham.</b></h2>
  184.  
  185. <h3><p><i>the arcane; she is someone</p></i></h3>
  186. <h3><p><i>someone who is mysterious & </h3></i></p>
  187. <h3><p><i>difficult to be understood. </i></p></h3>
  188.  
  189. </div>
  190.  
  191. </div>
  192. <!--END CHARACTER HEADER-->
  193.  
  194. <!-- STAT COLUMN ONE-->
  195. <div class="cstats">
  196. <table>
  197. <tr>
  198. <th><i class="fa fa-user-secret fa-fw" aria-hidden="true" title="alias"></i></th>
  199. <td>mar & m.</td>
  200. </tr>
  201.  
  202. <tr>
  203. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="age"></i></th>
  204. <td>twenty one.</td>
  205. </tr>
  206.  
  207. <tr>
  208. <th><i class="fa fa-calendar fa-fw" aria-hidden="true" title="birthday"></i></th>
  209. <td>may twelfth.</td>
  210. </tr>
  211.  
  212. <tr>
  213. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  214. <td>cisfemale.</td>
  215. </tr>
  216.  
  217. <tr>
  218. <th><i class="fa fa-deaf fa-fw" aria-hidden="true" title="pronouns"></i></th>
  219. <td>she/her.</td>
  220. </tr>
  221.  
  222. <tr>
  223. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  224. <td>philip wickham. </td>
  225. </tr>
  226.  
  227. <tr>
  228. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  229. <td>natalie wickham. </td>
  230. </tr>
  231.  
  232. <tr>
  233. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  234. <td>princess & socialite.</td>
  235. </tr>
  236.  
  237. <tr>
  238. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="availability"></i></th>
  239. <td>available.</td>
  240. </tr>
  241. </table>
  242. <div class="cstats2">
  243. <table>
  244. <tr>
  245. <th><i class="fa fa-camera-retro" aria-hidden="true" title="secret"></i><td>england’s perfect little princess sure likes visiting <p>america, huh? wonder if they know it’s because less people <p>know who you are around here so you can go wherever <p> you want undetected… including that abortion clinic?</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>sophie turner.</td>
  259. </tr>
  260.  
  261. <tr>
  262. <th><i class="fa fa-home fa-fw" aria-hidden="true" title="hometown"></i></th>
  263. <td>northampton, 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>hollywood, 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>taurus.</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>resourceful & ambitious.</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>explosive & impulsive.</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>none.</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>3 bllion.</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: hurricane.</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/f3eeeb8c00ca51dec58656b1763e73bd/tumblr_inline_oyjr6jeK6C1s2sak3_540.gif">
  317. <img src="https://78.media.tumblr.com/7dc0a034c3ebadf1b4b78dcf7168887d/tumblr_inline_oyjr6hyGLU1s2sak3_540.gif">
  318. <img src="https://78.media.tumblr.com/68473288d6f5e59a1a0ea82901bc76cb/tumblr_inline_oyjr6mAqso1s2sak3_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 will be apart of the app. this is where the applicant will write a bit about their backstory & what not.</p>
  327.  
  328. </div>
  329. <!--END HISTORY TEXT-->
  330.  
  331. <!-- START PERSONALITY TEXT-->
  332. <div class="btext" style="margin-left:375px; margin-top:-395px;">
  333. <h1>personality</h1>
  334. <p>this part is also up to the applicant to complete. this will be the section where you will write about their personality.</p>
  335. </div>
  336. <!--END PERSONALITY TEXT-->
  337.  
  338. </div>
  339. </div>
  340. <!--END BIO TAB-->
  341.  
  342.  
  343. <!-- !! START FAMILY / CONNECTIONS TAB !! -->
  344. <div id="family" class="tab" style="display:none">
  345. <div class="contentcontainer">
  346. <!-- START CONNECTION CONTAINER (FAMILY) -->
  347. <div class="fcontainer">
  348. <!-- START CONNECTION-->
  349. <div class="fmember">
  350. <img src="https://78.media.tumblr.com/b3f06c50618ffadedaf516cbae5ba25c/tumblr_inline_oyjsx4q4JB1s2sak3_540.gif" title="winnie">
  351. <h1><center>winnie marlowe.</center></h1>
  352. <p><center>‘ everyone has been asking me for years ; how are you guys <i>even</i> related? back when i was around sixteen my dad decided to marry her mother. it's as simple as that. her mother is some top designer which would explain why my father was instantly attracted her. the funny part? that's the same girl that my father cheated on my mom with. so to say the least, i'm not a fan of her mother. i'm not really sure what to think of adriana, we really haven't connected & i think it's because we're both not a fan of the whole situation at hand. her mother ... is just so different from my own & i guess i'm just a little heartbroken that my mom is going through all this while my dad is laying in bed happy with another girl. did i mention they're married now? after he finalized the divorce they went to vegas and got hitched. i wasn't invited of course. not that i wanted to go anyways, it's just shitty that my dad didn't think to get my approval. she's a witch. but her daughter is actually pretty alright. for now, anyways. ’</center></p>
  353. </div>
  354. <!-- END CONNECTION-->
  355. </div>
  356. <!-- END CONNECTION CONTAINER (FAMILY) -->
  357.  
  358. <!-- CONNECTION HEADER (FAMILY)-->
  359. <div class="fheader" style="margin-left:-300px; margin-top:410px;">
  360. <h2><i class="fa fa-arrow-up" aria-hidden="true"></i> Her <b>Family</b></h2>
  361. </div>
  362. <!-- END CONNECTION HEADER (FAMILY)-->
  363.  
  364. <!-- DIVIDING IMAGE-->
  365. <img src="https://68.media.tumblr.com/b8ee05124953962e0bd8c51969d0f436/tumblr_inline_ow6mgkpD8X1s2sak3_540.gif" style="float:left; padding:10px;">
  366. <!-- END DIVIDING IMAGE-->
  367.  
  368. <!-- CONNECTION HEADER (FRIENDS)-->
  369. <div class="fheader" style="margin-left:0px;">
  370. <h2><i class="fa fa-arrow-down" aria-hidden="true"></i>Her <b>Relationship.</b></h2>
  371. </div>
  372. <!-- END CONNECTION HEADER (FRIENDS)-->
  373.  
  374. <!-- START CONNECTION CONTAINER (FRIENDS) -->
  375. <div class="fcontainer" style="margin-left:420px; margin-top:-400px; height:390px;">
  376. <!-- START CONNECTION-->
  377. <div class="fmember">
  378. <img src="https://78.media.tumblr.com/52a49f9675a8ed1d64376ad3246ee0e2/tumblr_inline_oyjsp3jBgn1s2sak3_540.gif" title="jason">
  379. <h1><center>scarlett williams.</center></h1>
  380. <p><center>‘ people always ask, how exactly did you end up on mr. kaiser's arm? well, i honestly couldn't tell you how i ended up being around one of the most sincere & caring guys here in hollywood. he's such a great guy, someone i know that i shouldn't even mess with. because who wants someone who's damnaged goods right? but he's such an easy person to confide in. he's easy to talk too & generally cares about people. at least, that's the way i see him. we aren't exactly dating & if i was looking for a relationship he'd be the first person i choose. i just ... hope he doesn't give up on the idea of being with me later on down the road. i'm just not ready to start a relationship with someone. i'm shit scared of relationships. but i know he's a great guy who's probably going to end up leaving me behind if i don't tell him how i really feel about him. otherwise i think the fun we're having now is going to come to an end because one of us is falling a bit faster than the other is. ’</center></p>
  381. </div>
  382. <!-- END CONNECTION-->
  383. </div>
  384. <!-- END CONNECTION CONATINER (FRIENDS) -->
  385. </div>
  386. </div>
  387. <!--END FAMILY / CONNECTIONS TAB -->
  388.  
  389. <!-- !! START AESTHETIC TAB !! -->
  390. <div id="aes" class="tab" style="display:none">
  391. <div class="contentcontainer">
  392.  
  393. <!--START SPOTIFY-->
  394.  
  395. <!-- INSTRUCTIONS FOR GETTING SPOTIFY EMBED CODE:
  396.  
  397. 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.
  398.  
  399. go to the bottom of the menu and click on share
  400.  
  401. right next to the tumblr button there's a button with "</>". click that and it'll copy the embed code to the clipboard.
  402.  
  403. 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>"
  404.  
  405. then just plop the source link in the src="" section and u gucci.
  406.  
  407. -->
  408. <div class="aspotify">
  409. <iframe src="https://open.spotify.com/embed/user/prominencehq/playlist/6c91GOs1mlJVKufnnxvNJG"" width="300" height="470" frameborder="0" allowtransparency="true"></iframe>
  410.  
  411. </div>
  412. <!-- END SPOTIFY-->
  413.  
  414. <!-- START PINTEREST-->
  415.  
  416. <!-- INSTUCTIONS FOR GETTING PINTEREST EMBED CODE:
  417.  
  418. this one's easy just copy the link of ur board and put it in the href. simple.
  419. -->
  420. <div class="apinterest">
  421. <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/mari-wickham/"></a>
  422. </div>
  423. <!--END PINTEREST-->
  424. </div>
  425. </div>
  426. <!-- END AESTHETICS TAB -->
  427.  
  428. <!-- !! START NAV TAB !! -->
  429. <div id="navi" class="tab" style="display:none">
  430. <div class="contentcontainer">
  431. <!-- START TAG ICONS -->
  432. <div class="niconbox">
  433. <a href="/" title="INSPO TAG"><i class="fa fa-tag fa-fw" aria-hidden="true"></i></a>
  434. <a href="/" title="PROMPT TAG"><i class="fa fa-pencil-square fa-fw" aria-hidden="true"></i></a>
  435. <a href="https://prominenceteasers.tumblr.com/tagged/%3Bmari." title="teaser"><i class="fa fa-play fa-fw" aria-hidden="true"></i></a><br>
  436. <a href="" title="THREE STAR RATING"><i class="fa fa-star fa-fw" aria-hidden="true"></i></a>
  437. <a href="" title="PLAYED BY: "><i class="fa fa-info fa-fw" aria-hidden="true"></i></a>
  438. <a href="/" title="RELATIONSHIP TAG"><i class="fa fa-heart fa-fw" aria-hidden="true"></i></a><br>
  439. <a href="https://www.pinterest.com/prominencehq/mari-wickham/" title="PINTEREST"><i class="fa fa-pinterest-square fa-fw" aria-hidden="true"></i></a>
  440. <a href="spotify:user:prominencehq:playlist:6c91GOs1mlJVKufnnxvNJG" title="SPOTIFY PLAYLIST"><i class="fa fa-spotify fa-fw" aria-hidden="true"></i></a>
  441. <a href="/" title="BACK HOME"><i class="fa fa-share fa-fw" aria-hidden="true"></i></a><br>
  442. </div>
  443. <!--END TAG ICONS-->
  444.  
  445. <!-- START ROW ONE ICONS -->
  446. <div class="nav">
  447. <img src="https://78.media.tumblr.com/e294524f938cbf2ef75857052457148b/tumblr_inline_oyjr9zBvNy1s2sak3_540.gif">
  448. <img src="https://78.media.tumblr.com/aaf6e57e1492eb01306321d49ddb18d5/tumblr_inline_oyjra0a6TL1s2sak3_540.gif">
  449. <img src="https://78.media.tumblr.com/cff1567fbfbe3ceae50b290ee9757a62/tumblr_inline_oyjra2we1F1s2sak3_540.gif">
  450. </div>
  451. <!-- END ROW ONE ICONS -->
  452.  
  453. <!-- START ROW TWO ICONS-->
  454. <div class="nav2">
  455. <img src="https://78.media.tumblr.com/06979a3d4f26ea533eebf1d57ae4d60b/tumblr_inline_oyjra0EOKz1s2sak3_540.gif">
  456. <img src="https://78.media.tumblr.com/b962c2ee3780da92b7cf37570ba644de/tumblr_inline_oyjrpgkLrq1s2sak3_540.gif">
  457. <img src="https://78.media.tumblr.com/dbbe90935ca99fe89c42fc372949ee89/tumblr_inline_oyjr9zRhFc1s2sak3_540.gif">
  458. <img src="https://78.media.tumblr.com/551bfd13ac4a3aa3a7891fb18f4401cd/tumblr_inline_oyjrph5pmS1s2sak3_540.gif">
  459. </div>
  460. <!-- END ROW TWO ICONS -->
  461.  
  462. <!-- START NAGIVATION FOOTER-->
  463. <div class="nheader">
  464. <h2>WELCOME TO <b>HOLLYWOOD. i heard it's hell here.</b></h2>
  465. </div>
  466. <!-- END NAGIVATION FOOTER-->
  467.  
  468.  
  469. <!-- START NAGIVATION IMAGE-->
  470. <div class="nbottom">
  471. <img src="https://i.imgur.com/bayerar.gif">
  472. </div>
  473. <!-- END NAGIVATION IMAGE-->
  474.  
  475.  
  476.  
  477. </div>
  478. </div>
  479. <!-- END NAV TAB-->
  480.  
  481. <!-- END TAB CONTENT-->
  482. </div>
  483. <!-- END CONTAINER-->
  484.  
  485. <!-- CREDIT // would be nice if u left intact -->
  486. <div class="credit">
  487. <a href="http://chaaostheory.tumblr.com" title="chaaostheory"><i class="fa fa-gitlab fa-fw" aria-hidden="true"></i></a>
  488. </div>
  489.  
  490. </body>
  491. </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!