SHARE
TWEET

PRIME TIME! ( PAGE 02 / WOODSBEYOND )

heartilys Mar 19th, 2019 885 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!---   PRIME TIME !  ———  a muse page by @woodsbeyond / rosevois.
  2.  
  3. — edit / customize the theme to your heart's content! i've done my best to organize and include instructions to the best of my ability, but if you have trouble with anything, feel free to ask!
  4. — DO NOT delete the credit. if you add in a background image and it somehow obstructs the credit / makes it harder to see, you may adjust the position.
  5. — find a bug, or something that looks wonky when you start customizing it? let me know so i can adjust it!
  6.  
  7. COLOUR PALETTE !   ———   these are the colours i've used within the code. they are listed here so you can easily do a find + replace on them to edit in your preferred colour.
  8.  
  9. #efcace :    light pink
  10. #4f2e2d :    dark pink / berry
  11. #cecece :    light grey
  12. #f8f1f1 :    off white
  13. #a8bab9 :    muted mint
  14. #151414 :    black  --->
  15.  
  16.  
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.  
  21. <title>PRIME TIME, A MUSE PAGE.</title> <!--- Change the title of your page here --->
  22.     <link rel="shortcut icon" href="{Favicon}">
  23.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <!-- POP UPS -->
  26.  
  27. <script type="text/javascript"
  28. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  29.  
  30. <script>
  31. $(document).ready(function() {
  32. //
  33. $('a.poplight[href^=#]').click(function() {
  34. var popID = $(this).attr('rel'); //Get Popup Name
  35. var popURL = $(this).attr('href'); //Get Popup href to define size
  36. var query= popURL.split('?');
  37. var dim= query[1].split('&');
  38. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  39. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  40. var popMargTop = ($('#' + popID).height() + 80) / 2;
  41. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  42. //Apply Margin to Popup
  43. $('#' + popID).css({
  44. 'margin-top' : -popMargTop,
  45. 'margin-left' : -popMargLeft
  46. });
  47. $('body').append('<div id="fade"></div>');
  48. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  49. return false;
  50. });
  51. $('a.close, #fade').live('click', function() {
  52. $('#fade , .popup_block').fadeOut(function() {
  53. $('#fade, a.close').remove(); //fade them both out
  54. });
  55. return false;
  56. });
  57. });
  58. </script>
  59.  
  60. <!--  TABS  -->
  61.  
  62. <script>
  63.  
  64. $(document).ready(function(){
  65.    $("ul#tabs li").click(function(e){
  66.        if (!$(this).hasClass("active")) {
  67.            var tabNum = $(this).index();
  68.            var nthChild = tabNum+1;
  69.            $("ul#tabs li.active").removeClass("active");
  70.            $(this).addClass("active");
  71.            $("ul#tab li.active").removeClass("active");
  72.            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  73.        }
  74.    });
  75. });
  76.  
  77. </script>
  78.  
  79.  
  80. <script>
  81.  
  82. $(document).ready(function(){
  83.    $("ul#tabs2 li").click(function(e){
  84.        if (!$(this).hasClass("active")) {
  85.            var tabNum = $(this).index();
  86.            var nthChild = tabNum+1;
  87.            $("ul#tabs2 li.active").removeClass("active");
  88.            $(this).addClass("active");
  89.            $("ul#tab2 li.active").removeClass("active");
  90.            $("ul#tab2 li:nth-child("+nthChild+")").addClass("active");
  91.        }
  92.    });
  93. });
  94.  
  95. </script>
  96.  
  97. <!-- TOOLTIPS -->
  98.  
  99. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  100. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  101. <script>
  102. (function($){
  103. $(document).ready(function(){
  104. $("[title],a[title],img[title]").style_my_tooltips({
  105. tip_follows_cursor:true,
  106. tip_delay_time:90,
  107. tip_fade_speed:600,
  108. attribute:"title"
  109. });
  110. });
  111. })(jQuery);
  112. </script>
  113.  
  114. <!--- FONT SCRIPTS --->
  115.  
  116. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  117. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  118.  
  119. <style type="text/css">
  120.  
  121. @font-face { font-family:'vintage avalanche'; src: url('https://dl.dropboxusercontent.com/s/p614ok9ext1lrmn/vintage%20avalanche.otf') ;}
  122.  
  123. @font-face { font-family:'saturday night'; src: url('https://dl.dropboxusercontent.com/s/t1v8lrtmfsvr7ky/saturday%20nights%20personal%20use.ttf') ;}
  124.  
  125. /* TOOLTIPS */
  126.  
  127. .tooltip{
  128.     display:inline;
  129.     position:absolute;
  130. }
  131.  
  132. #s-m-t-tooltip {
  133.     color:#fafafa;
  134.     border:3px double #cecece;
  135.     margin:15px 10px 10px 10px;
  136.     font-size:10px;
  137.     text-transform:uppercase;
  138.     font-family:'roboto condensed';
  139.     text-align:center;
  140.     text-shadow:
  141.    -1px -1px 0 #000,  
  142.     1px -1px 0 #000,
  143.     -1px 1px 0 #000,
  144.     1px 1px 0 #000;
  145.     padding:4px 8px 2px 8px;
  146.     background:url('https://66.media.tumblr.com/dfcba973b099e28a72c03643b1d02af4/tumblr_inline_pomxzhVeWo1wvl34y_1280.png') repeat;
  147.     z-index:9999999999999;
  148. }
  149.  
  150. /* GENERAL STYLING */
  151.  
  152. a {
  153.     color:#efcace;
  154.     text-transform:lowercase;
  155.     text-decoration:none;
  156.     font-weight:bold;
  157. }
  158.  
  159. b, strong {
  160.     font-size:12px;
  161.     font-family:'roboto condensed';
  162.     color:#efcace;
  163.     text-transform:uppercase;
  164. }
  165.  
  166. i, em {
  167.     color:#a8bab9;
  168. }
  169.  
  170. @font-face { font-family:'sweet hipster'; src: url('https://dl.dropboxusercontent.com/s/1fasudgff8kal6z/sweet%20hipster.ttf') ;}
  171.  
  172. h1 {
  173.     width:404px;
  174.     font-family:'vintage avalanche';
  175.     font-size:35px;
  176.     text-transform:uppercase;
  177.     text-align:center;
  178.     line-height:35px;
  179.     padding-bottom:12px;
  180.     margin-top:0px;
  181.     -webkit-text-stroke:.2px #a8bab9;
  182.     color:transparent;
  183.     position:fixed;
  184. }
  185.  
  186. h2 {
  187.     color:#4f2e2d;
  188.     font-family:'roboto condensed';
  189.     font-size:12px;
  190.     font-weight:bold;
  191.     font-style:italic;
  192.     text-align:center;
  193.     text-transform:uppercase;
  194.     text-decoration:underline;
  195.     margin-top:15px;
  196. }
  197.  
  198.  
  199. /*  section headings within the pop up  */
  200. h3 {
  201.     color:transparent;
  202.     -webkit-text-stroke:.2px #f8f1f1;
  203.     font-family:'roboto condensed';
  204.     font-size:20px;
  205.     text-align:center;
  206.     text-transform:uppercase;
  207.     letter-spacing:1px;
  208.     line-height:0px;
  209. }
  210.  
  211. h4 {
  212.     color:#9cb3b2;
  213.     font-family:'roboto condensed';
  214.     font-size:10px;
  215.     font-style:italic;
  216.     text-align:center;
  217.     letter-spacing:2px;
  218.     text-transform:uppercase;
  219. }
  220.  
  221.  
  222. /* MAIN AREAS */
  223.  
  224. body {
  225.     background-color:#151414;
  226.     font-size:12px;
  227.     color:#373334;
  228.     line-height:1.5;
  229.     letter-spacing:.5px;
  230.     font-family:'roboto condensed';
  231. }
  232.  
  233. #title {
  234.     color:#efcace;
  235.     font-family:'saturday night';
  236.     text-transform:lowercase;
  237.     font-size:80px;
  238.     text-shadow:
  239.     0px 0px 0,  
  240.     0px 0px 0,
  241.     -3px 3px 0 #4f2e2d,
  242.     0px 0px 0;
  243.     position:fixed;
  244.     margin-top:420px;
  245.     margin-left:400px;
  246.     z-index:99999;
  247. }
  248.  
  249. #tnav {
  250.     font-family:'roboto condensed';
  251.     font-size:20px;
  252.     text-transform:uppercase;
  253.     position:absolute;
  254.     margin-top:120px;
  255.     margin-left:-65px;
  256. }
  257.  
  258. #tnav a {
  259.     color:#efcace;
  260.     padding:8px;
  261.     text-decoration:none;
  262.     background-color:#151414;
  263. }
  264.  
  265. #conborder {
  266.     width:570px;
  267.     height:450px;
  268.     top:-50px;
  269.     bottom:0px;
  270.     left:0px;
  271.     right:0px;
  272.     margin:auto;
  273.     padding:20px;
  274.     position:fixed;
  275.     border:1px solid #efcace;
  276. }
  277.  
  278. #musecon {
  279.     width:570px;
  280.     height:450px;
  281.     padding:20px;
  282.     margin-top:5px;
  283.     margin-left:5px;
  284.     overflow-x:hidden;
  285.     overflow-y:scroll;
  286.     background-color:#151414;
  287.     border:1px solid #efcace;
  288. }
  289.  
  290. #musecon::-webkit-scrollbar {  
  291.     background-color:#151414;
  292. }
  293.  
  294. #musecon::-webkit-scrollbar-thumb{
  295.     width:4px;
  296.     border:8px solid #151414;
  297.     background:#efcace;
  298.     margin-right:5px;
  299. }
  300.  
  301. #muse {
  302.     width:120px;
  303.     height:195px;
  304.     overflow:hidden;
  305.     margin-top:15px;
  306.     margin-left:15px;
  307.     margin-right:0px;
  308.     border-radius:5px;
  309.     display:inline-block;
  310.     position:relative;
  311. }
  312.  
  313. #micon {
  314.     width:110px;
  315.     height:180px;
  316.     margin-left:0px;
  317.     border:1px solid #efcace;
  318.     border-radius:5px;
  319. }
  320.    
  321. #micon img {
  322.     width:110px;
  323.     height:180px;
  324.     margin-top:4px;
  325.     margin-left:6px;
  326.     border-radius:5px;
  327. }
  328.  
  329. #micon:hover + #plus {
  330.     color:#efcace;
  331.     opacity:1;
  332.     transition:.3s;
  333. }
  334.  
  335. #plus {
  336.     margin-top:-2px;
  337.     margin-left:100px;
  338.     text-align:center;
  339.     font-size:20px;
  340.     position:absolute;
  341. }
  342.  
  343. #plus a, #plus a:hover {
  344.     color:#f8f1f1;
  345. }
  346.  
  347. #nm {
  348.     width:110px;
  349.     margin-top:-20px;
  350.     margin-left:7px;
  351.     position:absolute;
  352. }
  353.  
  354. /*  TABS  */
  355.  
  356. ul#tabs {
  357.    list-style-type: none;
  358.    text-align:center;
  359.    position:fixed;
  360.    margin-top:-75px;
  361.    margin-left:10px;
  362. }
  363.  
  364. ul#tabs li {
  365.     color:transparent;
  366.     -webkit-text-stroke:1px #a8bab9;
  367.     font-size:28px;
  368.     font-family:'vintage avalanche';
  369.     line-height:40px;
  370.     letter-spacing:1.5px;
  371.     text-transform:uppercase;
  372.     margin-right:15px;
  373.     padding:8px;
  374.     cursor:pointer;
  375.     text-shadow:
  376.     -1px -1px 0 #000,  
  377.     1px -1px 0 #000,
  378.     -1px 1px 0 #000,
  379.     1px 1px 0 #000;
  380.     transition:.3s;
  381.     display:inline-block;
  382. }
  383.  
  384. ul#tabs li:hover {
  385.    color:#a8bab9;
  386.    transition:1s;
  387. }
  388.  
  389. ul#tabs li.active {
  390.    color:#a8bab9;
  391.    transition:1s;
  392. }
  393.  
  394. ul#tab {
  395.    list-style-type: none;
  396.    margin: 0;
  397.    padding: 0;
  398. }
  399.  
  400. ul#tab li {
  401.    display:none;
  402. }
  403.  
  404. ul#tab li.active {
  405.    display:block;
  406. }
  407.  
  408.  
  409. ul#tabs2 {
  410.    list-style-type: none;
  411.    padding:0;
  412.    margin-top:120px;
  413.    margin-left:-340px;
  414.    position:fixed;
  415.    z-index:999999;
  416. }
  417.  
  418. ul#tabs2 li {
  419.     color:#f8f1f1;
  420.     font-size:20px;
  421.     text-transform:uppercase;
  422.     margin-bottom:30px;
  423.     cursor:pointer;
  424.     text-shadow:
  425.     0px 0px 0,  
  426.     0px 0px 0,
  427.     -3px 3px 0 #4f2e2d,
  428.     0px 0px 0;
  429.     background-color:#151414;
  430.     transition:.3s;
  431. }
  432.  
  433. ul#tabs2 li:hover {
  434.    color:#efcace;
  435.    transition:.3s;
  436. }
  437.  
  438. ul#tabs2 li.active {
  439.    color:#efcace;
  440.    transition:.3s;
  441. }
  442.  
  443. ul#tab2 {
  444.    list-style-type: none;
  445.    margin: 0;
  446.    padding: 0;
  447. }
  448.  
  449. ul#tab2 li {
  450.    display:none;
  451. }
  452.  
  453. ul#tab2 li.active {
  454.    display:block;
  455. }
  456.  
  457.  
  458. /*  POP UPS  */
  459.  
  460. .popup_block{
  461.     display:none;
  462.     background:#f8f1f1;
  463.     text-align:justify;
  464.     padding:10px 10px 10px 30px;
  465.     position:fixed;
  466.     top:51%;left:59%;
  467.     z-index: 99999;
  468.     width:450px;
  469.     height:458px;
  470.     overflow:hidden;
  471. }
  472.  
  473. *html #fade {position: absolute;}
  474. *html .popup_block {position: absolute;}
  475. #fade {
  476.     display:none;
  477.     position:fixed;
  478.     left:0px;
  479.     top:0px;
  480.     width:100%;
  481.     height:100%;
  482.     z-index:9999;
  483.     background:#151414;
  484.     opacity:1; /* change opacity to 1 for a solid colour, or .1-.9 for varying degrees of transparency. */
  485. }
  486.  
  487. ::-webkit-scrollbar {  
  488.     background-color:#f8f1f1;
  489. }
  490.  
  491. ::-webkit-scrollbar-thumb{
  492.     width:4px;
  493.     border:8px solid #f8f1f1;
  494.     background:#efcace;
  495.     margin-right:5px;
  496. }
  497.  
  498. /*  MUSE INFO  */
  499.  
  500. #tabname {
  501.     width:404px;
  502.     height:48px;
  503.     margin-top:-54px;
  504.     margin-left:-2px;
  505.     background-color:#f8f1f1;
  506.     position:absolute;
  507.     border-bottom:1px solid #cecece;
  508. }
  509.  
  510. #line {
  511.     width:1px;
  512.     height:60px;
  513.     background-color:#cecece;
  514.     margin-top:5px;
  515.     margin-left:205px;
  516. }
  517.  
  518. #popname {
  519.     color:#efcace;
  520.     font-family:'saturday night';
  521.     text-transform:lowercase;
  522.     font-size:60px;
  523.     text-shadow:
  524.     0px 0px 0,  
  525.     0px 0px 0,
  526.     -3px 3px 0 #4f2e2d,
  527.     0px 0px 0;
  528.     position:fixed;
  529.     margin-top:420px;
  530.     margin-left:-220px;
  531. }
  532.  
  533. #popicon {
  534.     width:300px;
  535.     height:470px;
  536.     border:1px solid #efcace;
  537.     border-radius:5px;
  538.     margin-top:-11px;
  539.     margin-left:-332px;
  540.     position:fixed;
  541. }
  542.  
  543. #popicon img {
  544.     width:300px;
  545.     height:470px;
  546.     border-radius:5px;
  547.     margin-top:10px;
  548.     margin-left:20px;
  549. }
  550.  
  551. #popnav {
  552.     width:400px;
  553.     margin-top:10px;
  554.     margin-left:-2px;
  555.     margin-bottom:15px;
  556.     padding-left:5px;
  557.     text-align:center;
  558.     background-color:#efcace;
  559. }
  560.  
  561. #popnav a {
  562.     color:#151414;
  563.     font-size:15px;
  564.     font-family:'roboto condensed';
  565.     font-weight:bold;
  566.     line-height:18px;
  567.     letter-spacing:1.5px;
  568.     text-transform:uppercase;
  569.     text-decoration:none;
  570.     display:inline-block;
  571.     margin-left:10px;
  572.     margin-right:20px;
  573.     margin-bottom: 4px;
  574.     padding:12px 4px 4px 4px;
  575.     cursor:pointer;
  576. }
  577.  
  578. #popblock {
  579.     width:342px;
  580.     padding:30px;
  581.     margin-bottom:-5px;
  582.     margin-left:-2px;
  583.     border:1px solid #cecece;
  584. }
  585.  
  586. tag {
  587.     font-weight:bold;
  588.     font-style:italic;
  589.     color:#a8bab9;
  590.     text-transform:uppercase;
  591.     padding-right:6px;
  592. }
  593.  
  594. #con {
  595.     width:400px;
  596.     height:140px;
  597.     margin-top:25px;
  598.     margin-left:0px;
  599. }
  600.  
  601. #con img {
  602.     width:400px;
  603.     height:120px;
  604. }
  605.  
  606. #coninfo {
  607.     font-family:'roboto condensed';
  608.     font-size:10px;
  609.     font-style:italic;
  610.     text-transform:uppercase;
  611.     text-align:center;
  612.     padding-top:5px;
  613.     border-bottom:1px solid #d2d2d2;
  614. }
  615.  
  616. #coninfo a {
  617.     text-transform:uppercase;
  618. }
  619.  
  620. /* CREDIT — DO NOT TOUCH! */
  621.  
  622.  
  623. #credit {
  624.     position:fixed;
  625.     bottom:10px;
  626.     right:5px;
  627.     font-size:20px;
  628. }
  629.  
  630. #credit a {
  631.     width:60px;
  632.     height:60px;
  633.     color:#efcace;
  634.     padding:6px 6px 2px 5px;
  635.     background-color:#4f2e2d;
  636.     border-bottom:2px solid #f8f1f1;
  637. }
  638.    
  639. </style>
  640.  
  641. </head>
  642. <body>
  643.  
  644. <div id="conborder">
  645. <div id="musecon">  
  646.  
  647. <!-- * TITLE —— the title that appears below the container -->
  648. <div id="title"> muse list </div>  
  649.  
  650. <!-- * NAV LINKS —— the links that appear on the left of the container. replace YOURURL with the links, and replace LINKTITLE with whatever title you want. -->
  651. <div id="tnav"> <a href="YOURURL" title="LINKTITLE"><span class="th th-reload"></span></a> <br><br>
  652. <a href="YOURURL" title="LINKTITLE"><span class="th th-list"></span></a> <br><br>
  653. <a href="YOURURL" title="LINKTITLE"><span class="th th-heart-1-o"></span></a> </div>
  654.  
  655. <!-- * CATEGORY TABS —— name them whatever you want. if you want to delete a tab, just delete everything from   <li>  to  </li>   and it will no longer show a link at the top. -->
  656. <ul id="tabs">
  657. <li class="active"> tab one </li>
  658. <li> tab two </li>
  659. <li> tab three </li>
  660. </ul>
  661.  
  662.  
  663. <!-- TAB ONE START -->
  664. <ul id="tab">
  665.  
  666. <li class="active">
  667.  
  668. <!-- this is where the muse images go, as well as links to the pop up. to add a new muse, copy & paste this:
  669.  
  670. <div id="muse">
  671.     <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><span class="th th-plus-1-o"></span></a> </div>
  672.     <div id="micon">
  673.     <img src="IMAGEURL" title="SERIES NAME"> </div>
  674.     <div id="nm"> <h3>name</h3> </div>
  675. </div>
  676.  
  677. ** IMPORTANT ! —— where it says   rel="one"   in the code, change what's in quotations to whatever you want your muse's pop up id to be. i suggest numbering them, using their first name, or their initials. whatever works for you. -->
  678.  
  679. <div id="muse">
  680.     <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><span class="th th-plus-1-o"></span></a> </div>
  681.     <div id="micon">
  682.     <img src="https://via.placeholder.com/110x180" title="SERIES NAME"> </div>
  683.     <div id="nm"> <h3>name</h3> </div>
  684. </div>
  685.  
  686. </li>
  687. <!-- TAB ONE END -->
  688.  
  689. <!-- TAB TWO START -->
  690. <li>
  691.  
  692. <div id="muse">
  693.     <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><span class="th th-plus-1-o"></span></a> </div>
  694.     <div id="micon">
  695.     <img src="https://via.placeholder.com/110x180" title="SERIES NAME"> </div>
  696.     <div id="nm"> <h3>name</h3> </div>
  697. </div>
  698.  
  699. </li>
  700. <!-- TAB TWO END -->
  701.  
  702. <!-- TAB THREE START -->
  703. <li>
  704.  
  705. <div id="muse">
  706.     <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><span class="th th-plus-1-o"></span></a> </div>
  707.     <div id="micon">
  708.     <img src="https://via.placeholder.com/110x180" title="SERIES NAME"> </div>
  709.     <div id="nm"> <h3>name</h3> </div>
  710. </div>
  711.  
  712. </li>
  713. <!-- TAB THREE END -->
  714.  
  715. </ul>
  716.  
  717.    </div>
  718.    </div>
  719.    
  720. <!---   END MUSE LIST   --->
  721.  
  722.  
  723. <!-- to add a new pop up, copy & paste everything from   POP UP START   to   POP UP END
  724.  
  725. * IMPORTANT ! —— for each muse, check the portion that says   div id="popid"
  726. the word in quotations needs to be changed to whatever you decided to put inside the quotations in   rel="one"   on that particular muse's link.
  727.  
  728. EX.   if you put   rel="cheryl"   then you'd put   div id="cheryl"
  729. if you have another muse where   rel="julia"   then you'd use   div id="julia"   for that pop up,  and so on. -->
  730.  
  731.  
  732. <!---  POP UP ONE START!  --->
  733. <div id="one" class="popup_block">
  734.  
  735. <div id="popicon"> <img src="https://via.placeholder.com/300x470"> </div>  
  736.  
  737. <div id="popname"> muse name </div>
  738.  
  739. <!-- this is where your muse's tab links are. if you want to delete any,  just delete the  <li>  to  </li>  around it. you can also change the titles if you need to. -->
  740. <ul id="tabs2">
  741. <li class="active" title="overview"> <span class="th th-star-o"></span> </li>
  742. <li title="statistics"> <span class="th th-users"></span> </li>
  743. <li title="history"> <span class="th th-quote-up"></span> </li>
  744. <li title="verses"> <span class="th th-push-pin-o"></span> </li>
  745. </ul>  
  746.  
  747. <!---  TABS START  --->
  748.  
  749. <ul id="tab2">
  750.  
  751. <!---  START FIRST TAB!  OVERVIEW!  --->
  752.  
  753. <!--- this is your first tab, and the active one, which means it will show by default when you first click your pop up link. take care not to mess with any of the positioning tags unless you know what you're doing!  --->
  754.  
  755. <li class="active">
  756.  
  757. <div style="width:auto;height:410px;margin-top:10px;overflow-y:scroll;padding:16px;">
  758.  
  759. <div id="tabname"> <h1>overview</h1> </div>
  760.  
  761. <h2> navigation </h2>
  762.  
  763. <div id="popnav">     <a href="/" title="link"><span class="th th-camera"></span></a>
  764.     <a href="YOURURL" title="LINKTITLE"><span class="th th-stars"></span></a>
  765.     <a href="YOURURL" title="LINKTITLE"><span class="th th-quote-down"></span></a>
  766.     <a href="YOURURL" title="LINKTITLE"><span class="th th-star-o"></span></a>
  767.     <a href="YOURURL" title="LINKTITLE"><span class="th th-heart-1-o"></span></a>
  768.     <a href="YOURURL" title="LINKTITLE"><span class="th th-list"></span></a> </div>
  769.  
  770. <div id="line"></div>
  771. <div id="popblock">
  772. <tag>info.</tag> write your info here<br>
  773. <tag>info.</tag> write your info here<br>
  774. <tag>info.</tag> write your info here<br>
  775. <tag>info.</tag> write your info here<br>
  776. <tag>info.</tag> write your info here
  777. </div>
  778. <div id="line"></div>
  779.  
  780. <h2> relationships </h2>
  781.  
  782. <!-- to add a new relationship, just copy & paste everything from   RELATION START   to   RELATION END -->
  783.  
  784. <!-- RELATION ONE START -->
  785. <div id="con">
  786. <img src="https://via.placeholder.com/400x120">
  787. <div id="coninfo"> first last , &nbsp; # <a href="/">username</a> </div></div>
  788. <!-- RELATION ONE END -->
  789.  
  790. </li>
  791. <!---  END FIRST TAB!  --->
  792.  
  793.  
  794. <!---  START SECOND TAB!  STATISTICS!  --->
  795. <li>
  796.  
  797. <div style="width:auto;height:410px;margin-top:10px;overflow-y:scroll;padding:16px;">
  798.  
  799. <div id="tabname"> <h1> statistics </h1> </div>
  800. <div id="line"></div>
  801.  
  802. <!-- * IMPORTANT ! —— if you don't like the look of the vertical lines linking the information boxes, delete   <div id="line"></div>   and replace it with   <br><br>
  803.  
  804. to add a new box of info, copy & paste everything from   INFO BOX START   to   INFO BOX END
  805.  
  806. if you keep the vertical lines, delete the   <div id="line"></div>   ONLY from your last information box. -->
  807.  
  808. <!-- INFO BOX ONE START -->
  809. <div id="popblock">
  810. <tag>info.</tag> write your info here<br>
  811. <tag>info.</tag> write your info here<br>
  812. <tag>info.</tag> write your info here<br>
  813. <tag>info.</tag> write your info here<br>
  814. <tag>info.</tag> write your info here
  815. </div>
  816. <div id="line"></div>
  817. <!-- INFO BOX TWO END -->
  818.  
  819. <div id="popblock">
  820. <tag>info.</tag> write your info here<br>
  821. <tag>info.</tag> write your info here<br>
  822. <tag>info.</tag> write your info here<br>
  823. <tag>info.</tag> write your info here<br>
  824. <tag>info.</tag> write your info here
  825. </div>
  826. <div id="line"></div>
  827.  
  828. <div id="popblock">
  829. <tag>info.</tag> write your info here<br>
  830. <tag>info.</tag> write your info here<br>
  831. <tag>info.</tag> write your info here<br>
  832. <tag>info.</tag> write your info here<br>
  833. <tag>info.</tag> write your info here
  834. </div>
  835.  
  836.  
  837. </li>  
  838. <!---  END SECOND TAB!  --->
  839.  
  840.  
  841. <!---  START THIRD TAB!  BIOGRAPHY!  --->
  842. <li>  
  843.  
  844. <div style="width:auto;height:410px;margin-top:10px;overflow-y:scroll;padding:16px;">
  845.  
  846. <div id="tabname"> <h1> biography </h1> </div>
  847.  
  848. <br>
  849. you can write out your muse's history here. lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque felis nulla, dictum ac dui id, porta sodales massa. sed eu dolor eget lectus tincidunt volutpat a eu arcu. donec tincidunt lorem eu nisi volutpat egestas. fusce fermentum sit amet odio quis aliquet. lorem ipsum dolor sit amet, consectetur adipiscing elit. sed lacus elit, vulputate at orci at, fermentum semper mi. morbi in purus nec purus dictum viverra. sed dignissim libero at pharetra rhoncus. aenean hendrerit nisi sit amet pellentesque malesuada. pellentesque fringilla convallis nulla, nec mattis odio laoreet eu. mauris sodales in leo at dapibus. nulla a risus gravida, sollicitudin dui at, condimentum dolor. quisque sollicitudin mollis tellus vitae mollis. curabitur odio massa, semper vitae magna sed, molestie porttitor est. maecenas congue aliquam ligula eu faucibus. quisque at dolor vitae mauris tempus porta.
  850. <br><br>
  851. donec eu eros rhoncus, porta magna quis, egestas ante. vestibulum sagittis in felis non interdum. duis interdum nisi tellus. quisque tristique pharetra metus at tincidunt. sed sed tortor nibh. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. vivamus elit dui, lobortis vel orci et, malesuada commodo ante. proin sed facilisis justo. mauris gravida, mi id porttitor sodales, enim nulla tempus purus, in tristique ligula leo vel ligula. sed ligula risus, sollicitudin vitae ipsum a, vestibulum fringilla purus. pellentesque nibh enim, convallis sit amet malesuada a, accumsan a tortor. quisque ac ipsum nunc. cras pellentesque turpis sed nisl suscipit egestas.
  852. <br><br>
  853. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. mauris in facilisis diam. nam ultrices dui lorem, vitae placerat sem consequat ut. nulla quis urna ac nibh finibus pharetra id eget quam. aenean elementum mollis nibh, id sollicitudin tortor ullamcorper eget. donec feugiat dui semper diam fermentum, vitae hendrerit risus eleifend. aenean tempor facilisis mi, a eleifend quam finibus a. ut rutrum varius nulla, vitae hendrerit magna feugiat at. integer in auctor nulla. nullam lacinia nec purus dictum tincidunt. pellentesque ac lorem convallis ex consequat sagittis non nec tortor. nam ante lacus, ultricies eu condimentum vel, faucibus non erat. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  854.  
  855. </div>
  856.  
  857. </li>
  858. <!---  END THIRD TAB!  --->
  859.  
  860. <!---  START FOURTH TAB!  VERSES!  --->
  861. <li>  
  862.  
  863. <div style="width:auto;height:410px;margin-top:10px;overflow-y:scroll;padding:16px;">
  864.  
  865. <div id="tabname"> <h1> verses </h1> </div>
  866.  
  867. <!-- if you don't want the vertical lines between verses, delete the   <div id="line"></div>   bits. you don't have to replace it with anything on this tab, but you can add a   <br>   or two if you prefer more spacing.
  868.  
  869. to add a new verse, copy & paste everything from   VERSE START   to   VERSE END. -->
  870.  
  871. <!-- VERSE ONE START -->
  872. <div id="line"></div>
  873. <h2> verse name </h2>
  874. <div id="popblock">
  875. write your verse information here. lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque felis nulla, dictum ac dui id, porta sodales massa. sed eu dolor eget lectus tincidunt volutpat a eu arcu. donec tincidunt lorem eu nisi volutpat egestas. fusce fermentum sit amet odio quis aliquet.
  876. </div>
  877. <!-- VERSE ONE END -->
  878.  
  879. <div id="line"></div>
  880. <h2> verse name </h2>
  881. <div id="popblock">
  882. write your verse information here. donec eu eros rhoncus, porta magna quis, egestas ante. vestibulum sagittis in felis non interdum. duis interdum nisi tellus. quisque tristique pharetra metus at tincidunt. sed sed tortor nibh.
  883. </div>
  884.  
  885. </div>
  886.  
  887. </li>
  888. <!---  END FOURTH TAB!  --->
  889.  
  890. </ul>
  891. <!---  END TABS  --->
  892. </div>
  893. <!---  POP UP END!  --->
  894.  
  895.  
  896.  
  897. <!--- CREDIT.  DO NOT TOUCH! --->
  898.  
  899. <div id="credit"><a href="https://woodsbeyond.tumblr.com" title="made by evie"><span class="th th-rose"></span></a></div>  
  900.  
  901. </body>
  902. </html>
RAW Paste Data
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
 
Top