API tools faq
paste
sexycullen

theme 209 light

sexycullen
Mar 30th, 2020 (edited)
3,376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.43 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------
  2. tylergaciaposey's theme #209 - LIGHT
  3. https://tylergaciaposey.tumblr.com/
  4.  
  5.  
  6. PLEASE DO NOT,
  7. remove the credits; claim as your own; use as a base, take parts
  8. of the theme.
  9. YOU CAN:
  10. edit as much as you want for your own personal use only.
  11. --------------------------------------------->
  12.  
  13. <!DOCTYPE html>
  14. <head>
  15.  
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  18.  
  19. <link rel="shortcut icon" href="{favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22.  
  23. <!----- fonts ---->
  24.  
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Hind:400,500,700|Muli:400,400i,700,700i|Open+Sans:400,400i,700,700i|Lato:400,400i,700,700i|Roboto:400,400i,500,500i,700,700i|ABeeZee:400,400i|Rubik:400,400i,500,500i,700,700i|Montserrat:400,400i,500,500i,600,600i,700,700i|Source+Sans+Pro:400,400i,700,700i|Work+Sans:400,500,700|Mansalva" rel="stylesheet">
  27.  
  28. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  29.  
  30. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  31.  
  32.  
  33.  
  34.  
  35. <!----- scripts ---->
  36.  
  37.  
  38.  
  39. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  40.  
  41. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  42.  
  43. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  44.  
  45.  
  46. <!----- pop up ---->
  47.  
  48. <script>
  49. $(document).ready(function() {
  50. //
  51. $('a.poplight[href^=#]').click(function() {
  52. var popID = $(this).attr('rel'); //Get Popup Name
  53. var popURL = $(this).attr('href'); //Get Popup href to define size
  54. var query= popURL.split('?');
  55. var dim= query[1].split('&');
  56. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  57. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  58. $('body').append('<div id="fade"></div>');
  59. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  60. return false;
  61. });
  62. $('a.close, #fade').live('click', function() {
  63. $('#fade , .popup_block').fadeOut(function() {
  64. $('#fade, a.close').remove(); //fade them both out
  65. });
  66. return false;
  67. });
  68. });
  69. </script>
  70.  
  71.  
  72.  
  73.  
  74. <style type="text/css">
  75.  
  76. /* GUIDE HOW TO CUSTOMIZE (it looks like hell, but it's really simple)
  77.  
  78.  
  79. ----------------------------
  80.  
  81. ALL THE COLORS
  82.  
  83.  
  84. - GENERAL COLOR
  85. body text: #111111
  86. italic: #818181
  87.  
  88. & WHERE TO FIND THEIR CLASSES / SELECTORS:
  89. body: body {
  90. italic: i, italic, em {
  91.  
  92.  
  93.  
  94. - BORDERS COLOR: #F5F5F5
  95.  
  96. & WHERE TO FIND THEIR CLASSES / SELECTORS:
  97. scrollbar: ::-webkit-scrollbar-thumb { background-color
  98. hr: hr { border-color
  99. container border: .container { outline
  100. headerfooter border: .headerfooter {
  101.  
  102. each muse box border: .muse_container { outline
  103. muse name: .muse_name { border-botom
  104. muse description: .muse_description { border-color
  105.  
  106. navigation popup: #navigation_popup { outline
  107. navigation title: .navigation_title { border-bottom
  108. navigation description: .navigation_description { border-color
  109.  
  110.  
  111.  
  112.  
  113. - MAIN COLOR #151515
  114. title, bold, links, h1, h2
  115. selection (when you select a text and there's a bg and text change color),
  116. headerfooterlinks hover, close button,
  117. muse title before the hover, the 'i' icon before specifications on muses and navigation
  118.  
  119.  
  120. & WHERE TO FIND THEIR CLASSES / SELECTORS:
  121. title: .title {
  122. bold: b, strong {
  123. links: a {
  124. h1, h2: h1, h2 {
  125. selection: ::selection {
  126. headerfooterlinks: headerfooterlinks hover {
  127. close button: .close a {
  128. muse title: .muse_title {
  129. the i icon: li:before {
  130.  
  131.  
  132.  
  133. - BACKGROUND COLORS:
  134. main theme background & inside muse container: #FCFCFC
  135. header and footer background & each muse box background: #FFFFFF
  136.  
  137. & WHERE TO FIND THEIR CLASSES / SELECTORS:
  138. main theme background: body {
  139. inside muse container: .muse_wrap {
  140. header and footer background: .headerfooter {
  141. each muse box background: .muse_overlay {
  142.  
  143.  
  144.  
  145.  
  146.  
  147. ----------------------------
  148.  
  149. HOW TO CHANGE ALL THE COLORS AT ONCE:
  150. (please be careful, never save unless you're sure or make a copy of the code before going hardcore with the changes)
  151.  
  152. 1. you press CTRL + F (COMMAND + F on mac), at the top it will appear two boxes "Search for" and "Replace with" along with "Replace" and "All"
  153.  
  154. 2. pick the color you want, example body text #111111, place that on "Search for", then add the color you want on "Replace with", for example #000 (black color)
  155.  
  156. 3. you change it one by one pressing "Replace" (recommended)
  157.  
  158. **** DO NOT USE "ALL" OR IT WILL REPLACE THE COLORS ON THIS GUIDE AS WELL AND THEN IT'S GONNA BE MESSY ****
  159.  
  160.  
  161.  
  162.  
  163.  
  164. ----------------------------
  165.  
  166. THE FONTS AND SIZES
  167.  
  168.  
  169. body: 'Work Sans', Calibri,sans-serif
  170. size: 10px
  171. title: 'Helvetica Neue', Arial,sans-serif
  172. size: 20px
  173. header & footer & navigation pop links: 'Open Sans', Calibri,sans-serif;
  174. size: 13px
  175.  
  176. & WHERE TO FIND THEIR CLASSES / SELECTORS:
  177. body: body {
  178. title: .title {
  179. header & footer: .headerfooterlinks {
  180.  
  181.  
  182.  
  183.  
  184.  
  185. ----------------------------
  186.  
  187. HOW TO CHANGE THE FONTS, SIZE, TEXT CUSTOMIZATIONS, etc:
  188. * list of custom fonts to use: Hind, Muli, Open Sans, Lato, Roboto, ABeeZee, Rubik, Montserrat, Source Sans Pro, Work+Sans, Mansalva *
  189.  
  190. it works as the same 3 steps as the color change, but now you replace the fonts, the body font for example:
  191.  
  192. 1. place Work Sans on "Search for" and the other font, like Open Sans on "Replace with"
  193. 2. repeat the process with "Replace" (recommended)
  194.  
  195. **** DO NOT USE "ALL" OR IT WILL REPLACE THE SETTINGS ON THIS GUIDE AS WELL AND THEN IT'S GONNA BE MESSY ****
  196.  
  197.  
  198. ABOUT THE SIZE, TEXT CUSTOMIZATIONS:
  199. just as any other change, on the class/selector of the part you want to change, you will find text-size, text-transform, font weight, etc. you can also add if doesn't have any of it there, you can customize as you want
  200.  
  201. example, change the header & footer & navigation pop links:
  202. 1. search for the class/ selector (as it is above, class is .headerfooterlinks)
  203. 2. change font-family to Arial (font-family:Arial), or any other custom one like Muli (font-family:'Muli', Calibri,sans-serif)
  204. 3. there is font-size there too, and all the other customizations
  205.  
  206. **** DO NOT USE "ALL" OR IT WILL REPLACE THE SETTINGS ON THIS GUIDE AS WELL AND THEN IT'S GONNA BE MESSY ****
  207.  
  208.  
  209. */
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218.  
  219.  
  220. /* scrollbar */
  221.  
  222. ::-webkit-scrollbar {
  223. width:3px;
  224. height:3px;
  225. }
  226. ::-webkit-scrollbar {
  227. background-color:transparent;
  228. }
  229. ::-webkit-scrollbar-track {
  230. border:8px solid transparent;
  231. background-color:transparent;
  232. }
  233. ::-webkit-scrollbar-thumb {
  234. border:3px solid transparent;
  235. background-color:#151515;
  236. min-height:24px;
  237. min-width:24px;
  238. }
  239.  
  240.  
  241.  
  242. body {
  243. color:#111111;
  244. font-size: 10px;
  245. font-family: 'Work Sans', Calibri,sans-serif;
  246. word-wrap:break-word;
  247. margin:0;
  248. padding:0;
  249. width: 100%;
  250. height: 100%;
  251. line-height:16px;
  252. background-color:#FCFCFC;
  253. background-image:url('');
  254. background-repeat: repeat;
  255. background-attachment: fixed;
  256. background-position:center;
  257. }
  258.  
  259.  
  260. blockquote {
  261. border-left:1px solid #F5F5F5;
  262. padding-left:8px;
  263. margin:5px 10px 10px 5px;
  264. }
  265.  
  266.  
  267. a {
  268. color:#151515;
  269. text-decoration:none;
  270. transition:all .3s linear;
  271. -webkit-transition:all .3s linear;
  272. -o-transition:all .3s linear;
  273. -moz-transition:all .3s linear;
  274. }
  275.  
  276.  
  277. a:hover {
  278. color:#151515;
  279. transition:all 0.3s;}
  280.  
  281.  
  282. b, strong {
  283. font-weight:700;
  284. color: #151515!important;
  285. }
  286.  
  287. i, italic, em {
  288. color: #818181;
  289. }
  290.  
  291.  
  292.  
  293. h1, h2 {
  294. margin-bottom:10px;
  295. text-align:left;
  296. text-transform:none;
  297. color:#151515;
  298. font-weight:700;
  299. }
  300.  
  301.  
  302.  
  303. hr {
  304. width:100px;
  305. margin:10px 0 10px 0;
  306. border-width: 1px 0px 0px 0px;
  307. border-style: solid;
  308. border-color: #F5F5F5;
  309. }
  310.  
  311. ::-moz-selection {
  312. background-color: #151515;
  313. color:#fff;
  314. }
  315.  
  316. ::selection {
  317. background-color: #151515;
  318. color:#fff;
  319. }
  320.  
  321.  
  322. /* the 'i' icon before specifications on muses and navigation */
  323. li:before {
  324. content:"\ebe3";
  325. font-family:'honeybee';
  326. font-size:9px;
  327. color:#151515;
  328. }
  329.  
  330.  
  331.  
  332. .title {
  333. max-width:400px;
  334. margin:10px 13px;
  335. color:#151515;
  336. font-style:normal;
  337. font-size:20px;
  338. font-family:'Helvetica Neue', Arial,sans-serif;
  339. text-transform:lowercase;
  340. letter-spacing:-0.1px;
  341. word-spacing:0px;
  342. font-weight:700!important;
  343. }
  344.  
  345.  
  346.  
  347. .headerfooter {
  348. width:950px;
  349. height:40px;
  350. margin:0;
  351. padding:0px;
  352. display:flex;
  353. justify-content:space-between;
  354. flex-shrink: 0;
  355. z-index:9;
  356. background-color:#FFFFFF;
  357. outline: 1px solid #F5F5F5;
  358. }
  359.  
  360. .headerfooterlinks {
  361. padding:7px;
  362. font-style:normal;
  363. font-size:13px;
  364. font-family:'Open Sans', Calibri,sans-serif;
  365. text-transform:uppercase;
  366. letter-spacing:-0.1px;
  367. word-spacing:0px;
  368. list-style:none;
  369. }
  370.  
  371. .headerfooterlinks a {
  372. font-weight:600!important;
  373. margin:0px 16px;
  374. display:inline-block;
  375. position:relative;
  376. -moz-transition-duration: 0.5s;
  377. -o-transition-duration: 0.5s;
  378. -webkit-transition-duration: 0.5s;
  379. transition-duration: 0.5s;
  380. box-sizing:border-box;
  381. padding:5px;
  382. border-radius: 5px 5px 5px 5px;
  383. -moz-border-radius: 5px 5px 5px 5px;
  384. -webkit-border-radius: 5px 5px 5px 5px;
  385. }
  386.  
  387. .headerfooterlinks a:hover {
  388. color:#fff;
  389. background-color:#151515;
  390. text-decoration:none;
  391. -moz-transition-duration: 0.5s;
  392. -o-transition-duration: 0.5s;
  393. -webkit-transition-duration: 0.5s;
  394. transition-duration: 0.5s;
  395. border-radius: 5px 5px 5px 5px;
  396. -moz-border-radius: 5px 5px 5px 5px;
  397. -webkit-border-radius: 5px 5px 5px 5px;
  398. }
  399.  
  400.  
  401. .headerfooterlinks .sf {
  402. font-size:calc(13px + 3px);
  403. font-weight:600;
  404. padding:1px;
  405.  
  406. }
  407.  
  408. .headerfooterlinks span {
  409. display:inline-block;
  410. position:relative;
  411. box-sizing:border-box;
  412. padding:5px;
  413. font-size: 10px;
  414. font-family: 'Work Sans', Calibri,sans-serif;
  415. letter-spacing:0.5px;
  416. word-spacing:0px;
  417. text-transform:none;
  418. }
  419.  
  420.  
  421.  
  422. .moreiconpopup {
  423. margin-right:13px;
  424. }
  425.  
  426.  
  427.  
  428.  
  429.  
  430. /* main content */
  431.  
  432.  
  433. .container {
  434. margin:auto;
  435. left:0px;
  436. right:0px;
  437. top:0px;
  438. bottom:0px;
  439. position:absolute;
  440. height:590px;
  441. width:950px;
  442. display: flex;
  443. flex-direction: column;
  444. align-items: stretch;
  445. overflow:hidden;
  446. outline: 1px solid #F5F5F5;
  447. }
  448.  
  449. .postscontainer {
  450. flex-shrink: 0;
  451. bottom:0px;
  452. left:0px;
  453. position:relative;
  454. padding:15px;
  455. width:920px;
  456. height:480px;
  457. z-index:8;
  458. background-repeat: repeat;
  459. }
  460.  
  461.  
  462.  
  463.  
  464.  
  465. /* POP UP */
  466.  
  467. .popup_block{
  468. overflow-x:hidden;
  469. overflow-y:scroll;
  470. position: absolute;
  471. right:0;
  472. top: 0;
  473. z-index:12;
  474. display:none;
  475. }
  476.  
  477.  
  478. /* close pop up icon */
  479.  
  480. .close {
  481. z-index:13;
  482. position: absolute;
  483. top:0;
  484. right: 0;
  485. cursor:pointer;
  486. }
  487.  
  488.  
  489.  
  490. /* if you change the background color of the pop ups, you'll need to change the colors here too or the button might not appear. */
  491.  
  492. .close a {
  493. margin-right:-5px;
  494. font-weight:600!important;
  495. color:;
  496. }
  497.  
  498.  
  499. .close a:hover {
  500. text-decoration:none;
  501. background-color:#151515;
  502. }
  503.  
  504.  
  505. .close .sf {
  506. font-size:calc(13px + 3px);
  507. font-weight:600;
  508. padding:1px;
  509.  
  510. }
  511.  
  512.  
  513.  
  514.  
  515. /* navigation pop up */
  516.  
  517. #navigation_popup {
  518. background-color:#FFFFFF;
  519. outline: 1px solid #F5F5F5;
  520.  
  521. }
  522.  
  523.  
  524. .navigation_popup {
  525. height:509px;
  526. }
  527.  
  528.  
  529. .navigation_wrap {
  530. height:450px;
  531. display:flex;
  532. flex-direction: row;
  533. flex-wrap: wrap;
  534. justify-content: center;
  535. align-items:center;
  536. margin:15px 10px 15px 10px;
  537. top:0;
  538. left:0px;
  539. right:0px;
  540. bottom:0px;
  541. position:absolute;
  542. box-sizing:border-box;
  543. }
  544.  
  545.  
  546. .navigation_container {
  547. position: relative;
  548. display:block;
  549. height: auto;
  550. margin:15px 10px 15px 10px;
  551. box-sizing:border-box;
  552. padding:15px;
  553. line-height:130%;
  554. text-align: center;
  555. }
  556.  
  557.  
  558.  
  559. /* navigation title */
  560.  
  561. .navigation_title {
  562. display:inline-block;
  563. text-transform: uppercase;
  564. padding:7px;
  565. margin:2px 0 5px;
  566. border-bottom:1px solid #F5F5F5;
  567. }
  568.  
  569. /* navigation links box */
  570.  
  571. .navigation_links_box {
  572. padding:7px;
  573. margin:2px 0 5px;
  574. overflow:hidden;
  575. }
  576.  
  577. .navigation_links_box li {
  578. display:inline-block;
  579. list-style:none;
  580. margin:0 px 0;
  581. padding: 0;
  582. }
  583.  
  584.  
  585.  
  586. /* navigation links */
  587.  
  588. .navigation_links {
  589. text-align: center;
  590. overflow:hidden;
  591. }
  592.  
  593.  
  594. .navigation_links a {
  595. margin:3px;
  596. }
  597.  
  598. .navigation_links ul {
  599. margin:0;
  600. padding:0;
  601. list-style:none;
  602. }
  603.  
  604. .navigation_links li {
  605. margin:0 auto;
  606. }
  607.  
  608.  
  609. .navigation_links ul li:before {
  610. content:none;
  611. }
  612.  
  613.  
  614.  
  615.  
  616. /* navigation description */
  617.  
  618. .navigation_description {
  619. text-transform: lowercase;
  620. padding:7px;
  621. margin:-1px 0;
  622. line-height:18px;
  623. text-align: center;
  624. border-style: solid;
  625. border-color:#F5F5F5;
  626. border-width:0 0 1px 0;
  627. }
  628.  
  629.  
  630.  
  631. /* navigation list of description */
  632.  
  633. .navigation_description ul {
  634. margin:0;
  635. padding:0;
  636. list-style:none;
  637. }
  638.  
  639. .navigation_description li {
  640. margin:0 auto 7px;
  641. }
  642.  
  643.  
  644.  
  645.  
  646.  
  647.  
  648.  
  649.  
  650.  
  651.  
  652. /* muses */
  653.  
  654. #muses_popup {
  655. z-index:11;
  656. }
  657.  
  658.  
  659. .muse_popup {
  660. width:950px;
  661. height:510px;
  662. }
  663.  
  664.  
  665. .main_muses{
  666. position: absolute;
  667. right:0;
  668. top: 0;
  669. z-index:11;
  670. }
  671.  
  672. .muse_wrap {
  673. width:947px;
  674. height:510px;
  675. overflow-x:hidden;
  676. overflow-y:scroll;
  677. display:flex;
  678. flex-wrap: wrap;
  679. justify-content: center;
  680. align-items:center;
  681. padding:10px;
  682. top:1;
  683. left:0px;
  684. right:0px;
  685. bottom:1px;
  686. position:absolute;
  687. box-sizing:border-box;
  688. background-color:#FCFCFC;
  689. background-image:url('');
  690. background-repeat: repeat;
  691. background-attachment: fixed;
  692. background-position:center;
  693. }
  694.  
  695.  
  696. .muse_container {
  697. position: relative;
  698. display:block;
  699. overflow:hidden;
  700. width: 210px;
  701. height:210px;
  702. margin:10px 15px;
  703. background-color:transparent;
  704. box-sizing:border-box;
  705. outline: 1px solid #F5F5F5;
  706. }
  707.  
  708.  
  709. .muse_container img {
  710. margin:0 auto;
  711. display: block;
  712. object-fit:cover;
  713. }
  714.  
  715.  
  716.  
  717. /* muses main name background that appears before hover, you can change the opacity on 0.4 */
  718.  
  719. .muse_title_box {
  720. position: absolute;
  721. top: 0;
  722. bottom: 0;
  723. left: 0;
  724. right: 0;
  725. background-color: rgba(0, 0, 0, 0.4);
  726. transition: .5s ease-in-out;
  727. z-index:1;
  728. }
  729.  
  730.  
  731.  
  732.  
  733.  
  734.  
  735.  
  736.  
  737. /* muses main name that appear before hover */
  738.  
  739. .muse_title {
  740. color: #fff;
  741. margin:70% 0;
  742. text-align:center;
  743. font-style:normal;
  744. font-size:18px;
  745. font-family:'Helvetica Neue', Arial,sans-serif;
  746. text-transform:lowercase;
  747. letter-spacing:-0.1px;
  748. word-spacing:0px;
  749. font-weight:700!important;
  750. z-index:1;
  751. }
  752.  
  753.  
  754. .muse_overlay {
  755. overflow-x:hidden;
  756. overflow-y:scroll;
  757. position: absolute;
  758. top: 0;
  759. bottom: 0;
  760. left: 0;
  761. right: 0;
  762. opacity: 0;
  763. transition: .5s ease-in-out;
  764. background: #FFFFFF; /* muses box background */
  765. }
  766.  
  767.  
  768. .muse_container:hover .muse_overlay {
  769. opacity: 1;
  770. transition: .5s ease-in-out;
  771. }
  772.  
  773. .muse_container:hover .muse_title_box {
  774. opacity: 0;
  775. transition: .5s ease-in-out;
  776. z-index:-1;
  777. }
  778.  
  779. .muse_content {
  780. width:100%;
  781. text-align: center;
  782. color:;
  783. }
  784.  
  785.  
  786.  
  787.  
  788. /* muses name */
  789.  
  790. .muse_name {
  791. display:inline-block;
  792. text-transform: uppercase;
  793. padding:7px;
  794. margin:2px 0 5px;
  795. border-bottom:1px solid #F5F5F5;
  796. }
  797.  
  798.  
  799. /* muses links box */
  800.  
  801. .muse_links_box {
  802. padding:7px;
  803. margin:2px 0 5px;
  804. overflow:hidden;
  805. }
  806.  
  807. .muse_links_box li {
  808. display:inline-block;
  809. list-style:none;
  810. margin:0 px 0;
  811. padding: 0;
  812. }
  813.  
  814.  
  815.  
  816. /* muses links */
  817.  
  818. .muse_links {
  819. text-transform: lowercase;
  820. text-align: center;
  821. overflow:hidden;
  822. }
  823.  
  824.  
  825. .muse_links a {
  826. margin:5px;
  827. }
  828.  
  829. .muse_links ul {
  830. margin:0;
  831. padding:0;
  832. list-style:none;
  833. }
  834.  
  835. .muse_links li {
  836. margin:0 auto;
  837. }
  838.  
  839.  
  840. .muse_links ul li:before {
  841. content:none;
  842. }
  843.  
  844.  
  845.  
  846.  
  847. /* muses more information */
  848.  
  849. .muse_description {
  850. padding:7px;
  851. margin:-1px 0;
  852. text-align: center;
  853. border-style: solid;
  854. border-color:#F5F5F5;
  855. border-width:1px 0;
  856. }
  857.  
  858.  
  859.  
  860. /* muses list of information */
  861.  
  862. .muse_description ul {
  863. margin:0;
  864. padding:0;
  865. list-style:none;
  866. }
  867.  
  868. .muse_description li {
  869. margin:2px auto;
  870. }
  871.  
  872.  
  873.  
  874.  
  875. </style>
  876. </head>
  877.  
  878.  
  879. <body>
  880. <div class="container">
  881. <div class="headerfooter">
  882. <div class="title">
  883. lorem ipsum consectetuer
  884. </div>
  885. <nav class="headerfooterlinks">
  886. <a href="/">go back</a>
  887. <a href="#?w=950" rel="muses_popup" class="poplight">secondary muses</a>
  888. <a href="#">link 1</a>
  889. <a href="#">link 2</a>
  890. </nav>
  891.  
  892. <div class="moreiconpopup headerfooterlinks">
  893. <a href="#?w=350" rel="navigation_popup" class="poplight">
  894. <span class="sf sf-more-o" title="more"></span>
  895. </a>
  896. </div>
  897. </div>
  898.  
  899.  
  900.  
  901. <section class="postscontainer"><!-- don't touch -->
  902.  
  903.  
  904. <!-- START THE NAVIGATION POP UP -->
  905.  
  906. <div id="navigation_popup" class="popup_block"> <!-- DO NOT TOUCH. main navigation pop up -->
  907.  
  908. <span class="close headerfooterlinks" onclick="this.parentElement.style.display='none';">
  909. <a href="#"><span class="sf sf-cross-2-o" title="close"></span></a>
  910. </span>
  911. <div class="navigation_popup"> <!-- DO NOT TOUCH. navigation pop up -->
  912. <div class="navigation_wrap"> <!-- DO NOT TOUCH. navigation container -->
  913.  
  914.  
  915.  
  916. <div class="navigation_container"> <!-- start of the navigation content -->
  917. <div class="navigation_title">
  918. Description
  919. </div>
  920. <div class="navigation_description">
  921. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  922. </div>
  923. <div class="navigation_links_box">
  924. <div class="navigation_links headerfooterlinks">
  925. <ul>
  926. <li><a href="/tagged/">more links</a></li>
  927. <li><a href="/tagged/">more links</a></li>
  928. <li><a href="/tagged/">more links</a></li>
  929. <li><a href="/tagged/">more links</a></li>
  930. <li><a href="/tagged/">more links</a></li>
  931. </ul>
  932. </div>
  933. </div>
  934. <div class="navigation_title">
  935. kinda a to-do list or wtv
  936. </div>
  937. <div class="navigation_description">
  938. <ul>
  939. <li><strong>something</strong> blah blah blah</li>
  940. <li><strong>something</strong> blah blah blah</li>
  941. <li><strong>something</strong> blah blah blah</li>
  942. <li><strong>something</strong> blah blah blah</li>
  943. </ul>
  944. </div>
  945.  
  946. </div> <!-- closes the navigation content -->
  947. </div> <!-- DO NOT TOUCH. closes navigation container -->
  948. </div> <!-- DO NOT TOUCH. closes navigation pop up -->
  949. </div> <!-- DO NOT TOUCH. closes main navigation pop up -->
  950.  
  951. <!-- END THE NAVIGATION POP UP -->
  952.  
  953.  
  954.  
  955.  
  956.  
  957.  
  958.  
  959. <!-- START THE MAIN MUSES -->
  960.  
  961. <div class="main_muses"> <!-- DO NOT TOUCH. main muses pop up -->
  962. <div class="muse_popup"> <!-- DO NOT TOUCH. muses pop up -->
  963. <div class="muse_wrap"> <!-- DO NOT TOUCH. muses container -->
  964.  
  965.  
  966.  
  967. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  968. <div class="muse_title_box">
  969. <div class="muse_title"> <!-- main name that appear before hover -->
  970. muse name here
  971. </div>
  972. </div>
  973. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  974. <div class="muse_overlay"> <!-- box from each muse hover -->
  975. <div class="muse_content"> <!-- box from each muse inside content -->
  976. <div class="muse_name">
  977. <strong>name here</strong> last name
  978. </div>
  979. <div class="muse_links_box">
  980. <div class="muse_links">
  981. <ul>
  982. <li><a href="/tagged/">interactions</a></li>
  983. <li><a href="/tagged/">photography</a></li>
  984. <li><a href="/tagged/">musings</a></li>
  985. <li><a href="/tagged/">starter</a></li>
  986. <li><a href="/tagged/">likes</a></li>
  987. <li><a href="/tagged/">texts</a></li>
  988. </ul>
  989. </div>
  990. </div>
  991. <div class="muse_description">
  992. <ul>
  993. <li><strong>pronouns:</strong> she/he/them</li>
  994. <li><strong>sexuality: </strong>sexuality</li>
  995. <li><strong>occupation: </strong>occupation</li>
  996. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  997. <li><strong>faceclaim:</strong> faceclaim here</li>
  998. </ul>
  999. </div>
  1000. <div class="muse_description">
  1001. <p><strong>more information</strong></p>
  1002. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1003. </div>
  1004. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1005. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1006. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1007.  
  1008.  
  1009.  
  1010. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1011. <div class="muse_title_box">
  1012. <div class="muse_title"> <!-- main name that appear before hover -->
  1013. muse name here
  1014. </div>
  1015. </div>
  1016. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1017. <div class="muse_overlay"> <!-- box from each muse hover -->
  1018. <div class="muse_content"> <!-- box from each muse inside content -->
  1019. <div class="muse_name">
  1020. <strong>name here</strong> last name
  1021. </div>
  1022. <div class="muse_links_box">
  1023. <div class="muse_links">
  1024. <ul>
  1025. <li><a href="/tagged/">interactions</a></li>
  1026. <li><a href="/tagged/">photography</a></li>
  1027. <li><a href="/tagged/">musings</a></li>
  1028. <li><a href="/tagged/">starter</a></li>
  1029. <li><a href="/tagged/">likes</a></li>
  1030. <li><a href="/tagged/">texts</a></li>
  1031. </ul>
  1032. </div>
  1033. </div>
  1034. <div class="muse_description">
  1035. <ul>
  1036. <li><strong>pronouns:</strong> she/he/them</li>
  1037. <li><strong>sexuality: </strong>sexuality</li>
  1038. <li><strong>occupation: </strong>occupation</li>
  1039. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1040. <li><strong>faceclaim:</strong> faceclaim here</li>
  1041. <li><strong>add more:</strong> anything you want tbh</li>
  1042. </ul>
  1043. </div>
  1044. <div class="muse_description">
  1045. <p><strong>more information</strong></p>
  1046. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna. adipiscing elit. </p>
  1047. </div>
  1048. <div class="muse_description">
  1049. <p><strong>even more information if you want</strong></p>
  1050. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna. adipiscing elit. aliquam nisi lorem, pulvinar id, commodo.</p>
  1051. <p>feugiat, vehicula et, aliquam mattis porta urna. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1052. </div>
  1053. <div class="muse_links_box">
  1054. <div class="muse_links">
  1055. <p><strong>more links too</strong></p>
  1056. <ul>
  1057. <li><a href="/tagged/">more links</a></li>
  1058. <li><a href="/tagged/">more links</a></li>
  1059. <li><a href="/tagged/">more links</a></li>
  1060. <li><a href="/tagged/">more links</a></li>
  1061. <li><a href="/tagged/">more links</a></li>
  1062. <li><a href="/tagged/">more links</a></li>
  1063. </ul>
  1064. </div>
  1065. </div>
  1066. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1067. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1068. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1069.  
  1070.  
  1071.  
  1072. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1073. <div class="muse_title_box">
  1074. <div class="muse_title"> <!-- main name that appear before hover -->
  1075. muse name here
  1076. </div>
  1077. </div>
  1078. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1079. <div class="muse_overlay"> <!-- box from each muse hover -->
  1080. <div class="muse_content"> <!-- box from each muse inside content -->
  1081. <div class="muse_name">
  1082. <strong>doesn't have to be</strong> name here
  1083. </div>
  1084. <div class="muse_description">
  1085. <p><strong>create your thing as you wish</strong></p>
  1086. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1087. </div>
  1088. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1089. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1090. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1091.  
  1092.  
  1093.  
  1094. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1095. <div class="muse_title_box">
  1096. <div class="muse_title"> <!-- main name that appear before hover -->
  1097. muse name here
  1098. </div>
  1099. </div>
  1100. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1101. <div class="muse_overlay"> <!-- box from each muse hover -->
  1102. <div class="muse_content"> <!-- box from each muse inside content -->
  1103. <div class="muse_name">
  1104. <strong>name here</strong> last name
  1105. </div>
  1106. <div class="muse_links_box">
  1107. <div class="muse_links">
  1108. <ul>
  1109. <li><a href="/tagged/">interactions</a></li>
  1110. <li><a href="/tagged/">photography</a></li>
  1111. <li><a href="/tagged/">musings</a></li>
  1112. <li><a href="/tagged/">starter</a></li>
  1113. <li><a href="/tagged/">likes</a></li>
  1114. <li><a href="/tagged/">texts</a></li>
  1115. </ul>
  1116. </div>
  1117. </div>
  1118. <div class="muse_description">
  1119. <ul>
  1120. <li><strong>pronouns:</strong> she/he/them</li>
  1121. <li><strong>sexuality: </strong>sexuality</li>
  1122. <li><strong>occupation: </strong>occupation</li>
  1123. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1124. <li><strong>faceclaim:</strong> faceclaim here</li>
  1125. </ul>
  1126. </div>
  1127. <div class="muse_description">
  1128. <p><strong>more information</strong></p>
  1129. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1130. </div>
  1131. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1132. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1133. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1134.  
  1135.  
  1136.  
  1137. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1138. <div class="muse_title_box">
  1139. <div class="muse_title"> <!-- main name that appear before hover -->
  1140. muse name here
  1141. </div>
  1142. </div>
  1143. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1144. <div class="muse_overlay"> <!-- box from each muse hover -->
  1145. <div class="muse_content"> <!-- box from each muse inside content -->
  1146. <div class="muse_name">
  1147. <strong>name here</strong> last name
  1148. </div>
  1149. <div class="muse_links_box">
  1150. <div class="muse_links">
  1151. <ul>
  1152. <li><a href="/tagged/">interactions</a></li>
  1153. <li><a href="/tagged/">photography</a></li>
  1154. <li><a href="/tagged/">musings</a></li>
  1155. <li><a href="/tagged/">starter</a></li>
  1156. <li><a href="/tagged/">likes</a></li>
  1157. <li><a href="/tagged/">texts</a></li>
  1158. </ul>
  1159. </div>
  1160. </div>
  1161. <div class="muse_description">
  1162. <ul>
  1163. <li><strong>pronouns:</strong> she/he/them</li>
  1164. <li><strong>sexuality: </strong>sexuality</li>
  1165. <li><strong>occupation: </strong>occupation</li>
  1166. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1167. <li><strong>faceclaim:</strong> faceclaim here</li>
  1168. </ul>
  1169. </div>
  1170. <div class="muse_description">
  1171. <p><strong>more information</strong></p>
  1172. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1173. </div>
  1174. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1175. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1176. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1177.  
  1178.  
  1179.  
  1180.  
  1181.  
  1182. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1183. <div class="muse_title_box">
  1184. <div class="muse_title"> <!-- main name that appear before hover -->
  1185. muse name here
  1186. </div>
  1187. </div>
  1188. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1189. <div class="muse_overlay"> <!-- box from each muse hover -->
  1190. <div class="muse_content"> <!-- box from each muse inside content -->
  1191. <div class="muse_name">
  1192. <strong>name here</strong> last name
  1193. </div>
  1194. <div class="muse_links_box">
  1195. <div class="muse_links">
  1196. <ul>
  1197. <li><a href="/tagged/">interactions</a></li>
  1198. <li><a href="/tagged/">photography</a></li>
  1199. <li><a href="/tagged/">musings</a></li>
  1200. <li><a href="/tagged/">starter</a></li>
  1201. <li><a href="/tagged/">likes</a></li>
  1202. <li><a href="/tagged/">texts</a></li>
  1203. </ul>
  1204. </div>
  1205. </div>
  1206. <div class="muse_description">
  1207. <ul>
  1208. <li><strong>pronouns:</strong> she/he/them</li>
  1209. <li><strong>sexuality: </strong>sexuality</li>
  1210. <li><strong>occupation: </strong>occupation</li>
  1211. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1212. <li><strong>faceclaim:</strong> faceclaim here</li>
  1213. </ul>
  1214. </div>
  1215. <div class="muse_description">
  1216. <p><strong>more information</strong></p>
  1217. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1218. </div>
  1219. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1220. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1221. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1222.  
  1223.  
  1224. </div> <!-- DO NOT TOUCH. closes the muses container -->
  1225. </div> <!-- DO NOT TOUCH. closes the muses pop up -->
  1226. </div> <!-- DO NOT TOUCH. closes the main pop up -->
  1227.  
  1228.  
  1229. <!-- END THE MAIN MUSES -->
  1230.  
  1231.  
  1232.  
  1233.  
  1234.  
  1235.  
  1236.  
  1237.  
  1238.  
  1239.  
  1240.  
  1241.  
  1242.  
  1243.  
  1244.  
  1245. <!-- START THE SECONDARY MUSES POP UP -->
  1246.  
  1247. <div id="muses_popup" class="popup_block"> <!-- DO NOT TOUCH. main muses pop up -->
  1248. <span class="close headerfooterlinks" onclick="this.parentElement.style.display='none';">
  1249. <a href="#"><span class="sf sf-cross-2-o" title="close"></span></a>
  1250. </span>
  1251. <div class="muse_popup"> <!-- DO NOT TOUCH. muses pop up -->
  1252. <div class="muse_wrap"> <!-- DO NOT TOUCH. muses container -->
  1253.  
  1254.  
  1255.  
  1256.  
  1257.  
  1258. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1259. <div class="muse_title_box">
  1260. <div class="muse_title"> <!-- main name that appear before hover -->
  1261. muse name here
  1262. </div>
  1263. </div>
  1264. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1265. <div class="muse_overlay"> <!-- box from each muse hover -->
  1266. <div class="muse_content"> <!-- box from each muse inside content -->
  1267. <div class="muse_name">
  1268. <strong>name here</strong> last name
  1269. </div>
  1270. <div class="muse_links_box">
  1271. <div class="muse_links">
  1272. <ul>
  1273. <li><a href="/tagged/">interactions</a></li>
  1274. <li><a href="/tagged/">photography</a></li>
  1275. <li><a href="/tagged/">musings</a></li>
  1276. <li><a href="/tagged/">starter</a></li>
  1277. <li><a href="/tagged/">likes</a></li>
  1278. <li><a href="/tagged/">texts</a></li>
  1279. </ul>
  1280. </div>
  1281. </div>
  1282. <div class="muse_description">
  1283. <ul>
  1284. <li><strong>pronouns:</strong> she/he/them</li>
  1285. <li><strong>sexuality: </strong>sexuality</li>
  1286. <li><strong>occupation: </strong>occupation</li>
  1287. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1288. <li><strong>faceclaim:</strong> faceclaim here</li>
  1289. </ul>
  1290. </div>
  1291. <div class="muse_description">
  1292. <p><strong>more information</strong></p>
  1293. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1294. </div>
  1295. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1296. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1297. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1298.  
  1299.  
  1300.  
  1301. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1302. <div class="muse_title_box">
  1303. <div class="muse_title"> <!-- main name that appear before hover -->
  1304. muse name here
  1305. </div>
  1306. </div>
  1307. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1308. <div class="muse_overlay"> <!-- box from each muse hover -->
  1309. <div class="muse_content"> <!-- box from each muse inside content -->
  1310. <div class="muse_name">
  1311. <strong>name here</strong> last name
  1312. </div>
  1313. <div class="muse_links_box">
  1314. <div class="muse_links">
  1315. <ul>
  1316. <li><a href="/tagged/">interactions</a></li>
  1317. <li><a href="/tagged/">photography</a></li>
  1318. <li><a href="/tagged/">musings</a></li>
  1319. <li><a href="/tagged/">starter</a></li>
  1320. <li><a href="/tagged/">likes</a></li>
  1321. <li><a href="/tagged/">texts</a></li>
  1322. </ul>
  1323. </div>
  1324. </div>
  1325. <div class="muse_description">
  1326. <ul>
  1327. <li><strong>pronouns:</strong> she/he/them</li>
  1328. <li><strong>sexuality: </strong>sexuality</li>
  1329. <li><strong>occupation: </strong>occupation</li>
  1330. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1331. <li><strong>faceclaim:</strong> faceclaim here</li>
  1332. </ul>
  1333. </div>
  1334. <div class="muse_description">
  1335. <p><strong>more information</strong></p>
  1336. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1337. </div>
  1338. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1339. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1340. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1341.  
  1342.  
  1343.  
  1344.  
  1345. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1346. <div class="muse_title_box">
  1347. <div class="muse_title"> <!-- main name that appear before hover -->
  1348. muse name here
  1349. </div>
  1350. </div>
  1351. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1352. <div class="muse_overlay"> <!-- box from each muse hover -->
  1353. <div class="muse_content"> <!-- box from each muse inside content -->
  1354. <div class="muse_name">
  1355. <strong>name here</strong> last name
  1356. </div>
  1357. <div class="muse_links_box">
  1358. <div class="muse_links">
  1359. <ul>
  1360. <li><a href="/tagged/">interactions</a></li>
  1361. <li><a href="/tagged/">photography</a></li>
  1362. <li><a href="/tagged/">musings</a></li>
  1363. <li><a href="/tagged/">starter</a></li>
  1364. <li><a href="/tagged/">likes</a></li>
  1365. <li><a href="/tagged/">texts</a></li>
  1366. </ul>
  1367. </div>
  1368. </div>
  1369. <div class="muse_description">
  1370. <ul>
  1371. <li><strong>pronouns:</strong> she/he/them</li>
  1372. <li><strong>sexuality: </strong>sexuality</li>
  1373. <li><strong>occupation: </strong>occupation</li>
  1374. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1375. <li><strong>faceclaim:</strong> faceclaim here</li>
  1376. </ul>
  1377. </div>
  1378. <div class="muse_description">
  1379. <p><strong>more information</strong></p>
  1380. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1381. </div>
  1382. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1383. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1384. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1385.  
  1386.  
  1387.  
  1388.  
  1389. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1390. <div class="muse_title_box">
  1391. <div class="muse_title"> <!-- main name that appear before hover -->
  1392. muse name here
  1393. </div>
  1394. </div>
  1395. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1396. <div class="muse_overlay"> <!-- box from each muse hover -->
  1397. <div class="muse_content"> <!-- box from each muse inside content -->
  1398. <div class="muse_name">
  1399. <strong>name here</strong> last name
  1400. </div>
  1401. <div class="muse_links_box">
  1402. <div class="muse_links">
  1403. <ul>
  1404. <li><a href="/tagged/">interactions</a></li>
  1405. <li><a href="/tagged/">photography</a></li>
  1406. <li><a href="/tagged/">musings</a></li>
  1407. <li><a href="/tagged/">starter</a></li>
  1408. <li><a href="/tagged/">likes</a></li>
  1409. <li><a href="/tagged/">texts</a></li>
  1410. </ul>
  1411. </div>
  1412. </div>
  1413. <div class="muse_description">
  1414. <ul>
  1415. <li><strong>pronouns:</strong> she/he/them</li>
  1416. <li><strong>sexuality: </strong>sexuality</li>
  1417. <li><strong>occupation: </strong>occupation</li>
  1418. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1419. <li><strong>faceclaim:</strong> faceclaim here</li>
  1420. </ul>
  1421. </div>
  1422. <div class="muse_description">
  1423. <p><strong>more information</strong></p>
  1424. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1425. </div>
  1426. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1427. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1428. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1429.  
  1430.  
  1431.  
  1432. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1433. <div class="muse_title_box">
  1434. <div class="muse_title"> <!-- main name that appear before hover -->
  1435. muse name here
  1436. </div>
  1437. </div>
  1438. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1439. <div class="muse_overlay"> <!-- box from each muse hover -->
  1440. <div class="muse_content"> <!-- box from each muse inside content -->
  1441. <div class="muse_name">
  1442. <strong>name here</strong> last name
  1443. </div>
  1444. <div class="muse_links_box">
  1445. <div class="muse_links">
  1446. <ul>
  1447. <li><a href="/tagged/">interactions</a></li>
  1448. <li><a href="/tagged/">photography</a></li>
  1449. <li><a href="/tagged/">musings</a></li>
  1450. <li><a href="/tagged/">starter</a></li>
  1451. <li><a href="/tagged/">likes</a></li>
  1452. <li><a href="/tagged/">texts</a></li>
  1453. </ul>
  1454. </div>
  1455. </div>
  1456. <div class="muse_description">
  1457. <ul>
  1458. <li><strong>pronouns:</strong> she/he/them</li>
  1459. <li><strong>sexuality: </strong>sexuality</li>
  1460. <li><strong>occupation: </strong>occupation</li>
  1461. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1462. <li><strong>faceclaim:</strong> faceclaim here</li>
  1463. </ul>
  1464. </div>
  1465. <div class="muse_description">
  1466. <p><strong>more information</strong></p>
  1467. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1468. </div>
  1469. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1470. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1471. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1472.  
  1473.  
  1474.  
  1475.  
  1476.  
  1477.  
  1478.  
  1479. </div> <!-- DO NOT TOUCH. closes the muses container -->
  1480. </div> <!-- DO NOT TOUCH. closes the muses pop up -->
  1481. </div> <!-- DO NOT TOUCH. closes the main pop up -->
  1482.  
  1483.  
  1484. <!-- END THE SECONDARY MUSE POP UP -->
  1485.  
  1486. </section>
  1487.  
  1488. <footer class="headerfooter">
  1489. <div class="headerfooterlinks">
  1490. <span>
  1491. edit this line on class <em>.headerfooterlinks span</em> - write anything else here. it needs to occupy one line! <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>stroke</s>
  1492. </span>
  1493. </div>
  1494. <div class="headerfooterlinks">
  1495. <a href="https://tylergaciaposey.tumblr.com/">&copy; tylergaciaposey</a>
  1496. </div>
  1497. </footer>
  1498. </div>
  1499.  
  1500. </div>
  1501. </div>
  1502. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!