API tools faq
paste
Advertisement
sexycullen

theme 218 light / 3 muses tab

sexycullen
Feb 27th, 2022
126
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 98.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- HTML5 Shiv -->
  3. <!--[if lt IE 9]> <script src="https://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script><![endif]-->
  4. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  5. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  6. <!--[if gt IE 9]><!--> <!--<![endif]-->
  7.  
  8. <!--
  9.  
  10. maziekeen's theme #218 LIGHT
  11. https://maziekeen.tumblr.com/
  12.  
  13.  
  14. PLEASE DO NOT:
  15. remove the credits; claim as your own; use as a base, take parts
  16. of the theme, repost as your own
  17. YOU CAN:
  18. edit as much as you want for your own personal use only.
  19.  
  20.  
  21. CREDITS,
  22. smooth scroll by michael herf and balazs galambosi
  23. feathericons by github.com/feathericons/feather
  24. normalize reest html by necolas.github.io
  25. tippyjs tooltips by silbrigthemes
  26.  
  27. -->
  28. <html>
  29. <head>
  30. <meta charset="utf-8">
  31. <title>{block:TagPage}#{Tag} / {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} / {/block:SearchPage}{block:PostSummary}{PostSummary} / {/block:PostSummary} {Title}</title>
  32.  
  33. <link rel="shortcut icon" href="{Favicon}"/>
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  35. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  36. <meta name="viewport" content="width=device-width, initial-scale=1">
  37.  
  38.  
  39. <!------------ custom css ---->
  40.  
  41. <link href="https://static.tumblr.com/0siu224/1Eaqd80d8/normalize.css" rel="stylesheet"> <!-- reset html code -->
  42. <link href="https://static.tumblr.com/0siu224/OT8qd80dc/reset.css" rel="stylesheet"> <!-- reset html code -->
  43. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"> <!-- custom icons -->
  44. <script src="https://unpkg.com/feather-icons"></script> <!-- custom icons -->
  45.  
  46.  
  47.  
  48. <!------------ fonts ---->
  49.  
  50. <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet" />
  51.  
  52.  
  53.  
  54. <style type="text/css">
  55. /* ------------ theme's variables */
  56.  
  57. :root {
  58. /* colors */
  59.  
  60. --backgroundThemeColor: #f7f7f7; /*theme background*/
  61. --bodyTextColor: #111111; /*theme text color*/
  62. --bodyLinkColor: #009f74; /*theme links color*/
  63. --bodyLinkHoverColor: #ff8749; /*theme links on hover color*/
  64. --boldColor: #1e917e; /*theme bold color*/
  65. --italicColor: #bea996; /*theme bold italic color*/
  66. --hoverTextBackgroundColor: #1e917e; /*hover texts background color*/
  67. --hoverTextColor: #ffffff; /*hover texts color*/
  68. --bordersColor: #dde2eb; /*color of the borders of the theme*/
  69. --musesBackgroundColor: #ffffff; /*background of the muses container*/
  70. --scrollbarColor: #8fe6e4; /*scrollbar color*/
  71.  
  72.  
  73. /* fonts, sizes, styles */
  74.  
  75. --bodyFont: 'Nunito', Calibri,sans-serif; /*body font*/
  76.  
  77. --topSidebarTitleFontSize: 17px; /*top sidebar title font size*/
  78. --bottomSidebarDescriptionFontSize: 11px; /*bottom sidebar description font size*/
  79. --bodyFontSize: 12px; /*body font size*/
  80. --sidebarIconsSize: 14px; /*top and bottom sidear icons size*/
  81.  
  82. --boldFontWeight: bold; /*font weight of the body bold */
  83. --topSidebarTitleFontWeight: bold; /*top sidebar title font weight*/
  84.  
  85.  
  86. --topSidebarTitleTextTransform: lowercase; /*top sidebar title text transform*/
  87. --topSidebarTitleFontStyle: normal; /*top sidebar title font style*/
  88. --bottomSidebarDescriptionTextTransform: none; /*bottom sidebar description text transform*/
  89. --bottomSidebarDescriptionFontStyle: normal; /*bottom sidebar description font style*/
  90.  
  91.  
  92. /* other styles */
  93.  
  94. --bordersStyle: solid; /*style of all the borders of the theme*/
  95. --bordersSize: 1px; /*border size*/
  96. --boxShadowSize: 0px 4px 8px; /*box shadow size*/
  97. --boxShadowColor: 0, 0, 0, 0.1; /*box shadow color*/
  98. --transitions: all 0.5s ease; /*transitions*/
  99.  
  100.  
  101. }
  102.  
  103.  
  104.  
  105. /* ------------ scrollbar */
  106.  
  107. ::-webkit-scrollbar {
  108. width:6px;
  109. height:6px;
  110. }
  111. ::-webkit-scrollbar {
  112. background-color:var(--backgroundThemeColor);
  113. }
  114. ::-webkit-scrollbar-track {
  115. border:4px solid var(--backgroundThemeColor);
  116. background-color:var(--backgroundThemeColor);
  117. }
  118. ::-webkit-scrollbar-thumb {
  119. border:2px solid var(--backgroundThemeColor);
  120. background-color:var(--scrollbarColor);
  121. border-radius:10px;
  122. min-height:24px;
  123. min-width:24px;
  124. }
  125.  
  126.  
  127.  
  128.  
  129. /* ------------ tooltips */
  130.  
  131. .tippy-tooltip.custom-theme {
  132. text-align:center;
  133. font-weight:var(--boldFontWeight);
  134. color:var(--hoverTextColor);
  135. background-color:var(--hoverTextBackgroundColor);
  136. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  137. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  138. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  139. }
  140.  
  141. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  142. fill: var(--hoverTextBackgroundColor);
  143. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  144. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  145. }
  146.  
  147.  
  148.  
  149.  
  150. /* ------------ tumblr controls */
  151.  
  152. iframe.tmblr-iframe {
  153. z-index:99999999999999!important;
  154. top: 15px!important;
  155. right: 15px!important;
  156. padding-right:12px;
  157. -webkit-transform:scale(0.75);
  158. -ms-transform:scale(0.75);
  159. transform:scale(0.75);
  160. -webkit-transform-origin:100% 0;
  161. -ms-transform-origin:100% 0;
  162. transform-origin:100% 0;
  163. -webkit-transition: var(--transitions);
  164. -o-transition: var(--transitions);
  165. transition: var(--transitions);
  166. cursor: pointer;
  167. }
  168.  
  169. iframe.tmblr-iframe:hover {
  170. opacity:1!important;
  171. -webkit-transition: var(--transitions);
  172. -o-transition: var(--transitions);
  173. transition: var(--transitions);
  174. }
  175.  
  176. .iframe-controls-right {
  177. padding:0;
  178. }
  179.  
  180.  
  181. /* ------------ theme settings */
  182.  
  183. html {
  184. -webkit-box-sizing: border-box;
  185. box-sizing: border-box;
  186. }
  187.  
  188. *::after,
  189. *::before {
  190. box-sizing: inherit;
  191. }
  192.  
  193.  
  194. html,
  195. body {
  196. height: 100vh;
  197. }
  198.  
  199.  
  200. body {
  201. padding: 0;
  202. margin: 0;
  203. font-family: var(--bodyFont), Arial, sans-serif;
  204. font-size:var(--bodyFontSize);
  205. line-height:1.4;
  206. background-color:var(--backgroundThemeColor);
  207. color:var(--bodyTextColor);
  208. word-wrap:break-word;
  209. background-image:url('{image:Background}');
  210. background-repeat: repeat;
  211. background-attachment: fixed;
  212. background-position:center;
  213. }
  214.  
  215. a {
  216. display:inline-block;
  217. position:relative;
  218. color: var(--bodyLinkColor);
  219. text-decoration: none;
  220. -webkit-transition: var(--transitions);
  221. -o-transition: var(--transitions);
  222. transition: var(--transitions);
  223. }
  224.  
  225. a:hover {
  226. color:var(--bodyLinkHoverColor);
  227. -webkit-transition: var(--transitions);
  228. -o-transition: var(--transitions);
  229. transition: var(--transitions);
  230. }
  231.  
  232. a:last-child {
  233. margin-right:0px;
  234. }
  235.  
  236.  
  237. h1, h2 {
  238. margin:15px 0 5px;
  239. display:block;
  240. text-transform:lowercase;
  241. font-size: 16px;
  242. font-weight:var(--boldFontWeight);
  243. color:var(--boldColor);
  244. text-align:var(--postsTextPosition);
  245. }
  246.  
  247.  
  248. h2 a {
  249. color:var(--boldColor);
  250.  
  251. }
  252.  
  253. p {
  254. display: block;
  255. margin-block-start: 0.5em;
  256. margin-block-end: 0.5em;
  257. word-wrap:wrap;
  258. }
  259.  
  260. hr {
  261. width:100px;
  262. margin:10px 0 10px 0;
  263. border-width: var(--bordersSize) 0px 0px 0px;
  264. border-style: var(--bordersStyle);
  265. border-color: var(--bordersColor);
  266. }
  267.  
  268. small, sup, sub {
  269. font-size:calc(var(--bodyFontSize) - 1px);
  270. }
  271.  
  272.  
  273. strong, bold, b {
  274. color:var(--boldColor);
  275. font-weight:var(--boldFontWeight);
  276. }
  277.  
  278. italic, i, em {
  279. color:var(--italicColor);
  280. }
  281.  
  282.  
  283. /* ------------ lists */
  284.  
  285. ul {
  286. margin:15px 0;
  287. list-style:none;
  288. }
  289.  
  290. ul li {
  291. margin:5px 15px;
  292. list-style:none;
  293. -webkit-transition: var(--transitions);
  294. -o-transition: var(--transitions);
  295. transition: var(--transitions);
  296. }
  297.  
  298.  
  299. ul li::before {
  300. content: '\e08f';
  301. font-family:'saturnicons';
  302. font-size:calc(var(--bodyFontSize) - 50%);
  303. bottom:0.5px;
  304. margin-right:7px;
  305. display:inline-block;
  306. vertical-align:middle;
  307. position:relative;
  308. color: var(--bodyLinkColor);
  309. -webkit-transition: var(--transitions);
  310. -o-transition: var(--transitions);
  311. transition: var(--transitions);
  312. }
  313.  
  314. ol {
  315. margin:15px;
  316. }
  317.  
  318. ol li {
  319. margin:5px 15px;
  320. list-style-type: decimal;
  321. }
  322.  
  323.  
  324.  
  325. .container {
  326. width:95%;
  327. max-width:1020px;
  328. height:100vh;
  329. margin:0 auto;
  330. display:grid;
  331. grid-template-rows: 65px auto-fit 65px;
  332. grid-template-areas:
  333. "top-navigation"
  334. "muses"
  335. "bottom-navigation"
  336. ;
  337. align-content: center;
  338. }
  339.  
  340. /* top nav and bottom where the links icons, title, credit are */
  341. .top-navigation,
  342. .bottom-navigation {
  343. width:100%;
  344. display:flex;
  345. justify-content: space-between;
  346. align-items: center;
  347. padding:15px;
  348. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  349. box-sizing:border-box;
  350. }
  351.  
  352. .top-navigation .navigation-links ul,
  353. .bottom-navigation .navigation-links ul {
  354. width:210px;
  355. text-align:center;
  356. margin: 0;
  357. }
  358.  
  359. .navigation-title,
  360. .navigation-description {
  361. max-width: 450px;
  362. text-align:center;
  363. }
  364.  
  365. .navigation-title {
  366. font-weight:var(--topSidebarTitleFontWeight);
  367. font-size:var(--topSidebarTitleFontSize);
  368. color:var(--boldColor);
  369. text-transform:var(--topSidebarTitleTextTransform);
  370. font-style:var(--topSidebarTitleFontStyle);
  371. }
  372.  
  373. .navigation-description {
  374. font-weight:var(--bottomSidebarDescriptionFontWeight);
  375. font-size:var(--bottomSidebarDescriptionFontSize);
  376. text-transform:var(--bottomSidebarDescriptionTextTransform);
  377. font-style:var(--bottomSidebarDescriptionFontStyle);
  378. }
  379.  
  380.  
  381. .navigation-links ul li {
  382. list-style-type:none;
  383. margin: 0;
  384. display:inline-block;
  385. }
  386.  
  387.  
  388. .navigation-links ul li:before {
  389. content: '';
  390. width: 0px;
  391. height: 0px;
  392. margin:0px;
  393. background-color: none;
  394. }
  395.  
  396. .navigation-links ul li .feather {
  397. width: var(--sidebarIconsSize);
  398. height: var(--sidebarIconsSize);
  399. padding:10px;
  400. background-color: var(--musesBackgroundColor);
  401. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  402. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  403. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  404. width: var(--sidebarIconsSize);
  405. height: var(--sidebarIconsSize);
  406. stroke: var(--bodyLinkColor);
  407. }
  408.  
  409.  
  410. .navigation-links li + li {
  411. margin-left:15px;
  412. }
  413.  
  414. .navigation-links ul li .feather:hover {
  415. color: var(--bodyLinkHoverColor);
  416. stroke: var(--bodyLinkHoverColor);
  417. -webkit-transition: all 0.3s ease-in-out;
  418. -o-transition: all 0.3s ease-in-out;
  419. transition: all 0.3s ease-in-out;
  420. }
  421.  
  422. .top-navigation {
  423. grid-area: top-navigation;
  424. }
  425.  
  426. .bottom-navigation {
  427. grid-area: bottom-navigation;
  428. }
  429.  
  430.  
  431.  
  432. /* START OF MUSE CONTENT RELATED */
  433.  
  434.  
  435. /* all muses container / wrapper */
  436. .muse-primary-container,
  437. .muse-secondary-container,
  438. .muse-tertiary-container {
  439. grid-column: 1 / -1;
  440. grid-row: 1 / -1;
  441. }
  442.  
  443.  
  444. .muse-primary-content,
  445. .muse-secondary-content,
  446. .muse-tertiary-content {
  447. position: relative;
  448. display: grid;
  449. grid-template-columns: repeat(auto-fit, 225px);
  450. gap: 15px;
  451. grid-area: muses;
  452. justify-content: center;
  453. align-items: center;
  454. /*padding: 0 0 15px 0;*/
  455. overflow-y: auto;
  456. background: var(--musesBackgroundColor);
  457. height: 70vh;
  458. }
  459.  
  460. .muse-secondary-content {
  461. z-index:10;
  462. display:none;
  463. }
  464.  
  465.  
  466. .muse-primary-content {
  467. z-index:9;
  468. }
  469.  
  470. .muse-tertiary-content {
  471. z-index:9;
  472. display:none;
  473. }
  474.  
  475. .muse-secondary-close {
  476. position:absolute;
  477. top: -1px;
  478. right: 1px;
  479. z-index:15;
  480. }
  481.  
  482. .muse-tertiary-close {
  483. position:absolute;
  484. top: -1px;
  485. right: 1px;
  486. z-index:15;
  487. }
  488.  
  489. /* button that closes the secondary muses */
  490. .muse-secondary-close .feather {
  491. width: var(--sidebarIconsSize);
  492. height: var(--sidebarIconsSize);
  493. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  494. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  495. stroke: var(--bodyLinkColor);
  496. }
  497.  
  498. /* button that closes the tertiary muses */
  499. .muse-tertiary-close .feather {
  500. width: var(--sidebarIconsSize);
  501. height: var(--sidebarIconsSize);
  502. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  503. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  504. stroke: var(--bodyLinkColor);
  505. }
  506.  
  507.  
  508. /* wrapper of all muses (main and secondary) */
  509. .muse-container {
  510. display:grid;
  511. height: 70vh;
  512. padding: 15px 0;
  513. overflow-y: auto;
  514. border-left:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  515. border-right:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  516. background: var(--musesBackgroundColor);
  517. }
  518.  
  519.  
  520. /* START OF EACH MUSE BOX AND THEIR CONTENT */
  521.  
  522.  
  523. /* muse image */
  524.  
  525. .muse-image {
  526. background: rgba(0,0,0,0.8); /* change background color here */
  527. height: 200px;
  528. }
  529.  
  530. .muse-image img {
  531. width:100%;
  532. height:200px;
  533. object-fit: cover;
  534. }
  535.  
  536. .muse-image img:hover {
  537. opacity:0.7;
  538. }
  539.  
  540.  
  541. /* each muse box */
  542. .muse-box {
  543. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  544. height: 255px;
  545. position:relative;
  546. padding:5px;
  547. box-sizing:border-box;
  548. background: var(--backgroundThemeColor);
  549. }
  550.  
  551. /* background where the content appear on image hover */
  552. .muse-overlay {
  553. padding:3px;
  554. position:absolute;
  555. overflow-y: auto;
  556. height:200px;
  557. box-sizing:border-box;
  558. background: rgba(255,255,255, 1); /* change background color here */
  559. top: 5px;
  560. bottom: 5px;
  561. left: 5px;
  562. right: 0;
  563. opacity: 0;
  564. -webkit-transition: var(--transitions);
  565. -o-transition: var(--transitions);
  566. transition: var(--transitions);
  567. }
  568.  
  569.  
  570. .muse-box:hover .muse-overlay {
  571. opacity: 1;
  572. }
  573.  
  574.  
  575. /* muse content when on image hover */
  576. .muse-content {
  577. height:200px;
  578. }
  579.  
  580. .muse-content ul {
  581. margin:10px 0;
  582. }
  583.  
  584. .muse-content ul li {
  585. margin:5px 10px;
  586. }
  587.  
  588.  
  589.  
  590. /* muse content links */
  591. .muse-content-links li {
  592. list-style:none;
  593. display:inline-block;
  594. }
  595.  
  596. .muse-content-links li::before {
  597. content: '';
  598. }
  599.  
  600.  
  601. /* muse content titles */
  602. .muse-content-title {
  603. display:inline-block;
  604. font-weight:var(--boldFontWeight);
  605. text-transform: uppercase;
  606. padding:7px 0;
  607. margin: 2px 3px 3px;
  608. border-bottom: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  609. }
  610.  
  611.  
  612. /* this is where the connections are, two blocks of a p and links */
  613. .muse-content-box {
  614. margin: 0 0 10px;
  615. display:grid;
  616. grid-template-columns: 1fr 1fr;
  617. }
  618.  
  619.  
  620. .muse-content-box div {
  621. margin-left:10px;
  622. margin-top:10px;
  623. }
  624.  
  625.  
  626. .muse-content-box div:first-child {
  627. margin-top:10px;
  628. }
  629.  
  630.  
  631. .muse-content-box p {
  632. font-weight:var(--boldFontWeight);
  633. padding:0;
  634. margin-bottom:0px;
  635. }
  636.  
  637. .muse-content-box p:first-child {
  638. margin-top:0px;
  639. }
  640.  
  641.  
  642. /* muse name and age outside the image and content on hover */
  643. .muse-content-info {
  644. margin:1px 0;
  645. padding:5px;
  646. display:block;
  647. }
  648.  
  649.  
  650. .muse-content-info1,
  651. .muse-content-info1 {
  652. display:flex;
  653. text-transform:uppercase;
  654. font-weight:var(--boldFontWeight);
  655. font-size:12px;
  656. letter-spacing:1px;
  657. }
  658.  
  659.  
  660. .muse-content-info1:after {
  661. content: "";
  662. flex: 1 1;
  663. border-bottom: var(--bordersSize) var(--bordersStyle) var(--bordersColor);;
  664. margin: auto 5px;
  665. }
  666.  
  667.  
  668.  
  669.  
  670.  
  671. /* DO NOT REMOVE */
  672.  
  673. .mcredito {
  674. width:210px;
  675. display:flex;
  676. justify-content: flex-end;
  677. }
  678.  
  679. .mcredito a {
  680. margin:0;
  681. padding:0;
  682. font-weight:var(--boldFontWeight);
  683. text-transform:lowercase;
  684. text-align:center;
  685. color:var(--bodyLinkColor);
  686. padding:8px 12px;
  687. background: var(--musesBackgroundColor);
  688. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  689. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  690. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  691. }
  692.  
  693. .mcredito a:hover {
  694. color:var(--bodyLinkHoverColor);
  695.  
  696. </style>
  697. </head>
  698. <body>
  699. <div class="container">
  700. <div class="top-navigation">
  701. <nav class="navigation-links">
  702. <ul>
  703. <li>
  704. <a href="/" title="go back">
  705. <i data-feather="home" class="feather"></i>
  706. </a>
  707. </li>
  708.  
  709. <li>
  710. <a href="/ask" title="questions">
  711. <i data-feather="mail" class="feather"></i>
  712. </a>
  713. </li>
  714.  
  715. <li>
  716. <a href="/" title="out of character">
  717. <i data-feather="eye" class="feather"></i>
  718. </a>
  719. </li>
  720.  
  721. <li>
  722. <a href="/" title="wanted op">
  723. <i data-feather="heart" class="feather"></i>
  724. </a>
  725. </li>
  726. </ul>
  727. </nav>
  728.  
  729. <div class="navigation-title">lorem ipsum consectetuer mattis porta urna, adipiscing.</div>
  730.  
  731. <nav class="navigation-links">
  732. <ul>
  733. <li>
  734. <a href="#" class="toggle-secondary-link" title="secondary muses">
  735. <i data-feather="user" class="feather"></i>
  736. </a>
  737. </li>
  738. <li>
  739. <a href="#" class="toggle-tertiary-link" title="tertiary muses">
  740. <i data-feather="user" class="feather"></i>
  741. </a>
  742. </li>
  743.  
  744. <li>
  745. <a href="/" title="wishlist">
  746. <i data-feather="book-open" class="feather"></i>
  747. </a>
  748. </li>
  749.  
  750. <li>
  751. <a href="/" title="open starters">
  752. <i data-feather="edit" class="feather"></i>
  753. </a>
  754. </li>
  755. </ul>
  756. </nav>
  757. </div>
  758.  
  759. <div class="muse-container"> <!-- MUSES CONTAINER // do not touch! -->
  760.  
  761. <div class="muse-primary-container"> <!-- START OF MAIN MUSES CONTAINER // do not touch! -->
  762. <div class="muse-primary-content"> <!-- START OF MAIN MUSES CONTENT // do not touch! -->
  763.  
  764.  
  765. <div class="muse-box"> <!-- MAIN 01 - start of each muse box // copy from here to add more muses -->
  766. <div class="muse-image">
  767. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  768. </div>
  769. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  770. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  771. <ul class="muse-content-links">
  772. <li><a href="/tagged/">interactions</a></li>
  773. <li><a href="/tagged/">photography</a></li>
  774. <li><a href="/tagged/">musings</a></li>
  775. <li><a href="/tagged/">starter</a></li>
  776. <li><a href="/tagged/">likes</a></li>
  777. <li><a href="/tagged/">texts</a></li>
  778. </ul>
  779.  
  780. <div class="muse-content-title">
  781. <strong> about muse name </strong>
  782. </div>
  783. <ul class="muse-content-stats">
  784. <li><strong>pronouns:</strong> she/her</li>
  785. <li><strong>sexuality: </strong>sexuality</li>
  786. <li><strong>occupation: </strong>occupation</li>
  787. <li>
  788. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  789. materialistic
  790. </li>
  791. <li><strong>faceclaim:</strong> faceclaim here</li>
  792. </ul>
  793.  
  794. <div class="muse-content-title">
  795. <strong> additional info </strong>
  796. </div>
  797. <ul class="muse-content-stats">
  798. <li>
  799. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  800. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  801. </li>
  802. <li>lorem ipsum consectetuer mattis porta urna</li>
  803. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  804. <li>
  805. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  806. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  807. </li>
  808. </ul>
  809.  
  810. <div class="muse-content-title">
  811. <strong> connections </strong>
  812. </div>
  813.  
  814. <div class="muse-content-box">
  815. <div>
  816. <p>muse name</p>
  817. <a href="">threads</a> / <a href="">musings</a>
  818. </div>
  819. <div>
  820. <p>muse name</p>
  821. <a href="">threads</a> / <a href="">musings</a>
  822. </div>
  823. <div>
  824. <p>muse name</p>
  825. <a href="">threads</a> / <a href="">musings</a>
  826. </div>
  827. <div>
  828. <p>muse name</p>
  829. <a href="">threads</a> / <a href="">musings</a>
  830. </div>
  831. </div>
  832.  
  833. <div class="muse-content-title">
  834. <strong> supernatural verse </strong>
  835. </div>
  836.  
  837. <ul class="muse-content-stats">
  838. <li><strong>age: </strong> age</li>
  839. <li><strong>species: </strong>species</li>
  840. <li>
  841. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  842. materialistic
  843. </li>
  844. </ul>
  845. </div> <!-- end muse content // everything that appears when you hover the image -->
  846. </div> <!-- end muse content overlay // the background that appears on hover -->
  847.  
  848. <div class="muse-content-info">
  849. <!-- muse name and info -->
  850. <div class="muse-content-info1">Willa Vasconcelos</div>
  851. <div class="muse-content-info1">27 years old</div>
  852. </div> <!-- end muse name and info -->
  853. </div> <!-- end of each muse box // copy all to here to add more muses -->
  854.  
  855.  
  856.  
  857.  
  858.  
  859. <div class="muse-box"> <!-- MAIN MUSE 02 - start of each muse box // copy from here to add more muses -->
  860. <div class="muse-image">
  861. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  862. </div>
  863. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  864. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  865. <div class="muse-content-title">
  866. <strong> use the class muse-content-title to add titles </strong>
  867. </div>
  868. <ul class="muse-content-stats">
  869. <li>anything you want to add one after another</li>
  870. <li>i recommend you to use lists</li>
  871. <li>with this class muse-content-stats on the ul</li>
  872. </ul>
  873.  
  874. <div class="muse-content-title">
  875. <strong> use html tags to mark things like you want to </strong>
  876. </div>
  877.  
  878. <p>
  879. <strong> this is bold/strong </strong>, <em>this is italic</em>,
  880. <u>this is underline</u>, <s>this is stroke</s>
  881. </p>
  882. <p>use tags p to add paragraphs or random texts that are not lists or whatever</p>
  883. <p>
  884. as many as you need, but don't overdo it. lorem ipsum consectetuer mattis porta
  885. urna, adipiscing elit.
  886. </p>
  887.  
  888. <div class="muse-content-title">
  889. <strong> connections </strong>
  890. </div>
  891.  
  892. <div class="muse-content-box">
  893. <div>
  894. <p>add extra links or anything</p>
  895. <a href="">threads</a> / <a href="">musings</a>
  896. </div>
  897. <div>
  898. <p>muse name</p>
  899. <a href="">threads</a> / <a href="">musings</a>
  900. </div>
  901. <div>
  902. <p>muse name</p>
  903. <a href="">threads</a> / <a href="">musings</a>
  904. </div>
  905. <div>
  906. <p>do it between the divs</p>
  907. <a href="">threads</a> / <a href="">musings</a>
  908. </div>
  909. </div>
  910.  
  911. <div class="muse-content-title">
  912. <strong> supernatural verse </strong>
  913. </div>
  914.  
  915. <ul class="muse-content-stats">
  916. <li><strong>age: </strong> age</li>
  917. <li><strong>species: </strong>species</li>
  918. <li>
  919. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  920. materialistic
  921. </li>
  922. </ul>
  923. </div> <!-- end muse content // everything that appears when you hover the image -->
  924. </div> <!-- end muse content overlay // the background that appears on hover -->
  925.  
  926. <div class="muse-content-info">
  927. <!-- muse name and info -->
  928. <div class="muse-content-info1">hover here to know</div>
  929. <div class="muse-content-info1">tips about the content</div>
  930. </div> <!-- end muse name and info -->
  931. </div> <!-- end of each muse box // copy all to here to add more muses -->
  932.  
  933.  
  934.  
  935.  
  936.  
  937. <div class="muse-box"> <!-- MAIN MUSE 03 - start of each muse box // copy from here to add more muses -->
  938. <div class="muse-image">
  939. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  940. </div>
  941. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  942. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  943. <ul class="muse-content-links">
  944. <li><a href="/tagged/">interactions</a></li>
  945. <li><a href="/tagged/">photography</a></li>
  946. <li><a href="/tagged/">musings</a></li>
  947. <li><a href="/tagged/">starter</a></li>
  948. <li><a href="/tagged/">likes</a></li>
  949. <li><a href="/tagged/">texts</a></li>
  950. </ul>
  951.  
  952. <div class="muse-content-title">
  953. <strong> about muse name </strong>
  954. </div>
  955. <ul class="muse-content-stats">
  956. <li><strong>pronouns:</strong> she/her</li>
  957. <li><strong>sexuality: </strong>sexuality</li>
  958. <li><strong>occupation: </strong>occupation</li>
  959. <li>
  960. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  961. materialistic
  962. </li>
  963. <li><strong>faceclaim:</strong> faceclaim here</li>
  964. </ul>
  965.  
  966. <div class="muse-content-title">
  967. <strong> additional info </strong>
  968. </div>
  969. <ul class="muse-content-stats">
  970. <li>
  971. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  972. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  973. </li>
  974. <li>lorem ipsum consectetuer mattis porta urna</li>
  975. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  976. <li>
  977. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  978. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  979. </li>
  980. </ul>
  981.  
  982. <div class="muse-content-title">
  983. <strong> connections </strong>
  984. </div>
  985.  
  986. <div class="muse-content-box">
  987. <div>
  988. <p>muse name</p>
  989. <a href="">threads</a> / <a href="">musings</a>
  990. </div>
  991. <div>
  992. <p>muse name</p>
  993. <a href="">threads</a> / <a href="">musings</a>
  994. </div>
  995. <div>
  996. <p>muse name</p>
  997. <a href="">threads</a> / <a href="">musings</a>
  998. </div>
  999. <div>
  1000. <p>muse name</p>
  1001. <a href="">threads</a> / <a href="">musings</a>
  1002. </div>
  1003. </div>
  1004.  
  1005. <div class="muse-content-title">
  1006. <strong> supernatural verse </strong>
  1007. </div>
  1008.  
  1009. <ul class="muse-content-stats">
  1010. <li><strong>age: </strong> age</li>
  1011. <li><strong>species: </strong>species</li>
  1012. <li>
  1013. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1014. materialistic
  1015. </li>
  1016. </ul>
  1017. </div> <!-- end muse content // everything that appears when you hover the image -->
  1018. </div> <!-- end muse content overlay // the background that appears on hover -->
  1019.  
  1020. <div class="muse-content-info">
  1021. <!-- muse name and info -->
  1022. <div class="muse-content-info1">muse name</div>
  1023. </div> <!-- end muse name and info -->
  1024. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1025.  
  1026.  
  1027.  
  1028.  
  1029.  
  1030. <div class="muse-box"> <!-- MAIN MUSE 04 - start of each muse box // copy from here to add more muses -->
  1031. <div class="muse-image">
  1032. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  1033. </div>
  1034. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1035. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1036. <ul class="muse-content-links">
  1037. <li><a href="/tagged/">interactions</a></li>
  1038. <li><a href="/tagged/">photography</a></li>
  1039. <li><a href="/tagged/">musings</a></li>
  1040. <li><a href="/tagged/">starter</a></li>
  1041. <li><a href="/tagged/">likes</a></li>
  1042. <li><a href="/tagged/">texts</a></li>
  1043. </ul>
  1044.  
  1045. <div class="muse-content-title">
  1046. <strong> about muse name </strong>
  1047. </div>
  1048. <ul class="muse-content-stats">
  1049. <li><strong>pronouns:</strong> she/her</li>
  1050. <li><strong>sexuality: </strong>sexuality</li>
  1051. <li><strong>occupation: </strong>occupation</li>
  1052. <li>
  1053. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1054. materialistic
  1055. </li>
  1056. <li><strong>faceclaim:</strong> faceclaim here</li>
  1057. </ul>
  1058.  
  1059. <div class="muse-content-title">
  1060. <strong> additional info </strong>
  1061. </div>
  1062. <ul class="muse-content-stats">
  1063. <li>
  1064. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1065. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1066. </li>
  1067. <li>lorem ipsum consectetuer mattis porta urna</li>
  1068. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1069. <li>
  1070. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1071. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1072. </li>
  1073. </ul>
  1074.  
  1075. <div class="muse-content-title">
  1076. <strong> connections </strong>
  1077. </div>
  1078.  
  1079. <div class="muse-content-box">
  1080. <div>
  1081. <p>muse name</p>
  1082. <a href="">threads</a> / <a href="">musings</a>
  1083. </div>
  1084. <div>
  1085. <p>muse name</p>
  1086. <a href="">threads</a> / <a href="">musings</a>
  1087. </div>
  1088. <div>
  1089. <p>muse name</p>
  1090. <a href="">threads</a> / <a href="">musings</a>
  1091. </div>
  1092. <div>
  1093. <p>muse name</p>
  1094. <a href="">threads</a> / <a href="">musings</a>
  1095. </div>
  1096. </div>
  1097.  
  1098. <div class="muse-content-title">
  1099. <strong> supernatural verse </strong>
  1100. </div>
  1101.  
  1102. <ul class="muse-content-stats">
  1103. <li><strong>age: </strong> age</li>
  1104. <li><strong>species: </strong>species</li>
  1105. <li>
  1106. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1107. materialistic
  1108. </li>
  1109. </ul>
  1110. </div> <!-- end muse content // everything that appears when you hover the image -->
  1111. </div> <!-- end muse content overlay // the background that appears on hover -->
  1112.  
  1113. <div class="muse-content-info">
  1114. <!-- muse name and info -->
  1115. <div class="muse-content-info1">muse name</div>
  1116. <div class="muse-content-info1">age or anything</div>
  1117. </div> <!-- end muse name and info -->
  1118. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1119.  
  1120.  
  1121.  
  1122.  
  1123.  
  1124.  
  1125.  
  1126. <div class="muse-box"> <!-- MAIN MUSE 05 - start of each muse box // copy from here to add more muses -->
  1127. <div class="muse-image">
  1128. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  1129. </div>
  1130. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1131. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1132. <ul class="muse-content-links">
  1133. <li><a href="/tagged/">interactions</a></li>
  1134. <li><a href="/tagged/">photography</a></li>
  1135. <li><a href="/tagged/">musings</a></li>
  1136. <li><a href="/tagged/">starter</a></li>
  1137. <li><a href="/tagged/">likes</a></li>
  1138. <li><a href="/tagged/">texts</a></li>
  1139. </ul>
  1140.  
  1141. <div class="muse-content-title">
  1142. <strong> about muse name </strong>
  1143. </div>
  1144. <ul class="muse-content-stats">
  1145. <li><strong>pronouns:</strong> she/her</li>
  1146. <li><strong>sexuality: </strong>sexuality</li>
  1147. <li><strong>occupation: </strong>occupation</li>
  1148. <li>
  1149. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1150. materialistic
  1151. </li>
  1152. <li><strong>faceclaim:</strong> faceclaim here</li>
  1153. </ul>
  1154.  
  1155. <div class="muse-content-title">
  1156. <strong> additional info </strong>
  1157. </div>
  1158. <ul class="muse-content-stats">
  1159. <li>
  1160. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1161. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1162. </li>
  1163. <li>lorem ipsum consectetuer mattis porta urna</li>
  1164. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1165. <li>
  1166. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1167. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1168. </li>
  1169. </ul>
  1170.  
  1171. <div class="muse-content-title">
  1172. <strong> connections </strong>
  1173. </div>
  1174.  
  1175. <div class="muse-content-box">
  1176. <div>
  1177. <p>muse name</p>
  1178. <a href="">threads</a> / <a href="">musings</a>
  1179. </div>
  1180. <div>
  1181. <p>muse name</p>
  1182. <a href="">threads</a> / <a href="">musings</a>
  1183. </div>
  1184. <div>
  1185. <p>muse name</p>
  1186. <a href="">threads</a> / <a href="">musings</a>
  1187. </div>
  1188. <div>
  1189. <p>muse name</p>
  1190. <a href="">threads</a> / <a href="">musings</a>
  1191. </div>
  1192. </div>
  1193.  
  1194. <div class="muse-content-title">
  1195. <strong> supernatural verse </strong>
  1196. </div>
  1197.  
  1198. <ul class="muse-content-stats">
  1199. <li><strong>age: </strong> age</li>
  1200. <li><strong>species: </strong>species</li>
  1201. <li>
  1202. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1203. materialistic
  1204. </li>
  1205. </ul>
  1206. </div> <!-- end muse content // everything that appears when you hover the image -->
  1207. </div> <!-- end muse content overlay // the background that appears on hover -->
  1208.  
  1209. <div class="muse-content-info">
  1210. <!-- muse name and info -->
  1211. <div class="muse-content-info1">muse name</div>
  1212. </div> <!-- end muse name and info -->
  1213. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1214.  
  1215.  
  1216.  
  1217.  
  1218.  
  1219.  
  1220.  
  1221. <div class="muse-box"> <!-- MAIN MUSE 06 - start of each muse box // copy from here to add more muses -->
  1222. <div class="muse-image">
  1223. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  1224. </div>
  1225. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1226. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1227. <ul class="muse-content-links">
  1228. <li><a href="/tagged/">interactions</a></li>
  1229. <li><a href="/tagged/">photography</a></li>
  1230. <li><a href="/tagged/">musings</a></li>
  1231. <li><a href="/tagged/">starter</a></li>
  1232. <li><a href="/tagged/">likes</a></li>
  1233. <li><a href="/tagged/">texts</a></li>
  1234. </ul>
  1235.  
  1236. <div class="muse-content-title">
  1237. <strong> about muse name </strong>
  1238. </div>
  1239. <ul class="muse-content-stats">
  1240. <li><strong>pronouns:</strong> she/her</li>
  1241. <li><strong>sexuality: </strong>sexuality</li>
  1242. <li><strong>occupation: </strong>occupation</li>
  1243. <li>
  1244. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1245. materialistic
  1246. </li>
  1247. <li><strong>faceclaim:</strong> faceclaim here</li>
  1248. </ul>
  1249.  
  1250. <div class="muse-content-title">
  1251. <strong> additional info </strong>
  1252. </div>
  1253. <ul class="muse-content-stats">
  1254. <li>
  1255. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1256. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1257. </li>
  1258. <li>lorem ipsum consectetuer mattis porta urna</li>
  1259. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1260. <li>
  1261. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1262. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1263. </li>
  1264. </ul>
  1265.  
  1266. <div class="muse-content-title">
  1267. <strong> connections </strong>
  1268. </div>
  1269.  
  1270. <div class="muse-content-box">
  1271. <div>
  1272. <p>muse name</p>
  1273. <a href="">threads</a> / <a href="">musings</a>
  1274. </div>
  1275. <div>
  1276. <p>muse name</p>
  1277. <a href="">threads</a> / <a href="">musings</a>
  1278. </div>
  1279. <div>
  1280. <p>muse name</p>
  1281. <a href="">threads</a> / <a href="">musings</a>
  1282. </div>
  1283. <div>
  1284. <p>muse name</p>
  1285. <a href="">threads</a> / <a href="">musings</a>
  1286. </div>
  1287. </div>
  1288.  
  1289. <div class="muse-content-title">
  1290. <strong> supernatural verse </strong>
  1291. </div>
  1292.  
  1293. <ul class="muse-content-stats">
  1294. <li><strong>age: </strong> age</li>
  1295. <li><strong>species: </strong>species</li>
  1296. <li>
  1297. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1298. materialistic
  1299. </li>
  1300. </ul>
  1301. </div> <!-- end muse content // everything that appears when you hover the image -->
  1302. </div> <!-- end muse content overlay // the background that appears on hover -->
  1303.  
  1304. <div class="muse-content-info">
  1305. <!-- muse name and info -->
  1306. <div class="muse-content-info1">muse name</div>
  1307. <div class="muse-content-info1">age or anything</div>
  1308. </div> <!-- end muse name and info -->
  1309. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1310.  
  1311.  
  1312.  
  1313.  
  1314.  
  1315.  
  1316. <div class="muse-box"> <!-- MAIN MUSE 07 - start of each muse box // copy from here to add more muses -->
  1317. <div class="muse-image">
  1318. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  1319. </div>
  1320. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1321. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1322. <ul class="muse-content-links">
  1323. <li><a href="/tagged/">interactions</a></li>
  1324. <li><a href="/tagged/">photography</a></li>
  1325. <li><a href="/tagged/">musings</a></li>
  1326. <li><a href="/tagged/">starter</a></li>
  1327. <li><a href="/tagged/">likes</a></li>
  1328. <li><a href="/tagged/">texts</a></li>
  1329. </ul>
  1330.  
  1331. <div class="muse-content-title">
  1332. <strong> about muse name </strong>
  1333. </div>
  1334. <ul class="muse-content-stats">
  1335. <li><strong>pronouns:</strong> she/her</li>
  1336. <li><strong>sexuality: </strong>sexuality</li>
  1337. <li><strong>occupation: </strong>occupation</li>
  1338. <li>
  1339. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1340. materialistic
  1341. </li>
  1342. <li><strong>faceclaim:</strong> faceclaim here</li>
  1343. </ul>
  1344.  
  1345. <div class="muse-content-title">
  1346. <strong> additional info </strong>
  1347. </div>
  1348. <ul class="muse-content-stats">
  1349. <li>
  1350. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1351. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1352. </li>
  1353. <li>lorem ipsum consectetuer mattis porta urna</li>
  1354. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1355. <li>
  1356. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1357. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1358. </li>
  1359. </ul>
  1360.  
  1361. <div class="muse-content-title">
  1362. <strong> connections </strong>
  1363. </div>
  1364.  
  1365. <div class="muse-content-box">
  1366. <div>
  1367. <p>muse name</p>
  1368. <a href="">threads</a> / <a href="">musings</a>
  1369. </div>
  1370. <div>
  1371. <p>muse name</p>
  1372. <a href="">threads</a> / <a href="">musings</a>
  1373. </div>
  1374. <div>
  1375. <p>muse name</p>
  1376. <a href="">threads</a> / <a href="">musings</a>
  1377. </div>
  1378. <div>
  1379. <p>muse name</p>
  1380. <a href="">threads</a> / <a href="">musings</a>
  1381. </div>
  1382. </div>
  1383.  
  1384. <div class="muse-content-title">
  1385. <strong> supernatural verse </strong>
  1386. </div>
  1387.  
  1388. <ul class="muse-content-stats">
  1389. <li><strong>age: </strong> age</li>
  1390. <li><strong>species: </strong>species</li>
  1391. <li>
  1392. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1393. materialistic
  1394. </li>
  1395. </ul>
  1396. </div> <!-- end muse content // everything that appears when you hover the image -->
  1397. </div> <!-- end muse content overlay // the background that appears on hover -->
  1398.  
  1399. <div class="muse-content-info">
  1400. <!-- muse name and info -->
  1401. <div class="muse-content-info1">muse name</div>
  1402. <div class="muse-content-info1">age or anything</div>
  1403. </div> <!-- end muse name and info -->
  1404. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1405.  
  1406.  
  1407.  
  1408.  
  1409.  
  1410. <div class="muse-box"> <!-- MAIN MUSE 08 - start of each muse box // copy from here to add more muses -->
  1411. <div class="muse-image">
  1412. <img src="https://static.tumblr.com/9levqhj/PFSqk1w77/2s.png" />
  1413. </div>
  1414. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1415. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1416. <ul class="muse-content-links">
  1417. <li><a href="/tagged/">interactions</a></li>
  1418. <li><a href="/tagged/">photography</a></li>
  1419. <li><a href="/tagged/">musings</a></li>
  1420. <li><a href="/tagged/">starter</a></li>
  1421. <li><a href="/tagged/">likes</a></li>
  1422. <li><a href="/tagged/">texts</a></li>
  1423. </ul>
  1424.  
  1425. <div class="muse-content-title">
  1426. <strong> about muse name </strong>
  1427. </div>
  1428. <ul class="muse-content-stats">
  1429. <li><strong>pronouns:</strong> she/her</li>
  1430. <li><strong>sexuality: </strong>sexuality</li>
  1431. <li><strong>occupation: </strong>occupation</li>
  1432. <li>
  1433. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1434. materialistic
  1435. </li>
  1436. <li><strong>faceclaim:</strong> faceclaim here</li>
  1437. </ul>
  1438.  
  1439. <div class="muse-content-title">
  1440. <strong> additional info </strong>
  1441. </div>
  1442. <ul class="muse-content-stats">
  1443. <li>
  1444. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1445. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1446. </li>
  1447. <li>lorem ipsum consectetuer mattis porta urna</li>
  1448. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1449. <li>
  1450. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1451. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1452. </li>
  1453. </ul>
  1454.  
  1455. <div class="muse-content-title">
  1456. <strong> connections </strong>
  1457. </div>
  1458.  
  1459. <div class="muse-content-box">
  1460. <div>
  1461. <p>muse name</p>
  1462. <a href="">threads</a> / <a href="">musings</a>
  1463. </div>
  1464. <div>
  1465. <p>muse name</p>
  1466. <a href="">threads</a> / <a href="">musings</a>
  1467. </div>
  1468. <div>
  1469. <p>muse name</p>
  1470. <a href="">threads</a> / <a href="">musings</a>
  1471. </div>
  1472. <div>
  1473. <p>muse name</p>
  1474. <a href="">threads</a> / <a href="">musings</a>
  1475. </div>
  1476. </div>
  1477.  
  1478. <div class="muse-content-title">
  1479. <strong> supernatural verse </strong>
  1480. </div>
  1481.  
  1482. <ul class="muse-content-stats">
  1483. <li><strong>age: </strong> age</li>
  1484. <li><strong>species: </strong>species</li>
  1485. <li>
  1486. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1487. materialistic
  1488. </li>
  1489. </ul>
  1490. </div> <!-- end muse content // everything that appears when you hover the image -->
  1491. </div> <!-- end muse content overlay // the background that appears on hover -->
  1492.  
  1493. <div class="muse-content-info">
  1494. <!-- muse name and info -->
  1495. <div class="muse-content-info1">muse name</div>
  1496. <div class="muse-content-info1">age or anything</div>
  1497. </div> <!-- end muse name and info -->
  1498. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1499.  
  1500.  
  1501.  
  1502.  
  1503.  
  1504.  
  1505.  
  1506.  
  1507. </div> <!-- END OF MAIN MUSES CONTENT // do not touch! -->
  1508. </div> <!-- END OF MAIN MUSES CONTAINER // do not touch! -->
  1509.  
  1510.  
  1511.  
  1512. <!---------------------------------------------------------------------->
  1513.  
  1514.  
  1515.  
  1516. <div class="muse-secondary-container"> <!-- START OF SECONDARY MUSES CONTAINER // do not touch! -->
  1517. <div class="muse-secondary-content"> <!-- START OF SECONDARY MUSES CONTENT // do not touch! -->
  1518. <span class="muse-secondary-close" onclick="this.parentElement.style.display='none';">
  1519. <a href="#" title="close tab"> <i data-feather="x-circle" class="feather"></i> </a>
  1520. </span>
  1521.  
  1522.  
  1523.  
  1524. <div class="muse-box"> <!-- SECONDARY MUSE 01 - start of each muse box // copy from here to add more muses -->
  1525. <div class="muse-image">
  1526. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  1527. </div>
  1528. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1529. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1530. <ul class="muse-content-links">
  1531. <li><a href="/tagged/">interactions</a></li>
  1532. <li><a href="/tagged/">photography</a></li>
  1533. <li><a href="/tagged/">musings</a></li>
  1534. <li><a href="/tagged/">starter</a></li>
  1535. <li><a href="/tagged/">likes</a></li>
  1536. <li><a href="/tagged/">texts</a></li>
  1537. </ul>
  1538.  
  1539. <div class="muse-content-title">
  1540. <strong> about muse name </strong>
  1541. </div>
  1542. <ul class="muse-content-stats">
  1543. <li><strong>pronouns:</strong> she/her</li>
  1544. <li><strong>sexuality: </strong>sexuality</li>
  1545. <li><strong>occupation: </strong>occupation</li>
  1546. <li>
  1547. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1548. materialistic
  1549. </li>
  1550. <li><strong>faceclaim:</strong> faceclaim here</li>
  1551. </ul>
  1552.  
  1553. <div class="muse-content-title">
  1554. <strong> additional info </strong>
  1555. </div>
  1556. <ul class="muse-content-stats">
  1557. <li>
  1558. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1559. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1560. </li>
  1561. <li>lorem ipsum consectetuer mattis porta urna</li>
  1562. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1563. <li>
  1564. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1565. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1566. </li>
  1567. </ul>
  1568.  
  1569. <div class="muse-content-title">
  1570. <strong> connections </strong>
  1571. </div>
  1572.  
  1573. <div class="muse-content-box">
  1574. <div>
  1575. <p>muse name</p>
  1576. <a href="">threads</a> / <a href="">musings</a>
  1577. </div>
  1578. <div>
  1579. <p>muse name</p>
  1580. <a href="">threads</a> / <a href="">musings</a>
  1581. </div>
  1582. <div>
  1583. <p>muse name</p>
  1584. <a href="">threads</a> / <a href="">musings</a>
  1585. </div>
  1586. <div>
  1587. <p>muse name</p>
  1588. <a href="">threads</a> / <a href="">musings</a>
  1589. </div>
  1590. </div>
  1591.  
  1592. <div class="muse-content-title">
  1593. <strong> supernatural verse </strong>
  1594. </div>
  1595.  
  1596. <ul class="muse-content-stats">
  1597. <li><strong>age: </strong> age</li>
  1598. <li><strong>species: </strong>species</li>
  1599. <li>
  1600. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1601. materialistic
  1602. </li>
  1603. </ul>
  1604. </div> <!-- end muse content // everything that appears when you hover the image -->
  1605. </div> <!-- end muse content overlay // the background that appears on hover -->
  1606.  
  1607. <div class="muse-content-info">
  1608. <!-- muse name and info -->
  1609. <div class="muse-content-info1">muse name</div>
  1610. <div class="muse-content-info1">age or anything</div>
  1611. </div> <!-- end muse name and info -->
  1612. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1613.  
  1614.  
  1615.  
  1616.  
  1617.  
  1618.  
  1619. <div class="muse-box"> <!-- SECONDARY MUSE 02 - start of each muse box // copy from here to add more muses -->
  1620. <div class="muse-image">
  1621. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  1622. </div>
  1623. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1624. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1625. <ul class="muse-content-links">
  1626. <li><a href="/tagged/">interactions</a></li>
  1627. <li><a href="/tagged/">photography</a></li>
  1628. <li><a href="/tagged/">musings</a></li>
  1629. <li><a href="/tagged/">starter</a></li>
  1630. <li><a href="/tagged/">likes</a></li>
  1631. <li><a href="/tagged/">texts</a></li>
  1632. </ul>
  1633.  
  1634. <div class="muse-content-title">
  1635. <strong> about muse name </strong>
  1636. </div>
  1637. <ul class="muse-content-stats">
  1638. <li><strong>pronouns:</strong> she/her</li>
  1639. <li><strong>sexuality: </strong>sexuality</li>
  1640. <li><strong>occupation: </strong>occupation</li>
  1641. <li>
  1642. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1643. materialistic
  1644. </li>
  1645. <li><strong>faceclaim:</strong> faceclaim here</li>
  1646. </ul>
  1647.  
  1648. <div class="muse-content-title">
  1649. <strong> additional info </strong>
  1650. </div>
  1651. <ul class="muse-content-stats">
  1652. <li>
  1653. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1654. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1655. </li>
  1656. <li>lorem ipsum consectetuer mattis porta urna</li>
  1657. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1658. <li>
  1659. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1660. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1661. </li>
  1662. </ul>
  1663.  
  1664. <div class="muse-content-title">
  1665. <strong> connections </strong>
  1666. </div>
  1667.  
  1668. <div class="muse-content-box">
  1669. <div>
  1670. <p>muse name</p>
  1671. <a href="">threads</a> / <a href="">musings</a>
  1672. </div>
  1673. <div>
  1674. <p>muse name</p>
  1675. <a href="">threads</a> / <a href="">musings</a>
  1676. </div>
  1677. <div>
  1678. <p>muse name</p>
  1679. <a href="">threads</a> / <a href="">musings</a>
  1680. </div>
  1681. <div>
  1682. <p>muse name</p>
  1683. <a href="">threads</a> / <a href="">musings</a>
  1684. </div>
  1685. </div>
  1686.  
  1687. <div class="muse-content-title">
  1688. <strong> supernatural verse </strong>
  1689. </div>
  1690.  
  1691. <ul class="muse-content-stats">
  1692. <li><strong>age: </strong> age</li>
  1693. <li><strong>species: </strong>species</li>
  1694. <li>
  1695. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1696. materialistic
  1697. </li>
  1698. </ul>
  1699. </div> <!-- end muse content // everything that appears when you hover the image -->
  1700. </div> <!-- end muse content overlay // the background that appears on hover -->
  1701.  
  1702. <div class="muse-content-info">
  1703. <!-- muse name and info -->
  1704. <div class="muse-content-info1">muse name</div>
  1705. <div class="muse-content-info1">age or anything</div>
  1706. </div> <!-- end muse name and info -->
  1707. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1708.  
  1709.  
  1710.  
  1711.  
  1712.  
  1713. <div class="muse-box"> <!-- SECONDARY MUSE 03 - start of each muse box // copy from here to add more muses -->
  1714. <div class="muse-image">
  1715. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  1716. </div>
  1717. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1718. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1719. <ul class="muse-content-links">
  1720. <li><a href="/tagged/">interactions</a></li>
  1721. <li><a href="/tagged/">photography</a></li>
  1722. <li><a href="/tagged/">musings</a></li>
  1723. <li><a href="/tagged/">starter</a></li>
  1724. <li><a href="/tagged/">likes</a></li>
  1725. <li><a href="/tagged/">texts</a></li>
  1726. </ul>
  1727.  
  1728. <div class="muse-content-title">
  1729. <strong> about muse name </strong>
  1730. </div>
  1731. <ul class="muse-content-stats">
  1732. <li><strong>pronouns:</strong> she/her</li>
  1733. <li><strong>sexuality: </strong>sexuality</li>
  1734. <li><strong>occupation: </strong>occupation</li>
  1735. <li>
  1736. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1737. materialistic
  1738. </li>
  1739. <li><strong>faceclaim:</strong> faceclaim here</li>
  1740. </ul>
  1741.  
  1742. <div class="muse-content-title">
  1743. <strong> additional info </strong>
  1744. </div>
  1745. <ul class="muse-content-stats">
  1746. <li>
  1747. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1748. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1749. </li>
  1750. <li>lorem ipsum consectetuer mattis porta urna</li>
  1751. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1752. <li>
  1753. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1754. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1755. </li>
  1756. </ul>
  1757.  
  1758. <div class="muse-content-title">
  1759. <strong> connections </strong>
  1760. </div>
  1761.  
  1762. <div class="muse-content-box">
  1763. <div>
  1764. <p>muse name</p>
  1765. <a href="">threads</a> / <a href="">musings</a>
  1766. </div>
  1767. <div>
  1768. <p>muse name</p>
  1769. <a href="">threads</a> / <a href="">musings</a>
  1770. </div>
  1771. <div>
  1772. <p>muse name</p>
  1773. <a href="">threads</a> / <a href="">musings</a>
  1774. </div>
  1775. <div>
  1776. <p>muse name</p>
  1777. <a href="">threads</a> / <a href="">musings</a>
  1778. </div>
  1779. </div>
  1780.  
  1781. <div class="muse-content-title">
  1782. <strong> supernatural verse </strong>
  1783. </div>
  1784.  
  1785. <ul class="muse-content-stats">
  1786. <li><strong>age: </strong> age</li>
  1787. <li><strong>species: </strong>species</li>
  1788. <li>
  1789. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1790. materialistic
  1791. </li>
  1792. </ul>
  1793. </div> <!-- end muse content // everything that appears when you hover the image -->
  1794. </div> <!-- end muse content overlay // the background that appears on hover -->
  1795.  
  1796. <div class="muse-content-info">
  1797. <!-- muse name and info -->
  1798. <div class="muse-content-info1">muse name</div>
  1799. <div class="muse-content-info1">age or anything</div>
  1800. </div> <!-- end muse name and info -->
  1801. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1802.  
  1803.  
  1804.  
  1805.  
  1806.  
  1807.  
  1808. <div class="muse-box"> <!-- SECONDARY MUSE 04 - start of each muse box // copy from here to add more muses -->
  1809. <div class="muse-image">
  1810. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  1811. </div>
  1812. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1813. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1814. <ul class="muse-content-links">
  1815. <li><a href="/tagged/">interactions</a></li>
  1816. <li><a href="/tagged/">photography</a></li>
  1817. <li><a href="/tagged/">musings</a></li>
  1818. <li><a href="/tagged/">starter</a></li>
  1819. <li><a href="/tagged/">likes</a></li>
  1820. <li><a href="/tagged/">texts</a></li>
  1821. </ul>
  1822.  
  1823. <div class="muse-content-title">
  1824. <strong> about muse name </strong>
  1825. </div>
  1826. <ul class="muse-content-stats">
  1827. <li><strong>pronouns:</strong> she/her</li>
  1828. <li><strong>sexuality: </strong>sexuality</li>
  1829. <li><strong>occupation: </strong>occupation</li>
  1830. <li>
  1831. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1832. materialistic
  1833. </li>
  1834. <li><strong>faceclaim:</strong> faceclaim here</li>
  1835. </ul>
  1836.  
  1837. <div class="muse-content-title">
  1838. <strong> additional info </strong>
  1839. </div>
  1840. <ul class="muse-content-stats">
  1841. <li>
  1842. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1843. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1844. </li>
  1845. <li>lorem ipsum consectetuer mattis porta urna</li>
  1846. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1847. <li>
  1848. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1849. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1850. </li>
  1851. </ul>
  1852.  
  1853. <div class="muse-content-title">
  1854. <strong> connections </strong>
  1855. </div>
  1856.  
  1857. <div class="muse-content-box">
  1858. <div>
  1859. <p>muse name</p>
  1860. <a href="">threads</a> / <a href="">musings</a>
  1861. </div>
  1862. <div>
  1863. <p>muse name</p>
  1864. <a href="">threads</a> / <a href="">musings</a>
  1865. </div>
  1866. <div>
  1867. <p>muse name</p>
  1868. <a href="">threads</a> / <a href="">musings</a>
  1869. </div>
  1870. <div>
  1871. <p>muse name</p>
  1872. <a href="">threads</a> / <a href="">musings</a>
  1873. </div>
  1874. </div>
  1875.  
  1876. <div class="muse-content-title">
  1877. <strong> supernatural verse </strong>
  1878. </div>
  1879.  
  1880. <ul class="muse-content-stats">
  1881. <li><strong>age: </strong> age</li>
  1882. <li><strong>species: </strong>species</li>
  1883. <li>
  1884. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1885. materialistic
  1886. </li>
  1887. </ul>
  1888. </div> <!-- end muse content // everything that appears when you hover the image -->
  1889. </div> <!-- end muse content overlay // the background that appears on hover -->
  1890.  
  1891. <div class="muse-content-info">
  1892. <!-- muse name and info -->
  1893. <div class="muse-content-info1">muse name</div>
  1894. <div class="muse-content-info1">age or anything</div>
  1895. </div> <!-- end muse name and info -->
  1896. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1897.  
  1898.  
  1899.  
  1900.  
  1901.  
  1902.  
  1903. <div class="muse-box"> <!-- SECONDARY MUSE 05 - start of each muse box // copy from here to add more muses -->
  1904. <div class="muse-image">
  1905. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  1906. </div>
  1907. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1908. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1909. <ul class="muse-content-links">
  1910. <li><a href="/tagged/">interactions</a></li>
  1911. <li><a href="/tagged/">photography</a></li>
  1912. <li><a href="/tagged/">musings</a></li>
  1913. <li><a href="/tagged/">starter</a></li>
  1914. <li><a href="/tagged/">likes</a></li>
  1915. <li><a href="/tagged/">texts</a></li>
  1916. </ul>
  1917.  
  1918. <div class="muse-content-title">
  1919. <strong> about muse name </strong>
  1920. </div>
  1921. <ul class="muse-content-stats">
  1922. <li><strong>pronouns:</strong> she/her</li>
  1923. <li><strong>sexuality: </strong>sexuality</li>
  1924. <li><strong>occupation: </strong>occupation</li>
  1925. <li>
  1926. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1927. materialistic
  1928. </li>
  1929. <li><strong>faceclaim:</strong> faceclaim here</li>
  1930. </ul>
  1931.  
  1932. <div class="muse-content-title">
  1933. <strong> additional info </strong>
  1934. </div>
  1935. <ul class="muse-content-stats">
  1936. <li>
  1937. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1938. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1939. </li>
  1940. <li>lorem ipsum consectetuer mattis porta urna</li>
  1941. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1942. <li>
  1943. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1944. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1945. </li>
  1946. </ul>
  1947.  
  1948. <div class="muse-content-title">
  1949. <strong> connections </strong>
  1950. </div>
  1951.  
  1952. <div class="muse-content-box">
  1953. <div>
  1954. <p>muse name</p>
  1955. <a href="">threads</a> / <a href="">musings</a>
  1956. </div>
  1957. <div>
  1958. <p>muse name</p>
  1959. <a href="">threads</a> / <a href="">musings</a>
  1960. </div>
  1961. <div>
  1962. <p>muse name</p>
  1963. <a href="">threads</a> / <a href="">musings</a>
  1964. </div>
  1965. <div>
  1966. <p>muse name</p>
  1967. <a href="">threads</a> / <a href="">musings</a>
  1968. </div>
  1969. </div>
  1970.  
  1971. <div class="muse-content-title">
  1972. <strong> supernatural verse </strong>
  1973. </div>
  1974.  
  1975. <ul class="muse-content-stats">
  1976. <li><strong>age: </strong> age</li>
  1977. <li><strong>species: </strong>species</li>
  1978. <li>
  1979. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1980. materialistic
  1981. </li>
  1982. </ul>
  1983. </div> <!-- end muse content // everything that appears when you hover the image -->
  1984. </div> <!-- end muse content overlay // the background that appears on hover -->
  1985.  
  1986. <div class="muse-content-info">
  1987. <!-- muse name and info -->
  1988. <div class="muse-content-info1">muse name</div>
  1989. <div class="muse-content-info1">age or anything</div>
  1990. </div> <!-- end muse name and info -->
  1991. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1992.  
  1993.  
  1994.  
  1995.  
  1996.  
  1997.  
  1998.  
  1999. <div class="muse-box"> <!-- SECONDARY MUSE 06 - start of each muse box // copy from here to add more muses -->
  2000. <div class="muse-image">
  2001. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2002. </div>
  2003. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2004. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2005. <ul class="muse-content-links">
  2006. <li><a href="/tagged/">interactions</a></li>
  2007. <li><a href="/tagged/">photography</a></li>
  2008. <li><a href="/tagged/">musings</a></li>
  2009. <li><a href="/tagged/">starter</a></li>
  2010. <li><a href="/tagged/">likes</a></li>
  2011. <li><a href="/tagged/">texts</a></li>
  2012. </ul>
  2013.  
  2014. <div class="muse-content-title">
  2015. <strong> about muse name </strong>
  2016. </div>
  2017. <ul class="muse-content-stats">
  2018. <li><strong>pronouns:</strong> she/her</li>
  2019. <li><strong>sexuality: </strong>sexuality</li>
  2020. <li><strong>occupation: </strong>occupation</li>
  2021. <li>
  2022. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2023. materialistic
  2024. </li>
  2025. <li><strong>faceclaim:</strong> faceclaim here</li>
  2026. </ul>
  2027.  
  2028. <div class="muse-content-title">
  2029. <strong> additional info </strong>
  2030. </div>
  2031. <ul class="muse-content-stats">
  2032. <li>
  2033. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2034. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2035. </li>
  2036. <li>lorem ipsum consectetuer mattis porta urna</li>
  2037. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2038. <li>
  2039. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2040. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2041. </li>
  2042. </ul>
  2043.  
  2044. <div class="muse-content-title">
  2045. <strong> connections </strong>
  2046. </div>
  2047.  
  2048. <div class="muse-content-box">
  2049. <div>
  2050. <p>muse name</p>
  2051. <a href="">threads</a> / <a href="">musings</a>
  2052. </div>
  2053. <div>
  2054. <p>muse name</p>
  2055. <a href="">threads</a> / <a href="">musings</a>
  2056. </div>
  2057. <div>
  2058. <p>muse name</p>
  2059. <a href="">threads</a> / <a href="">musings</a>
  2060. </div>
  2061. <div>
  2062. <p>muse name</p>
  2063. <a href="">threads</a> / <a href="">musings</a>
  2064. </div>
  2065. </div>
  2066.  
  2067. <div class="muse-content-title">
  2068. <strong> supernatural verse </strong>
  2069. </div>
  2070.  
  2071. <ul class="muse-content-stats">
  2072. <li><strong>age: </strong> age</li>
  2073. <li><strong>species: </strong>species</li>
  2074. <li>
  2075. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2076. materialistic
  2077. </li>
  2078. </ul>
  2079. </div> <!-- end muse content // everything that appears when you hover the image -->
  2080. </div> <!-- end muse content overlay // the background that appears on hover -->
  2081.  
  2082. <div class="muse-content-info">
  2083. <!-- muse name and info -->
  2084. <div class="muse-content-info1">muse name</div>
  2085. <div class="muse-content-info1">age or anything</div>
  2086. </div> <!-- end muse name and info -->
  2087. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2088.  
  2089.  
  2090.  
  2091.  
  2092.  
  2093.  
  2094.  
  2095. <div class="muse-box"> <!-- SECONDARY MUSE 07 - start of each muse box // copy from here to add more muses -->
  2096. <div class="muse-image">
  2097. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2098. </div>
  2099. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2100. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2101. <ul class="muse-content-links">
  2102. <li><a href="/tagged/">interactions</a></li>
  2103. <li><a href="/tagged/">photography</a></li>
  2104. <li><a href="/tagged/">musings</a></li>
  2105. <li><a href="/tagged/">starter</a></li>
  2106. <li><a href="/tagged/">likes</a></li>
  2107. <li><a href="/tagged/">texts</a></li>
  2108. </ul>
  2109.  
  2110. <div class="muse-content-title">
  2111. <strong> about muse name </strong>
  2112. </div>
  2113. <ul class="muse-content-stats">
  2114. <li><strong>pronouns:</strong> she/her</li>
  2115. <li><strong>sexuality: </strong>sexuality</li>
  2116. <li><strong>occupation: </strong>occupation</li>
  2117. <li>
  2118. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2119. materialistic
  2120. </li>
  2121. <li><strong>faceclaim:</strong> faceclaim here</li>
  2122. </ul>
  2123.  
  2124. <div class="muse-content-title">
  2125. <strong> additional info </strong>
  2126. </div>
  2127. <ul class="muse-content-stats">
  2128. <li>
  2129. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2130. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2131. </li>
  2132. <li>lorem ipsum consectetuer mattis porta urna</li>
  2133. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2134. <li>
  2135. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2136. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2137. </li>
  2138. </ul>
  2139.  
  2140. <div class="muse-content-title">
  2141. <strong> connections </strong>
  2142. </div>
  2143.  
  2144. <div class="muse-content-box">
  2145. <div>
  2146. <p>muse name</p>
  2147. <a href="">threads</a> / <a href="">musings</a>
  2148. </div>
  2149. <div>
  2150. <p>muse name</p>
  2151. <a href="">threads</a> / <a href="">musings</a>
  2152. </div>
  2153. <div>
  2154. <p>muse name</p>
  2155. <a href="">threads</a> / <a href="">musings</a>
  2156. </div>
  2157. <div>
  2158. <p>muse name</p>
  2159. <a href="">threads</a> / <a href="">musings</a>
  2160. </div>
  2161. </div>
  2162.  
  2163. <div class="muse-content-title">
  2164. <strong> supernatural verse </strong>
  2165. </div>
  2166.  
  2167. <ul class="muse-content-stats">
  2168. <li><strong>age: </strong> age</li>
  2169. <li><strong>species: </strong>species</li>
  2170. <li>
  2171. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2172. materialistic
  2173. </li>
  2174. </ul>
  2175. </div> <!-- end muse content // everything that appears when you hover the image -->
  2176. </div> <!-- end muse content overlay // the background that appears on hover -->
  2177.  
  2178. <div class="muse-content-info">
  2179. <!-- muse name and info -->
  2180. <div class="muse-content-info1">muse name</div>
  2181. <div class="muse-content-info1">age or anything</div>
  2182. </div> <!-- end muse name and info -->
  2183. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2184.  
  2185.  
  2186.  
  2187.  
  2188.  
  2189.  
  2190.  
  2191. <div class="muse-box"> <!-- SECONDARY MUSE 08 - start of each muse box // copy from here to add more muses -->
  2192. <div class="muse-image">
  2193. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2194. </div>
  2195. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2196. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2197. <ul class="muse-content-links">
  2198. <li><a href="/tagged/">interactions</a></li>
  2199. <li><a href="/tagged/">photography</a></li>
  2200. <li><a href="/tagged/">musings</a></li>
  2201. <li><a href="/tagged/">starter</a></li>
  2202. <li><a href="/tagged/">likes</a></li>
  2203. <li><a href="/tagged/">texts</a></li>
  2204. </ul>
  2205.  
  2206. <div class="muse-content-title">
  2207. <strong> about muse name </strong>
  2208. </div>
  2209. <ul class="muse-content-stats">
  2210. <li><strong>pronouns:</strong> she/her</li>
  2211. <li><strong>sexuality: </strong>sexuality</li>
  2212. <li><strong>occupation: </strong>occupation</li>
  2213. <li>
  2214. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2215. materialistic
  2216. </li>
  2217. <li><strong>faceclaim:</strong> faceclaim here</li>
  2218. </ul>
  2219.  
  2220. <div class="muse-content-title">
  2221. <strong> additional info </strong>
  2222. </div>
  2223. <ul class="muse-content-stats">
  2224. <li>
  2225. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2226. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2227. </li>
  2228. <li>lorem ipsum consectetuer mattis porta urna</li>
  2229. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2230. <li>
  2231. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2232. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2233. </li>
  2234. </ul>
  2235.  
  2236. <div class="muse-content-title">
  2237. <strong> connections </strong>
  2238. </div>
  2239.  
  2240. <div class="muse-content-box">
  2241. <div>
  2242. <p>muse name</p>
  2243. <a href="">threads</a> / <a href="">musings</a>
  2244. </div>
  2245. <div>
  2246. <p>muse name</p>
  2247. <a href="">threads</a> / <a href="">musings</a>
  2248. </div>
  2249. <div>
  2250. <p>muse name</p>
  2251. <a href="">threads</a> / <a href="">musings</a>
  2252. </div>
  2253. <div>
  2254. <p>muse name</p>
  2255. <a href="">threads</a> / <a href="">musings</a>
  2256. </div>
  2257. </div>
  2258.  
  2259. <div class="muse-content-title">
  2260. <strong> supernatural verse </strong>
  2261. </div>
  2262.  
  2263. <ul class="muse-content-stats">
  2264. <li><strong>age: </strong> age</li>
  2265. <li><strong>species: </strong>species</li>
  2266. <li>
  2267. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2268. materialistic
  2269. </li>
  2270. </ul>
  2271. </div> <!-- end muse content // everything that appears when you hover the image -->
  2272. </div> <!-- end muse content overlay // the background that appears on hover -->
  2273.  
  2274. <div class="muse-content-info">
  2275. <!-- muse name and info -->
  2276. <div class="muse-content-info1">muse name</div>
  2277. <div class="muse-content-info1">age or anything</div>
  2278. </div> <!-- end muse name and info -->
  2279. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2280.  
  2281.  
  2282.  
  2283.  
  2284.  
  2285.  
  2286.  
  2287. <div class="muse-box"> <!-- SECONDARY MUSE 09 - start of each muse box // copy from here to add more muses -->
  2288. <div class="muse-image">
  2289. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2290. </div>
  2291. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2292. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2293. <ul class="muse-content-links">
  2294. <li><a href="/tagged/">interactions</a></li>
  2295. <li><a href="/tagged/">photography</a></li>
  2296. <li><a href="/tagged/">musings</a></li>
  2297. <li><a href="/tagged/">starter</a></li>
  2298. <li><a href="/tagged/">likes</a></li>
  2299. <li><a href="/tagged/">texts</a></li>
  2300. </ul>
  2301.  
  2302. <div class="muse-content-title">
  2303. <strong> about muse name </strong>
  2304. </div>
  2305. <ul class="muse-content-stats">
  2306. <li><strong>pronouns:</strong> she/her</li>
  2307. <li><strong>sexuality: </strong>sexuality</li>
  2308. <li><strong>occupation: </strong>occupation</li>
  2309. <li>
  2310. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2311. materialistic
  2312. </li>
  2313. <li><strong>faceclaim:</strong> faceclaim here</li>
  2314. </ul>
  2315.  
  2316. <div class="muse-content-title">
  2317. <strong> additional info </strong>
  2318. </div>
  2319. <ul class="muse-content-stats">
  2320. <li>
  2321. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2322. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2323. </li>
  2324. <li>lorem ipsum consectetuer mattis porta urna</li>
  2325. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2326. <li>
  2327. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2328. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2329. </li>
  2330. </ul>
  2331.  
  2332. <div class="muse-content-title">
  2333. <strong> connections </strong>
  2334. </div>
  2335.  
  2336. <div class="muse-content-box">
  2337. <div>
  2338. <p>muse name</p>
  2339. <a href="">threads</a> / <a href="">musings</a>
  2340. </div>
  2341. <div>
  2342. <p>muse name</p>
  2343. <a href="">threads</a> / <a href="">musings</a>
  2344. </div>
  2345. <div>
  2346. <p>muse name</p>
  2347. <a href="">threads</a> / <a href="">musings</a>
  2348. </div>
  2349. <div>
  2350. <p>muse name</p>
  2351. <a href="">threads</a> / <a href="">musings</a>
  2352. </div>
  2353. </div>
  2354.  
  2355. <div class="muse-content-title">
  2356. <strong> supernatural verse </strong>
  2357. </div>
  2358.  
  2359. <ul class="muse-content-stats">
  2360. <li><strong>age: </strong> age</li>
  2361. <li><strong>species: </strong>species</li>
  2362. <li>
  2363. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2364. materialistic
  2365. </li>
  2366. </ul>
  2367. </div> <!-- end muse content // everything that appears when you hover the image -->
  2368. </div> <!-- end muse content overlay // the background that appears on hover -->
  2369.  
  2370. <div class="muse-content-info">
  2371. <!-- muse name and info -->
  2372. <div class="muse-content-info1">muse name</div>
  2373. <div class="muse-content-info1">age or anything</div>
  2374. </div> <!-- end muse name and info -->
  2375. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2376.  
  2377.  
  2378.  
  2379.  
  2380.  
  2381.  
  2382.  
  2383. <div class="muse-box"> <!-- SECONDARY MUSE 10 - start of each muse box // copy from here to add more muses -->
  2384. <div class="muse-image">
  2385. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2386. </div>
  2387. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2388. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2389. <ul class="muse-content-links">
  2390. <li><a href="/tagged/">interactions</a></li>
  2391. <li><a href="/tagged/">photography</a></li>
  2392. <li><a href="/tagged/">musings</a></li>
  2393. <li><a href="/tagged/">starter</a></li>
  2394. <li><a href="/tagged/">likes</a></li>
  2395. <li><a href="/tagged/">texts</a></li>
  2396. </ul>
  2397.  
  2398. <div class="muse-content-title">
  2399. <strong> about muse name </strong>
  2400. </div>
  2401. <ul class="muse-content-stats">
  2402. <li><strong>pronouns:</strong> she/her</li>
  2403. <li><strong>sexuality: </strong>sexuality</li>
  2404. <li><strong>occupation: </strong>occupation</li>
  2405. <li>
  2406. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2407. materialistic
  2408. </li>
  2409. <li><strong>faceclaim:</strong> faceclaim here</li>
  2410. </ul>
  2411.  
  2412. <div class="muse-content-title">
  2413. <strong> additional info </strong>
  2414. </div>
  2415. <ul class="muse-content-stats">
  2416. <li>
  2417. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2418. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2419. </li>
  2420. <li>lorem ipsum consectetuer mattis porta urna</li>
  2421. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2422. <li>
  2423. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2424. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2425. </li>
  2426. </ul>
  2427.  
  2428. <div class="muse-content-title">
  2429. <strong> connections </strong>
  2430. </div>
  2431.  
  2432. <div class="muse-content-box">
  2433. <div>
  2434. <p>muse name</p>
  2435. <a href="">threads</a> / <a href="">musings</a>
  2436. </div>
  2437. <div>
  2438. <p>muse name</p>
  2439. <a href="">threads</a> / <a href="">musings</a>
  2440. </div>
  2441. <div>
  2442. <p>muse name</p>
  2443. <a href="">threads</a> / <a href="">musings</a>
  2444. </div>
  2445. <div>
  2446. <p>muse name</p>
  2447. <a href="">threads</a> / <a href="">musings</a>
  2448. </div>
  2449. </div>
  2450.  
  2451. <div class="muse-content-title">
  2452. <strong> supernatural verse </strong>
  2453. </div>
  2454.  
  2455. <ul class="muse-content-stats">
  2456. <li><strong>age: </strong> age</li>
  2457. <li><strong>species: </strong>species</li>
  2458. <li>
  2459. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2460. materialistic
  2461. </li>
  2462. </ul>
  2463. </div> <!-- end muse content // everything that appears when you hover the image -->
  2464. </div> <!-- end muse content overlay // the background that appears on hover -->
  2465.  
  2466. <div class="muse-content-info">
  2467. <!-- muse name and info -->
  2468. <div class="muse-content-info1">muse name</div>
  2469. <div class="muse-content-info1">age or anything</div>
  2470. </div> <!-- end muse name and info -->
  2471. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2472.  
  2473.  
  2474.  
  2475.  
  2476.  
  2477.  
  2478. </div> <!-- END OF SECONDARY MUSES CONTENT // do not touch! -->
  2479. </div> <!-- END OF SECONDARY MUSES CONTAINER // do not touch! -->
  2480.  
  2481.  
  2482.  
  2483.  
  2484.  
  2485. <!---------------------------------------------------------------------->
  2486.  
  2487.  
  2488.  
  2489. <div class="muse-tertiary-container"> <!-- START OF TERTIARY MUSES CONTAINER // do not touch! -->
  2490. <div class="muse-tertiary-content"> <!-- START OF TERTIARY MUSES CONTENT // do not touch! -->
  2491. <span class="muse-tertiary-close" onclick="this.parentElement.style.display='none';">
  2492. <a href="#" title="close tab"> <i data-feather="x-circle" class="feather"></i> </a>
  2493. </span>
  2494.  
  2495.  
  2496.  
  2497. <div class="muse-box"> <!-- SECONDARY MUSE 01 - start of each muse box // copy from here to add more muses -->
  2498. <div class="muse-image">
  2499. <img src="https://static.tumblr.com/9levqhj/e4Gqk1w7a/1s.png" />
  2500. </div>
  2501. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2502. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2503. <ul class="muse-content-links">
  2504. <li><a href="/tagged/">interactions</a></li>
  2505. <li><a href="/tagged/">photography</a></li>
  2506. <li><a href="/tagged/">musings</a></li>
  2507. <li><a href="/tagged/">starter</a></li>
  2508. <li><a href="/tagged/">likes</a></li>
  2509. <li><a href="/tagged/">texts</a></li>
  2510. </ul>
  2511.  
  2512. <div class="muse-content-title">
  2513. <strong> about muse name </strong>
  2514. </div>
  2515. <ul class="muse-content-stats">
  2516. <li><strong>pronouns:</strong> she/her</li>
  2517. <li><strong>sexuality: </strong>sexuality</li>
  2518. <li><strong>occupation: </strong>occupation</li>
  2519. <li>
  2520. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2521. materialistic
  2522. </li>
  2523. <li><strong>faceclaim:</strong> faceclaim here</li>
  2524. </ul>
  2525.  
  2526. <div class="muse-content-title">
  2527. <strong> additional info </strong>
  2528. </div>
  2529. <ul class="muse-content-stats">
  2530. <li>
  2531. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2532. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2533. </li>
  2534. <li>lorem ipsum consectetuer mattis porta urna</li>
  2535. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2536. <li>
  2537. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2538. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2539. </li>
  2540. </ul>
  2541.  
  2542. <div class="muse-content-title">
  2543. <strong> connections </strong>
  2544. </div>
  2545.  
  2546. <div class="muse-content-box">
  2547. <div>
  2548. <p>muse name</p>
  2549. <a href="">threads</a> / <a href="">musings</a>
  2550. </div>
  2551. <div>
  2552. <p>muse name</p>
  2553. <a href="">threads</a> / <a href="">musings</a>
  2554. </div>
  2555. <div>
  2556. <p>muse name</p>
  2557. <a href="">threads</a> / <a href="">musings</a>
  2558. </div>
  2559. <div>
  2560. <p>muse name</p>
  2561. <a href="">threads</a> / <a href="">musings</a>
  2562. </div>
  2563. </div>
  2564.  
  2565. <div class="muse-content-title">
  2566. <strong> supernatural verse </strong>
  2567. </div>
  2568.  
  2569. <ul class="muse-content-stats">
  2570. <li><strong>age: </strong> age</li>
  2571. <li><strong>species: </strong>species</li>
  2572. <li>
  2573. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2574. materialistic
  2575. </li>
  2576. </ul>
  2577. </div> <!-- end muse content // everything that appears when you hover the image -->
  2578. </div> <!-- end muse content overlay // the background that appears on hover -->
  2579.  
  2580. <div class="muse-content-info">
  2581. <!-- muse name and info -->
  2582. <div class="muse-content-info1">muse name</div>
  2583. <div class="muse-content-info1">age or anything</div>
  2584. </div> <!-- end muse name and info -->
  2585. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2586.  
  2587.  
  2588.  
  2589.  
  2590.  
  2591. </div> <!-- END OF TERTIARY MUSES CONTENT // do not touch! -->
  2592. </div> <!-- END OF TERTIARY MUSES CONTAINER // do not touch! -->
  2593. </div> <!-- END MUSES CONTAINER // do not touch! -->
  2594.  
  2595. <div class="bottom-navigation">
  2596. <nav class="navigation-links">
  2597. <ul>
  2598. <li>
  2599. <a href="/" title="extra link 1">
  2600. <i data-feather="plus-circle" class="feather"></i>
  2601. </a>
  2602. </li>
  2603.  
  2604. <li>
  2605. <a href="/" title="extra link 2">
  2606. <i data-feather="plus-circle" class="feather"></i>
  2607. </a>
  2608. </li>
  2609.  
  2610. <li>
  2611. <a href="/" title="extra link 3">
  2612. <i data-feather="plus-circle" class="feather"></i>
  2613. </a>
  2614. </li>
  2615.  
  2616. <li>
  2617. <a href="/" title="extra link 4">
  2618. <i data-feather="plus-circle" class="feather"></i>
  2619. </a>
  2620. </li>
  2621. </ul>
  2622. </nav>
  2623.  
  2624. <div class="navigation-description">
  2625. write anything else here. it needs to occupy four lines top or it will get messy!
  2626. <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>stroke</s> // lorem ipsum
  2627. consectetuer mattis porta urna, adipiscing elit.
  2628. </div>
  2629.  
  2630. <div class="mcredito">
  2631. <a href="http://maziekeen.tumblr.com/" target="_blank">maziekeen</a>
  2632. </div>
  2633. </div> <!-- end container -->
  2634. </div>
  2635.  
  2636.  
  2637.  
  2638.  
  2639. <!------------ scripts ---->
  2640.  
  2641. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- for tooltips -->
  2642. <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>-->
  2643. <script src="https://unpkg.com/popper.js@1"></script> <!-- tooltips -->
  2644. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <!-- tooltips -->
  2645. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" /> <!-- tooltips -->
  2646. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> <!-- smooth scroll -->
  2647.  
  2648.  
  2649. <script type="text/javascript">
  2650.  
  2651. $(document).ready(function() {
  2652. $(".toggle-secondary-link").click(function(event) {
  2653. event.preventDefault();
  2654. $(this).closest('.container').find('.muse-secondary-content').css("display", "grid");
  2655. });
  2656.  
  2657. $(".toggle-tertiary-link").click(function(event) {
  2658. event.preventDefault();
  2659. $(this).closest('.container').find('.muse-tertiary-content').css("display", "grid");
  2660. });
  2661.  
  2662. });
  2663.  
  2664. // tooltips
  2665.  
  2666. tippy('a[title]', {
  2667. theme: 'custom',
  2668. arrow: tippy.roundArrow,
  2669. zIndex: 9999999999,
  2670. maxWidth: 300,
  2671.  
  2672. content(reference) {
  2673. const title = reference.getAttribute('title');
  2674. reference.removeAttribute('title');
  2675. return title;
  2676. },
  2677. });
  2678.  
  2679.  
  2680. // feather icons (custom icons)
  2681.  
  2682. feather.replace();
  2683.  
  2684.  
  2685.  
  2686.  
  2687. </script>
  2688.  
  2689.  
  2690.  
  2691.  
  2692. </body>
  2693. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!