API tools faq
paste
Advertisement
sexycullen

theme 218 light /small screen

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