API tools faq
paste
Advertisement
heartilys

MUSE PAGE 01 // TABBED

heartilys
Oct 9th, 2017
1,330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.10 KB | None | 0 0
raw download clone embed print report
  1. <!--- ✧・ﾟ MUSE PAGE 01 // TABBED — by @bycandleliqht ・ﾟ✧
  2.  
  3. edit & customize to your heart's content!
  4. please don't remove credit or claim as yours.
  5. if you need help or run into any bugs, drop me an ask & i'll do my best to help! --->
  6.  
  7.  
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11.  
  12.  
  13. <title>PAGE TITLE</title> <!--- Change the title of your page here --->
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17.  
  18. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <!--- This is the file for the font featured in most of the headings --->
  19.  
  20.  
  21. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> <!--- This is the stylesheet for the icons that link you to each muse's info tabs --->
  22.  
  23.  
  24. <style>
  25.  
  26. /* SCROLLBAR */
  27.  
  28. ::-webkit-scrollbar {
  29. width:7px;
  30. background-color:#faf9f9; /* BG colour of the scrollbar */
  31. }
  32.  
  33. ::-webkit-scrollbar-track{
  34. background-color:#faf9f9; /* BG colour of the scrollbar track */
  35. }
  36.  
  37. ::-webkit-scrollbar-thumb{
  38. border:3px solid #faf9f9; /* Make sure this colour stays the same as the BG colour. This is what makes the scrollbar thin but still easily clickable! */
  39. border-top:4px solid #faf9f9; /* Same as above. This just adds some padding on the top of it. */
  40. background-color:#86afc7; /* Colour of the actual scrollbar. */
  41. }
  42.  
  43. /* LINKS, BOLDS, & HEADINGS */
  44.  
  45. a {
  46. color:#86afc7; /* Link colour */
  47. text-transform:uppercase;
  48. text-decoration:none;
  49. font-weight:bold;
  50. letter-spacing:1px;
  51. }
  52.  
  53. b {
  54. font-weight:bold;
  55. color:#86afc7; /* Colour of bolded items */
  56. font-family:calibri;
  57. }
  58.  
  59. h1 {
  60. font-size:8px;
  61. text-transform:uppercase;
  62. text-align:left;
  63. font-family:'Montserrat', sans-serif;
  64. letter-spacing:3px;
  65. font-weight:bold;
  66. margin-bottom:15px;
  67. text-shadow: 0 0 .01em;
  68. }
  69.  
  70. h2 {
  71. color:#86afc7; /* Text colour for character name */
  72. font-size:10px;
  73. text-transform:lowercase;
  74. text-align:center;
  75. font-family:calibri;
  76. letter-spacing:.4px;
  77. margin-top:-1.5px;
  78. text-shadow: 0 1 0em;
  79. }
  80.  
  81. h3 {
  82. font-size:11px;
  83. text-transform:uppercase;
  84. text-align:center;
  85. font-family:calibri;
  86. letter-spacing:.4px;
  87. font-weight:bold;
  88. margin-top:-8px;
  89. text-shadow: 0 0 .1em;
  90. }
  91.  
  92. h4 {
  93. font-size:8.5px;
  94. padding:8px;
  95. background-color:#f3f3f3; /* Heading BG colour, featured in the tabs. Keep this light coloured, since the text colour is dark. */
  96. text-transform:uppercase;
  97. text-align:center;
  98. font-family:'Montserrat', sans-serif;
  99. font-weight:bold;
  100. margin-top:-.5px;
  101. text-shadow: 0 0 0.1em;
  102. box-shadow: 0px 0px 8px #d1c7c7; /* Shadow colour. I don't recommend touching this unless you make your backgrounds darker & need a darker shadow. */
  103. }
  104.  
  105. h5 {
  106. background-color:#f3f3f3; /* BG colour for the categories in the Muse Nav tab. */
  107. padding:3px;
  108. border:1px solid #dddbdb;
  109. font-size:8.5px;
  110. text-transform:uppercase;
  111. color:#86afc7; /* Text colour for the category headings in the Muse Nav tab. */
  112. font-family:calibri;
  113. text-shadow: 0 1 0em;
  114. text-align:left;
  115. }
  116.  
  117. h6 {
  118. font-size:8px;
  119. padding:5px;
  120. text-transform:uppercase;
  121. text-align:center;
  122. font-family:'Montserrat', sans-serif;
  123. font-weight:bold;
  124. margin-top:-.5px;
  125. text-shadow: 0 0 0.1em;
  126. }
  127.  
  128. /* MAIN BODY */
  129.  
  130. body {
  131. background-color:#eeeeee;
  132. font-family:calibri;
  133. font-size:10.5px;
  134. color:#373334; /* Main text colour. */
  135. line-height:1.5;
  136. letter-spacing:.5px;
  137. }
  138.  
  139. #main {
  140. margin-top:-20px;
  141. }
  142.  
  143. #top {
  144. background-color:#000; /* BG colour behind the title. */
  145. width:560px;
  146. height:30px;
  147. padding:10px;
  148. position:absolute;
  149. text-align:center;
  150. font-weight:bold;
  151. font-size:10px;
  152. margin-top:105px;
  153. margin-left:280px;
  154. text-shadow: 0 0 .03em;
  155. box-shadow: 0px -10px 20px #d1c7c7; /* Shadow colour of the topbar. If you change it, make sure it's the same colour as the one on #musecon. */
  156. }
  157.  
  158. #top a {
  159. color:#a9838e; /* Link colour on the top nav. */
  160. padding-right:15px;
  161. }
  162.  
  163. #top a:hover {
  164. color:#86afc7; /* Link colour when hovering on the top nav links. */
  165. letter-spacing:5px;
  166. transition-duration:1s;
  167. -moz-transition-duration:1s;
  168. -webkit-transition-duration:1s;
  169. -o-transition-duration:1s;
  170. }
  171.  
  172. #filters {
  173. background-color:#faf9f9; /* BG colour on the 'JUMP TO' box. Make sure it's the same as the BG & border colours for the scrollbar. */
  174. width:200px;
  175. height:85px;
  176. padding:15px;
  177. position:absolute;
  178. border:10px solid #f3f3f3; /* Border colour for the 'JUMP TO' box. */
  179. text-align:center;
  180. overflow-y:scroll;
  181. font-weight:bold;
  182. font-size:9.5px;
  183. margin-top:435px;
  184. margin-left:870px;
  185. text-shadow: 0 0 .03em;
  186. box-shadow: 0px 0px 20px #d1c7c7; /* Shadow colour of the 'JUMP TO' box. */
  187. }
  188.  
  189. #filters a {
  190. color:#a9838e; /* Link colour for the 'JUMP TO' links. */
  191. padding-left:15px;
  192. }
  193.  
  194. #filters a:hover {
  195. color:#86afc7; /* Link colour when you hover over the 'JUMP TO' links. */
  196. letter-spacing:2px;
  197. transition-duration:1s;
  198. -moz-transition-duration:1s;
  199. -webkit-transition-duration:1s;
  200. -o-transition-duration:1s;
  201. }
  202.  
  203.  
  204. #musecon {
  205. background-color:#faf9f9; /* BG colour for the muse container. Make sure it's the same colour as the scrollbar BG & border colours. */
  206. padding:25px;
  207. width:530px;
  208. height:365px;
  209. overflow-y:scroll;
  210. margin-top:155px;
  211. margin-left:280px;
  212. float:left;
  213. box-shadow: 0px 0px 20px #d1c7c7; /* Shadow colour of the muse container. If you change it, make sure it's the same colour as the one on #top. */
  214. }
  215.  
  216. /* MUSE CELLS */
  217.  
  218. #muse {
  219. background-color:#f3f3f3; /* BG colour for each muse ( character & series name ). */
  220. width:250px;
  221. height:70px;
  222. margin-left:8px;
  223. margin-bottom:60px;
  224. margin-right:0px;
  225. float:left;
  226. text-align:center;
  227. }
  228.  
  229. #name {
  230. margin-top:15px;
  231. }
  232.  
  233. #muse img {
  234. width:70px;
  235. height:70px;
  236. float:left;
  237. }
  238.  
  239.  
  240. #clicks {
  241. background-color:#000; /* BG colour for the muse tab links. */
  242. margin-top:25px;
  243. width:234px;
  244. height:20px;
  245. padding:8px;
  246. }
  247.  
  248. #clicks a {
  249. color:#faf9f9; /* Link colour for the muse info tabs. Change this to a darker colour if you make the BG colour light. */
  250. }
  251.  
  252. /* MUSE INFO TABS */
  253.  
  254. /* MUSE NAVIGATION */
  255.  
  256. #musenav {
  257. width:510px;
  258. height:345px;
  259. padding:25px;
  260. border:10px solid #000; /* Tab border. */
  261. overflow-x:hidden;
  262. background-color:#faf9f9;
  263. left:288px;
  264. top:143px;
  265. z-index:99999;
  266. position:absolute;
  267. overflow-y:hidden;
  268. display:none;
  269. }
  270. .show:focus + #musenav {
  271. display:block;
  272. opacity:1;
  273. }
  274. #musenav:hover {
  275. display: block;
  276. }
  277.  
  278. #musenav img {
  279. margin-top:12px;
  280. margin-left:20px;
  281. border-radius:100px; /* Delete this line if you want a square image. */
  282. border:5px solid #e5dfe1; /* Border colour around the nav image. */
  283. width:150px;
  284. height:150px;
  285. position:relative;
  286. }
  287.  
  288. #navinfo {
  289. margin-top:20px;
  290. margin-left:210px;
  291. width:260px;
  292. height:145px;
  293. padding:10px;
  294. font-family:11px;
  295. line-height:15px;
  296. position:relative;
  297. font-weight:bold;
  298. text-align:center;
  299. overflow-y:scroll;
  300. text-transform:lowercase;
  301. }
  302.  
  303. #quickfacts {
  304. width:460px;
  305. height:70px;
  306. padding:15px;
  307. margin-top:10px;
  308. font-size:11px;
  309. position:relative;
  310. overflow-y:scroll;
  311. text-align:justify;
  312. }
  313.  
  314. #muselinks {
  315. width:480px;
  316. height:15px;
  317. margin-top:20px;
  318. font-family:8.5px;
  319. position:relative;
  320. letter-spacing:3px;
  321. font-family:'Montserrat', sans-serif;
  322. }
  323.  
  324. #muselinks a {
  325. background-color:#f3f3f3; /* BG colour behind the links @ the bottom of the tab. */
  326. border-radius:10px;
  327. padding:4px;
  328. border:1px solid #dddbdb; /* Border colour around the links @ the bottom of the tab. */
  329. font-size:8.5px;
  330. text-transform:uppercase;
  331. color:#a9838e;
  332. font-family:calibri;
  333. text-shadow: 0 1 0em;
  334. text-align:center;
  335. margin-left:20px;
  336. }
  337.  
  338. #muselinks a:hover {
  339. letter-spacing:6px;
  340. color:#e4d7db; /* Hover colour for the links @ the bottom of the tab. */
  341. -moz-transition-duration:1s;
  342. -webkit-transition-duration:1s;
  343. -o-transition-duration:1s;
  344. }
  345.  
  346. /* MUSE STATS */
  347.  
  348. #stats {
  349. width:510px;
  350. height:345px;
  351. padding:25px;
  352. border:10px solid #000; /* Border colour around the stats tab. */
  353. font-size:9.5px;
  354. line-height:16px;
  355. letter-spacing:.5px;
  356. text-align:left;
  357. overflow-y:hidden;
  358. background-color:#faf9f9; /* BG colour for the stats tab. Keep it the same as the scrollbar BG & border colours. */
  359. left:288px;
  360. top:143px;
  361. position:absolute;
  362. overflow-y:scroll;
  363. z-index:99999;
  364. display:none;
  365. }
  366. .show:focus + #stats {
  367. display:block;
  368. opacity:1;
  369. }
  370. #stats:hover {
  371. display: block;
  372. }
  373.  
  374.  
  375. #stats b {
  376. background-color:#f3f3f3; /* BG colour around the bold headings for the stats. */
  377. padding:5px;
  378. border-radius:10px;
  379. border:1px solid #dddbdb;
  380. font-size:8.5px;
  381. text-transform:uppercase;
  382. color:#86afc7; /* Text colour of the bold headings for the stats. */
  383. font-family:calibri;
  384. text-shadow: 0 1 0em;
  385. text-align:left;
  386. }
  387.  
  388. /* MUSE BIOGRAPHY */
  389.  
  390. #bio {
  391. width:510px;
  392. height:345px;
  393. padding:25px;
  394. border:10px solid #000; /* Border colour around the bio tab. */
  395. font-size:11.5px;
  396. line-height:16px;
  397. letter-spacing:.5px;
  398. text-align:justify;
  399. overflow-y:scroll;
  400. background-color:#faf9f9; /* BG colour for the bio tab. Keep it the same as the scrollbar BG & border colours. */
  401. left:288px;
  402. top:143px;
  403. position:absolute;
  404. z-index:99999;
  405. display:none;
  406. }
  407. .show:focus + #bio {
  408. display:block;
  409. opacity:1;
  410. }
  411. #bio:hover {
  412. display: block;
  413. }
  414.  
  415. /* CONNECTIONS */
  416.  
  417. #connections {
  418. width:510px;
  419. height:345px;
  420. padding:25px;
  421. border:10px solid #000; /* Border colour around the connections tab. */
  422. line-height:16px;
  423. letter-spacing:.5px;
  424. overflow-y:scroll;
  425. background-color:#faf9f9; /* BG colour for the connections tab. Keep it the same as the scrollbar BG & border colours. */
  426. left:288px;
  427. top:143px;
  428. position:absolute;
  429. z-index:99999;
  430. display:none;
  431. }
  432. .show:focus + #connections {
  433. display:block;
  434. opacity:1;
  435. }
  436. #connections:hover {
  437. display: block;
  438. }
  439.  
  440. #connections a {
  441. color:#a9838e; /* Link colour for the bottom heading. */
  442. }
  443.  
  444. #connections a:hover {
  445. color:#86afc7; /* Link colour for the bottom heading on hover. */
  446. letter-spacing:2px;
  447. }
  448.  
  449. #relation {
  450. width:350px;
  451. height:110px;
  452. padding:10px;
  453. margin-left:55px;
  454. margin-top:15px;
  455. font-size:11px;
  456. text-align:left;
  457. position:relative;
  458. border-bottom:1px solid #dddbdb; /* Border colour underneath each relation. */
  459. }
  460.  
  461. #relation img {
  462. margin-top:15px;
  463. width:70px;
  464. height:70px;
  465. border-radius:100px; /* You can delete this line if you prefer a square image for the connections. */
  466. border:5px solid #e5dfe1; /* Border colour around each relation image. */
  467. }
  468.  
  469. #relationhead {
  470. width:258px;
  471. height:78px;
  472. position:relative;
  473. margin-top:5px;
  474. margin-left:78px;
  475. }
  476.  
  477. #relationinfo {
  478. width:258px;
  479. height:45px;
  480. padding:5px;
  481. margin-left:85px;
  482. margin-top:-40px;
  483. overflow-y:scroll;
  484. position:relative;
  485. text-align:justify;
  486. }
  487.  
  488. #relationbottom {
  489. width:350px;
  490. height:10px;
  491. font-size:9.5px;
  492. text-align:center;
  493. margin-top:5px;
  494. color:#86afc7; /* Text colour for the bottom heading. */
  495. text-transform:uppercase;
  496. font-weight:bold;
  497. }
  498.  
  499. /* MUSE VERSES */
  500.  
  501. #verses {
  502. width:510px;
  503. height:345px;
  504. padding:25px;
  505. border:10px solid #000; /* Border colour around the verses tab. */
  506. font-size:11px;
  507. line-height:16px;
  508. letter-spacing:.5px;
  509. text-align:justify;
  510. overflow-y:scroll;
  511. background-color:#faf9f9; /* BG colour for the verses tab. Keep it the same as the scrollbar BG & border colours. */
  512. left:288px;
  513. top:143px;
  514. position:absolute;
  515. z-index:99999;
  516. display:none;
  517. }
  518. .show:focus + #verses {
  519. display:block;
  520. opacity:1;
  521. }
  522. #verses:hover {
  523. display: block;
  524. }
  525.  
  526. #versehead {
  527. width:475px;
  528. height:35px;
  529. position:relative;
  530. margin-top:25px;
  531. margin-left:15px;
  532. border-bottom:1px solid #dddbdb; /* Border colour beneath each verse title & description. */
  533. }
  534.  
  535. #verseinfo {
  536. width:450px;
  537. height:75px;
  538. padding:15px;
  539. margin-top:-15px;
  540. margin-left:8px;
  541. overflow-y:scroll;
  542. position:relative;
  543. text-align:justify;
  544. }
  545.  
  546. /* CREDIT -- DO NOT TOUCH!! */
  547.  
  548. #credit {
  549. bottom:10px;
  550. right: 10px;
  551. background-color:#f3f3f3;
  552. padding:3px;
  553. border:1px solid #dddbdb;
  554. font-size:8px;
  555. text-transform:uppercase;
  556. font-family:calibri;
  557. text-shadow: 0 1 0em;
  558. text-align:left;
  559. position:absolute;
  560. padding:4px;
  561. }
  562.  
  563. #credit a {
  564. color:#a9838e;
  565. }
  566.  
  567. </style>
  568. </head>
  569.  
  570. <body>
  571.  
  572. <div id="main">
  573.  
  574. <div id="top">
  575.  
  576. <h6 style="font-size:16px; color:#faf9f9; text-align:left; margin-top:-14px; margin-left:5px; margin-bottom:3px;">MUSE LIST</h6>
  577.  
  578. <!--- The links below will appear on the topbar. Add more with <a href="LINK">LINK NAME</a> Make sure the first link coding stays where it is, but feel free to change it to a different link if you want something else there.--->
  579.  
  580. <div style="margin-top:-8px; margin-left:-10px; background-color:#f3f3f3; padding:5px; width:570px;">
  581. <a href="/guidelines">rules</a>
  582. <a href="/mun">mun</a>
  583. <a href="/">back</a>
  584. <a href="http://tumblr.com/dashboard">dash</a>
  585. </div>
  586.  
  587. </div>
  588.  
  589. <div id="musecon">
  590.  
  591. <!--- This is the start of your muses and their information. I'll include information in each area. To add more muses, copy everything from MUSE START to MUSE END & paste it after the last MUSE END you see.
  592.  
  593. You'll also want to decide how you want the JUMP TO categories to work. Whether by series, genre, etc. Make sure you put every muse in those categories together.
  594.  
  595. To start the category, include <a name="CATEGORYNAME"></a> before the start of those muses. Keep the # in front, don't title the link. This will enable you to click on the filters and it'll jump right to the beginning of that category. See the very end of the code to fill out the filter box. --->
  596.  
  597. <a name="CATEGORYNAME"></a>
  598.  
  599.  
  600. <!--- muse start ----->
  601.  
  602.  
  603. <div id="muse">
  604. <img src="https://68.media.tumblr.com/839e89c7641edd2a99b175682bc0e029/tumblr_inline_owsu08u0bz1ukw7jy_540.png"> <!--- Muse icon. Image size is 70x70px. --->
  605. <div id="name">
  606. <h2>character name.</h2>
  607. <h3>SERIES NAME</h3> <!--- Keep this to one line, otherwise it'll make the tab links wonky. You can lower the font size of h3 in the CSS if you have a lot of longer series titles. --->
  608. </div>
  609.  
  610. <div id="clicks">
  611.  
  612. <a title="NAVIGATION" href="#show" class="show" style="margin-left:15px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-bookmark"></span></a> <!--- If you want to make the hover title something else, simply change the word in <a title="LINKS"> --->
  613.  
  614. <!--- MUSE NAVIGATION TAB --->
  615.  
  616. <div id="musenav">
  617.  
  618. <h4>NAVIGATION</h4>
  619.  
  620. <img src="https://78.media.tumblr.com/1d064a0ca23962ddb3f84dfa0d369969/tumblr_inline_ox8y7c9kkZ1ukw7jy_540.png"> <!--- Navigation image goes here. Image size is 150x150px. --->
  621.  
  622. <div id="navinfo">
  623.  
  624. <!-- This is your basic information for your muse, such as their status, shipping info, content warnings, etc. Basically put whatever little technical info you want here. Just be sure you put the category title between <h5>these headings</h5> and include a <br> at the end of each category's information.
  625.  
  626. Also, make sure the <h5 style="margin-top:-5px;"> line remains with the first category. This is for formatting purposes. --->
  627.  
  628. <h5 style="margin-top:-5px;">STATUS</h5> &nbsp; status info <br>
  629. <h5>TYPE</h5> &nbsp; canon / divergent / original<br>
  630. <h5>SHIPPING</h5> &nbsp; ship info <br>
  631. <h5>CONTENT WARNING(S)</h5> &nbsp; cw info <br>
  632. <h5>WRITING SINCE</h5> &nbsp; date <br>
  633. </div>
  634.  
  635. <div id="quickfacts">
  636.  
  637. <!-- The box basically says it all already. Add whatever facts you want here. --->
  638.  
  639. <b>QUICK FACTS:</b> you can include little facts here that you want people to know, but don't have a spot in the stats or bio sections. this box will scroll so you can make it as short or as long as you need to.
  640. <br><br>
  641. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus nec leo eu congue. Mauris congue non erat et lacinia. Integer vel lectus ac justo tempor congue in at diam. Vivamus semper viverra elit sed rhoncus. Aenean nec eleifend massa. Nulla venenatis, eros sit amet vulputate euismod, nisl mauris rhoncus velit, eget efficitur tellus ante fermentum orci. Vestibulum placerat malesuada lectus eget lacinia. Vivamus accumsan sodales eros ut sollicitudin.
  642. </div>
  643.  
  644. <div id="muselinks">
  645.  
  646. <!--- This section is for your muse's links. Their visage, aesthetic, interactions, headcanons, & etc. tags, or whatever else you want. Just copy/paste <a href="LINK">LINK NAME</A> here for more links & add in your info. --->
  647.  
  648. <a href="">LINK.</a>
  649. <a href="">LINK.</a>
  650. <a href="">LINK.</a>
  651. <a href="">LINK.</a>
  652. <a href="">LINK.</a>
  653. <a href="">LINK.</a>
  654. </div>
  655.  
  656. </div>
  657.  
  658. <!--- MUSE STATS TAB --->
  659.  
  660. <a title="STATS" href="#show" class="show" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-user"></span></span></a> <!--- If you want to make the hover title something else, simply change the word in <a title="STATS"> --->
  661.  
  662. <div id="stats">
  663.  
  664. <h4>STATS</h4>
  665.  
  666. <!--- Alright, so your stats tab is divvied up into two columns. I recommend alternating columns for each section you add.
  667.  
  668. The sections already featured are just for example's sake. You can delete any lines you don't want/need, change the sections completely, or add on more you might need.
  669.  
  670. To add a new section, copy this:
  671.  
  672. <h6>SECTION HEADING</h6>
  673. <b>TITLE</B> DESIRED INFO<p>
  674. <b>TITLE</B> DESIRED INFO<p>
  675. <b>TITLE</B> DESIRED INFO<p>
  676. <br>
  677.  
  678. and paste it after the last one. --->
  679.  
  680.  
  681.  
  682. <div style="width:48%; padding:5px; margin-top:-5px; float:left;">
  683.  
  684. <!-- This is the start of the left column. --->
  685.  
  686. <h6>BASICS</h6>
  687. <b>NAME</b> &nbsp; info <p>
  688. <b>NICKNAME(S)</b> &nbsp; info <p>
  689. <b>TITLE(S)</b> &nbsp; info <p>
  690. <b>AGE / DOB</b> &nbsp; info <p>
  691. <b>RESIDENCE</b> &nbsp; info <p>
  692. <b>OCCUPATION</b> &nbsp; info <p>
  693. <b>ORIENTATION</b> &nbsp; info <p>
  694. <b>SPECIES</b> &nbsp; info <p>
  695. <b>RACE / ETHNICITY</b> &nbsp; info <p>
  696. <br>
  697. <h6>MENTAL</h6>
  698. <b>POSITIVE TRAITS</b> &nbsp; info <p>
  699. <b>NEGATIVE TRAITS</b> &nbsp; info <p>
  700. <b>ZODIAC</b> &nbsp;info <p>
  701. <b>MBTI</b> &nbsp; info <p>
  702. <b>ALIGNMENT</b> &nbsp; info <p>
  703. <b>HOGWARTS</b> &nbsp; info <p>
  704. <b>DISORDER(S)</b> &nbsp; info <p>
  705. <br>
  706. <h6>FAMILY</h6>
  707. <b>PARENT(S)</b> &nbsp; info <p>
  708. <b>SIBLING(S)</b> &nbsp; info <p>
  709. <b>CHILD(REN)</b> &nbsp; info <p>
  710. <b>PET(S)</b> &nbsp; info <p>
  711. <b>SIGNIFICANT OTHER</b> &nbsp; info <p>
  712. <b>RELATIONSHIP STATUS</b> &nbsp; info <p>
  713. </div>
  714.  
  715. <div style="width:48%; float:right;">
  716.  
  717. <!--- This is the start of the right column. --->
  718.  
  719. <h6>PHYSICAL</h6>
  720. <b>HAIR COLOUR</b> &nbsp; info <p>
  721. <b>HAIR STYLE</b> &nbsp; info <p>
  722. <b>EYE COLOUR</b> &nbsp; info <p>
  723. <b>HEIGHT</b> &nbsp; info <p>
  724. <b>WEIGHT</b> &nbsp; info <p>
  725. <b>DISTINCTIVE FEATURES</b> &nbsp; info <p>
  726. <b>SCARS</b> &nbsp; info <p>
  727. <b>TATTOOS</b> &nbsp; info <p>
  728. <b>FACE CLAIM</b> &nbsp; info <p>
  729. <br>
  730. <h6>PROFICIENCIES</h6>
  731. <b>POWERS</b> &nbsp; info <p>
  732. <b>MAGIC</b> &nbsp; info <p>
  733. <b>SKILLS</b> &nbsp; info <p>
  734. <b>TALENTS</b> &nbsp; info <p>
  735. <b>QUALIFICATIONS</b> &nbsp; info <p>
  736. <b>EDUCATION</b> &nbsp; info <p>
  737. <br>
  738. <h6>MISC</h6>
  739. <b>EXTRA</b> &nbsp; info <p>
  740. <b>EXTRA</b> &nbsp; info <p>
  741. <b>EXTRA</b> &nbsp; info <p>
  742. <b>EXTRA</b> &nbsp; info <p>
  743. <b>EXTRA</b> &nbsp; info <p>
  744. <b>EXTRA</b> &nbsp; info <p>
  745. </div>
  746.  
  747. </div>
  748.  
  749. <!--- MUSE BIOGRAPHY TAB --->
  750.  
  751. <a title="BIOGRAPHY" href="#show" class="show" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-book"></span></a> <!--- If you want to make the hover title something else, simply change the word in <a title="BIOGRAPHY"> --->
  752.  
  753. <div id="bio">
  754.  
  755. <!-- Be sure to separate paragraphs with <br><br> !--->
  756.  
  757. <h4>BIOGRAPHY</h4>
  758.  
  759. <b>+ LOREM:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus nec leo eu congue. Mauris congue non erat et lacinia. Integer vel lectus ac justo tempor congue in at diam. Vivamus semper viverra elit sed rhoncus. Aenean nec eleifend massa. Nulla venenatis, eros sit amet vulputate euismod, nisl mauris rhoncus velit, eget efficitur tellus ante fermentum orci. Vestibulum placerat malesuada lectus eget lacinia. Vivamus accumsan sodales eros ut sollicitudin.
  760. <br><br>
  761. <b>+ IPSUM:</b> Integer porttitor euismod tellus nec tempus. Aenean tellus quam, fringilla ut arcu quis, placerat molestie ante. Cras et magna ultricies, laoreet justo in, lobortis quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum molestie pulvinar. Suspendisse pellentesque ex in bibendum laoreet. Sed efficitur, massa eu interdum fringilla, libero lorem rutrum ex, non aliquet augue lorem nec quam. Sed nec aliquet sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse maximus sollicitudin pharetra. Vivamus tempus sem lacus, non rhoncus mi convallis eget. Maecenas pharetra, tortor in dapibus bibendum, arcu felis vestibulum leo, ut consectetur tellus mi at diam. Aliquam risus tortor, faucibus efficitur nisi quis, lobortis malesuada nisl. Integer placerat augue ac consequat feugiat.
  762. <BR><BR>
  763. <B>+ DOLOR SIT:</B> Donec tristique consequat efficitur. Etiam et nisl id sem egestas viverra. Nullam hendrerit tortor in nulla commodo, non pretium elit mollis. Vestibulum accumsan ornare lorem, at elementum erat accumsan in. Cras mattis vestibulum lectus. In quam felis, hendrerit eget ultrices dictum, tristique at lectus. Praesent at faucibus odio. Donec egestas in nisl in semper. In dui nulla, congue quis pharetra vel, tempus ut ligula. Sed eu ultrices ipsum.
  764.  
  765. </div>
  766.  
  767. <!-- MUSE CONNECTIONS TAB --->
  768.  
  769. <a title="CONNECTIONS" href="#show" class="show" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-bubble"></span></a>
  770. <div id="connections"> <!--- If you want to make the hover title something else, simply change the word in <a title="CONNECTIONS"> --->
  771.  
  772. <h4>CONNECTIONS</h4>
  773.  
  774. <!--- You can add as many connections as you want. The tab will scroll forever if you need it to. To add a new relation, copy/paste everything from RELATION STARTS HERE to RELATION ENDS HERE. --->
  775.  
  776. <!--- RELATION STARTS HERE --->
  777.  
  778. <div id="relation"> <img src="https://68.media.tumblr.com/839e89c7641edd2a99b175682bc0e029/tumblr_inline_owsu08u0bz1ukw7jy_540.png"> <!--- This is your relation image. Image size is 70x70px. --->
  779. <div id="relationhead">
  780. <h2 style="text-align:right;">CHARACTER NAME</h2>
  781. <h3 style="text-align:right;">RELATIONSHIP STATUS</h3>
  782. </div>
  783.  
  784. <div id="relationinfo">
  785. put your relation info here. you can keep it to a short description or get wordy. the box will keep scrolling so you don't have to worry about space. Donec tristique consequat efficitur. Etiam et nisl id sem egestas viverra. Nullam hendrerit tortor in nulla commodo, non pretium elit mollis. Vestibulum accumsan ornare lorem, at elementum erat accumsan in. Cras mattis vestibulum lectus.
  786. </div>
  787.  
  788. <div id="relationbottom">
  789. bottom text. you can include a <a href="/">link</a> or quote, but keep it one line.
  790. </div>
  791.  
  792. </div>
  793.  
  794. <!--- RELATION ENDS HERE --->
  795.  
  796. </div>
  797.  
  798. <!--- MUSE VERSES TAB --->
  799.  
  800.  
  801. <a title="VERSES" href="#show" class="show" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-earth"></span></a> <!--- If you want to make the hover title something else, simply change the word in <a title="VERSES"> --->
  802.  
  803. <div id="verses">
  804.  
  805. <h4>VERSES</h4>
  806.  
  807. <!--- This is where you can include your muse's verses and write information about them. You can add as many as you want. The tab will scroll however long you need it to. To add more, simply copy/paste everything from VERSE INFO STARTS to VERSE INFO ENDS. --->
  808.  
  809. <!--- VERSE INFO STARTS HERE --->
  810.  
  811. <div id="versehead">
  812.  
  813. <h2 style="text-align:right;">VERSE TITLE</h2>
  814. <h3 style="text-align:right;">VERSE DESCRIPTION</h3></div>
  815. <br>
  816. <div id="verseinfo">
  817. Put your verse information here. Write as much or as little as you want. The box will scroll.
  818. </div>
  819.  
  820. <!--- VERSE INFO ENDS HERE --->
  821. </div>
  822.  
  823. </div>
  824. </div>
  825.  
  826. <!--- muse end ---->
  827.  
  828. </div>
  829.  
  830. <div id="filters">
  831.  
  832. <!--- Here's where you include links to your filters!
  833.  
  834. To add them, copy/paste <a href="#CODENAME">filter name</a>. Do this for as many categories you have.
  835.  
  836. Whatever you used as the #CODENAME at the start of each category ( in the <a name="#CODENAME"></a> bit you inserted ), is what you'll type in the #CODENAME section here.
  837.  
  838. But this time, include a name for the link so people know what they're clicking to. Clicking on these links will jump you to the start of each category. --->
  839.  
  840.  
  841. <div style="margin-top:-5px;">JUMP TO:
  842.  
  843. <a href="#CODENAME">filter name</a>
  844. <a href="#CODENAME">filter name</a>
  845.  
  846.  
  847. </div>
  848. </div>
  849.  
  850.  
  851. </div>
  852.  
  853. <div id="credit"><a href="http://bycandleliqht.tumblr.com">PAGE BY EVIE</a></div>
  854.  
  855. </body>
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!