Advertisement
sexycullen

theme 209 2 muses tab LIGHT

Apr 17th, 2020
92
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.47 KB | None | 0 0
  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="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  29.  
  30. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/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:#F5F5F5;
  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. #muses_popup2 {
  659. z-index:11;
  660. }
  661.  
  662.  
  663. .muse_popup {
  664. width:950px;
  665. height:510px;
  666. }
  667.  
  668.  
  669. .main_muses{
  670. position: absolute;
  671. right:0;
  672. top: 0;
  673. z-index:11;
  674. }
  675.  
  676. .muse_wrap {
  677. width:950px;
  678. height:510px;
  679. overflow-x:hidden;
  680. overflow-y:scroll;
  681. display:flex;
  682. flex-wrap: wrap;
  683. justify-content: center;
  684. align-items:center;
  685. padding:10px;
  686. top:1;
  687. left:0px;
  688. right:0px;
  689. bottom:1px;
  690. position:absolute;
  691. box-sizing:border-box;
  692. background-color:#FCFCFC;
  693. background-image:url('');
  694. background-repeat: repeat;
  695. background-attachment: fixed;
  696. background-position:center;
  697. }
  698.  
  699.  
  700. .muse_container {
  701. position: relative;
  702. display:block;
  703. overflow:hidden;
  704. width: 210px;
  705. height:210px;
  706. margin:10px 15px;
  707. background-color:transparent;
  708. box-sizing:border-box;
  709. outline: 1px solid #F5F5F5;
  710. }
  711.  
  712.  
  713. .muse_container img {
  714. margin:0 auto;
  715. display: block;
  716. object-fit:cover;
  717. }
  718.  
  719.  
  720.  
  721. /* muses main name background that appears before hover, you can change the opacity on 0.4 */
  722.  
  723. .muse_title_box {
  724. position: absolute;
  725. top: 0;
  726. bottom: 0;
  727. left: 0;
  728. right: 0;
  729. background-color: rgba(0, 0, 0, 0.4);
  730. transition: .5s ease-in-out;
  731. z-index:1;
  732. }
  733.  
  734.  
  735.  
  736.  
  737.  
  738.  
  739.  
  740.  
  741. /* muses main name that appear before hover */
  742.  
  743. .muse_title {
  744. color: #fff;
  745. margin:70% 0;
  746. text-align:center;
  747. font-style:normal;
  748. font-size:18px;
  749. font-family:'Helvetica Neue', Arial,sans-serif;
  750. text-transform:lowercase;
  751. letter-spacing:-0.1px;
  752. word-spacing:0px;
  753. font-weight:700!important;
  754. z-index:1;
  755. }
  756.  
  757.  
  758. .muse_overlay {
  759. overflow-x:hidden;
  760. overflow-y:scroll;
  761. position: absolute;
  762. top: 0;
  763. bottom: 0;
  764. left: 0;
  765. right: 0;
  766. opacity: 0;
  767. transition: .5s ease-in-out;
  768. background: #FFFFFF; /* muses box background */
  769. }
  770.  
  771.  
  772. .muse_container:hover .muse_overlay {
  773. opacity: 1;
  774. transition: .5s ease-in-out;
  775. }
  776.  
  777. .muse_container:hover .muse_title_box {
  778. opacity: 0;
  779. transition: .5s ease-in-out;
  780. z-index:-1;
  781. }
  782.  
  783. .muse_content {
  784. width:100%;
  785. text-align: center;
  786. color:;
  787. }
  788.  
  789.  
  790.  
  791.  
  792. /* muses name */
  793.  
  794. .muse_name {
  795. display:inline-block;
  796. text-transform: uppercase;
  797. padding:7px;
  798. margin:2px 0 5px;
  799. border-bottom:1px solid #F5F5F5;
  800. }
  801.  
  802.  
  803. /* muses links box */
  804.  
  805. .muse_links_box {
  806. padding:7px;
  807. margin:2px 0 5px;
  808. overflow:hidden;
  809. }
  810.  
  811. .muse_links_box li {
  812. display:inline-block;
  813. list-style:none;
  814. margin:0 px 0;
  815. padding: 0;
  816. }
  817.  
  818.  
  819.  
  820. /* muses links */
  821.  
  822. .muse_links {
  823. text-transform: lowercase;
  824. text-align: center;
  825. overflow:hidden;
  826. }
  827.  
  828.  
  829. .muse_links a {
  830. margin:5px;
  831. }
  832.  
  833. .muse_links ul {
  834. margin:0;
  835. padding:0;
  836. list-style:none;
  837. }
  838.  
  839. .muse_links li {
  840. margin:0 auto;
  841. }
  842.  
  843.  
  844. .muse_links ul li:before {
  845. content:none;
  846. }
  847.  
  848.  
  849.  
  850.  
  851. /* muses more information */
  852.  
  853. .muse_description {
  854. padding:7px;
  855. margin:-1px 0;
  856. text-align: center;
  857. border-style: solid;
  858. border-color:#F5F5F5;
  859. border-width:1px 0;
  860. }
  861.  
  862.  
  863.  
  864. /* muses list of information */
  865.  
  866. .muse_description ul {
  867. margin:0;
  868. padding:0;
  869. list-style:none;
  870. }
  871.  
  872. .muse_description li {
  873. margin:2px auto;
  874. }
  875.  
  876.  
  877.  
  878.  
  879. </style>
  880. </head>
  881.  
  882.  
  883. <body>
  884. <div class="container">
  885. <div class="headerfooter">
  886. <div class="title">
  887. lorem ipsum consectetuer
  888. </div>
  889. <nav class="headerfooterlinks">
  890. <a href="/">go back</a>
  891. <a href="#?w=950" rel="muses_popup" class="poplight">secondary</a>
  892. <a href="#?w=950" rel="muses_popup2" class="poplight">tertiary</a>
  893. <a href="#">link 1</a>
  894. <a href="#">link 2</a>
  895. </nav>
  896.  
  897. <div class="moreiconpopup headerfooterlinks">
  898. <a href="#?w=350" rel="navigation_popup" class="poplight">
  899. <span class="sf sf-more-o" title="more"></span>
  900. </a>
  901. </div>
  902. </div>
  903.  
  904.  
  905.  
  906. <section class="postscontainer"><!-- don't touch -->
  907.  
  908.  
  909. <!-- START THE NAVIGATION POP UP -->
  910.  
  911. <div id="navigation_popup" class="popup_block"> <!-- DO NOT TOUCH. main navigation pop up -->
  912.  
  913. <span class="close headerfooterlinks" onclick="this.parentElement.style.display='none';">
  914. <a href="#"><span class="sf sf-cross-2-o" title="close"></span></a>
  915. </span>
  916. <div class="navigation_popup"> <!-- DO NOT TOUCH. navigation pop up -->
  917. <div class="navigation_wrap"> <!-- DO NOT TOUCH. navigation container -->
  918.  
  919.  
  920.  
  921. <div class="navigation_container"> <!-- start of the navigation content -->
  922. <div class="navigation_title">
  923. Description
  924. </div>
  925. <div class="navigation_description">
  926. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  927. </div>
  928. <div class="navigation_links_box">
  929. <div class="navigation_links headerfooterlinks">
  930. <ul>
  931. <li><a href="/tagged/">more links</a></li>
  932. <li><a href="/tagged/">more links</a></li>
  933. <li><a href="/tagged/">more links</a></li>
  934. <li><a href="/tagged/">more links</a></li>
  935. <li><a href="/tagged/">more links</a></li>
  936. </ul>
  937. </div>
  938. </div>
  939. <div class="navigation_title">
  940. kinda a to-do list or wtv
  941. </div>
  942. <div class="navigation_description">
  943. <ul>
  944. <li><strong>something</strong> blah blah blah</li>
  945. <li><strong>something</strong> blah blah blah</li>
  946. <li><strong>something</strong> blah blah blah</li>
  947. <li><strong>something</strong> blah blah blah</li>
  948. </ul>
  949. </div>
  950.  
  951. </div> <!-- closes the navigation content -->
  952. </div> <!-- DO NOT TOUCH. closes navigation container -->
  953. </div> <!-- DO NOT TOUCH. closes navigation pop up -->
  954. </div> <!-- DO NOT TOUCH. closes main navigation pop up -->
  955.  
  956. <!-- END THE NAVIGATION POP UP -->
  957.  
  958.  
  959.  
  960.  
  961.  
  962.  
  963.  
  964. <!-- START THE MAIN MUSES -->
  965.  
  966. <div class="main_muses"> <!-- DO NOT TOUCH. main muses pop up -->
  967. <div class="muse_popup"> <!-- DO NOT TOUCH. muses pop up -->
  968. <div class="muse_wrap"> <!-- DO NOT TOUCH. muses container -->
  969.  
  970.  
  971.  
  972. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  973. <div class="muse_title_box">
  974. <div class="muse_title"> <!-- main name that appear before hover -->
  975. muse name here
  976. </div>
  977. </div>
  978. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  979. <div class="muse_overlay"> <!-- box from each muse hover -->
  980. <div class="muse_content"> <!-- box from each muse inside content -->
  981. <div class="muse_name">
  982. <strong>name here</strong> last name
  983. </div>
  984. <div class="muse_links_box">
  985. <div class="muse_links">
  986. <ul>
  987. <li><a href="/tagged/">interactions</a></li>
  988. <li><a href="/tagged/">photography</a></li>
  989. <li><a href="/tagged/">musings</a></li>
  990. <li><a href="/tagged/">starter</a></li>
  991. <li><a href="/tagged/">likes</a></li>
  992. <li><a href="/tagged/">texts</a></li>
  993. </ul>
  994. </div>
  995. </div>
  996. <div class="muse_description">
  997. <ul>
  998. <li><strong>pronouns:</strong> she/he/them</li>
  999. <li><strong>sexuality: </strong>sexuality</li>
  1000. <li><strong>occupation: </strong>occupation</li>
  1001. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1002. <li><strong>faceclaim:</strong> faceclaim here</li>
  1003. </ul>
  1004. </div>
  1005. <div class="muse_description">
  1006. <p><strong>more information</strong></p>
  1007. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1008. </div>
  1009. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1010. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1011. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1012.  
  1013.  
  1014.  
  1015. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1016. <div class="muse_title_box">
  1017. <div class="muse_title"> <!-- main name that appear before hover -->
  1018. muse name here
  1019. </div>
  1020. </div>
  1021. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1022. <div class="muse_overlay"> <!-- box from each muse hover -->
  1023. <div class="muse_content"> <!-- box from each muse inside content -->
  1024. <div class="muse_name">
  1025. <strong>name here</strong> last name
  1026. </div>
  1027. <div class="muse_links_box">
  1028. <div class="muse_links">
  1029. <ul>
  1030. <li><a href="/tagged/">interactions</a></li>
  1031. <li><a href="/tagged/">photography</a></li>
  1032. <li><a href="/tagged/">musings</a></li>
  1033. <li><a href="/tagged/">starter</a></li>
  1034. <li><a href="/tagged/">likes</a></li>
  1035. <li><a href="/tagged/">texts</a></li>
  1036. </ul>
  1037. </div>
  1038. </div>
  1039. <div class="muse_description">
  1040. <ul>
  1041. <li><strong>pronouns:</strong> she/he/them</li>
  1042. <li><strong>sexuality: </strong>sexuality</li>
  1043. <li><strong>occupation: </strong>occupation</li>
  1044. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1045. <li><strong>faceclaim:</strong> faceclaim here</li>
  1046. <li><strong>add more:</strong> anything you want tbh</li>
  1047. </ul>
  1048. </div>
  1049. <div class="muse_description">
  1050. <p><strong>more information</strong></p>
  1051. <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>
  1052. </div>
  1053. <div class="muse_description">
  1054. <p><strong>even more information if you want</strong></p>
  1055. <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>
  1056. <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>
  1057. </div>
  1058. <div class="muse_links_box">
  1059. <div class="muse_links">
  1060. <p><strong>more links too</strong></p>
  1061. <ul>
  1062. <li><a href="/tagged/">more links</a></li>
  1063. <li><a href="/tagged/">more links</a></li>
  1064. <li><a href="/tagged/">more links</a></li>
  1065. <li><a href="/tagged/">more links</a></li>
  1066. <li><a href="/tagged/">more links</a></li>
  1067. <li><a href="/tagged/">more links</a></li>
  1068. </ul>
  1069. </div>
  1070. </div>
  1071. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1072. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1073. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1074.  
  1075.  
  1076.  
  1077. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1078. <div class="muse_title_box">
  1079. <div class="muse_title"> <!-- main name that appear before hover -->
  1080. muse name here
  1081. </div>
  1082. </div>
  1083. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1084. <div class="muse_overlay"> <!-- box from each muse hover -->
  1085. <div class="muse_content"> <!-- box from each muse inside content -->
  1086. <div class="muse_name">
  1087. <strong>doesn't have to be</strong> name here
  1088. </div>
  1089. <div class="muse_description">
  1090. <p><strong>create your thing as you wish</strong></p>
  1091. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1092. </div>
  1093. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1094. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1095. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1096.  
  1097.  
  1098.  
  1099. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1100. <div class="muse_title_box">
  1101. <div class="muse_title"> <!-- main name that appear before hover -->
  1102. muse name here
  1103. </div>
  1104. </div>
  1105. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1106. <div class="muse_overlay"> <!-- box from each muse hover -->
  1107. <div class="muse_content"> <!-- box from each muse inside content -->
  1108. <div class="muse_name">
  1109. <strong>name here</strong> last name
  1110. </div>
  1111. <div class="muse_links_box">
  1112. <div class="muse_links">
  1113. <ul>
  1114. <li><a href="/tagged/">interactions</a></li>
  1115. <li><a href="/tagged/">photography</a></li>
  1116. <li><a href="/tagged/">musings</a></li>
  1117. <li><a href="/tagged/">starter</a></li>
  1118. <li><a href="/tagged/">likes</a></li>
  1119. <li><a href="/tagged/">texts</a></li>
  1120. </ul>
  1121. </div>
  1122. </div>
  1123. <div class="muse_description">
  1124. <ul>
  1125. <li><strong>pronouns:</strong> she/he/them</li>
  1126. <li><strong>sexuality: </strong>sexuality</li>
  1127. <li><strong>occupation: </strong>occupation</li>
  1128. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1129. <li><strong>faceclaim:</strong> faceclaim here</li>
  1130. </ul>
  1131. </div>
  1132. <div class="muse_description">
  1133. <p><strong>more information</strong></p>
  1134. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1135. </div>
  1136. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1137. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1138. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1139.  
  1140.  
  1141.  
  1142. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1143. <div class="muse_title_box">
  1144. <div class="muse_title"> <!-- main name that appear before hover -->
  1145. muse name here
  1146. </div>
  1147. </div>
  1148. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1149. <div class="muse_overlay"> <!-- box from each muse hover -->
  1150. <div class="muse_content"> <!-- box from each muse inside content -->
  1151. <div class="muse_name">
  1152. <strong>name here</strong> last name
  1153. </div>
  1154. <div class="muse_links_box">
  1155. <div class="muse_links">
  1156. <ul>
  1157. <li><a href="/tagged/">interactions</a></li>
  1158. <li><a href="/tagged/">photography</a></li>
  1159. <li><a href="/tagged/">musings</a></li>
  1160. <li><a href="/tagged/">starter</a></li>
  1161. <li><a href="/tagged/">likes</a></li>
  1162. <li><a href="/tagged/">texts</a></li>
  1163. </ul>
  1164. </div>
  1165. </div>
  1166. <div class="muse_description">
  1167. <ul>
  1168. <li><strong>pronouns:</strong> she/he/them</li>
  1169. <li><strong>sexuality: </strong>sexuality</li>
  1170. <li><strong>occupation: </strong>occupation</li>
  1171. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1172. <li><strong>faceclaim:</strong> faceclaim here</li>
  1173. </ul>
  1174. </div>
  1175. <div class="muse_description">
  1176. <p><strong>more information</strong></p>
  1177. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1178. </div>
  1179. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1180. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1181. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1182.  
  1183.  
  1184.  
  1185.  
  1186.  
  1187. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1188. <div class="muse_title_box">
  1189. <div class="muse_title"> <!-- main name that appear before hover -->
  1190. muse name here
  1191. </div>
  1192. </div>
  1193. <img src="https://static.tumblr.com/0siu224/lNEq7zlyz/2.png">
  1194. <div class="muse_overlay"> <!-- box from each muse hover -->
  1195. <div class="muse_content"> <!-- box from each muse inside content -->
  1196. <div class="muse_name">
  1197. <strong>name here</strong> last name
  1198. </div>
  1199. <div class="muse_links_box">
  1200. <div class="muse_links">
  1201. <ul>
  1202. <li><a href="/tagged/">interactions</a></li>
  1203. <li><a href="/tagged/">photography</a></li>
  1204. <li><a href="/tagged/">musings</a></li>
  1205. <li><a href="/tagged/">starter</a></li>
  1206. <li><a href="/tagged/">likes</a></li>
  1207. <li><a href="/tagged/">texts</a></li>
  1208. </ul>
  1209. </div>
  1210. </div>
  1211. <div class="muse_description">
  1212. <ul>
  1213. <li><strong>pronouns:</strong> she/he/them</li>
  1214. <li><strong>sexuality: </strong>sexuality</li>
  1215. <li><strong>occupation: </strong>occupation</li>
  1216. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1217. <li><strong>faceclaim:</strong> faceclaim here</li>
  1218. </ul>
  1219. </div>
  1220. <div class="muse_description">
  1221. <p><strong>more information</strong></p>
  1222. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1223. </div>
  1224. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1225. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1226. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1227.  
  1228.  
  1229. </div> <!-- DO NOT TOUCH. closes the muses container -->
  1230. </div> <!-- DO NOT TOUCH. closes the muses pop up -->
  1231. </div> <!-- DO NOT TOUCH. closes the main pop up -->
  1232.  
  1233.  
  1234. <!-- END THE MAIN MUSES -->
  1235.  
  1236.  
  1237.  
  1238.  
  1239.  
  1240.  
  1241.  
  1242.  
  1243.  
  1244.  
  1245.  
  1246.  
  1247.  
  1248.  
  1249.  
  1250. <!-- START THE SECONDARY MUSES POP UP -->
  1251.  
  1252. <div id="muses_popup" class="popup_block"> <!-- DO NOT TOUCH. main muses pop up -->
  1253. <span class="close headerfooterlinks" onclick="this.parentElement.style.display='none';">
  1254. <a href="#"><span class="sf sf-cross-2-o" title="close"></span></a>
  1255. </span>
  1256. <div class="muse_popup"> <!-- DO NOT TOUCH. muses pop up -->
  1257. <div class="muse_wrap"> <!-- DO NOT TOUCH. muses container -->
  1258.  
  1259.  
  1260.  
  1261.  
  1262.  
  1263. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1264. <div class="muse_title_box">
  1265. <div class="muse_title"> <!-- main name that appear before hover -->
  1266. muse name here
  1267. </div>
  1268. </div>
  1269. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1270. <div class="muse_overlay"> <!-- box from each muse hover -->
  1271. <div class="muse_content"> <!-- box from each muse inside content -->
  1272. <div class="muse_name">
  1273. <strong>name here</strong> last name
  1274. </div>
  1275. <div class="muse_links_box">
  1276. <div class="muse_links">
  1277. <ul>
  1278. <li><a href="/tagged/">interactions</a></li>
  1279. <li><a href="/tagged/">photography</a></li>
  1280. <li><a href="/tagged/">musings</a></li>
  1281. <li><a href="/tagged/">starter</a></li>
  1282. <li><a href="/tagged/">likes</a></li>
  1283. <li><a href="/tagged/">texts</a></li>
  1284. </ul>
  1285. </div>
  1286. </div>
  1287. <div class="muse_description">
  1288. <ul>
  1289. <li><strong>pronouns:</strong> she/he/them</li>
  1290. <li><strong>sexuality: </strong>sexuality</li>
  1291. <li><strong>occupation: </strong>occupation</li>
  1292. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1293. <li><strong>faceclaim:</strong> faceclaim here</li>
  1294. </ul>
  1295. </div>
  1296. <div class="muse_description">
  1297. <p><strong>more information</strong></p>
  1298. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1299. </div>
  1300. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1301. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1302. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1303.  
  1304.  
  1305.  
  1306. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1307. <div class="muse_title_box">
  1308. <div class="muse_title"> <!-- main name that appear before hover -->
  1309. muse name here
  1310. </div>
  1311. </div>
  1312. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1313. <div class="muse_overlay"> <!-- box from each muse hover -->
  1314. <div class="muse_content"> <!-- box from each muse inside content -->
  1315. <div class="muse_name">
  1316. <strong>name here</strong> last name
  1317. </div>
  1318. <div class="muse_links_box">
  1319. <div class="muse_links">
  1320. <ul>
  1321. <li><a href="/tagged/">interactions</a></li>
  1322. <li><a href="/tagged/">photography</a></li>
  1323. <li><a href="/tagged/">musings</a></li>
  1324. <li><a href="/tagged/">starter</a></li>
  1325. <li><a href="/tagged/">likes</a></li>
  1326. <li><a href="/tagged/">texts</a></li>
  1327. </ul>
  1328. </div>
  1329. </div>
  1330. <div class="muse_description">
  1331. <ul>
  1332. <li><strong>pronouns:</strong> she/he/them</li>
  1333. <li><strong>sexuality: </strong>sexuality</li>
  1334. <li><strong>occupation: </strong>occupation</li>
  1335. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1336. <li><strong>faceclaim:</strong> faceclaim here</li>
  1337. </ul>
  1338. </div>
  1339. <div class="muse_description">
  1340. <p><strong>more information</strong></p>
  1341. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1342. </div>
  1343. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1344. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1345. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1346.  
  1347.  
  1348.  
  1349.  
  1350. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1351. <div class="muse_title_box">
  1352. <div class="muse_title"> <!-- main name that appear before hover -->
  1353. muse name here
  1354. </div>
  1355. </div>
  1356. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1357. <div class="muse_overlay"> <!-- box from each muse hover -->
  1358. <div class="muse_content"> <!-- box from each muse inside content -->
  1359. <div class="muse_name">
  1360. <strong>name here</strong> last name
  1361. </div>
  1362. <div class="muse_links_box">
  1363. <div class="muse_links">
  1364. <ul>
  1365. <li><a href="/tagged/">interactions</a></li>
  1366. <li><a href="/tagged/">photography</a></li>
  1367. <li><a href="/tagged/">musings</a></li>
  1368. <li><a href="/tagged/">starter</a></li>
  1369. <li><a href="/tagged/">likes</a></li>
  1370. <li><a href="/tagged/">texts</a></li>
  1371. </ul>
  1372. </div>
  1373. </div>
  1374. <div class="muse_description">
  1375. <ul>
  1376. <li><strong>pronouns:</strong> she/he/them</li>
  1377. <li><strong>sexuality: </strong>sexuality</li>
  1378. <li><strong>occupation: </strong>occupation</li>
  1379. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1380. <li><strong>faceclaim:</strong> faceclaim here</li>
  1381. </ul>
  1382. </div>
  1383. <div class="muse_description">
  1384. <p><strong>more information</strong></p>
  1385. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1386. </div>
  1387. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1388. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1389. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1390.  
  1391.  
  1392.  
  1393.  
  1394. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1395. <div class="muse_title_box">
  1396. <div class="muse_title"> <!-- main name that appear before hover -->
  1397. muse name here
  1398. </div>
  1399. </div>
  1400. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1401. <div class="muse_overlay"> <!-- box from each muse hover -->
  1402. <div class="muse_content"> <!-- box from each muse inside content -->
  1403. <div class="muse_name">
  1404. <strong>name here</strong> last name
  1405. </div>
  1406. <div class="muse_links_box">
  1407. <div class="muse_links">
  1408. <ul>
  1409. <li><a href="/tagged/">interactions</a></li>
  1410. <li><a href="/tagged/">photography</a></li>
  1411. <li><a href="/tagged/">musings</a></li>
  1412. <li><a href="/tagged/">starter</a></li>
  1413. <li><a href="/tagged/">likes</a></li>
  1414. <li><a href="/tagged/">texts</a></li>
  1415. </ul>
  1416. </div>
  1417. </div>
  1418. <div class="muse_description">
  1419. <ul>
  1420. <li><strong>pronouns:</strong> she/he/them</li>
  1421. <li><strong>sexuality: </strong>sexuality</li>
  1422. <li><strong>occupation: </strong>occupation</li>
  1423. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1424. <li><strong>faceclaim:</strong> faceclaim here</li>
  1425. </ul>
  1426. </div>
  1427. <div class="muse_description">
  1428. <p><strong>more information</strong></p>
  1429. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1430. </div>
  1431. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1432. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1433. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1434.  
  1435.  
  1436.  
  1437. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1438. <div class="muse_title_box">
  1439. <div class="muse_title"> <!-- main name that appear before hover -->
  1440. muse name here
  1441. </div>
  1442. </div>
  1443. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1444. <div class="muse_overlay"> <!-- box from each muse hover -->
  1445. <div class="muse_content"> <!-- box from each muse inside content -->
  1446. <div class="muse_name">
  1447. <strong>name here</strong> last name
  1448. </div>
  1449. <div class="muse_links_box">
  1450. <div class="muse_links">
  1451. <ul>
  1452. <li><a href="/tagged/">interactions</a></li>
  1453. <li><a href="/tagged/">photography</a></li>
  1454. <li><a href="/tagged/">musings</a></li>
  1455. <li><a href="/tagged/">starter</a></li>
  1456. <li><a href="/tagged/">likes</a></li>
  1457. <li><a href="/tagged/">texts</a></li>
  1458. </ul>
  1459. </div>
  1460. </div>
  1461. <div class="muse_description">
  1462. <ul>
  1463. <li><strong>pronouns:</strong> she/he/them</li>
  1464. <li><strong>sexuality: </strong>sexuality</li>
  1465. <li><strong>occupation: </strong>occupation</li>
  1466. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1467. <li><strong>faceclaim:</strong> faceclaim here</li>
  1468. </ul>
  1469. </div>
  1470. <div class="muse_description">
  1471. <p><strong>more information</strong></p>
  1472. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1473. </div>
  1474. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1475. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1476. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1477.  
  1478.  
  1479.  
  1480.  
  1481.  
  1482.  
  1483.  
  1484. </div> <!-- DO NOT TOUCH. closes the muses container -->
  1485. </div> <!-- DO NOT TOUCH. closes the muses pop up -->
  1486. </div> <!-- DO NOT TOUCH. closes the main pop up -->
  1487.  
  1488.  
  1489. <!-- END THE SECONDARY MUSE POP UP -->
  1490.  
  1491.  
  1492.  
  1493.  
  1494.  
  1495.  
  1496.  
  1497.  
  1498.  
  1499.  
  1500. <!-- START THE TERTIARY MUSES POP UP -->
  1501.  
  1502. <div id="muses_popup2" class="popup_block"> <!-- DO NOT TOUCH. main muses pop up -->
  1503. <span class="close headerfooterlinks" onclick="this.parentElement.style.display='none';">
  1504. <a href="#"><span class="sf sf-cross-2-o" title="close"></span></a>
  1505. </span>
  1506. <div class="muse_popup"> <!-- DO NOT TOUCH. muses pop up -->
  1507. <div class="muse_wrap"> <!-- DO NOT TOUCH. muses container -->
  1508.  
  1509.  
  1510.  
  1511.  
  1512.  
  1513. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1514. <div class="muse_title_box">
  1515. <div class="muse_title"> <!-- main name that appear before hover -->
  1516. muse name here
  1517. </div>
  1518. </div>
  1519. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1520. <div class="muse_overlay"> <!-- box from each muse hover -->
  1521. <div class="muse_content"> <!-- box from each muse inside content -->
  1522. <div class="muse_name">
  1523. <strong>name here</strong> last name
  1524. </div>
  1525. <div class="muse_links_box">
  1526. <div class="muse_links">
  1527. <ul>
  1528. <li><a href="/tagged/">interactions</a></li>
  1529. <li><a href="/tagged/">photography</a></li>
  1530. <li><a href="/tagged/">musings</a></li>
  1531. <li><a href="/tagged/">starter</a></li>
  1532. <li><a href="/tagged/">likes</a></li>
  1533. <li><a href="/tagged/">texts</a></li>
  1534. </ul>
  1535. </div>
  1536. </div>
  1537. <div class="muse_description">
  1538. <ul>
  1539. <li><strong>pronouns:</strong> she/he/them</li>
  1540. <li><strong>sexuality: </strong>sexuality</li>
  1541. <li><strong>occupation: </strong>occupation</li>
  1542. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1543. <li><strong>faceclaim:</strong> faceclaim here</li>
  1544. </ul>
  1545. </div>
  1546. <div class="muse_description">
  1547. <p><strong>more information</strong></p>
  1548. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1549. </div>
  1550. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1551. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1552. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1553.  
  1554.  
  1555.  
  1556. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1557. <div class="muse_title_box">
  1558. <div class="muse_title"> <!-- main name that appear before hover -->
  1559. muse name here
  1560. </div>
  1561. </div>
  1562. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1563. <div class="muse_overlay"> <!-- box from each muse hover -->
  1564. <div class="muse_content"> <!-- box from each muse inside content -->
  1565. <div class="muse_name">
  1566. <strong>name here</strong> last name
  1567. </div>
  1568. <div class="muse_links_box">
  1569. <div class="muse_links">
  1570. <ul>
  1571. <li><a href="/tagged/">interactions</a></li>
  1572. <li><a href="/tagged/">photography</a></li>
  1573. <li><a href="/tagged/">musings</a></li>
  1574. <li><a href="/tagged/">starter</a></li>
  1575. <li><a href="/tagged/">likes</a></li>
  1576. <li><a href="/tagged/">texts</a></li>
  1577. </ul>
  1578. </div>
  1579. </div>
  1580. <div class="muse_description">
  1581. <ul>
  1582. <li><strong>pronouns:</strong> she/he/them</li>
  1583. <li><strong>sexuality: </strong>sexuality</li>
  1584. <li><strong>occupation: </strong>occupation</li>
  1585. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1586. <li><strong>faceclaim:</strong> faceclaim here</li>
  1587. </ul>
  1588. </div>
  1589. <div class="muse_description">
  1590. <p><strong>more information</strong></p>
  1591. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1592. </div>
  1593. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1594. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1595. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1596.  
  1597.  
  1598.  
  1599.  
  1600. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1601. <div class="muse_title_box">
  1602. <div class="muse_title"> <!-- main name that appear before hover -->
  1603. muse name here
  1604. </div>
  1605. </div>
  1606. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1607. <div class="muse_overlay"> <!-- box from each muse hover -->
  1608. <div class="muse_content"> <!-- box from each muse inside content -->
  1609. <div class="muse_name">
  1610. <strong>name here</strong> last name
  1611. </div>
  1612. <div class="muse_links_box">
  1613. <div class="muse_links">
  1614. <ul>
  1615. <li><a href="/tagged/">interactions</a></li>
  1616. <li><a href="/tagged/">photography</a></li>
  1617. <li><a href="/tagged/">musings</a></li>
  1618. <li><a href="/tagged/">starter</a></li>
  1619. <li><a href="/tagged/">likes</a></li>
  1620. <li><a href="/tagged/">texts</a></li>
  1621. </ul>
  1622. </div>
  1623. </div>
  1624. <div class="muse_description">
  1625. <ul>
  1626. <li><strong>pronouns:</strong> she/he/them</li>
  1627. <li><strong>sexuality: </strong>sexuality</li>
  1628. <li><strong>occupation: </strong>occupation</li>
  1629. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1630. <li><strong>faceclaim:</strong> faceclaim here</li>
  1631. </ul>
  1632. </div>
  1633. <div class="muse_description">
  1634. <p><strong>more information</strong></p>
  1635. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1636. </div>
  1637. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1638. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1639. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1640.  
  1641.  
  1642.  
  1643.  
  1644. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1645. <div class="muse_title_box">
  1646. <div class="muse_title"> <!-- main name that appear before hover -->
  1647. muse name here
  1648. </div>
  1649. </div>
  1650. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1651. <div class="muse_overlay"> <!-- box from each muse hover -->
  1652. <div class="muse_content"> <!-- box from each muse inside content -->
  1653. <div class="muse_name">
  1654. <strong>name here</strong> last name
  1655. </div>
  1656. <div class="muse_links_box">
  1657. <div class="muse_links">
  1658. <ul>
  1659. <li><a href="/tagged/">interactions</a></li>
  1660. <li><a href="/tagged/">photography</a></li>
  1661. <li><a href="/tagged/">musings</a></li>
  1662. <li><a href="/tagged/">starter</a></li>
  1663. <li><a href="/tagged/">likes</a></li>
  1664. <li><a href="/tagged/">texts</a></li>
  1665. </ul>
  1666. </div>
  1667. </div>
  1668. <div class="muse_description">
  1669. <ul>
  1670. <li><strong>pronouns:</strong> she/he/them</li>
  1671. <li><strong>sexuality: </strong>sexuality</li>
  1672. <li><strong>occupation: </strong>occupation</li>
  1673. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1674. <li><strong>faceclaim:</strong> faceclaim here</li>
  1675. </ul>
  1676. </div>
  1677. <div class="muse_description">
  1678. <p><strong>more information</strong></p>
  1679. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1680. </div>
  1681. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1682. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1683. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1684.  
  1685.  
  1686.  
  1687. <div class="muse_container"> <!-- start box from each muse (COPY FROM THIS TO ADD MORE MUSES !!!) -->
  1688. <div class="muse_title_box">
  1689. <div class="muse_title"> <!-- main name that appear before hover -->
  1690. muse name here
  1691. </div>
  1692. </div>
  1693. <img src="https://static.tumblr.com/0siu224/uJVq7zlz7/1.png">
  1694. <div class="muse_overlay"> <!-- box from each muse hover -->
  1695. <div class="muse_content"> <!-- box from each muse inside content -->
  1696. <div class="muse_name">
  1697. <strong>name here</strong> last name
  1698. </div>
  1699. <div class="muse_links_box">
  1700. <div class="muse_links">
  1701. <ul>
  1702. <li><a href="/tagged/">interactions</a></li>
  1703. <li><a href="/tagged/">photography</a></li>
  1704. <li><a href="/tagged/">musings</a></li>
  1705. <li><a href="/tagged/">starter</a></li>
  1706. <li><a href="/tagged/">likes</a></li>
  1707. <li><a href="/tagged/">texts</a></li>
  1708. </ul>
  1709. </div>
  1710. </div>
  1711. <div class="muse_description">
  1712. <ul>
  1713. <li><strong>pronouns:</strong> she/he/them</li>
  1714. <li><strong>sexuality: </strong>sexuality</li>
  1715. <li><strong>occupation: </strong>occupation</li>
  1716. <li><strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and materialistic</li>
  1717. <li><strong>faceclaim:</strong> faceclaim here</li>
  1718. </ul>
  1719. </div>
  1720. <div class="muse_description">
  1721. <p><strong>more information</strong></p>
  1722. <p>lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.</p>
  1723. </div>
  1724. </div> <!-- DO NOT TOUCH. closes the box from each muse inside content -->
  1725. </div> <!-- DO NOT TOUCH. closes the box from each muse hover -->
  1726. </div> <!-- closes the BOX FROM EACH MUSE (COPY TO THIS TO CLOSE THE MUSE CONTAINER AND PASTE BELOW) -->
  1727.  
  1728.  
  1729.  
  1730.  
  1731.  
  1732.  
  1733.  
  1734. </div> <!-- DO NOT TOUCH. closes the muses container -->
  1735. </div> <!-- DO NOT TOUCH. closes the muses pop up -->
  1736. </div> <!-- DO NOT TOUCH. closes the main pop up -->
  1737.  
  1738.  
  1739. <!-- END THE TERTIARY MUSE POP UP -->
  1740.  
  1741.  
  1742.  
  1743. </section>
  1744.  
  1745. <footer class="headerfooter">
  1746. <div class="headerfooterlinks">
  1747. <span>
  1748. 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>
  1749. </span>
  1750. </div>
  1751. <div class="headerfooterlinks">
  1752. <a href="https://tylergaciaposey.tumblr.com/">&copy; tylergaciaposey</a>
  1753. </div>
  1754. </footer>
  1755. </div>
  1756.  
  1757. </div>
  1758. </div>
  1759. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement