API tools faq
paste
Advertisement
sexycullen

theme 218 dark

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