API tools faq
paste
Advertisement
sexycullen

theme 218 dark /small screen

sexycullen
Nov 19th, 2020 (edited)
691
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 92.26 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 DARK small screens
  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: #191919; /*theme background*/
  61. --bodyTextColor: #d7d7d7; /*theme text color*/
  62. --bodyLinkColor: #df9a5a; /*theme links color*/
  63. --bodyLinkHoverColor: #db812e; /*theme links on hover color*/
  64. --boldColor: #db812e; /*theme bold color*/
  65. --italicColor: #bea996; /*theme bold italic color*/
  66. --hoverTextBackgroundColor: #db812e; /*hover texts background color*/
  67. --hoverTextColor: #202020; /*hover texts color*/
  68. --bordersColor: #272727; /*color of the borders of the theme*/
  69. --musesBackgroundColor: #202020; /*background of the muses container*/
  70. --scrollbarColor: #f38830; /*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. grid-column: 1 / -1;
  439. grid-row: 1 / -1;
  440. }
  441.  
  442.  
  443. .muse-primary-content,
  444. .muse-secondary-content {
  445. position: relative;
  446. display: grid;
  447. grid-template-columns: repeat(auto-fit, 225px);
  448. gap: 15px;
  449. grid-area: muses;
  450. justify-content: center;
  451. align-items: center;
  452. /*padding: 0 0 15px 0;*/
  453. overflow-y: auto;
  454. background: var(--musesBackgroundColor);
  455. height: 70vh;
  456. }
  457.  
  458. .muse-secondary-content {
  459. z-index:10;
  460. display:none;
  461. }
  462.  
  463.  
  464. .muse-primary-content {
  465. z-index:9;
  466. }
  467.  
  468. .muse-secondary-close {
  469. position:absolute;
  470. top: -1px;
  471. right: 1px;
  472. z-index:15;
  473. }
  474.  
  475. /* button that closes the secondary muses */
  476. .muse-secondary-close .feather {
  477. width: var(--sidebarIconsSize);
  478. height: var(--sidebarIconsSize);
  479. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  480. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  481. stroke: var(--bodyLinkColor);
  482. }
  483.  
  484.  
  485. /* wrapper of all muses (main and secondary) */
  486. .muse-container {
  487. display:grid;
  488. height: 70vh;
  489. padding: 15px 0;
  490. overflow-y: auto;
  491. border-left:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  492. border-right:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  493. background: var(--musesBackgroundColor);
  494. }
  495.  
  496.  
  497. /* START OF EACH MUSE BOX AND THEIR CONTENT */
  498.  
  499.  
  500. /* muse image */
  501. .muse-image img {
  502. width:100%;
  503. height:200px;
  504. object-fit: cover;
  505. background: rgba(0,0,0,0.8); /* change background color here */
  506. }
  507.  
  508. .muse-image img:hover {
  509. opacity:0.7;
  510. }
  511.  
  512.  
  513. /* each muse box */
  514. .muse-box {
  515. border:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  516. height: 255px;
  517. position:relative;
  518. padding:5px;
  519. box-sizing:border-box;
  520. background: var(--backgroundThemeColor);
  521. }
  522.  
  523. /* background where the content appear on image hover */
  524. .muse-overlay {
  525. padding:3px;
  526. position:absolute;
  527. overflow-y: auto;
  528. height:200px;
  529. box-sizing:border-box;
  530. background: rgba(0,0,0,0.8); /* change background color here */
  531. top: 5px;
  532. bottom: 5px;
  533. left: 5px;
  534. right: 0;
  535. opacity: 0;
  536. -webkit-transition: var(--transitions);
  537. -o-transition: var(--transitions);
  538. transition: var(--transitions);
  539. }
  540.  
  541.  
  542. .muse-box:hover .muse-overlay {
  543. opacity: 1;
  544. }
  545.  
  546.  
  547. /* muse content when on image hover */
  548. .muse-content {
  549. height:200px;
  550. }
  551.  
  552. .muse-content ul {
  553. margin:10px 0;
  554. }
  555.  
  556. .muse-content ul li {
  557. margin:5px 10px;
  558. }
  559.  
  560.  
  561.  
  562. /* muse content links */
  563. .muse-content-links li {
  564. list-style:none;
  565. display:inline-block;
  566. }
  567.  
  568. .muse-content-links li::before {
  569. content: '';
  570. }
  571.  
  572.  
  573. /* muse content titles */
  574. .muse-content-title {
  575. display:inline-block;
  576. font-weight:var(--boldFontWeight);
  577. text-transform: uppercase;
  578. padding:7px 0;
  579. margin: 2px 3px 3px;
  580. border-bottom: var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  581. }
  582.  
  583.  
  584. /* this is where the connections are, two blocks of a p and links */
  585. .muse-content-box {
  586. margin: 0 0 10px;
  587. display:grid;
  588. grid-template-columns: 1fr 1fr;
  589. }
  590.  
  591.  
  592. .muse-content-box div {
  593. margin-left:10px;
  594. margin-top:10px;
  595. }
  596.  
  597.  
  598. .muse-content-box div:first-child {
  599. margin-top:10px;
  600. }
  601.  
  602.  
  603. .muse-content-box p {
  604. font-weight:var(--boldFontWeight);
  605. padding:0;
  606. margin-bottom:0px;
  607. }
  608.  
  609. .muse-content-box p:first-child {
  610. margin-top:0px;
  611. }
  612.  
  613.  
  614. /* muse name and age outside the image and content on hover */
  615. .muse-content-info {
  616. margin:1px 0;
  617. padding:5px;
  618. display:block;
  619. }
  620.  
  621.  
  622. .muse-content-info1,
  623. .muse-content-info1 {
  624. display:flex;
  625. text-transform:uppercase;
  626. font-weight:var(--boldFontWeight);
  627. font-size:12px;
  628. letter-spacing:1px;
  629. }
  630.  
  631.  
  632. .muse-content-info1:after {
  633. content: "";
  634. flex: 1 1;
  635. border-bottom: var(--bordersSize) var(--bordersStyle) var(--bordersColor);;
  636. margin: auto 5px;
  637. }
  638.  
  639.  
  640.  
  641.  
  642.  
  643. /* DO NOT REMOVE */
  644.  
  645. .mcredito {
  646. width:210px;
  647. display:flex;
  648. justify-content: flex-end;
  649. }
  650.  
  651. .mcredito a {
  652. margin:0;
  653. padding:0;
  654. font-weight:var(--boldFontWeight);
  655. text-transform:lowercase;
  656. text-align:center;
  657. color:var(--bodyLinkColor);
  658. padding:8px 12px;
  659. background: var(--musesBackgroundColor);
  660. outline:var(--bordersSize) var(--bordersStyle) var(--bordersColor);
  661. -webkit-box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  662. box-shadow: var(--boxShadowSize) rgba(var(--boxShadowColor));
  663. }
  664.  
  665. .mcredito a:hover {
  666. color:var(--bodyLinkHoverColor);
  667.  
  668. </style>
  669. </head>
  670. <body>
  671. <div class="container">
  672. <div class="top-navigation">
  673. <nav class="navigation-links">
  674. <ul>
  675. <li>
  676. <a href="/" title="go back">
  677. <i data-feather="home" class="feather"></i>
  678. </a>
  679. </li>
  680.  
  681. <li>
  682. <a href="/ask" title="questions">
  683. <i data-feather="mail" class="feather"></i>
  684. </a>
  685. </li>
  686.  
  687. <li>
  688. <a href="/" title="out of character">
  689. <i data-feather="eye" class="feather"></i>
  690. </a>
  691. </li>
  692.  
  693. <li>
  694. <a href="#" class="toggle-link" title="secondary muses">
  695. <i data-feather="user" class="feather"></i>
  696. </a>
  697. </li>
  698. </ul>
  699. </nav>
  700.  
  701. <div class="navigation-title">lorem ipsum consectetuer mattis porta urna, adipiscing.</div>
  702. </div>
  703.  
  704. <div class="muse-container"> <!-- MUSES CONTAINER // do not touch! -->
  705.  
  706. <div class="muse-primary-container"> <!-- START OF MAIN MUSES CONTAINER // do not touch! -->
  707. <div class="muse-primary-content"> <!-- START OF MAIN MUSES CONTENT // do not touch! -->
  708.  
  709.  
  710. <div class="muse-box"> <!-- MAIN 01 - start of each muse box // copy from here to add more muses -->
  711. <div class="muse-image">
  712. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  713. </div>
  714. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  715. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  716. <ul class="muse-content-links">
  717. <li><a href="/tagged/">interactions</a></li>
  718. <li><a href="/tagged/">photography</a></li>
  719. <li><a href="/tagged/">musings</a></li>
  720. <li><a href="/tagged/">starter</a></li>
  721. <li><a href="/tagged/">likes</a></li>
  722. <li><a href="/tagged/">texts</a></li>
  723. </ul>
  724.  
  725. <div class="muse-content-title">
  726. <strong> about muse name </strong>
  727. </div>
  728. <ul class="muse-content-stats">
  729. <li><strong>pronouns:</strong> she/her</li>
  730. <li><strong>sexuality: </strong>sexuality</li>
  731. <li><strong>occupation: </strong>occupation</li>
  732. <li>
  733. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  734. materialistic
  735. </li>
  736. <li><strong>faceclaim:</strong> faceclaim here</li>
  737. </ul>
  738.  
  739. <div class="muse-content-title">
  740. <strong> additional info </strong>
  741. </div>
  742. <ul class="muse-content-stats">
  743. <li>
  744. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  745. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  746. </li>
  747. <li>lorem ipsum consectetuer mattis porta urna</li>
  748. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  749. <li>
  750. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  751. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  752. </li>
  753. </ul>
  754.  
  755. <div class="muse-content-title">
  756. <strong> connections </strong>
  757. </div>
  758.  
  759. <div class="muse-content-box">
  760. <div>
  761. <p>muse name</p>
  762. <a href="">threads</a> / <a href="">musings</a>
  763. </div>
  764. <div>
  765. <p>muse name</p>
  766. <a href="">threads</a> / <a href="">musings</a>
  767. </div>
  768. <div>
  769. <p>muse name</p>
  770. <a href="">threads</a> / <a href="">musings</a>
  771. </div>
  772. <div>
  773. <p>muse name</p>
  774. <a href="">threads</a> / <a href="">musings</a>
  775. </div>
  776. </div>
  777.  
  778. <div class="muse-content-title">
  779. <strong> supernatural verse </strong>
  780. </div>
  781.  
  782. <ul class="muse-content-stats">
  783. <li><strong>age: </strong> age</li>
  784. <li><strong>species: </strong>species</li>
  785. <li>
  786. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  787. materialistic
  788. </li>
  789. </ul>
  790. </div> <!-- end muse content // everything that appears when you hover the image -->
  791. </div> <!-- end muse content overlay // the background that appears on hover -->
  792.  
  793. <div class="muse-content-info">
  794. <!-- muse name and info -->
  795. <div class="muse-content-info1">Willa Vasconcelos</div>
  796. <div class="muse-content-info1">27 years old</div>
  797. </div> <!-- end muse name and info -->
  798. </div> <!-- end of each muse box // copy all to here to add more muses -->
  799.  
  800.  
  801.  
  802.  
  803.  
  804. <div class="muse-box"> <!-- MAIN MUSE 02 - start of each muse box // copy from here to add more muses -->
  805. <div class="muse-image">
  806. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  807. </div>
  808. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  809. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  810. <div class="muse-content-title">
  811. <strong> use the class muse-content-title to add titles </strong>
  812. </div>
  813. <ul class="muse-content-stats">
  814. <li>anything you want to add one after another</li>
  815. <li>i recommend you to use lists</li>
  816. <li>with this class muse-content-stats on the ul</li>
  817. </ul>
  818.  
  819. <div class="muse-content-title">
  820. <strong> use html tags to mark things like you want to </strong>
  821. </div>
  822.  
  823. <p>
  824. <strong> this is bold/strong </strong>, <em>this is italic</em>,
  825. <u>this is underline</u>, <s>this is stroke</s>
  826. </p>
  827. <p>use tags p to add paragraphs or random texts that are not lists or whatever</p>
  828. <p>
  829. as many as you need, but don't overdo it. lorem ipsum consectetuer mattis porta
  830. urna, adipiscing elit.
  831. </p>
  832.  
  833. <div class="muse-content-title">
  834. <strong> connections </strong>
  835. </div>
  836.  
  837. <div class="muse-content-box">
  838. <div>
  839. <p>add extra links or anything</p>
  840. <a href="">threads</a> / <a href="">musings</a>
  841. </div>
  842. <div>
  843. <p>muse name</p>
  844. <a href="">threads</a> / <a href="">musings</a>
  845. </div>
  846. <div>
  847. <p>muse name</p>
  848. <a href="">threads</a> / <a href="">musings</a>
  849. </div>
  850. <div>
  851. <p>do it between the divs</p>
  852. <a href="">threads</a> / <a href="">musings</a>
  853. </div>
  854. </div>
  855.  
  856. <div class="muse-content-title">
  857. <strong> supernatural verse </strong>
  858. </div>
  859.  
  860. <ul class="muse-content-stats">
  861. <li><strong>age: </strong> age</li>
  862. <li><strong>species: </strong>species</li>
  863. <li>
  864. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  865. materialistic
  866. </li>
  867. </ul>
  868. </div> <!-- end muse content // everything that appears when you hover the image -->
  869. </div> <!-- end muse content overlay // the background that appears on hover -->
  870.  
  871. <div class="muse-content-info">
  872. <!-- muse name and info -->
  873. <div class="muse-content-info1">hover here to know</div>
  874. <div class="muse-content-info1">tips about the content</div>
  875. </div> <!-- end muse name and info -->
  876. </div> <!-- end of each muse box // copy all to here to add more muses -->
  877.  
  878.  
  879.  
  880.  
  881.  
  882. <div class="muse-box"> <!-- MAIN MUSE 03 - start of each muse box // copy from here to add more muses -->
  883. <div class="muse-image">
  884. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  885. </div>
  886. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  887. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  888. <ul class="muse-content-links">
  889. <li><a href="/tagged/">interactions</a></li>
  890. <li><a href="/tagged/">photography</a></li>
  891. <li><a href="/tagged/">musings</a></li>
  892. <li><a href="/tagged/">starter</a></li>
  893. <li><a href="/tagged/">likes</a></li>
  894. <li><a href="/tagged/">texts</a></li>
  895. </ul>
  896.  
  897. <div class="muse-content-title">
  898. <strong> about muse name </strong>
  899. </div>
  900. <ul class="muse-content-stats">
  901. <li><strong>pronouns:</strong> she/her</li>
  902. <li><strong>sexuality: </strong>sexuality</li>
  903. <li><strong>occupation: </strong>occupation</li>
  904. <li>
  905. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  906. materialistic
  907. </li>
  908. <li><strong>faceclaim:</strong> faceclaim here</li>
  909. </ul>
  910.  
  911. <div class="muse-content-title">
  912. <strong> additional info </strong>
  913. </div>
  914. <ul class="muse-content-stats">
  915. <li>
  916. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  917. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  918. </li>
  919. <li>lorem ipsum consectetuer mattis porta urna</li>
  920. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  921. <li>
  922. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  923. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  924. </li>
  925. </ul>
  926.  
  927. <div class="muse-content-title">
  928. <strong> connections </strong>
  929. </div>
  930.  
  931. <div class="muse-content-box">
  932. <div>
  933. <p>muse name</p>
  934. <a href="">threads</a> / <a href="">musings</a>
  935. </div>
  936. <div>
  937. <p>muse name</p>
  938. <a href="">threads</a> / <a href="">musings</a>
  939. </div>
  940. <div>
  941. <p>muse name</p>
  942. <a href="">threads</a> / <a href="">musings</a>
  943. </div>
  944. <div>
  945. <p>muse name</p>
  946. <a href="">threads</a> / <a href="">musings</a>
  947. </div>
  948. </div>
  949.  
  950. <div class="muse-content-title">
  951. <strong> supernatural verse </strong>
  952. </div>
  953.  
  954. <ul class="muse-content-stats">
  955. <li><strong>age: </strong> age</li>
  956. <li><strong>species: </strong>species</li>
  957. <li>
  958. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  959. materialistic
  960. </li>
  961. </ul>
  962. </div> <!-- end muse content // everything that appears when you hover the image -->
  963. </div> <!-- end muse content overlay // the background that appears on hover -->
  964.  
  965. <div class="muse-content-info">
  966. <!-- muse name and info -->
  967. <div class="muse-content-info1">muse name</div>
  968. </div> <!-- end muse name and info -->
  969. </div> <!-- end of each muse box // copy all to here to add more muses -->
  970.  
  971.  
  972.  
  973.  
  974.  
  975. <div class="muse-box"> <!-- MAIN MUSE 04 - start of each muse box // copy from here to add more muses -->
  976. <div class="muse-image">
  977. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  978. </div>
  979. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  980. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  981. <ul class="muse-content-links">
  982. <li><a href="/tagged/">interactions</a></li>
  983. <li><a href="/tagged/">photography</a></li>
  984. <li><a href="/tagged/">musings</a></li>
  985. <li><a href="/tagged/">starter</a></li>
  986. <li><a href="/tagged/">likes</a></li>
  987. <li><a href="/tagged/">texts</a></li>
  988. </ul>
  989.  
  990. <div class="muse-content-title">
  991. <strong> about muse name </strong>
  992. </div>
  993. <ul class="muse-content-stats">
  994. <li><strong>pronouns:</strong> she/her</li>
  995. <li><strong>sexuality: </strong>sexuality</li>
  996. <li><strong>occupation: </strong>occupation</li>
  997. <li>
  998. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  999. materialistic
  1000. </li>
  1001. <li><strong>faceclaim:</strong> faceclaim here</li>
  1002. </ul>
  1003.  
  1004. <div class="muse-content-title">
  1005. <strong> additional info </strong>
  1006. </div>
  1007. <ul class="muse-content-stats">
  1008. <li>
  1009. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1010. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1011. </li>
  1012. <li>lorem ipsum consectetuer mattis porta urna</li>
  1013. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1014. <li>
  1015. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1016. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1017. </li>
  1018. </ul>
  1019.  
  1020. <div class="muse-content-title">
  1021. <strong> connections </strong>
  1022. </div>
  1023.  
  1024. <div class="muse-content-box">
  1025. <div>
  1026. <p>muse name</p>
  1027. <a href="">threads</a> / <a href="">musings</a>
  1028. </div>
  1029. <div>
  1030. <p>muse name</p>
  1031. <a href="">threads</a> / <a href="">musings</a>
  1032. </div>
  1033. <div>
  1034. <p>muse name</p>
  1035. <a href="">threads</a> / <a href="">musings</a>
  1036. </div>
  1037. <div>
  1038. <p>muse name</p>
  1039. <a href="">threads</a> / <a href="">musings</a>
  1040. </div>
  1041. </div>
  1042.  
  1043. <div class="muse-content-title">
  1044. <strong> supernatural verse </strong>
  1045. </div>
  1046.  
  1047. <ul class="muse-content-stats">
  1048. <li><strong>age: </strong> age</li>
  1049. <li><strong>species: </strong>species</li>
  1050. <li>
  1051. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1052. materialistic
  1053. </li>
  1054. </ul>
  1055. </div> <!-- end muse content // everything that appears when you hover the image -->
  1056. </div> <!-- end muse content overlay // the background that appears on hover -->
  1057.  
  1058. <div class="muse-content-info">
  1059. <!-- muse name and info -->
  1060. <div class="muse-content-info1">muse name</div>
  1061. <div class="muse-content-info1">age or anything</div>
  1062. </div> <!-- end muse name and info -->
  1063. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1064.  
  1065.  
  1066.  
  1067.  
  1068.  
  1069.  
  1070.  
  1071. <div class="muse-box"> <!-- MAIN MUSE 05 - start of each muse box // copy from here to add more muses -->
  1072. <div class="muse-image">
  1073. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  1074. </div>
  1075. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1076. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1077. <ul class="muse-content-links">
  1078. <li><a href="/tagged/">interactions</a></li>
  1079. <li><a href="/tagged/">photography</a></li>
  1080. <li><a href="/tagged/">musings</a></li>
  1081. <li><a href="/tagged/">starter</a></li>
  1082. <li><a href="/tagged/">likes</a></li>
  1083. <li><a href="/tagged/">texts</a></li>
  1084. </ul>
  1085.  
  1086. <div class="muse-content-title">
  1087. <strong> about muse name </strong>
  1088. </div>
  1089. <ul class="muse-content-stats">
  1090. <li><strong>pronouns:</strong> she/her</li>
  1091. <li><strong>sexuality: </strong>sexuality</li>
  1092. <li><strong>occupation: </strong>occupation</li>
  1093. <li>
  1094. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1095. materialistic
  1096. </li>
  1097. <li><strong>faceclaim:</strong> faceclaim here</li>
  1098. </ul>
  1099.  
  1100. <div class="muse-content-title">
  1101. <strong> additional info </strong>
  1102. </div>
  1103. <ul class="muse-content-stats">
  1104. <li>
  1105. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1106. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1107. </li>
  1108. <li>lorem ipsum consectetuer mattis porta urna</li>
  1109. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1110. <li>
  1111. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1112. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1113. </li>
  1114. </ul>
  1115.  
  1116. <div class="muse-content-title">
  1117. <strong> connections </strong>
  1118. </div>
  1119.  
  1120. <div class="muse-content-box">
  1121. <div>
  1122. <p>muse name</p>
  1123. <a href="">threads</a> / <a href="">musings</a>
  1124. </div>
  1125. <div>
  1126. <p>muse name</p>
  1127. <a href="">threads</a> / <a href="">musings</a>
  1128. </div>
  1129. <div>
  1130. <p>muse name</p>
  1131. <a href="">threads</a> / <a href="">musings</a>
  1132. </div>
  1133. <div>
  1134. <p>muse name</p>
  1135. <a href="">threads</a> / <a href="">musings</a>
  1136. </div>
  1137. </div>
  1138.  
  1139. <div class="muse-content-title">
  1140. <strong> supernatural verse </strong>
  1141. </div>
  1142.  
  1143. <ul class="muse-content-stats">
  1144. <li><strong>age: </strong> age</li>
  1145. <li><strong>species: </strong>species</li>
  1146. <li>
  1147. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1148. materialistic
  1149. </li>
  1150. </ul>
  1151. </div> <!-- end muse content // everything that appears when you hover the image -->
  1152. </div> <!-- end muse content overlay // the background that appears on hover -->
  1153.  
  1154. <div class="muse-content-info">
  1155. <!-- muse name and info -->
  1156. <div class="muse-content-info1">muse name</div>
  1157. </div> <!-- end muse name and info -->
  1158. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1159.  
  1160.  
  1161.  
  1162.  
  1163.  
  1164.  
  1165.  
  1166. <div class="muse-box"> <!-- MAIN MUSE 06 - start of each muse box // copy from here to add more muses -->
  1167. <div class="muse-image">
  1168. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  1169. </div>
  1170. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1171. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1172. <ul class="muse-content-links">
  1173. <li><a href="/tagged/">interactions</a></li>
  1174. <li><a href="/tagged/">photography</a></li>
  1175. <li><a href="/tagged/">musings</a></li>
  1176. <li><a href="/tagged/">starter</a></li>
  1177. <li><a href="/tagged/">likes</a></li>
  1178. <li><a href="/tagged/">texts</a></li>
  1179. </ul>
  1180.  
  1181. <div class="muse-content-title">
  1182. <strong> about muse name </strong>
  1183. </div>
  1184. <ul class="muse-content-stats">
  1185. <li><strong>pronouns:</strong> she/her</li>
  1186. <li><strong>sexuality: </strong>sexuality</li>
  1187. <li><strong>occupation: </strong>occupation</li>
  1188. <li>
  1189. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1190. materialistic
  1191. </li>
  1192. <li><strong>faceclaim:</strong> faceclaim here</li>
  1193. </ul>
  1194.  
  1195. <div class="muse-content-title">
  1196. <strong> additional info </strong>
  1197. </div>
  1198. <ul class="muse-content-stats">
  1199. <li>
  1200. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1201. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1202. </li>
  1203. <li>lorem ipsum consectetuer mattis porta urna</li>
  1204. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1205. <li>
  1206. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1207. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1208. </li>
  1209. </ul>
  1210.  
  1211. <div class="muse-content-title">
  1212. <strong> connections </strong>
  1213. </div>
  1214.  
  1215. <div class="muse-content-box">
  1216. <div>
  1217. <p>muse name</p>
  1218. <a href="">threads</a> / <a href="">musings</a>
  1219. </div>
  1220. <div>
  1221. <p>muse name</p>
  1222. <a href="">threads</a> / <a href="">musings</a>
  1223. </div>
  1224. <div>
  1225. <p>muse name</p>
  1226. <a href="">threads</a> / <a href="">musings</a>
  1227. </div>
  1228. <div>
  1229. <p>muse name</p>
  1230. <a href="">threads</a> / <a href="">musings</a>
  1231. </div>
  1232. </div>
  1233.  
  1234. <div class="muse-content-title">
  1235. <strong> supernatural verse </strong>
  1236. </div>
  1237.  
  1238. <ul class="muse-content-stats">
  1239. <li><strong>age: </strong> age</li>
  1240. <li><strong>species: </strong>species</li>
  1241. <li>
  1242. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1243. materialistic
  1244. </li>
  1245. </ul>
  1246. </div> <!-- end muse content // everything that appears when you hover the image -->
  1247. </div> <!-- end muse content overlay // the background that appears on hover -->
  1248.  
  1249. <div class="muse-content-info">
  1250. <!-- muse name and info -->
  1251. <div class="muse-content-info1">muse name</div>
  1252. <div class="muse-content-info1">age or anything</div>
  1253. </div> <!-- end muse name and info -->
  1254. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1255.  
  1256.  
  1257.  
  1258.  
  1259.  
  1260.  
  1261. <div class="muse-box"> <!-- MAIN MUSE 07 - start of each muse box // copy from here to add more muses -->
  1262. <div class="muse-image">
  1263. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  1264. </div>
  1265. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1266. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1267. <ul class="muse-content-links">
  1268. <li><a href="/tagged/">interactions</a></li>
  1269. <li><a href="/tagged/">photography</a></li>
  1270. <li><a href="/tagged/">musings</a></li>
  1271. <li><a href="/tagged/">starter</a></li>
  1272. <li><a href="/tagged/">likes</a></li>
  1273. <li><a href="/tagged/">texts</a></li>
  1274. </ul>
  1275.  
  1276. <div class="muse-content-title">
  1277. <strong> about muse name </strong>
  1278. </div>
  1279. <ul class="muse-content-stats">
  1280. <li><strong>pronouns:</strong> she/her</li>
  1281. <li><strong>sexuality: </strong>sexuality</li>
  1282. <li><strong>occupation: </strong>occupation</li>
  1283. <li>
  1284. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1285. materialistic
  1286. </li>
  1287. <li><strong>faceclaim:</strong> faceclaim here</li>
  1288. </ul>
  1289.  
  1290. <div class="muse-content-title">
  1291. <strong> additional info </strong>
  1292. </div>
  1293. <ul class="muse-content-stats">
  1294. <li>
  1295. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1296. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1297. </li>
  1298. <li>lorem ipsum consectetuer mattis porta urna</li>
  1299. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1300. <li>
  1301. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1302. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1303. </li>
  1304. </ul>
  1305.  
  1306. <div class="muse-content-title">
  1307. <strong> connections </strong>
  1308. </div>
  1309.  
  1310. <div class="muse-content-box">
  1311. <div>
  1312. <p>muse name</p>
  1313. <a href="">threads</a> / <a href="">musings</a>
  1314. </div>
  1315. <div>
  1316. <p>muse name</p>
  1317. <a href="">threads</a> / <a href="">musings</a>
  1318. </div>
  1319. <div>
  1320. <p>muse name</p>
  1321. <a href="">threads</a> / <a href="">musings</a>
  1322. </div>
  1323. <div>
  1324. <p>muse name</p>
  1325. <a href="">threads</a> / <a href="">musings</a>
  1326. </div>
  1327. </div>
  1328.  
  1329. <div class="muse-content-title">
  1330. <strong> supernatural verse </strong>
  1331. </div>
  1332.  
  1333. <ul class="muse-content-stats">
  1334. <li><strong>age: </strong> age</li>
  1335. <li><strong>species: </strong>species</li>
  1336. <li>
  1337. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1338. materialistic
  1339. </li>
  1340. </ul>
  1341. </div> <!-- end muse content // everything that appears when you hover the image -->
  1342. </div> <!-- end muse content overlay // the background that appears on hover -->
  1343.  
  1344. <div class="muse-content-info">
  1345. <!-- muse name and info -->
  1346. <div class="muse-content-info1">muse name</div>
  1347. <div class="muse-content-info1">age or anything</div>
  1348. </div> <!-- end muse name and info -->
  1349. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1350.  
  1351.  
  1352.  
  1353.  
  1354.  
  1355. <div class="muse-box"> <!-- MAIN MUSE 08 - start of each muse box // copy from here to add more muses -->
  1356. <div class="muse-image">
  1357. <img src="https://static.tumblr.com/0siu224/oOCqjnqu4/1.png" />
  1358. </div>
  1359. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1360. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1361. <ul class="muse-content-links">
  1362. <li><a href="/tagged/">interactions</a></li>
  1363. <li><a href="/tagged/">photography</a></li>
  1364. <li><a href="/tagged/">musings</a></li>
  1365. <li><a href="/tagged/">starter</a></li>
  1366. <li><a href="/tagged/">likes</a></li>
  1367. <li><a href="/tagged/">texts</a></li>
  1368. </ul>
  1369.  
  1370. <div class="muse-content-title">
  1371. <strong> about muse name </strong>
  1372. </div>
  1373. <ul class="muse-content-stats">
  1374. <li><strong>pronouns:</strong> she/her</li>
  1375. <li><strong>sexuality: </strong>sexuality</li>
  1376. <li><strong>occupation: </strong>occupation</li>
  1377. <li>
  1378. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1379. materialistic
  1380. </li>
  1381. <li><strong>faceclaim:</strong> faceclaim here</li>
  1382. </ul>
  1383.  
  1384. <div class="muse-content-title">
  1385. <strong> additional info </strong>
  1386. </div>
  1387. <ul class="muse-content-stats">
  1388. <li>
  1389. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1390. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1391. </li>
  1392. <li>lorem ipsum consectetuer mattis porta urna</li>
  1393. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1394. <li>
  1395. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1396. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1397. </li>
  1398. </ul>
  1399.  
  1400. <div class="muse-content-title">
  1401. <strong> connections </strong>
  1402. </div>
  1403.  
  1404. <div class="muse-content-box">
  1405. <div>
  1406. <p>muse name</p>
  1407. <a href="">threads</a> / <a href="">musings</a>
  1408. </div>
  1409. <div>
  1410. <p>muse name</p>
  1411. <a href="">threads</a> / <a href="">musings</a>
  1412. </div>
  1413. <div>
  1414. <p>muse name</p>
  1415. <a href="">threads</a> / <a href="">musings</a>
  1416. </div>
  1417. <div>
  1418. <p>muse name</p>
  1419. <a href="">threads</a> / <a href="">musings</a>
  1420. </div>
  1421. </div>
  1422.  
  1423. <div class="muse-content-title">
  1424. <strong> supernatural verse </strong>
  1425. </div>
  1426.  
  1427. <ul class="muse-content-stats">
  1428. <li><strong>age: </strong> age</li>
  1429. <li><strong>species: </strong>species</li>
  1430. <li>
  1431. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1432. materialistic
  1433. </li>
  1434. </ul>
  1435. </div> <!-- end muse content // everything that appears when you hover the image -->
  1436. </div> <!-- end muse content overlay // the background that appears on hover -->
  1437.  
  1438. <div class="muse-content-info">
  1439. <!-- muse name and info -->
  1440. <div class="muse-content-info1">muse name</div>
  1441. <div class="muse-content-info1">age or anything</div>
  1442. </div> <!-- end muse name and info -->
  1443. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1444.  
  1445.  
  1446.  
  1447.  
  1448.  
  1449.  
  1450.  
  1451.  
  1452. </div> <!-- END OF MAIN MUSES CONTENT // do not touch! -->
  1453. </div> <!-- END OF MAIN MUSES CONTAINER // do not touch! -->
  1454.  
  1455.  
  1456.  
  1457. <!---------------------------------------------------------------------->
  1458.  
  1459.  
  1460.  
  1461. <div class="muse-secondary-container"> <!-- START OF SECONDARY MUSES CONTAINER // do not touch! -->
  1462. <div class="muse-secondary-content"> <!-- START OF SECONDARY MUSES CONTENT // do not touch! -->
  1463. <span class="muse-secondary-close" onclick="this.parentElement.style.display='none';">
  1464. <a href="#" title="close tab"> <i data-feather="x-circle" class="feather"></i> </a>
  1465. </span>
  1466.  
  1467.  
  1468.  
  1469. <div class="muse-box"> <!-- SECONDARY MUSE 01 - start of each muse box // copy from here to add more muses -->
  1470. <div class="muse-image">
  1471. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1472. </div>
  1473. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1474. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1475. <ul class="muse-content-links">
  1476. <li><a href="/tagged/">interactions</a></li>
  1477. <li><a href="/tagged/">photography</a></li>
  1478. <li><a href="/tagged/">musings</a></li>
  1479. <li><a href="/tagged/">starter</a></li>
  1480. <li><a href="/tagged/">likes</a></li>
  1481. <li><a href="/tagged/">texts</a></li>
  1482. </ul>
  1483.  
  1484. <div class="muse-content-title">
  1485. <strong> about muse name </strong>
  1486. </div>
  1487. <ul class="muse-content-stats">
  1488. <li><strong>pronouns:</strong> she/her</li>
  1489. <li><strong>sexuality: </strong>sexuality</li>
  1490. <li><strong>occupation: </strong>occupation</li>
  1491. <li>
  1492. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1493. materialistic
  1494. </li>
  1495. <li><strong>faceclaim:</strong> faceclaim here</li>
  1496. </ul>
  1497.  
  1498. <div class="muse-content-title">
  1499. <strong> additional info </strong>
  1500. </div>
  1501. <ul class="muse-content-stats">
  1502. <li>
  1503. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1504. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1505. </li>
  1506. <li>lorem ipsum consectetuer mattis porta urna</li>
  1507. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1508. <li>
  1509. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1510. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1511. </li>
  1512. </ul>
  1513.  
  1514. <div class="muse-content-title">
  1515. <strong> connections </strong>
  1516. </div>
  1517.  
  1518. <div class="muse-content-box">
  1519. <div>
  1520. <p>muse name</p>
  1521. <a href="">threads</a> / <a href="">musings</a>
  1522. </div>
  1523. <div>
  1524. <p>muse name</p>
  1525. <a href="">threads</a> / <a href="">musings</a>
  1526. </div>
  1527. <div>
  1528. <p>muse name</p>
  1529. <a href="">threads</a> / <a href="">musings</a>
  1530. </div>
  1531. <div>
  1532. <p>muse name</p>
  1533. <a href="">threads</a> / <a href="">musings</a>
  1534. </div>
  1535. </div>
  1536.  
  1537. <div class="muse-content-title">
  1538. <strong> supernatural verse </strong>
  1539. </div>
  1540.  
  1541. <ul class="muse-content-stats">
  1542. <li><strong>age: </strong> age</li>
  1543. <li><strong>species: </strong>species</li>
  1544. <li>
  1545. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1546. materialistic
  1547. </li>
  1548. </ul>
  1549. </div> <!-- end muse content // everything that appears when you hover the image -->
  1550. </div> <!-- end muse content overlay // the background that appears on hover -->
  1551.  
  1552. <div class="muse-content-info">
  1553. <!-- muse name and info -->
  1554. <div class="muse-content-info1">muse name</div>
  1555. <div class="muse-content-info1">age or anything</div>
  1556. </div> <!-- end muse name and info -->
  1557. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1558.  
  1559.  
  1560.  
  1561.  
  1562.  
  1563.  
  1564. <div class="muse-box"> <!-- SECONDARY MUSE 02 - start of each muse box // copy from here to add more muses -->
  1565. <div class="muse-image">
  1566. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1567. </div>
  1568. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1569. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1570. <ul class="muse-content-links">
  1571. <li><a href="/tagged/">interactions</a></li>
  1572. <li><a href="/tagged/">photography</a></li>
  1573. <li><a href="/tagged/">musings</a></li>
  1574. <li><a href="/tagged/">starter</a></li>
  1575. <li><a href="/tagged/">likes</a></li>
  1576. <li><a href="/tagged/">texts</a></li>
  1577. </ul>
  1578.  
  1579. <div class="muse-content-title">
  1580. <strong> about muse name </strong>
  1581. </div>
  1582. <ul class="muse-content-stats">
  1583. <li><strong>pronouns:</strong> she/her</li>
  1584. <li><strong>sexuality: </strong>sexuality</li>
  1585. <li><strong>occupation: </strong>occupation</li>
  1586. <li>
  1587. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1588. materialistic
  1589. </li>
  1590. <li><strong>faceclaim:</strong> faceclaim here</li>
  1591. </ul>
  1592.  
  1593. <div class="muse-content-title">
  1594. <strong> additional info </strong>
  1595. </div>
  1596. <ul class="muse-content-stats">
  1597. <li>
  1598. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1599. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1600. </li>
  1601. <li>lorem ipsum consectetuer mattis porta urna</li>
  1602. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1603. <li>
  1604. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1605. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1606. </li>
  1607. </ul>
  1608.  
  1609. <div class="muse-content-title">
  1610. <strong> connections </strong>
  1611. </div>
  1612.  
  1613. <div class="muse-content-box">
  1614. <div>
  1615. <p>muse name</p>
  1616. <a href="">threads</a> / <a href="">musings</a>
  1617. </div>
  1618. <div>
  1619. <p>muse name</p>
  1620. <a href="">threads</a> / <a href="">musings</a>
  1621. </div>
  1622. <div>
  1623. <p>muse name</p>
  1624. <a href="">threads</a> / <a href="">musings</a>
  1625. </div>
  1626. <div>
  1627. <p>muse name</p>
  1628. <a href="">threads</a> / <a href="">musings</a>
  1629. </div>
  1630. </div>
  1631.  
  1632. <div class="muse-content-title">
  1633. <strong> supernatural verse </strong>
  1634. </div>
  1635.  
  1636. <ul class="muse-content-stats">
  1637. <li><strong>age: </strong> age</li>
  1638. <li><strong>species: </strong>species</li>
  1639. <li>
  1640. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1641. materialistic
  1642. </li>
  1643. </ul>
  1644. </div> <!-- end muse content // everything that appears when you hover the image -->
  1645. </div> <!-- end muse content overlay // the background that appears on hover -->
  1646.  
  1647. <div class="muse-content-info">
  1648. <!-- muse name and info -->
  1649. <div class="muse-content-info1">muse name</div>
  1650. <div class="muse-content-info1">age or anything</div>
  1651. </div> <!-- end muse name and info -->
  1652. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1653.  
  1654.  
  1655.  
  1656.  
  1657.  
  1658. <div class="muse-box"> <!-- SECONDARY MUSE 03 - start of each muse box // copy from here to add more muses -->
  1659. <div class="muse-image">
  1660. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1661. </div>
  1662. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1663. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1664. <ul class="muse-content-links">
  1665. <li><a href="/tagged/">interactions</a></li>
  1666. <li><a href="/tagged/">photography</a></li>
  1667. <li><a href="/tagged/">musings</a></li>
  1668. <li><a href="/tagged/">starter</a></li>
  1669. <li><a href="/tagged/">likes</a></li>
  1670. <li><a href="/tagged/">texts</a></li>
  1671. </ul>
  1672.  
  1673. <div class="muse-content-title">
  1674. <strong> about muse name </strong>
  1675. </div>
  1676. <ul class="muse-content-stats">
  1677. <li><strong>pronouns:</strong> she/her</li>
  1678. <li><strong>sexuality: </strong>sexuality</li>
  1679. <li><strong>occupation: </strong>occupation</li>
  1680. <li>
  1681. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1682. materialistic
  1683. </li>
  1684. <li><strong>faceclaim:</strong> faceclaim here</li>
  1685. </ul>
  1686.  
  1687. <div class="muse-content-title">
  1688. <strong> additional info </strong>
  1689. </div>
  1690. <ul class="muse-content-stats">
  1691. <li>
  1692. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1693. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1694. </li>
  1695. <li>lorem ipsum consectetuer mattis porta urna</li>
  1696. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1697. <li>
  1698. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1699. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1700. </li>
  1701. </ul>
  1702.  
  1703. <div class="muse-content-title">
  1704. <strong> connections </strong>
  1705. </div>
  1706.  
  1707. <div class="muse-content-box">
  1708. <div>
  1709. <p>muse name</p>
  1710. <a href="">threads</a> / <a href="">musings</a>
  1711. </div>
  1712. <div>
  1713. <p>muse name</p>
  1714. <a href="">threads</a> / <a href="">musings</a>
  1715. </div>
  1716. <div>
  1717. <p>muse name</p>
  1718. <a href="">threads</a> / <a href="">musings</a>
  1719. </div>
  1720. <div>
  1721. <p>muse name</p>
  1722. <a href="">threads</a> / <a href="">musings</a>
  1723. </div>
  1724. </div>
  1725.  
  1726. <div class="muse-content-title">
  1727. <strong> supernatural verse </strong>
  1728. </div>
  1729.  
  1730. <ul class="muse-content-stats">
  1731. <li><strong>age: </strong> age</li>
  1732. <li><strong>species: </strong>species</li>
  1733. <li>
  1734. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1735. materialistic
  1736. </li>
  1737. </ul>
  1738. </div> <!-- end muse content // everything that appears when you hover the image -->
  1739. </div> <!-- end muse content overlay // the background that appears on hover -->
  1740.  
  1741. <div class="muse-content-info">
  1742. <!-- muse name and info -->
  1743. <div class="muse-content-info1">muse name</div>
  1744. <div class="muse-content-info1">age or anything</div>
  1745. </div> <!-- end muse name and info -->
  1746. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1747.  
  1748.  
  1749.  
  1750.  
  1751.  
  1752.  
  1753. <div class="muse-box"> <!-- SECONDARY MUSE 04 - start of each muse box // copy from here to add more muses -->
  1754. <div class="muse-image">
  1755. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1756. </div>
  1757. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1758. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1759. <ul class="muse-content-links">
  1760. <li><a href="/tagged/">interactions</a></li>
  1761. <li><a href="/tagged/">photography</a></li>
  1762. <li><a href="/tagged/">musings</a></li>
  1763. <li><a href="/tagged/">starter</a></li>
  1764. <li><a href="/tagged/">likes</a></li>
  1765. <li><a href="/tagged/">texts</a></li>
  1766. </ul>
  1767.  
  1768. <div class="muse-content-title">
  1769. <strong> about muse name </strong>
  1770. </div>
  1771. <ul class="muse-content-stats">
  1772. <li><strong>pronouns:</strong> she/her</li>
  1773. <li><strong>sexuality: </strong>sexuality</li>
  1774. <li><strong>occupation: </strong>occupation</li>
  1775. <li>
  1776. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1777. materialistic
  1778. </li>
  1779. <li><strong>faceclaim:</strong> faceclaim here</li>
  1780. </ul>
  1781.  
  1782. <div class="muse-content-title">
  1783. <strong> additional info </strong>
  1784. </div>
  1785. <ul class="muse-content-stats">
  1786. <li>
  1787. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1788. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1789. </li>
  1790. <li>lorem ipsum consectetuer mattis porta urna</li>
  1791. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1792. <li>
  1793. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1794. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1795. </li>
  1796. </ul>
  1797.  
  1798. <div class="muse-content-title">
  1799. <strong> connections </strong>
  1800. </div>
  1801.  
  1802. <div class="muse-content-box">
  1803. <div>
  1804. <p>muse name</p>
  1805. <a href="">threads</a> / <a href="">musings</a>
  1806. </div>
  1807. <div>
  1808. <p>muse name</p>
  1809. <a href="">threads</a> / <a href="">musings</a>
  1810. </div>
  1811. <div>
  1812. <p>muse name</p>
  1813. <a href="">threads</a> / <a href="">musings</a>
  1814. </div>
  1815. <div>
  1816. <p>muse name</p>
  1817. <a href="">threads</a> / <a href="">musings</a>
  1818. </div>
  1819. </div>
  1820.  
  1821. <div class="muse-content-title">
  1822. <strong> supernatural verse </strong>
  1823. </div>
  1824.  
  1825. <ul class="muse-content-stats">
  1826. <li><strong>age: </strong> age</li>
  1827. <li><strong>species: </strong>species</li>
  1828. <li>
  1829. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1830. materialistic
  1831. </li>
  1832. </ul>
  1833. </div> <!-- end muse content // everything that appears when you hover the image -->
  1834. </div> <!-- end muse content overlay // the background that appears on hover -->
  1835.  
  1836. <div class="muse-content-info">
  1837. <!-- muse name and info -->
  1838. <div class="muse-content-info1">muse name</div>
  1839. <div class="muse-content-info1">age or anything</div>
  1840. </div> <!-- end muse name and info -->
  1841. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1842.  
  1843.  
  1844.  
  1845.  
  1846.  
  1847.  
  1848. <div class="muse-box"> <!-- SECONDARY MUSE 05 - start of each muse box // copy from here to add more muses -->
  1849. <div class="muse-image">
  1850. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1851. </div>
  1852. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1853. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1854. <ul class="muse-content-links">
  1855. <li><a href="/tagged/">interactions</a></li>
  1856. <li><a href="/tagged/">photography</a></li>
  1857. <li><a href="/tagged/">musings</a></li>
  1858. <li><a href="/tagged/">starter</a></li>
  1859. <li><a href="/tagged/">likes</a></li>
  1860. <li><a href="/tagged/">texts</a></li>
  1861. </ul>
  1862.  
  1863. <div class="muse-content-title">
  1864. <strong> about muse name </strong>
  1865. </div>
  1866. <ul class="muse-content-stats">
  1867. <li><strong>pronouns:</strong> she/her</li>
  1868. <li><strong>sexuality: </strong>sexuality</li>
  1869. <li><strong>occupation: </strong>occupation</li>
  1870. <li>
  1871. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1872. materialistic
  1873. </li>
  1874. <li><strong>faceclaim:</strong> faceclaim here</li>
  1875. </ul>
  1876.  
  1877. <div class="muse-content-title">
  1878. <strong> additional info </strong>
  1879. </div>
  1880. <ul class="muse-content-stats">
  1881. <li>
  1882. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1883. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1884. </li>
  1885. <li>lorem ipsum consectetuer mattis porta urna</li>
  1886. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1887. <li>
  1888. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1889. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1890. </li>
  1891. </ul>
  1892.  
  1893. <div class="muse-content-title">
  1894. <strong> connections </strong>
  1895. </div>
  1896.  
  1897. <div class="muse-content-box">
  1898. <div>
  1899. <p>muse name</p>
  1900. <a href="">threads</a> / <a href="">musings</a>
  1901. </div>
  1902. <div>
  1903. <p>muse name</p>
  1904. <a href="">threads</a> / <a href="">musings</a>
  1905. </div>
  1906. <div>
  1907. <p>muse name</p>
  1908. <a href="">threads</a> / <a href="">musings</a>
  1909. </div>
  1910. <div>
  1911. <p>muse name</p>
  1912. <a href="">threads</a> / <a href="">musings</a>
  1913. </div>
  1914. </div>
  1915.  
  1916. <div class="muse-content-title">
  1917. <strong> supernatural verse </strong>
  1918. </div>
  1919.  
  1920. <ul class="muse-content-stats">
  1921. <li><strong>age: </strong> age</li>
  1922. <li><strong>species: </strong>species</li>
  1923. <li>
  1924. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1925. materialistic
  1926. </li>
  1927. </ul>
  1928. </div> <!-- end muse content // everything that appears when you hover the image -->
  1929. </div> <!-- end muse content overlay // the background that appears on hover -->
  1930.  
  1931. <div class="muse-content-info">
  1932. <!-- muse name and info -->
  1933. <div class="muse-content-info1">muse name</div>
  1934. <div class="muse-content-info1">age or anything</div>
  1935. </div> <!-- end muse name and info -->
  1936. </div> <!-- end of each muse box // copy all to here to add more muses -->
  1937.  
  1938.  
  1939.  
  1940.  
  1941.  
  1942.  
  1943.  
  1944. <div class="muse-box"> <!-- SECONDARY MUSE 06 - start of each muse box // copy from here to add more muses -->
  1945. <div class="muse-image">
  1946. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  1947. </div>
  1948. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  1949. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  1950. <ul class="muse-content-links">
  1951. <li><a href="/tagged/">interactions</a></li>
  1952. <li><a href="/tagged/">photography</a></li>
  1953. <li><a href="/tagged/">musings</a></li>
  1954. <li><a href="/tagged/">starter</a></li>
  1955. <li><a href="/tagged/">likes</a></li>
  1956. <li><a href="/tagged/">texts</a></li>
  1957. </ul>
  1958.  
  1959. <div class="muse-content-title">
  1960. <strong> about muse name </strong>
  1961. </div>
  1962. <ul class="muse-content-stats">
  1963. <li><strong>pronouns:</strong> she/her</li>
  1964. <li><strong>sexuality: </strong>sexuality</li>
  1965. <li><strong>occupation: </strong>occupation</li>
  1966. <li>
  1967. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  1968. materialistic
  1969. </li>
  1970. <li><strong>faceclaim:</strong> faceclaim here</li>
  1971. </ul>
  1972.  
  1973. <div class="muse-content-title">
  1974. <strong> additional info </strong>
  1975. </div>
  1976. <ul class="muse-content-stats">
  1977. <li>
  1978. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1979. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1980. </li>
  1981. <li>lorem ipsum consectetuer mattis porta urna</li>
  1982. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  1983. <li>
  1984. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  1985. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  1986. </li>
  1987. </ul>
  1988.  
  1989. <div class="muse-content-title">
  1990. <strong> connections </strong>
  1991. </div>
  1992.  
  1993. <div class="muse-content-box">
  1994. <div>
  1995. <p>muse name</p>
  1996. <a href="">threads</a> / <a href="">musings</a>
  1997. </div>
  1998. <div>
  1999. <p>muse name</p>
  2000. <a href="">threads</a> / <a href="">musings</a>
  2001. </div>
  2002. <div>
  2003. <p>muse name</p>
  2004. <a href="">threads</a> / <a href="">musings</a>
  2005. </div>
  2006. <div>
  2007. <p>muse name</p>
  2008. <a href="">threads</a> / <a href="">musings</a>
  2009. </div>
  2010. </div>
  2011.  
  2012. <div class="muse-content-title">
  2013. <strong> supernatural verse </strong>
  2014. </div>
  2015.  
  2016. <ul class="muse-content-stats">
  2017. <li><strong>age: </strong> age</li>
  2018. <li><strong>species: </strong>species</li>
  2019. <li>
  2020. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2021. materialistic
  2022. </li>
  2023. </ul>
  2024. </div> <!-- end muse content // everything that appears when you hover the image -->
  2025. </div> <!-- end muse content overlay // the background that appears on hover -->
  2026.  
  2027. <div class="muse-content-info">
  2028. <!-- muse name and info -->
  2029. <div class="muse-content-info1">muse name</div>
  2030. <div class="muse-content-info1">age or anything</div>
  2031. </div> <!-- end muse name and info -->
  2032. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2033.  
  2034.  
  2035.  
  2036.  
  2037.  
  2038.  
  2039.  
  2040. <div class="muse-box"> <!-- SECONDARY MUSE 07 - start of each muse box // copy from here to add more muses -->
  2041. <div class="muse-image">
  2042. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  2043. </div>
  2044. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2045. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2046. <ul class="muse-content-links">
  2047. <li><a href="/tagged/">interactions</a></li>
  2048. <li><a href="/tagged/">photography</a></li>
  2049. <li><a href="/tagged/">musings</a></li>
  2050. <li><a href="/tagged/">starter</a></li>
  2051. <li><a href="/tagged/">likes</a></li>
  2052. <li><a href="/tagged/">texts</a></li>
  2053. </ul>
  2054.  
  2055. <div class="muse-content-title">
  2056. <strong> about muse name </strong>
  2057. </div>
  2058. <ul class="muse-content-stats">
  2059. <li><strong>pronouns:</strong> she/her</li>
  2060. <li><strong>sexuality: </strong>sexuality</li>
  2061. <li><strong>occupation: </strong>occupation</li>
  2062. <li>
  2063. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2064. materialistic
  2065. </li>
  2066. <li><strong>faceclaim:</strong> faceclaim here</li>
  2067. </ul>
  2068.  
  2069. <div class="muse-content-title">
  2070. <strong> additional info </strong>
  2071. </div>
  2072. <ul class="muse-content-stats">
  2073. <li>
  2074. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2075. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2076. </li>
  2077. <li>lorem ipsum consectetuer mattis porta urna</li>
  2078. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2079. <li>
  2080. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2081. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2082. </li>
  2083. </ul>
  2084.  
  2085. <div class="muse-content-title">
  2086. <strong> connections </strong>
  2087. </div>
  2088.  
  2089. <div class="muse-content-box">
  2090. <div>
  2091. <p>muse name</p>
  2092. <a href="">threads</a> / <a href="">musings</a>
  2093. </div>
  2094. <div>
  2095. <p>muse name</p>
  2096. <a href="">threads</a> / <a href="">musings</a>
  2097. </div>
  2098. <div>
  2099. <p>muse name</p>
  2100. <a href="">threads</a> / <a href="">musings</a>
  2101. </div>
  2102. <div>
  2103. <p>muse name</p>
  2104. <a href="">threads</a> / <a href="">musings</a>
  2105. </div>
  2106. </div>
  2107.  
  2108. <div class="muse-content-title">
  2109. <strong> supernatural verse </strong>
  2110. </div>
  2111.  
  2112. <ul class="muse-content-stats">
  2113. <li><strong>age: </strong> age</li>
  2114. <li><strong>species: </strong>species</li>
  2115. <li>
  2116. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2117. materialistic
  2118. </li>
  2119. </ul>
  2120. </div> <!-- end muse content // everything that appears when you hover the image -->
  2121. </div> <!-- end muse content overlay // the background that appears on hover -->
  2122.  
  2123. <div class="muse-content-info">
  2124. <!-- muse name and info -->
  2125. <div class="muse-content-info1">muse name</div>
  2126. <div class="muse-content-info1">age or anything</div>
  2127. </div> <!-- end muse name and info -->
  2128. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2129.  
  2130.  
  2131.  
  2132.  
  2133.  
  2134.  
  2135.  
  2136. <div class="muse-box"> <!-- SECONDARY MUSE 08 - start of each muse box // copy from here to add more muses -->
  2137. <div class="muse-image">
  2138. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  2139. </div>
  2140. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2141. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2142. <ul class="muse-content-links">
  2143. <li><a href="/tagged/">interactions</a></li>
  2144. <li><a href="/tagged/">photography</a></li>
  2145. <li><a href="/tagged/">musings</a></li>
  2146. <li><a href="/tagged/">starter</a></li>
  2147. <li><a href="/tagged/">likes</a></li>
  2148. <li><a href="/tagged/">texts</a></li>
  2149. </ul>
  2150.  
  2151. <div class="muse-content-title">
  2152. <strong> about muse name </strong>
  2153. </div>
  2154. <ul class="muse-content-stats">
  2155. <li><strong>pronouns:</strong> she/her</li>
  2156. <li><strong>sexuality: </strong>sexuality</li>
  2157. <li><strong>occupation: </strong>occupation</li>
  2158. <li>
  2159. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2160. materialistic
  2161. </li>
  2162. <li><strong>faceclaim:</strong> faceclaim here</li>
  2163. </ul>
  2164.  
  2165. <div class="muse-content-title">
  2166. <strong> additional info </strong>
  2167. </div>
  2168. <ul class="muse-content-stats">
  2169. <li>
  2170. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2171. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2172. </li>
  2173. <li>lorem ipsum consectetuer mattis porta urna</li>
  2174. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2175. <li>
  2176. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2177. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2178. </li>
  2179. </ul>
  2180.  
  2181. <div class="muse-content-title">
  2182. <strong> connections </strong>
  2183. </div>
  2184.  
  2185. <div class="muse-content-box">
  2186. <div>
  2187. <p>muse name</p>
  2188. <a href="">threads</a> / <a href="">musings</a>
  2189. </div>
  2190. <div>
  2191. <p>muse name</p>
  2192. <a href="">threads</a> / <a href="">musings</a>
  2193. </div>
  2194. <div>
  2195. <p>muse name</p>
  2196. <a href="">threads</a> / <a href="">musings</a>
  2197. </div>
  2198. <div>
  2199. <p>muse name</p>
  2200. <a href="">threads</a> / <a href="">musings</a>
  2201. </div>
  2202. </div>
  2203.  
  2204. <div class="muse-content-title">
  2205. <strong> supernatural verse </strong>
  2206. </div>
  2207.  
  2208. <ul class="muse-content-stats">
  2209. <li><strong>age: </strong> age</li>
  2210. <li><strong>species: </strong>species</li>
  2211. <li>
  2212. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2213. materialistic
  2214. </li>
  2215. </ul>
  2216. </div> <!-- end muse content // everything that appears when you hover the image -->
  2217. </div> <!-- end muse content overlay // the background that appears on hover -->
  2218.  
  2219. <div class="muse-content-info">
  2220. <!-- muse name and info -->
  2221. <div class="muse-content-info1">muse name</div>
  2222. <div class="muse-content-info1">age or anything</div>
  2223. </div> <!-- end muse name and info -->
  2224. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2225.  
  2226.  
  2227.  
  2228.  
  2229.  
  2230.  
  2231.  
  2232. <div class="muse-box"> <!-- SECONDARY MUSE 09 - start of each muse box // copy from here to add more muses -->
  2233. <div class="muse-image">
  2234. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  2235. </div>
  2236. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2237. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2238. <ul class="muse-content-links">
  2239. <li><a href="/tagged/">interactions</a></li>
  2240. <li><a href="/tagged/">photography</a></li>
  2241. <li><a href="/tagged/">musings</a></li>
  2242. <li><a href="/tagged/">starter</a></li>
  2243. <li><a href="/tagged/">likes</a></li>
  2244. <li><a href="/tagged/">texts</a></li>
  2245. </ul>
  2246.  
  2247. <div class="muse-content-title">
  2248. <strong> about muse name </strong>
  2249. </div>
  2250. <ul class="muse-content-stats">
  2251. <li><strong>pronouns:</strong> she/her</li>
  2252. <li><strong>sexuality: </strong>sexuality</li>
  2253. <li><strong>occupation: </strong>occupation</li>
  2254. <li>
  2255. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2256. materialistic
  2257. </li>
  2258. <li><strong>faceclaim:</strong> faceclaim here</li>
  2259. </ul>
  2260.  
  2261. <div class="muse-content-title">
  2262. <strong> additional info </strong>
  2263. </div>
  2264. <ul class="muse-content-stats">
  2265. <li>
  2266. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2267. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2268. </li>
  2269. <li>lorem ipsum consectetuer mattis porta urna</li>
  2270. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2271. <li>
  2272. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2273. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2274. </li>
  2275. </ul>
  2276.  
  2277. <div class="muse-content-title">
  2278. <strong> connections </strong>
  2279. </div>
  2280.  
  2281. <div class="muse-content-box">
  2282. <div>
  2283. <p>muse name</p>
  2284. <a href="">threads</a> / <a href="">musings</a>
  2285. </div>
  2286. <div>
  2287. <p>muse name</p>
  2288. <a href="">threads</a> / <a href="">musings</a>
  2289. </div>
  2290. <div>
  2291. <p>muse name</p>
  2292. <a href="">threads</a> / <a href="">musings</a>
  2293. </div>
  2294. <div>
  2295. <p>muse name</p>
  2296. <a href="">threads</a> / <a href="">musings</a>
  2297. </div>
  2298. </div>
  2299.  
  2300. <div class="muse-content-title">
  2301. <strong> supernatural verse </strong>
  2302. </div>
  2303.  
  2304. <ul class="muse-content-stats">
  2305. <li><strong>age: </strong> age</li>
  2306. <li><strong>species: </strong>species</li>
  2307. <li>
  2308. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2309. materialistic
  2310. </li>
  2311. </ul>
  2312. </div> <!-- end muse content // everything that appears when you hover the image -->
  2313. </div> <!-- end muse content overlay // the background that appears on hover -->
  2314.  
  2315. <div class="muse-content-info">
  2316. <!-- muse name and info -->
  2317. <div class="muse-content-info1">muse name</div>
  2318. <div class="muse-content-info1">age or anything</div>
  2319. </div> <!-- end muse name and info -->
  2320. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2321.  
  2322.  
  2323.  
  2324.  
  2325.  
  2326.  
  2327.  
  2328. <div class="muse-box"> <!-- SECONDARY MUSE 10 - start of each muse box // copy from here to add more muses -->
  2329. <div class="muse-image">
  2330. <img src="https://static.tumblr.com/0siu224/30jqjnqu9/2.png" />
  2331. </div>
  2332. <div class="muse-overlay"> <!-- start muse content overlay // the background that appears on hover -->
  2333. <div class="muse-content"> <!-- start muse content // everything that appears when you hover the image -->
  2334. <ul class="muse-content-links">
  2335. <li><a href="/tagged/">interactions</a></li>
  2336. <li><a href="/tagged/">photography</a></li>
  2337. <li><a href="/tagged/">musings</a></li>
  2338. <li><a href="/tagged/">starter</a></li>
  2339. <li><a href="/tagged/">likes</a></li>
  2340. <li><a href="/tagged/">texts</a></li>
  2341. </ul>
  2342.  
  2343. <div class="muse-content-title">
  2344. <strong> about muse name </strong>
  2345. </div>
  2346. <ul class="muse-content-stats">
  2347. <li><strong>pronouns:</strong> she/her</li>
  2348. <li><strong>sexuality: </strong>sexuality</li>
  2349. <li><strong>occupation: </strong>occupation</li>
  2350. <li>
  2351. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2352. materialistic
  2353. </li>
  2354. <li><strong>faceclaim:</strong> faceclaim here</li>
  2355. </ul>
  2356.  
  2357. <div class="muse-content-title">
  2358. <strong> additional info </strong>
  2359. </div>
  2360. <ul class="muse-content-stats">
  2361. <li>
  2362. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2363. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2364. </li>
  2365. <li>lorem ipsum consectetuer mattis porta urna</li>
  2366. <li>lorem ipsum consectetuer mattis porta urna, adipiscing elit.</li>
  2367. <li>
  2368. lorem ipsum consectetuer mattis porta urna, adipiscing elit. aliquam nisi lorem,
  2369. pulvinar id, commodo feugiat, vehicula et, aliquam mattis porta urna.
  2370. </li>
  2371. </ul>
  2372.  
  2373. <div class="muse-content-title">
  2374. <strong> connections </strong>
  2375. </div>
  2376.  
  2377. <div class="muse-content-box">
  2378. <div>
  2379. <p>muse name</p>
  2380. <a href="">threads</a> / <a href="">musings</a>
  2381. </div>
  2382. <div>
  2383. <p>muse name</p>
  2384. <a href="">threads</a> / <a href="">musings</a>
  2385. </div>
  2386. <div>
  2387. <p>muse name</p>
  2388. <a href="">threads</a> / <a href="">musings</a>
  2389. </div>
  2390. <div>
  2391. <p>muse name</p>
  2392. <a href="">threads</a> / <a href="">musings</a>
  2393. </div>
  2394. </div>
  2395.  
  2396. <div class="muse-content-title">
  2397. <strong> supernatural verse </strong>
  2398. </div>
  2399.  
  2400. <ul class="muse-content-stats">
  2401. <li><strong>age: </strong> age</li>
  2402. <li><strong>species: </strong>species</li>
  2403. <li>
  2404. <strong>traits:</strong> persuasive, amusing, ebullient, careless, flirtatious and
  2405. materialistic
  2406. </li>
  2407. </ul>
  2408. </div> <!-- end muse content // everything that appears when you hover the image -->
  2409. </div> <!-- end muse content overlay // the background that appears on hover -->
  2410.  
  2411. <div class="muse-content-info">
  2412. <!-- muse name and info -->
  2413. <div class="muse-content-info1">muse name</div>
  2414. <div class="muse-content-info1">age or anything</div>
  2415. </div> <!-- end muse name and info -->
  2416. </div> <!-- end of each muse box // copy all to here to add more muses -->
  2417.  
  2418.  
  2419.  
  2420.  
  2421.  
  2422.  
  2423. </div> <!-- END OF SECONDARY MUSES CONTENT // do not touch! -->
  2424. </div> <!-- END OF SECONDARY MUSES CONTAINER // do not touch! -->
  2425. </div> <!-- END MUSES CONTAINER // do not touch! -->
  2426.  
  2427. <div class="bottom-navigation">
  2428. <nav class="navigation-links">
  2429. <ul>
  2430. <li>
  2431. <a href="/" title="wanted op">
  2432. <i data-feather="heart" class="feather"></i>
  2433. </a>
  2434. </li>
  2435. <li>
  2436. <a href="/" title="wishlist">
  2437. <i data-feather="book-open" class="feather"></i>
  2438. </a>
  2439. </li>
  2440.  
  2441. <li>
  2442. <a href="/" title="open starters">
  2443. <i data-feather="edit" class="feather"></i>
  2444. </a>
  2445. </li>
  2446.  
  2447. <li>
  2448. <a href="/" title="extra link 1">
  2449. <i data-feather="plus-circle" class="feather"></i>
  2450. </a>
  2451. </li>
  2452. </ul>
  2453. </nav>
  2454.  
  2455. <div class="navigation-description">
  2456. write anything else here. it needs to occupy four lines top or it will get messy!
  2457. <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>stroke</s> // lorem ipsum
  2458. consectetuer mattis porta urna, adipiscing elit.
  2459. </div>
  2460.  
  2461. <div class="mcredito">
  2462. <a href="http://maziekeen.tumblr.com/" target="_blank">maziekeen</a>
  2463. </div>
  2464. </div> <!-- end container -->
  2465. </div>
  2466.  
  2467.  
  2468.  
  2469.  
  2470. <!------------ scripts ---->
  2471.  
  2472. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- for tooltips -->
  2473. <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>-->
  2474. <script src="https://unpkg.com/popper.js@1"></script> <!-- tooltips -->
  2475. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <!-- tooltips -->
  2476. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" /> <!-- tooltips -->
  2477. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script> <!-- smooth scroll -->
  2478.  
  2479.  
  2480. <script type="text/javascript">
  2481.  
  2482. $(document).ready(function() {
  2483. $(".toggle-link").click(function(event) {
  2484. event.preventDefault();
  2485. $(this).closest('.container').find('.muse-secondary-content').css("display", "grid");
  2486. });
  2487.  
  2488. });
  2489.  
  2490. // tooltips
  2491.  
  2492. tippy('a[title]', {
  2493. theme: 'custom',
  2494. arrow: tippy.roundArrow,
  2495. zIndex: 9999999999,
  2496. maxWidth: 300,
  2497.  
  2498. content(reference) {
  2499. const title = reference.getAttribute('title');
  2500. reference.removeAttribute('title');
  2501. return title;
  2502. },
  2503. });
  2504.  
  2505.  
  2506. // feather icons (custom icons)
  2507.  
  2508. feather.replace();
  2509.  
  2510.  
  2511.  
  2512.  
  2513. </script>
  2514.  
  2515.  
  2516.  
  2517.  
  2518. </body>
  2519. </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!