API tools faq
paste
Advertisement
heartilys

PAGE 01: PRIME TIME! [ENDLESSWOOD]

heartilys
Mar 19th, 2019 (edited)
2,371
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.55 KB | None | 0 0
raw download clone embed print report
  1. <!--- PRIME TIME ! // A MUSE PAGE BY @ENDLESSWOOD
  2. CODE UPDATED 04/2022, ORIGINALLY POSTED @WOODSBEYOND (MY OLD CODES BLOG)
  3.  
  4. ♡ edit the theme as much as you like! just know that a decent amount of knowledge on html/css IS recommended before going too in depth with adjustments. and please, DO NOT DELETE THE CREDIT OR CLAIM AS YOUR OWN.
  5.  
  6. ♡ if you find a bug or something looks wonky when you start filling in your info, send me a message so that i can update it!
  7.  
  8. ♡ the code is organized to the best of my ability, and instructions are included in the html section to make it easier to fill in your muses. that said, this is a VERY big code with a lot of parts, so if you find that you need additional help getting it to work for you, just ask! i promise it's not too scary once you get the hang of it.
  9.  
  10.  
  11. ♡ COLOUR PALETTE // to customize the colours, find + replace these hex codes with the one you want!
  12.  
  13. #e3afa7 : light, peachy pink
  14. #9e5c5c : muted, brownish red
  15. #4f2e2d : maroon
  16. #f8f1f1 : off-white
  17. #151414 : black --->
  18.  
  19.  
  20. <!DOCTYPE html>
  21. <html>
  22. <head>
  23.  
  24. <title>PRIME TIME, A MUSE PAGE.</title> <!--- Change the title of your page here --->
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  27.  
  28. <!-- POP UPS SCRIPT -->
  29.  
  30. <script type="text/javascript"
  31. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  32.  
  33. <script>
  34. $(document).ready(function() {
  35. //
  36. $('a.poplight[href^=#]').click(function() {
  37. var popID = $(this).attr('rel'); //Get Popup Name
  38. var popURL = $(this).attr('href'); //Get Popup href to define size
  39. var query= popURL.split('?');
  40. var dim= query[1].split('&');
  41. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  42. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  43. var popMargTop = ($('#' + popID).height() + 80) / 2;
  44. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  45. //Apply Margin to Popup
  46. $('#' + popID).css({
  47. 'margin-top' : -popMargTop,
  48. 'margin-left' : -popMargLeft
  49. });
  50. $('body').append('<div id="fade"></div>');
  51. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  52. return false;
  53. });
  54. $('a.close, #fade').live('click', function() {
  55. $('#fade , .popup_block').fadeOut(function() {
  56. $('#fade, a.close').remove(); //fade them both out
  57. });
  58. return false;
  59. });
  60. });
  61. </script>
  62.  
  63. <!-- TABS SCRIPT -->
  64.  
  65. <script>
  66.  
  67. $(document).ready(function(){
  68. $("ul#tabs li").click(function(e){
  69. if (!$(this).hasClass("active")) {
  70. var tabNum = $(this).index();
  71. var nthChild = tabNum+1;
  72. $("ul#tabs li.active").removeClass("active");
  73. $(this).addClass("active");
  74. $("ul#tab li.active").removeClass("active");
  75. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  76. }
  77. });
  78. });
  79.  
  80. </script>
  81.  
  82.  
  83. <script>
  84.  
  85. $(document).ready(function(){
  86. $("ul#tabs2 li").click(function(e){
  87. if (!$(this).hasClass("active")) {
  88. var tabNum = $(this).index();
  89. var nthChild = tabNum+1;
  90. $("ul#tabs2 li.active").removeClass("active");
  91. $(this).addClass("active");
  92. $("ul#tab2 li.active").removeClass("active");
  93. $("ul#tab2 li:nth-child("+nthChild+")").addClass("active");
  94. }
  95. });
  96. });
  97.  
  98. </script>
  99.  
  100. <!-- TOOLTIPS SCRIPT -->
  101.  
  102. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  103. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  104. <script>
  105. (function($){
  106. $(document).ready(function(){
  107. $("[title],a[title],img[title]").style_my_tooltips({
  108. tip_follows_cursor:true,
  109. tip_delay_time:90,
  110. tip_fade_speed:600,
  111. attribute:"title"
  112. });
  113. });
  114. })(jQuery);
  115. </script>
  116.  
  117. <!--- FONT SCRIPTS --->
  118.  
  119. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  120. <script src="//pull.cappuccicons.com/cpf.js"></script>
  121.  
  122. <style type="text/css">
  123.  
  124. @font-face { font-family:'vintage avalanche'; src: url('https://dl.dropboxusercontent.com/s/p614ok9ext1lrmn/vintage%20avalanche.otf') ;}
  125.  
  126. @font-face { font-family:'saturday night'; src: url('https://dl.dropboxusercontent.com/s/t1v8lrtmfsvr7ky/saturday%20nights%20personal%20use.ttf') ;}
  127.  
  128. /* TOOLTIPS */
  129.  
  130. .tooltip{
  131. display:inline;
  132. position:absolute;
  133. }
  134.  
  135. #s-m-t-tooltip {
  136. color:#fafafa;
  137. border:3px double #cecece;
  138. margin:15px 10px 10px 10px;
  139. font-size:10px;
  140. text-transform:uppercase;
  141. font-family:'roboto condensed';
  142. text-align:center;
  143. text-shadow:
  144. -1px -1px 0 #000,
  145. 1px -1px 0 #000,
  146. -1px 1px 0 #000,
  147. 1px 1px 0 #000;
  148. padding:4px 8px 2px 8px;
  149. background:url('https://64.media.tumblr.com/865a478b0789f7fcb58246fecbc7f678/f38934b6a6821d29-99/s250x400/f2afc46fdbc6c97df82a7e67e75f3d322d1b018c.pnj') left repeat;
  150. z-index:9999999999999;
  151. }
  152.  
  153. /* GENERAL STYLING */
  154.  
  155. a {
  156. color:#9e5c5c;
  157. text-transform:lowercase;
  158. text-decoration:none;
  159. font-weight:bold;
  160. }
  161.  
  162. b, strong {
  163. font-size:12px;
  164. font-family:'roboto condensed';
  165. color:#9e5c5c;
  166. text-transform:uppercase;
  167. }
  168.  
  169. @font-face { font-family:'sweet hipster'; src: url('https://dl.dropboxusercontent.com/s/1fasudgff8kal6z/sweet%20hipster.ttf') ;}
  170.  
  171. h1 {
  172. width:404px;
  173. font-family:'vintage avalanche';
  174. font-size:35px;
  175. text-transform:uppercase;
  176. text-align:center;
  177. line-height:35px;
  178. padding-bottom:12px;
  179. margin-top:0px;
  180. -webkit-text-stroke:.2px #e3afa7;
  181. color:transparent;
  182. position:fixed;
  183. }
  184.  
  185. h2 {
  186. color:#4f2e2d;
  187. font-family:'roboto condensed';
  188. font-size:12px;
  189. font-weight:bold;
  190. font-style:italic;
  191. text-align:center;
  192. text-transform:uppercase;
  193. text-decoration:underline;
  194. margin-top:15px;
  195. }
  196.  
  197.  
  198. /* section headings within the pop up */
  199. h3 {
  200. color:transparent;
  201. -webkit-text-stroke:.2px #f8f1f1;
  202. font-family:'roboto condensed';
  203. font-size:20px;
  204. text-align:center;
  205. text-transform:uppercase;
  206. letter-spacing:1px;
  207. line-height:0px;
  208. }
  209.  
  210. h4 {
  211. color:#9cb3b2;
  212. font-family:'roboto condensed';
  213. font-size:10px;
  214. font-style:italic;
  215. text-align:center;
  216. letter-spacing:2px;
  217. text-transform:uppercase;
  218. }
  219.  
  220.  
  221. /* MAIN AREAS */
  222.  
  223. body {
  224. background-color:#151414;
  225. font-size:12px;
  226. color:#373334;
  227. line-height:1.5;
  228. letter-spacing:.5px;
  229. font-family:'roboto condensed';
  230. }
  231.  
  232. #title {
  233. color:#e3afa7;
  234. font-family:'saturday night';
  235. text-transform:lowercase;
  236. font-size:80px;
  237. text-shadow:
  238. 0px 0px 0,
  239. 0px 0px 0,
  240. -3px 3px 0 #6d3d3f,
  241. 0px 0px 0;
  242. position:fixed;
  243. margin-top:420px;
  244. margin-left:400px;
  245. z-index:99999;
  246. }
  247.  
  248. #tnav {
  249. font-family:'roboto condensed';
  250. font-size:20px;
  251. text-transform:uppercase;
  252. position:absolute;
  253. margin-top:120px;
  254. margin-left:-65px;
  255. }
  256.  
  257. #tnav a {
  258. color:#9e5c5c;
  259. padding:8px;
  260. text-decoration:none;
  261. background-color:#151414;
  262. }
  263.  
  264. #conborder {
  265. width:570px;
  266. height:450px;
  267. top:-50px;
  268. bottom:0px;
  269. left:0px;
  270. right:0px;
  271. margin:auto;
  272. padding:20px;
  273. position:fixed;
  274. border:1px solid #9e5c5c;
  275. }
  276.  
  277. #musecon {
  278. width:570px;
  279. height:450px;
  280. padding:20px;
  281. margin-top:5px;
  282. margin-left:5px;
  283. overflow-x:hidden;
  284. overflow-y:scroll;
  285. background-color:#151414;
  286. border:1px solid #9e5c5c;
  287. }
  288.  
  289. #musecon::-webkit-scrollbar {
  290. background-color:#151414;
  291. }
  292.  
  293. #musecon::-webkit-scrollbar-thumb{
  294. width:4px;
  295. border:8px solid #151414;
  296. background:#9e5c5c;
  297. margin-right:5px;
  298. }
  299.  
  300. #muse {
  301. width:120px;
  302. height:195px;
  303. overflow:hidden;
  304. margin-top:15px;
  305. margin-left:15px;
  306. margin-right:0px;
  307. border-radius:5px;
  308. display:inline-block;
  309. position:relative;
  310. }
  311.  
  312. #micon {
  313. width:110px;
  314. height:180px;
  315. margin-left:0px;
  316. border:1px solid #9e5c5c;
  317. border-radius:5px;
  318. }
  319.  
  320. #micon img {
  321. width:110px;
  322. height:180px;
  323. margin-top:4px;
  324. margin-left:6px;
  325. border-radius:5px;
  326. }
  327.  
  328. #micon:hover + #plus {
  329. color:#9e5c5c;
  330. opacity:1;
  331. transition:.3s;
  332. }
  333.  
  334. #plus {
  335. margin-top:0px;
  336. margin-left:103px;
  337. text-align:center;
  338. font-size:16px;
  339. position:absolute;
  340. }
  341.  
  342. #plus a, #plus a:hover {
  343. color:#e3afa7;
  344. -webkit-text-stroke:2px #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 #e3afa7;
  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:#e3afa7;
  386. transition:1s;
  387. }
  388.  
  389. ul#tabs li.active {
  390. color:#e3afa7;
  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:#e3afa7;
  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 #6d3d3f,
  428. 0px 0px 0;
  429. background-color:#151414;
  430. transition:.3s;
  431. }
  432.  
  433. ul#tabs2 li:hover {
  434. color:#9e5c5c;
  435. transition:.3s;
  436. }
  437.  
  438. ul#tabs2 li.active {
  439. color:#9e5c5c;
  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:#9e5c5c;
  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:#e3afa7;
  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 #6d3d3f,
  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 #9e5c5c;
  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:#9e5c5c;
  559. }
  560.  
  561. #popnav a {
  562. color:#4f2e2d;
  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:#e3afa7;
  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:#e3afa7;
  634. padding:6px 6px 2px 5px;
  635. background-color:#4f2e2d;
  636. border-bottom:2px solid #9e5c5c;
  637. }
  638.  
  639. </style>
  640.  
  641. </head>
  642. <body>
  643.  
  644. <div id="conborder">
  645. <div id="musecon">
  646.  
  647. <!-- TITLE // APPEARS BELOW THE CONTAINER. -->
  648. <div id="title"> muse list </div>
  649.  
  650. <!-- NAV LINKS // APPEAR ON THE LEFT OF THE CONTIANER.
  651.  
  652. ♡ replace 'YOURURL' with the links, and replace 'LINKTITLE' with whatever you want to show up when you hover over the icon. -->
  653.  
  654. <div id="tnav"> <a href="YOURURL" title="LINKTITLE"><i class="cp cp-refresh"></i></a> <br><br>
  655. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-menu"></i></a> <br><br>
  656. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-heart-o"></i></a> </div>
  657.  
  658. <!-- CATEGORY TABS // APPEAR AT THE TOP OF THE CONTAINER, LINKS TO DIFFERENT TABS.
  659.  
  660. ♡ name them whatever you want. i suggest activity level (primary, secondary, etc.), but you could do it by gender, by canon or oc, etc.
  661.  
  662. ♡ if you want to delete a tab, just delete everything from <li> to </li> and it will no longer show the link. -->
  663.  
  664. <ul id="tabs">
  665. <li class="active"> primary </li>
  666. <li> secondary </li>
  667. <li> tertiary </li>
  668. </ul>
  669.  
  670.  
  671. <!-- TAB ONE START -->
  672. <ul id="tab">
  673.  
  674. <li class="active">
  675.  
  676. <!-- MUSE CELLS // MUSE IMAGES, NAMES, & LINKS TO THE POP UP GO.
  677.  
  678. ♡ to add a new muse, copy & paste this:
  679.  
  680.  
  681. <div id="muse">
  682. <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><span class="th th-plus-1-o"></span></a> </div>
  683. <div id="micon">
  684. <img src="IMAGEURL" title="SERIES NAME"> </div>
  685. <div id="nm"> <h3>name</h3> </div>
  686. </div>
  687.  
  688. ** IMPORTANT!!!!! // find rel="one" in the code, change what's in quotations to that muse's own unique label. i suggest numbering them, using their first name, or their initials (without punctuation). this will tell the code what pop-up to open. we'll go over matching them up when you get to the pop-up section. :)
  689.  
  690. FOR EXAMPLE: rel="eva" or rel="sadie"
  691.  
  692. LEAVE EVERYTHING ELSE IN THAT LINE ALONE.
  693.  
  694. ♡ to change the image, replace this: https://via.placeholder.com/110x180
  695. with your image's url.
  696.  
  697. ♡ put the series name where it says title="SERIES NAME" if you'd like the media to show up when you hover over the image. otherwise, you can delete that bit! -->
  698.  
  699. <div id="muse">
  700. <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><i class="cp cp-plus"></i></a> </div>
  701. <div id="micon">
  702. <img src="https://via.placeholder.com/110x180" title="SERIES NAME"> </div>
  703. <div id="nm"> <h3>name</h3> </div>
  704. </div>
  705.  
  706.  
  707. </li>
  708. <!-- TAB ONE END -->
  709.  
  710. <!-- TAB TWO START -->
  711. <li>
  712.  
  713. <div id="muse">
  714. <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><i class="cp cp-plus"></i></a> </div>
  715. <div id="micon">
  716. <img src="https://via.placeholder.com/110x180" title="SERIES NAME">
  717. <div id="nm"> <h3>name</h3> </div>
  718. </div>
  719.  
  720. </li>
  721. <!-- TAB TWO END -->
  722.  
  723. <!-- TAB THREE START -->
  724. <li>
  725.  
  726. <div id="muse">
  727. <div id="plus"> <a href="#?w=450" rel="one" class="poplight" title="click !"><i class="cp cp-plus"></i></a> </div>
  728. <div id="micon">
  729. <img src="https://via.placeholder.com/110x180" title="SERIES NAME">
  730. <div id="nm"> <h3>name</h3> </div>
  731. </div>
  732.  
  733.  
  734. </li>
  735. <!-- TAB THREE END -->
  736.  
  737. </ul>
  738.  
  739. </div>
  740. </div>
  741.  
  742. <!--- END MUSE LIST --->
  743.  
  744.  
  745. <!-- POP-UPS // WHERE ALL YOUR MUSE INFO GOES.
  746.  
  747. ** IMPORTANT !!!! // remember changing rel="one" to your own label? this is where we use that to match the pop-up to your muse.
  748.  
  749. ♡ the first line of the pop up is: <div id="one" class="popup_block"
  750. we're just focusing on <div id="one">. whatever you used as a label for your muse, that's what you're going to put in the quotations here.
  751.  
  752. FOR EXAMPLE: <div id="eva"> or <div id="st">
  753.  
  754. ♡ now when you click on the plus sign attached to your muse's photo, the right pop-up will show up.
  755.  
  756. NOTE THAT POP-UPS DO NOT SHOW ON THE EDITING PAGE. THEY WILL ONLY SHOW UP WHEN YOU SAVE IT AND VIEW IT ON YOUR BLOG. -->
  757.  
  758.  
  759. <!--- POP UP ONE START! --->
  760. <div id="one" class="popup_block">
  761.  
  762.  
  763. <!--- MUSE IMAGE & NAME // APPEARS ON THE LEFT.
  764.  
  765. ♡ replace 'https://via.placeholder.com/300x470' with your muse's image.
  766.  
  767. ♡ your muse's full name should fit here, unless it's really long, in which case you might wanna keep it to their first name. you can put their full name in the stats. -->
  768.  
  769.  
  770. <div id="popicon"> <img src="https://via.placeholder.com/300x470"> </div>
  771.  
  772. <div id="popname"> muse name </div>
  773.  
  774. <!-- MUSE TAB LINKS // APPEAR ON THE LEFT.
  775.  
  776. ♡ i don't suggest messing with these, except maybe renaming them if you like. these are all the tabs included to place info for each individual muse. -->
  777.  
  778. <ul id="tabs2">
  779. <li class="active" title="overview"> <i class="cp cp-star-o"></i> </li>
  780. <li title="statistics"> <i class="cp cp-user"></i> </li>
  781. <li title="history"> <i class="cp cp-quote"></i> </li>
  782. <li title="verses"> <i class="cp cp-pin-o"></i> </li>
  783. </ul>
  784.  
  785. <!--- TABS START --->
  786.  
  787. <ul id="tab2">
  788.  
  789. <!--- START FIRST TAB! OVERVIEW! --->
  790.  
  791. <!--- FIRST TAB // SHOWS BY DEFAULT WHEN FIRST OPENING THE POP-UP.
  792.  
  793. ♡ this is the overview section. it's all fairly self-explanatory, but just ask if any of it's confusing for you. --->
  794.  
  795. <li class="active">
  796.  
  797. <div style="width:auto;height:410px;margin-top:10px;overflow-x:hidden;overflow-y:scroll;padding:16px;">
  798.  
  799. <div id="tabname"> <h1>overview</h1> </div>
  800.  
  801. <h2> navigation </h2>
  802.  
  803. <div id="popnav">
  804. <a href="/" title="link"><i class="cp cp-camera"></i></a>
  805. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-stars"></i></a>
  806. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-quote"></i></a>
  807. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-star-o"></i></a>
  808. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-heart-o"></i></a>
  809. <a href="YOURURL" title="LINKTITLE"><i class="cp cp-menu"></i></a> </div>
  810.  
  811. <div id="line"></div>
  812. <div id="popblock">
  813. <tag>info.</tag> write your info here<br>
  814. <tag>info.</tag> write your info here<br>
  815. <tag>info.</tag> write your info here<br>
  816. <tag>info.</tag> write your info here<br>
  817. <tag>info.</tag> write your info here
  818. </div>
  819. <div id="line"></div>
  820.  
  821. <h2> relationships </h2>
  822.  
  823. <!-- RELATIONSHIPS // COPY & PASTE EVERYTHING FROM 'RELATION ONE START' TO 'RELATION ONE END' BEFORE </LI> TO ADD MORE. -->
  824.  
  825. <!-- RELATION ONE START -->
  826. <div id="con">
  827. <img src="https://via.placeholder.com/400x120">
  828. <div id="coninfo"> first last , &nbsp; # <a href="/">username</a> </div></div>
  829. <!-- RELATION ONE END -->
  830.  
  831. </li>
  832. <!--- END FIRST TAB! --->
  833.  
  834.  
  835. <!--- START SECOND TAB! STATISTICS! --->
  836. <li>
  837.  
  838. <div style="width:auto;height:410px;margin-top:10px;overflow-x:hidden;overflow-y:scroll;padding:16px;">
  839.  
  840. <div id="tabname"> <h1> statistics </h1> </div>
  841. <div id="line"></div>
  842.  
  843. <!-- ** 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>
  844.  
  845. ♡ to add a new box of info, copy & paste everything from INFO BOX START to INFO BOX END
  846.  
  847. ♡ if you keep the vertical lines, delete the <div id="line"></div> ONLY from your last information box. -->
  848.  
  849. <!-- INFO BOX ONE START -->
  850. <div id="popblock">
  851. <tag>info.</tag> write your info here<br>
  852. <tag>info.</tag> write your info here<br>
  853. <tag>info.</tag> write your info here<br>
  854. <tag>info.</tag> write your info here<br>
  855. <tag>info.</tag> write your info here
  856. </div>
  857. <div id="line"></div>
  858. <!-- INFO BOX TWO END -->
  859.  
  860. <div id="popblock">
  861. <tag>info.</tag> write your info here<br>
  862. <tag>info.</tag> write your info here<br>
  863. <tag>info.</tag> write your info here<br>
  864. <tag>info.</tag> write your info here<br>
  865. <tag>info.</tag> write your info here
  866. </div>
  867. <div id="line"></div>
  868.  
  869. <div id="popblock">
  870. <tag>info.</tag> write your info here<br>
  871. <tag>info.</tag> write your info here<br>
  872. <tag>info.</tag> write your info here<br>
  873. <tag>info.</tag> write your info here<br>
  874. <tag>info.</tag> write your info here
  875. </div>
  876.  
  877.  
  878. </li>
  879. <!--- END SECOND TAB! --->
  880.  
  881.  
  882. <!--- START THIRD TAB! BIOGRAPHY! --->
  883. <li>
  884.  
  885. <div style="width:auto;height:410px;margin-top:10px;overflow-x:hidden;overflow-y:scroll;padding:16px;">
  886.  
  887. <div id="tabname"> <h1> biography </h1> </div>
  888.  
  889. <br>
  890. you can write out your muse's history here. use <b>bold tags</b> or <i>italic tags</i> to spruce things up if you want. 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.
  891. <br><br>
  892. 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.
  893. <br><br>
  894. 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.
  895.  
  896. </div>
  897.  
  898. </li>
  899. <!--- END THIRD TAB! --->
  900.  
  901. <!--- START FOURTH TAB! VERSES! --->
  902. <li>
  903.  
  904. <div style="width:auto;height:410px;margin-top:10px;overflow-x:hidden;overflow-y:scroll;padding:16px;">
  905.  
  906. <div id="tabname"> <h1> verses </h1> </div>
  907.  
  908. <!--
  909.  
  910. ♡ 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.
  911.  
  912. ♡ to add a new verse, copy & paste everything from VERSE START to VERSE END. -->
  913.  
  914. <!-- VERSE ONE START -->
  915. <div id="line"></div>
  916. <h2> verse name </h2>
  917. <div id="popblock">
  918. 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.
  919. </div>
  920. <!-- VERSE ONE END -->
  921.  
  922. <div id="line"></div>
  923. <h2> verse name </h2>
  924. <div id="popblock">
  925. 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.
  926. </div>
  927.  
  928. </div>
  929.  
  930. </li>
  931. <!--- END FOURTH TAB! --->
  932.  
  933. </ul>
  934. <!--- END TABS --->
  935. </div>
  936. <!--- POP UP END! --->
  937.  
  938.  
  939.  
  940. <!--- CREDIT. DO NOT TOUCH! --->
  941.  
  942. <div id="credit"><a href="https://endlesswood.tumblr.com" title="made by evie"><i class="cp cp-rose"></i></a></div>
  943.  
  944. </body>
  945. </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!