API tools faq
paste
Advertisement
sproutjoon

cursh cursh

sproutjoon
Feb 18th, 2020
615
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.45 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!--
  3.  
  4. 1. PLEASE DON'T REMOVE THE CREDIT.
  5. 2. feel free to edit all the fonts and colors but don't claim as yours.
  6. 3. don't take parts of the code.
  7. 4. don't use it as a base.
  8.  
  9. made by: springdoy.
  10.  
  11. if you have any question i'll be happy to help you!
  12.  
  13. -->
  14.  
  15.  
  16. <html>
  17. <head>
  18.  
  19. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script>
  21. $(document).ready(function() {
  22. //
  23. $('a.poplight[href^=#]').click(function() {
  24. var popID = $(this).attr('rel'); //Get Popup Name
  25. var popURL = $(this).attr('href'); //Get Popup href to define size
  26. var query= popURL.split('?');
  27. var dim= query[1].split('&');
  28. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  29. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  30. var popMargTop = ($('#' + popID).height() + 80) / 2;
  31. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  32. //Apply Margin to Popup
  33. $('#' + popID).css({
  34. 'margin-top' : -popMargTop,
  35. 'margin-left' : -popMargLeft
  36. });
  37. $('body').append('<div id="fade"></div>');
  38. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  39. return false;
  40. });
  41. $('a.close, #fade').live('click', function() {
  42. $('#fade , .popup_block').fadeOut(function() {
  43. $('#fade, a.close').remove(); //fade them both out
  44. });
  45. return false;
  46. });
  47. });
  48. </script>
  49.  
  50. <title>{Title}</title>
  51. <link rel="shortcut icon" href="{Favicon}">
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  53. {block:Description}
  54. <meta name="description" content="{MetaDescription}" />
  55. {/block:Description}
  56. <link rel="stylesheet" href="https://use.typekit.net/wkv7ziz.css">
  57. <link href="https://fonts.googleapis.com/css?family=Istok+Web:400,400i,700,700i&display=swap" rel="stylesheet">
  58. <link href="https://fonts.googleapis.com/css?family=Gaegu:400,700|Saira+Extra+Condensed:700,900&display=swap" rel="stylesheet">
  59. <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i|Shrikhand&display=swap" rel="stylesheet">
  60. <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
  61. <script src="https://kit.fontawesome.com/860e19f8d2.js"></script>
  62. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  63.  
  64. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  65.  
  66.  
  67. <script>
  68.  
  69. (function($){
  70.  
  71. $(document).ready(function(){
  72.  
  73. $("a[title]").style_my_tooltips({
  74.  
  75. tip_follows_cursor:true,
  76.  
  77. tip_delay_time:90,
  78.  
  79. tip_fade_speed:600,
  80.  
  81. attribute:"title"
  82.  
  83. });
  84.  
  85. });
  86.  
  87. })(jQuery);
  88.  
  89. </script>
  90.  
  91. <meta name="color:bg" content="#e2e2e2"/>
  92. <meta name="color:txt" content="#575757"/>
  93. <meta name="color:links" content="#c3c3c3"/>
  94. <meta name="color:accent" content="#7d93b0"/>
  95. <meta name="color:posts" content="#f5f5f5"/>
  96. <meta name="color:border" content="#d7d7d7"/>
  97. <meta name="color:accent2" content="#b07b68"/>
  98. <meta name="color:container" content="#b07b68"/>
  99. <meta name="color:title" content="#b07b68"/>
  100.  
  101. <meta name="image:background" content=""/>
  102. <meta name="image:sidebar" content="https://i.imgur.com/rpH6ut6.png"/>
  103. <meta name="image:navigation" content="https://i.imgur.com/eJI5Cuz.png"/>
  104.  
  105. <meta name="text:title" content="crush crush"/>
  106. <meta name="text:bio" content="lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua."/>
  107. <meta name="text:circle text" content="What’re you waiting for"/>
  108. <meta name="text:extra url" content="/"/>
  109. <meta name="text:extra name" content="extra"/>
  110. <meta name="text:nav text" content="Just looking into your eyes feels electric"/>
  111. <meta name="text:extra name" content=""/>
  112. <meta name="text:url one" content="/"/>
  113. <meta name="text:name one" content=""/>
  114. <meta name="text:url two" content="/"/>
  115. <meta name="text:name two" content=""/>
  116. <meta name="text:url three" content="/"/>
  117. <meta name="text:name three" content=""/>
  118. <meta name="text:url four" content="/"/>
  119. <meta name="text:name four" content=""/>
  120. <meta name="text:url five" content="/"/>
  121. <meta name="text:name five" content=""/>
  122. <meta name="text:url six" content="/"/>
  123. <meta name="text:name six" content=""/>
  124. <meta name="text:url seven" content="/"/>
  125. <meta name="text:name seven" content=""/>
  126. <meta name="text:url eight" content="/"/>
  127. <meta name="text:name eight" content=""/>
  128. <meta name="text:url nine" content="/"/>
  129. <meta name="text:name nine" content=""/>
  130. <meta name="text:threads number" content="12"/>
  131. <meta name="text:threads" content="threads"/>
  132. <meta name="text:drafts number" content="46"/>
  133. <meta name="text:drafts" content="drafts"/>
  134. <meta name="text:about" content="hey this is ina, i never use my indie but keep creating ocs for fun cuz i like to suffer lmao. these are my rules so pls read them, u won't regret it what else can i say i need to write a lot of text so it scrolls lalalala stream tiki taka & crush by weki meki"/>
  135. </head>
  136.  
  137.  
  138. <style type="text/css">
  139.  
  140. #containerp { margin: 0%; }
  141.  
  142. #circle { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }
  143.  
  144. #circle text {
  145. font-family: montserrat;
  146. font-size: 24px;
  147. font-weight: bold;
  148. text-transform: uppercase;
  149.  
  150. }
  151.  
  152. /* popup */
  153.  
  154. .popup_block{
  155. display:none;
  156. background:transparent;
  157. float:left;
  158. position:fixed;
  159. top:50%;
  160. left:50%;
  161. z-index: 99999999999;
  162. margin-left: -200px;
  163. margin-top: -175px;
  164. }
  165.  
  166. *html #fade {position: absolute;}
  167. *html .popup_block {position: absolute;}
  168. #fade {
  169. display:none;
  170. position:fixed;
  171. left:0px;
  172. top:0px;
  173. width:100%;
  174. height:100%;
  175. z-index:9999;
  176. background:{color:bg};
  177. opacity:0.7;
  178. }
  179.  
  180. /* BASIC THINGS */
  181. .iframe-controls--desktop {
  182. position:fixed;
  183. top:0px;
  184. right:0px;
  185. z-index:214748364789123456789;
  186. -webkit-transform:scale(0.6,0.6);
  187. -webkit-transform-origin: 100% 0%;
  188. -ms-transform-origin:100% 0%;
  189. -ms-transform:scale(0.6,0.6);
  190. transform:scale(0.6,0.6);
  191. transform-origin:100% 0%;
  192. }
  193.  
  194. body {
  195. background: url({image:background});
  196. background-color: {color:bg};
  197. background-repeat: repeat;
  198. background-attachment: fixed;
  199. background-position: center;
  200. font-family: 'Roboto Mono', monospace;
  201. font-size: 8px;
  202. color: {color:txt};
  203. letter-spacing: 0.4px;
  204. text-transform: lowercase;
  205. }
  206.  
  207. b, bold, strong {
  208. color: {color:accent};
  209. font-weight: bold;
  210. }
  211.  
  212. i, italic {
  213. color: {color:links};
  214. }
  215.  
  216. small {
  217. font-size: 9px;
  218. }
  219.  
  220. big {
  221. font-size: 12px;
  222. font-weight: bold;
  223. color: {color:accent2};
  224. }
  225.  
  226. a {
  227. transition: background-size .4s ease;
  228. background: linear-gradient(to bottom, transparent 45%, {color:accent} 0) center center/0% 75% no-repeat;
  229. padding: 0 3px 0px 3px;
  230. cursor: pointer;
  231. color: {color:links};
  232. letter-spacing: .08rem;
  233. text-decoration: none;
  234. }
  235. a:hover {
  236. background-size: 100% 100%;
  237. }
  238. a:active {
  239. background-size: 80% 100%;
  240. }
  241.  
  242.  
  243. blockquote {
  244. padding:2px 20px;
  245. margin:3px 0 3px 8px;
  246. border-left: 1px solid {color:border};
  247. }
  248.  
  249. h2 {
  250. font-size: 18px;
  251. font-family: montserrat, sans-serif;
  252. color: {color:accent2};
  253. text-transform: uppercase;
  254. font-weight: 800;
  255. }
  256. .container {
  257. width: 400px;
  258. height: 430px;
  259. padding-bottom: 20px;
  260. z-index: 99999;
  261. position: absolute;
  262. margin-left: 445px;
  263. margin-top: 125px;
  264. overflow: scroll;
  265. overflow-x: hidden;
  266. }
  267.  
  268.  
  269. .posts {
  270. width: 300px!important;
  271. height:auto;
  272. background-color: {color:posts};
  273. padding: 30px;
  274. z-index: 9;
  275. opacity: 9999;
  276. margin-left: 30px;
  277. overflow: hidden;
  278.  
  279. }
  280.  
  281. img {
  282. max-width:100%;
  283. height:auto;
  284. }
  285.  
  286. .video {
  287. max-width:300px!important;
  288. max-height: 150px!important;
  289.  
  290. }
  291.  
  292. .video iframe {
  293. max-width:300px!important;
  294. max-height: 150px!important;
  295.  
  296. }
  297.  
  298. ::-webkit-scrollbar {
  299. display:none;
  300. }
  301.  
  302.  
  303.  
  304. .bgim {
  305. width: 740px;
  306. height: 450px;
  307. background: {color:container};
  308. position: fixed;
  309. top: 50%;
  310. overflow: hidden;
  311. left: 50%;
  312. margin-top: -225px;
  313. margin-left: -370px;
  314. z-index: 1!important;
  315. }
  316.  
  317.  
  318.  
  319. /* audio */
  320.  
  321. .playbutton {
  322. margin-top:10px;
  323. margin-left:9px;
  324. z-index:9;
  325. width:33px;
  326. height:40px;
  327. overflow:hidden;
  328. color: black;
  329. opacity: 0.1;
  330.  
  331. }
  332.  
  333. .playbutton-img {
  334. position:relative;
  335. margin-top:0px;
  336. margin-left:0px;
  337. z-index:9;
  338. width:48px;
  339. border: 1px solid {color:border};
  340. background: {color:accent2};
  341. height:48px;
  342. overflow:hidden;
  343. color: black;
  344.  
  345.  
  346. }
  347.  
  348. .trackinfo {
  349. margin-bottom:10px;
  350. border: 1px solid {color:border};
  351. top:-4px;
  352. border-left: none;
  353. margin-left:50px;
  354. height:48px;
  355. margin-top:-50px;
  356. }
  357.  
  358. .trackname {
  359. padding-top:13px;
  360. text-align:center;
  361. font-size:10px;
  362. text-transform:uppercase;
  363. font-weight: bold;
  364. color: {color:accent};
  365. font-family: montserrat;
  366. letter-spacing:2px;
  367.  
  368. }
  369.  
  370. .artist {
  371. text-align:center;
  372. font-size:7px;
  373. text-transform:uppercase;
  374. letter-spacing:4px;
  375. color: {color:txt};
  376. }
  377.  
  378. .chat .odd {
  379. text-align:left;
  380. }
  381.  
  382. .chat .odd b, bold, strong {
  383. color: {color:accent};
  384. }
  385.  
  386. .chat .even {
  387. text-align: left;
  388. }
  389.  
  390. .pagination {
  391. width: 134px;
  392. height: 20px;
  393. margin-top:535px;
  394. position: absolute;
  395. margin-left:205px;
  396. padding: 0px 12px;
  397. z-index: 99999999999999999999999999;
  398. text-align:center;
  399. color: {color:accent}!important;
  400. }
  401.  
  402.  
  403.  
  404. .pagination a {
  405. font-size: 7px;
  406. font-weight: 600;
  407. letter-spacing: 1px;
  408. text-transform: uppercase;
  409. font-family: montserrat, sans-serif;
  410. color: {color:txt}!important;
  411. display: inline-block;
  412. background: {color:accent};
  413. padding: 1px 7px;
  414. border-radius: 15px;
  415. margin-right: 5px;
  416. }
  417.  
  418. .tags {
  419. width: 300px;
  420. background: {color:posts};
  421. border-top: none;
  422. padding: 8px 30px;
  423. margin-left: 30px;
  424. text-align:left;
  425. border-top: 1px solid {color:border};
  426. }
  427.  
  428. .tags a {
  429. font-size: 7px;
  430. font-family: 'Roboto Mono', monospace;
  431. text-transform: uppercase;
  432. color:{color: border};
  433. letter-spacing: 2px;
  434. transition: 0.3s;
  435. }
  436.  
  437. .tags a:hover {
  438. color {color:bg};
  439. }
  440.  
  441.  
  442. .permalink {
  443. font-family: 'Saira Extra Condensed', sans-serif;
  444. margin-left: 0px;
  445. text-transform: uppercase;
  446. display:inline-block;
  447. }
  448.  
  449. .permin {
  450. background: {color:posts};
  451. border-bottom:none;
  452. margin-bottom: -1px;
  453. width: 300px;
  454. padding: 8px 30px;
  455. margin-top: 35px;
  456. margin-left: 30px;
  457. }
  458. .permalink a {
  459. color: {color:links};
  460. text-transform: uppercase;
  461. font-size: 8px;
  462. letter-spacing: 1.5px;
  463. }
  464.  
  465. .notes a {
  466. color: {color:links};
  467. text-transform: uppercase;
  468. font-size: 8px;
  469. letter-spacing: 1.5px;
  470. }
  471.  
  472. .notes {
  473. font-family: 'Saira Extra Condensed', sans-serif;
  474. margin-left: 10px;
  475. border-left: 1px solid {color:border};
  476. padding-left: 13px;
  477. display: inline-block;
  478. margin-top: 0px;
  479. }
  480.  
  481. .asker {
  482. font-size:8px;
  483. letter-spacing: 2px;
  484. text-transform: uppercase;
  485. text-align:center;
  486. font-family: 'Saira Extra Condensed', sans-serif;
  487. }
  488.  
  489. .asker-box {
  490. background: {color:posts};
  491. padding: 3px 10px;
  492. font-size:10px;
  493. text-align:center;
  494. }
  495.  
  496.  
  497. .question {
  498. width: 260px;
  499. height: auto;
  500. text-align: justify;
  501. margin-left: 1px;
  502. padding: 10px 20px;
  503. background-color: {color:accent};
  504. display: inline-block;
  505. }
  506.  
  507. .notes2 {
  508.  
  509. font-size: 7px;
  510. font-weight:normal;
  511. letter-spacing: 1px;
  512. margin: 10px;
  513. padding: 5px;
  514. display:inline-block;
  515. }
  516.  
  517. .notes2 img {
  518. border-radius: 50%;
  519. margin-right: 5px;
  520. }
  521.  
  522. .label{
  523. font-weight: bold;
  524. color: {color:accent};
  525. }
  526.  
  527. .quot {
  528. font-family: 'Shrikhand', cursive;
  529. font-size: 20px;
  530. line-height: 110%;
  531. text-align: justify;
  532. text-transform: lowercase;
  533. margin-bottom: 15px;
  534.  
  535. }
  536.  
  537. .ptit {
  538. color: {color:accent};
  539. font-family: 'Shrikhand', cursive;
  540. font-size: 26px;
  541. margin-bottom: 15px;
  542. line-height: 110%;
  543. text-align: center;
  544. text-transform: lowercase;
  545.  
  546. }
  547.  
  548. .more-btn-wrap{
  549. position: relative;
  550. padding: 20px 0;
  551. width: 100%;
  552. }
  553.  
  554. .more-btn-wrap a:link{
  555. -webkit-transition: all 0.2s ease;
  556. -moz-transition: all 0.2s ease;
  557. -o-transition: all 0.2s ease;
  558. transition: all 0.2s ease;
  559. position: relative;
  560. left: calc(50% - 50px);
  561. padding: 4px 20px;
  562. font-weight: bold;
  563. border: 1px solid {color:border};
  564. background: transparent;
  565. }
  566.  
  567. .cred {
  568. width: 30px;
  569. height: 30px;
  570. border-radius: 50%;
  571. text-align: center;
  572. font-size: 12px;
  573. color: {color:accent};
  574. bottom: 10px;
  575. overflow: hidden;
  576. left: 10px;
  577. position: absolute;
  578. }
  579.  
  580.  
  581. .but {
  582. font-size: 10px;
  583. font-family: montserrat;
  584. font-weight: bold;
  585. float: right;
  586. margin-top: 5px;
  587. margin-right: 10px;
  588. color: {color:accent};
  589. z-index: 999999999999999999999999999999999999999999999999;
  590. }
  591.  
  592.  
  593. ul {
  594. list-style: none;
  595. margin-left: 0;
  596. padding-left: 0;
  597. }
  598.  
  599. li {
  600. padding-left: 20px;
  601. text-indent: -1em;
  602. }
  603.  
  604. ul li:before {
  605. font-family: 'FontAwesome';
  606. content: '★';
  607. margin: 0px 10px;
  608. color: {color:accent2};
  609. }
  610.  
  611. .galaxy {
  612. width: 1000px;
  613. height: 700px;
  614. overflow: hidden;
  615. position: fixed;
  616. top: 50%;
  617. left: 50%;
  618. margin-left: -500px;
  619. margin-top: -350px;
  620. }
  621.  
  622.  
  623. .pluto {
  624. width: 800px;
  625. height: 800px;
  626. background: {color:accent};
  627. transform: rotate(-35deg);
  628. margin-top: 100px;
  629. margin-left: -1500px;
  630. position: absolute;
  631. border-radius: 50%;
  632. }
  633.  
  634. .venus {
  635. width: 220px;
  636. height: 280px;
  637. position: absolute;
  638. margin-top: 0px;
  639. margin-left: 90px;
  640. background: url({image:sidebar});
  641. overflow: hidden;
  642. }
  643.  
  644.  
  645. .saturn {
  646. width: 200px;
  647. font-family: 'Shrikhand', cursive;
  648. font-size: 50px;
  649. text-transform: lowercase;
  650. position: absolute;
  651. margin-top: 335px;
  652. margin-left: 195px;
  653. z-index: 9999999999;
  654. text-align: left;
  655. line-height: 80%;
  656. color: transparent;
  657. -webkit-text-fill-color: transparent;
  658. -webkit-text-stroke-width: 1.5px;
  659. -webkit-text-stroke-color: {color:title};
  660. }
  661.  
  662. .uranus {
  663. width: 170px;
  664. height: 80px;
  665. text-align: justify;
  666. position: absolute;
  667. z-index: 999999999999999;
  668. overflow: scroll;
  669. margin-top: 430px;
  670. margin-left: 200px;
  671. }
  672.  
  673. ::selection {
  674. background: {color:accent};
  675. }
  676.  
  677. .tooltip{
  678. display: inline;
  679. position: relative;
  680. }
  681. #s-m-t-tooltip {
  682. max-width:300px;
  683. padding:2px 8px;
  684. margin:20px 7px -2px 20px;
  685. background-color:{color:accent};
  686. font-size:7px;
  687. border-radius: 5px;
  688. font-family: montserrat;
  689. font-weight: 700;
  690. text-transform:uppercase;
  691. color:{color:txt};
  692. z-index:9999999999999999999999999999999999999999999999;
  693. }
  694.  
  695. /* tabs */
  696. .tab {
  697. overflow: hidden;
  698.  
  699. }
  700.  
  701. .tab button {
  702. background-color: transparent;
  703. border: none;
  704. outline: none;
  705. cursor: pointer;
  706. padding: 0px;
  707. font-size: 7px;
  708. text-transform: uppercase;
  709. letter-spacing: 1px;
  710. font-family: 'Roboto Mono', monospace;
  711. transition: 0.3s;
  712. color: {color:links};
  713. }
  714.  
  715. .tab button:hover {
  716. color: {color:bg};
  717. }
  718.  
  719. .tabcontent {
  720. display: none;
  721. width: 430px;
  722. height: 450px;
  723. background: {color:container};
  724. position: fixed;
  725. top: 50%;
  726. overflow: hidden;
  727. left: 50%;
  728. margin-top: -225px;
  729. margin-left: -60px;
  730. z-index: 99999999999999999999999;
  731. overflow: hidden!important;
  732. overflow-x: hidden!important;
  733. -webkit-animation: fadeEffect 1s;
  734. animation: fadeEffect 1s;
  735. }
  736.  
  737. @-webkit-keyframes fadeEffect {
  738. from {opacity: 0;}
  739. to {opacity: 1;}
  740. }
  741.  
  742. @keyframes fadeEffect {
  743. from {opacity: 0;}
  744. to {opacity: 1;}
  745. }
  746.  
  747. .hades {
  748. width: 310px;
  749. height: 500px;
  750. background: {color:accent2};
  751. position: absolute;
  752. overflow: hidden;
  753. }
  754.  
  755. .aphrodite {
  756. width: 400px;
  757. height: 400px;
  758. background: {color:posts};
  759. position: absolute;
  760. margin-top: 240px;
  761. margin-left: 20px;
  762. transform: rotate(75deg);
  763. }
  764.  
  765. .hera {
  766. width: 90px;
  767. height: 500px;
  768. background: {color:accent};
  769. position: absolute;
  770. }
  771.  
  772. .poseidon {
  773. width: 300px;
  774. height: auto;
  775. font-size: 7px;
  776. text-transform: uppercase;
  777. letter-spacing: 1px;
  778. position: absolute;
  779. transform: rotate(-90deg);
  780. margin-left: -105px;
  781. margin-top: 160px;
  782. text-align: right;
  783. display: inline-block;
  784. }
  785.  
  786. .zeus {
  787. width: auto;
  788. display:inline-block;
  789. margin: 0px 5px;
  790. }
  791.  
  792. .apollo {
  793. position: absolute;
  794. z-index: 99999999999;
  795. margin-left: 350px;
  796. margin-top: 485px;
  797. }
  798.  
  799. .artemis {
  800. width: 380px;
  801. height: 300px;
  802. position: absolute;
  803. margin-left: 28px;
  804. margin-top: 15px;
  805. overflow: scroll;
  806. }
  807.  
  808. .selene {
  809. width: 80px;
  810. height: 80px;
  811. background: white;
  812. display: inline-block;
  813. margin-right: 5px;
  814. margin-bottom: 5px;
  815. border-radius: 15px;
  816. }
  817.  
  818. .selene img {
  819. width: 80px;
  820. height: 80px;
  821. border-radius: 15px;
  822. }
  823.  
  824. .circe {
  825. width: 500px;
  826. height: 500px;
  827. background: {color:accent};
  828. position: absolute;
  829. margin-top: 300px;
  830. }
  831.  
  832. .ares {
  833. width: 500px;
  834. height: 500px;
  835. background: {color:accent};
  836. position: absolute;
  837. margin-top: 300px;
  838. }
  839.  
  840. .iris {
  841. width: 160px;
  842. height: 300px;
  843. background: url({image:navigation});
  844. position: absolute;
  845. border: 5px solid {color:posts};
  846. margin-left: 230px;
  847. margin-top: 30px;
  848. }
  849.  
  850. .astrea {
  851. width: 200px;
  852. font-family: 'Shrikhand', cursive;
  853. font-size: 25px;
  854. text-transform: lowercase;
  855. position: absolute;
  856. color: {color:title};
  857. line-height: 100%;
  858. text-align: right;
  859. margin-top: 80px;
  860. margin-left: 90px;
  861. }
  862.  
  863. .athena {
  864. width: 180px;
  865. height: 150px;
  866. position: absolute;
  867. margin-top: 190px;
  868. margin-left: 27px;
  869. text-align: center;
  870. }
  871.  
  872. .bellona {
  873. width: 100px;
  874. height: 100px;
  875. position: absolute;
  876. margin-top: 355px;
  877. margin-left: 230px;
  878. text-align: center;
  879. }
  880.  
  881. .demeter {
  882. font-family: 'Shrikhand', cursive;
  883. font-size: 35px;
  884. text-transform: lowercase;
  885. text-align: center;
  886. color: {color:accent2};
  887. }
  888.  
  889. .persephone {
  890. width: 100px;
  891. height: 100px;
  892. position: absolute;
  893. margin-top: 355px;
  894. margin-left: 305px;
  895. text-align: center;
  896. }
  897.  
  898. .dionysus {
  899. font-family: 'Shrikhand', cursive;
  900. font-size: 35px;
  901. text-transform: lowercase;
  902. text-align: center;
  903. color: {color:accent2};
  904. }
  905.  
  906. .hermes {
  907. width: 170px;
  908. height: 70px;
  909. text-align: justify;
  910. position: absolute;
  911. overflow: scroll;
  912. margin-top: 335px;
  913. margin-left: 30px;
  914. }
  915.  
  916. .hestia {
  917. width: 400px;
  918. height: 350px;
  919. background: {color:posts};
  920. }
  921.  
  922. .tyche {
  923. width: 120px;
  924. height: 350px;
  925. background: {color:accent};
  926. position: absolute;
  927. }
  928.  
  929. .eros {
  930. width: 180px;
  931. height: 150px;
  932. position: absolute;
  933. background: white;
  934. margin-top: 30px;
  935. margin-left: -30px;
  936. }
  937.  
  938. .eros img {
  939. width: 180px;
  940. height: 150px;
  941. }
  942.  
  943. .erebus {
  944. width: 200px;
  945. height:auto;
  946. position: absolute;
  947. margin-top: 30px;
  948. margin-left: 175px;
  949. }
  950.  
  951. .gaia {
  952. font-family: 'Shrikhand', cursive;
  953. font-size: 40px;
  954. text-transform: lowercase;
  955. line-height: 70%;
  956. color: transparent;
  957. -webkit-text-fill-color: transparent;
  958. -webkit-text-stroke-width: 1.5px;
  959. -webkit-text-stroke-color: {color:title};
  960. text-align: right;
  961. }
  962.  
  963. .hypnos {
  964. text-transform: uppercase;
  965. letter-spacing: 1.5px;
  966. text-align: right;
  967. margin-top: 10px;
  968. font-size: 7px;
  969. }
  970.  
  971. .nyx {
  972. width: 200px;
  973. height:150px;
  974. position: absolute;
  975. margin-top: 115px;
  976. margin-left: 175px;
  977. text-align: justify;
  978. overflow: scroll;
  979. }
  980.  
  981. .nemesis {
  982. width: 200px;
  983. height:30px;
  984. position: absolute;
  985. margin-top: 275px;
  986. margin-left: 175px;
  987. text-align: center;
  988. overflow: scroll;
  989. line-height: 150%;
  990. }
  991.  
  992. .thanatos {
  993. width: 360;
  994. height: 30px;
  995. background: {color:accent2};
  996. position: absolute;
  997. margin-top: 320px;
  998. padding: 0px 20px;
  999. }
  1000.  
  1001. .theia {
  1002. width: 360px;
  1003. height: 10px;
  1004. overflow-y: scroll;
  1005. font-size: 7px;
  1006. letter-spacing: 1px;
  1007. text-transform: uppercase;
  1008. margin-top: 11px;
  1009. text-align: justify;
  1010. }
  1011.  
  1012. .aura {
  1013. width: 130px;
  1014. height: 100px;
  1015. position: absolute;
  1016. margin-top: 200px;
  1017. margin-left: 20px;
  1018. overflow: scroll;
  1019. }
  1020.  
  1021. .atlas {
  1022. font-size: 7px;
  1023. font-weight: 700;
  1024. color: {color:accent2};
  1025. text-transform: uppercase;
  1026. letter-spacing: 1px;
  1027. margin-right: 4px;
  1028. }
  1029.  
  1030. .eos {
  1031. width: 170px;
  1032. height: 70px;
  1033. text-align: justify;
  1034. position: absolute;
  1035. overflow: scroll;
  1036. margin-top: 335px;
  1037. margin-left: 30px;
  1038. }
  1039.  
  1040. .leto {
  1041. width: 300px;
  1042. height: 90px;
  1043. text-align: justify;
  1044. position: absolute;
  1045. overflow: scroll;
  1046. margin-top: 25px;
  1047. margin-left: 100px;
  1048. }
  1049.  
  1050.  
  1051. </style>
  1052.  
  1053. <body>
  1054.  
  1055.  
  1056. <script>
  1057. $(document).ready(function() {
  1058.  
  1059. var $audio = $('iframe.tumblr_audio_player');
  1060. $audio.load(function() {
  1061. $(this).contents().find('head').append('<style type="text/css">' +
  1062. '.audio-player { background: transparent!important; color: {color:accent} !important; }' +
  1063. '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  1064. '</style>');
  1065. });
  1066. });
  1067.  
  1068.  
  1069. function opentabs(evt, tabstabs) {
  1070.  
  1071. var i, tabcontent, tablinks;
  1072.  
  1073.  
  1074. tabcontent = document.getElementsByClassName("tabcontent");
  1075. for (i = 0; i < tabcontent.length; i++) {
  1076. tabcontent[i].style.display = "none";
  1077. }
  1078.  
  1079.  
  1080. tablinks = document.getElementsByClassName("tablinks");
  1081. for (i = 0; i < tablinks.length; i++) {
  1082. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1083. }
  1084.  
  1085.  
  1086. document.getElementById(tabstabs).style.display = "block";
  1087. evt.currentTarget.className += " active";
  1088. }
  1089.  
  1090. function openCity(evt, cityName) {
  1091.  
  1092. var i, tabcontent, tablinks;
  1093.  
  1094.  
  1095. tabcontent = document.getElementsByClassName("tabcontent");
  1096. for (i = 0; i < tabcontent.length; i++) {
  1097. tabcontent[i].style.display = "none";
  1098. }
  1099.  
  1100.  
  1101. tablinks = document.getElementsByClassName("tablinks");
  1102. for (i = 0; i < tablinks.length; i++) {
  1103. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1104. }
  1105.  
  1106.  
  1107. document.getElementById(cityName).style.display = "block";
  1108. evt.currentTarget.className += " active";
  1109. }
  1110. </script>
  1111.  
  1112. <a href="https://springdoy.tumblr.com/"><div class="cred"><div class="th th-heart-1" style="margin-top: 10px;" title="theme by springdoy"></div></div></a>
  1113.  
  1114. <div class="galaxy">
  1115.  
  1116. <div class="bgim">
  1117.  
  1118. <div class="hades">
  1119. <div class="venus"></div>
  1120.  
  1121. <div class="aphrodite"></div>
  1122. </div>
  1123.  
  1124. <div class="hera">
  1125.  
  1126. <div class="tab">
  1127.  
  1128. <div class="poseidon">
  1129. <div class="zeus"><a href ="/">home</a></div>
  1130. <div class="zeus"><a href ="/ask">ask</a></div>
  1131. <button class="tablinks" onclick="openCity(event, 'nav')"><div style="width: auto; display:inline-block; margin: 0px 5px;">navigation</div></button>
  1132. <button class="tablinks" onclick="openCity(event, 'muses')"><div style="width: auto; display:inline-block; margin: 0px 5px;">muses</div></button>
  1133. <div class="zeus"><a href ="{text:extra url}">{text:extra name}</a></div>
  1134.  
  1135. </div>
  1136. </div></div>
  1137.  
  1138.  
  1139. <div class="pluto"></div>
  1140.  
  1141.  
  1142.  
  1143. </div>
  1144.  
  1145.  
  1146. <div class="saturn">
  1147. {text:title}</div>
  1148. <div class="uranus">
  1149. {text:bio}
  1150. </div>
  1151.  
  1152. <div class="pagination">{block:Pagination}
  1153. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
  1154. {/block:NextPage}
  1155. {/block:Pagination}</div>
  1156.  
  1157. <div class="apollo"><div id="containerp">
  1158. <div id="circle">
  1159. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
  1160. <defs>
  1161. <path id="circlePath" d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
  1162. </defs>
  1163. <circle cx="150" cy="100" r="75" fill="none"/>
  1164. <g>
  1165. <use xlink:href="#circlePath" fill="none"/>
  1166. <text fill="{color:accent2}">
  1167. <textPath xlink:href="#circlePath">{text:circle text}</textPath>
  1168. </text>
  1169. </g>
  1170. </svg></div>
  1171. </div>
  1172. </div>
  1173.  
  1174.  
  1175. <!--- tabs --->
  1176.  
  1177. <div id="muses" class="tabcontent"><span onclick="this.parentElement.style.display='none'"><div class="but">x</div></span><br>
  1178.  
  1179. <div class="artemis">
  1180.  
  1181. <!--- muse icon #1 --->
  1182. <a href="#?w=300" rel="box1" class="poplight">
  1183. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1184.  
  1185. <!--- muse icon #2 --->
  1186. <a href="#?w=300" rel="box2" class="poplight">
  1187. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1188.  
  1189. <!--- muse icon #3 --->
  1190. <a href="#?w=300" rel="box3" class="poplight">
  1191. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1192.  
  1193. <!--- muse icon #4 --->
  1194. <a href="#?w=300" rel="box4" class="poplight">
  1195. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1196.  
  1197. <!--- muse icon #5 --->
  1198. <a href="#?w=300" rel="box5" class="poplight">
  1199. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1200.  
  1201. <!--- muse icon #6 --->
  1202. <a href="#?w=300" rel="box6" class="poplight">
  1203. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1204.  
  1205. <!--- muse icon #7 --->
  1206. <a href="#?w=300" rel="box7" class="poplight">
  1207. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1208.  
  1209. <!--- muse icon #8 --->
  1210. <a href="#?w=300" rel="box8" class="poplight">
  1211. <div class="selene"><img src="https://placehold.it/80)"></div></a>
  1212.  
  1213. <!--- to add more muses just c&p the code used before but make sure to change the number where it says 'box' --->
  1214.  
  1215. </div>
  1216.  
  1217. <div class="circe">
  1218.  
  1219. <!--- these are ur muses rules ?? --->
  1220. <div class="leto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1221. </div>
  1222.  
  1223.  
  1224. </div>
  1225.  
  1226. <!--- tab #2 --->
  1227.  
  1228. <div id="nav" class="tabcontent"><span onclick="this.parentElement.style.display='none'"><span class="but">x</span></span><br>
  1229.  
  1230. <div class="ares"></div>
  1231.  
  1232. <div class="iris"></div>
  1233.  
  1234. <div class="astrea">
  1235. {text:nav text}
  1236. </div>
  1237.  
  1238. <div class="athena">
  1239. <b>01.</b> <a href="{text:url one}">{text:name one}</a>
  1240. <br>
  1241. <b>02.</b> <a href="{text:url two}">{text:name two}</a>
  1242. <br>
  1243. <b>03.</b> <a href="{text:url three}">{text:name three}</a>
  1244. <br>
  1245. <b>04.</b> <a href="{text:url four}">{text:name four}</a>
  1246. <br>
  1247. <b>05.</b> <a href="{text:url five}">{text:name five}</a>
  1248. <br>
  1249. <b>06.</b> <a href="{text:url six}">{text:name six}</a>
  1250. <br>
  1251. <b>07.</b> <a href="{text:url seven}">{text:name seven}</a>
  1252. <br>
  1253. <b>08.</b> <a href="{text:url eight}">{text:name eight}</a>
  1254. <br>
  1255. <b>09.</b> <a href="{text:url nine}">{text:name nine}</a>
  1256. <br>
  1257. </div>
  1258.  
  1259. <div class="bellona">
  1260. <div class="demeter">{text:threads number}</div>
  1261. <div style="margin-top: -13px;">{text:threads}</div>
  1262. </div>
  1263.  
  1264.  
  1265. <div class="persephone">
  1266. <div class="dionysus">{text:drafts number}</div>
  1267. <div style="margin-top: -13px;">{text:drafts}</div>
  1268. </div>
  1269.  
  1270. <div class="eos">
  1271. {text:about}
  1272. </div>
  1273.  
  1274. </div>
  1275.  
  1276.  
  1277. <div class="container">
  1278.  
  1279. {block:Posts}
  1280. <div class="permin"><div class="permalink"><a href="{Permalink}">{Month} {DayOfMonthWithZero}</a></div> <div class="notes"><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount} NOTES</a> <a href="{ReblogURL}"><span class="fas fa-retweet" style="margin-left: 5px; font-size: 7px;"></span></a></div> <div style="width: 50px; font-size: 7px; float: right; margin-top: 5px; text-align: right; margin-right: -15px;"><i class="fas fa-star" style="margin-right: 5px; color: {color:accent};"></i> <i class="fas fa-star" style="margin-right: 5px; color: {color:accent2};"></i> <i class="fas fa-star" style="color: {color:links};"></i></div>
  1281. </div>
  1282. <div class="posts">
  1283. {block:Text}{block:Title}<div class="ptit">{Title}</div>{/block:Title}{Body}
  1284. {/block:Text}
  1285.  
  1286. {block:More}
  1287. <div class="more-btn-wrap">
  1288. <a href="{Permalink}" class="more-btn">
  1289. Read More
  1290. </a>
  1291. </div>
  1292. {/block:More}
  1293.  
  1294. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1295.  
  1296. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1297.  
  1298. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1299.  
  1300. {block:Quote}<div class="quot"><i class="fas fa-quote-left" style="color: {color:accent}; font-size: 15px;"></i> {Quote}</div> {/block:Quote}
  1301.  
  1302. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  1303.  
  1304.  
  1305. {block:Chat}
  1306. <div class="chat">
  1307.  
  1308. {block:Lines}{block:Label} <div class="label">{Label}</div> {/block:Label}{Line}{/block:Lines}
  1309. </div>
  1310. {/block:Chat}
  1311.  
  1312. {block:Video}<div class="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1313.  
  1314. {block:Audio}
  1315. {block:AudioPlayer}<div class="playbutton-img"><div class="playbutton">{AudioPlayer}</div></div>
  1316. <div class="trackinfo">
  1317. <div class="trackname">
  1318. {block:TrackName}{TrackName}{/block:TrackName}
  1319. </div>
  1320. <div class="artist">
  1321. {block:Artist}{Artist}{/block:Artist}
  1322. </div>
  1323. </div>
  1324. {block:Caption}{Caption}{/block:Caption}
  1325. {/block:AudioPlayer}
  1326. {/block:Audio}
  1327.  
  1328.  
  1329. {block:Answer}
  1330. <div style="width:auto;">
  1331. <div class="question">{Question}</div></div>
  1332. <div class="asker-box"><div class="asker">{Asker} asked:</div></div>
  1333. {Answer}
  1334. {/block:Answer}
  1335. {block:PostNotes}<div class="notes2">{PostNotes-16}</div>{/block:PostNotes}
  1336. </div>
  1337. {block:HasTags}<div class="tags"><div style="text-transform: uppercase; font-size: 7px; text-align: right; display: inline-block; letter-spacing: 1px;"><b>tagged as:</b></div> {block:Tags}<i class="fas fa-tag" style="margin-right: 5px; margin-left: 9px; font-size: 6px; color: {color:accent};"></i><a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1338.  
  1339.  
  1340. {/block:Posts}
  1341.  
  1342.  
  1343.  
  1344. </div>
  1345.  
  1346. </div>
  1347.  
  1348.  
  1349.  
  1350. </body>
  1351.  
  1352. <!--- START MUSE #1 POPUP --->
  1353.  
  1354.  
  1355. <div id="box1" class="popup_block">
  1356. <div class="hestia">
  1357.  
  1358. <div class="tyche"></div>
  1359.  
  1360. <div class="eros">
  1361. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1362. </div>
  1363.  
  1364. <div class="erebus">
  1365. <div class="gaia">kim doyeon</div> <!--- change ur muse's name here --->
  1366.  
  1367. <div class="hypnos">the primadonna</div> <!--- change ur muse's label here --->
  1368. </div>
  1369.  
  1370. <!--- change ur muse's bio here --->
  1371.  
  1372. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1373.  
  1374. <div class="nemesis">
  1375.  
  1376. <!--- change ur muse's links here --->
  1377.  
  1378. <a href="URL">biography</a> /
  1379. <a href="URL">visage</a> /
  1380. <a href="URL">plots</a> /
  1381. <a href="URL">shipper</a> /
  1382. <a href="URL">edits</a> /
  1383. <a href="URL">pinterest</a> </div>
  1384.  
  1385. <div class="thanatos">
  1386.  
  1387.  
  1388. <!--- change ur muse's quote here --->
  1389.  
  1390. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1391. </div>
  1392.  
  1393. <div class="aura">
  1394.  
  1395. <span class="atlas">age:</span> twenty
  1396. <br>
  1397. <span class="atlas">occupation:</span> idol, model, mc, actress
  1398. <br>
  1399. <span class="atlas">zodiac sign:</span> sagittarius
  1400. <br>
  1401. <span class="atlas">place of birth:</span> somewhere in south korea
  1402. <br>
  1403. <span class="atlas">date of birth:</span> 12.04
  1404. <br>
  1405. <span class="atlas">something:</span> something
  1406. <br>
  1407. <span class="atlas">something:</span> something
  1408. <br>
  1409. <span class="atlas">something:</span> something
  1410. <br>
  1411. </div></div></div>
  1412.  
  1413. <!--- END MUSE #1 POPUP --->
  1414.  
  1415. <!--- START MUSE #2 POPUP --->
  1416.  
  1417.  
  1418. <div id="box2" class="popup_block">
  1419. <div class="hestia">
  1420.  
  1421. <div class="tyche"></div>
  1422.  
  1423. <div class="eros">
  1424. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1425. </div>
  1426.  
  1427. <div class="erebus">
  1428. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1429.  
  1430. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1431. </div>
  1432.  
  1433. <!--- change ur muse's bio here --->
  1434.  
  1435. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1436.  
  1437. <div class="nemesis">
  1438.  
  1439. <!--- change ur muse's links here --->
  1440.  
  1441. <a href="URL">biography</a> /
  1442. <a href="URL">visage</a> /
  1443. <a href="URL">plots</a> /
  1444. <a href="URL">shipper</a> /
  1445. <a href="URL">edits</a> /
  1446. <a href="URL">pinterest</a> </div>
  1447.  
  1448. <div class="thanatos">
  1449.  
  1450.  
  1451. <!--- change ur muse's quote here --->
  1452.  
  1453. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1454. </div>
  1455.  
  1456. <div class="aura">
  1457.  
  1458. <span class="atlas">age:</span> twenty
  1459. <br>
  1460. <span class="atlas">occupation:</span> idol, model, mc, actress
  1461. <br>
  1462. <span class="atlas">zodiac sign:</span> sagittarius
  1463. <br>
  1464. <span class="atlas">place of birth:</span> somewhere in south korea
  1465. <br>
  1466. <span class="atlas">date of birth:</span> 12.04
  1467. <br>
  1468. <span class="atlas">something:</span> something
  1469. <br>
  1470. <span class="atlas">something:</span> something
  1471. <br>
  1472. <span class="atlas">something:</span> something
  1473. <br>
  1474. </div></div></div>
  1475.  
  1476. <!--- END MUSE #2 POPUP --->
  1477.  
  1478. <!--- START MUSE #3 POPUP --->
  1479.  
  1480.  
  1481. <div id="box3" class="popup_block">
  1482. <div class="hestia">
  1483.  
  1484. <div class="tyche"></div>
  1485.  
  1486. <div class="eros">
  1487. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1488. </div>
  1489.  
  1490. <div class="erebus">
  1491. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1492.  
  1493. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1494. </div>
  1495.  
  1496. <!--- change ur muse's bio here --->
  1497.  
  1498. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1499.  
  1500. <div class="nemesis">
  1501.  
  1502. <!--- change ur muse's links here --->
  1503.  
  1504. <a href="URL">biography</a> /
  1505. <a href="URL">visage</a> /
  1506. <a href="URL">plots</a> /
  1507. <a href="URL">shipper</a> /
  1508. <a href="URL">edits</a> /
  1509. <a href="URL">pinterest</a> </div>
  1510.  
  1511. <div class="thanatos">
  1512.  
  1513.  
  1514. <!--- change ur muse's quote here --->
  1515.  
  1516. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1517. </div>
  1518.  
  1519. <div class="aura">
  1520.  
  1521. <span class="atlas">age:</span> twenty
  1522. <br>
  1523. <span class="atlas">occupation:</span> idol, model, mc, actress
  1524. <br>
  1525. <span class="atlas">zodiac sign:</span> sagittarius
  1526. <br>
  1527. <span class="atlas">place of birth:</span> somewhere in south korea
  1528. <br>
  1529. <span class="atlas">date of birth:</span> 12.04
  1530. <br>
  1531. <span class="atlas">something:</span> something
  1532. <br>
  1533. <span class="atlas">something:</span> something
  1534. <br>
  1535. <span class="atlas">something:</span> something
  1536. <br>
  1537. </div></div></div>
  1538.  
  1539. <!--- END MUSE #3 POPUP --->
  1540.  
  1541. <!--- START MUSE #4 POPUP --->
  1542.  
  1543.  
  1544. <div id="box4" class="popup_block">
  1545. <div class="hestia">
  1546.  
  1547. <div class="tyche"></div>
  1548.  
  1549. <div class="eros">
  1550. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1551. </div>
  1552.  
  1553. <div class="erebus">
  1554. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1555.  
  1556. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1557. </div>
  1558.  
  1559. <!--- change ur muse's bio here --->
  1560.  
  1561. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1562.  
  1563. <div class="nemesis">
  1564.  
  1565. <!--- change ur muse's links here --->
  1566.  
  1567. <a href="URL">biography</a> /
  1568. <a href="URL">visage</a> /
  1569. <a href="URL">plots</a> /
  1570. <a href="URL">shipper</a> /
  1571. <a href="URL">edits</a> /
  1572. <a href="URL">pinterest</a> </div>
  1573.  
  1574. <div class="thanatos">
  1575.  
  1576.  
  1577. <!--- change ur muse's quote here --->
  1578.  
  1579. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1580. </div>
  1581.  
  1582. <div class="aura">
  1583.  
  1584. <span class="atlas">age:</span> twenty
  1585. <br>
  1586. <span class="atlas">occupation:</span> idol, model, mc, actress
  1587. <br>
  1588. <span class="atlas">zodiac sign:</span> sagittarius
  1589. <br>
  1590. <span class="atlas">place of birth:</span> somewhere in south korea
  1591. <br>
  1592. <span class="atlas">date of birth:</span> 12.04
  1593. <br>
  1594. <span class="atlas">something:</span> something
  1595. <br>
  1596. <span class="atlas">something:</span> something
  1597. <br>
  1598. <span class="atlas">something:</span> something
  1599. <br>
  1600. </div></div></div>
  1601.  
  1602. <!--- END MUSE #4 POPUP --->
  1603.  
  1604. <!--- START MUSE #5 POPUP --->
  1605.  
  1606.  
  1607. <div id="box5" class="popup_block">
  1608. <div class="hestia">
  1609.  
  1610. <div class="tyche"></div>
  1611.  
  1612. <div class="eros">
  1613. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1614. </div>
  1615.  
  1616. <div class="erebus">
  1617. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1618.  
  1619. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1620. </div>
  1621.  
  1622. <!--- change ur muse's bio here --->
  1623.  
  1624. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1625.  
  1626. <div class="nemesis">
  1627.  
  1628. <!--- change ur muse's links here --->
  1629.  
  1630. <a href="URL">biography</a> /
  1631. <a href="URL">visage</a> /
  1632. <a href="URL">plots</a> /
  1633. <a href="URL">shipper</a> /
  1634. <a href="URL">edits</a> /
  1635. <a href="URL">pinterest</a> </div>
  1636.  
  1637. <div class="thanatos">
  1638.  
  1639.  
  1640. <!--- change ur muse's quote here --->
  1641.  
  1642. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1643. </div>
  1644.  
  1645. <div class="aura">
  1646.  
  1647. <span class="atlas">age:</span> twenty
  1648. <br>
  1649. <span class="atlas">occupation:</span> idol, model, mc, actress
  1650. <br>
  1651. <span class="atlas">zodiac sign:</span> sagittarius
  1652. <br>
  1653. <span class="atlas">place of birth:</span> somewhere in south korea
  1654. <br>
  1655. <span class="atlas">date of birth:</span> 12.04
  1656. <br>
  1657. <span class="atlas">something:</span> something
  1658. <br>
  1659. <span class="atlas">something:</span> something
  1660. <br>
  1661. <span class="atlas">something:</span> something
  1662. <br>
  1663. </div></div></div>
  1664.  
  1665. <!--- END MUSE #5 POPUP --->
  1666.  
  1667. <!--- START MUSE #6 POPUP --->
  1668.  
  1669.  
  1670. <div id="box6" class="popup_block">
  1671. <div class="hestia">
  1672.  
  1673. <div class="tyche"></div>
  1674.  
  1675. <div class="eros">
  1676. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1677. </div>
  1678.  
  1679. <div class="erebus">
  1680. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1681.  
  1682. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1683. </div>
  1684.  
  1685. <!--- change ur muse's bio here --->
  1686.  
  1687. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1688.  
  1689. <div class="nemesis">
  1690.  
  1691. <!--- change ur muse's links here --->
  1692.  
  1693. <a href="URL">biography</a> /
  1694. <a href="URL">visage</a> /
  1695. <a href="URL">plots</a> /
  1696. <a href="URL">shipper</a> /
  1697. <a href="URL">edits</a> /
  1698. <a href="URL">pinterest</a> </div>
  1699.  
  1700. <div class="thanatos">
  1701.  
  1702.  
  1703. <!--- change ur muse's quote here --->
  1704.  
  1705. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1706. </div>
  1707.  
  1708. <div class="aura">
  1709.  
  1710. <span class="atlas">age:</span> twenty
  1711. <br>
  1712. <span class="atlas">occupation:</span> idol, model, mc, actress
  1713. <br>
  1714. <span class="atlas">zodiac sign:</span> sagittarius
  1715. <br>
  1716. <span class="atlas">place of birth:</span> somewhere in south korea
  1717. <br>
  1718. <span class="atlas">date of birth:</span> 12.04
  1719. <br>
  1720. <span class="atlas">something:</span> something
  1721. <br>
  1722. <span class="atlas">something:</span> something
  1723. <br>
  1724. <span class="atlas">something:</span> something
  1725. <br>
  1726. </div></div></div>
  1727.  
  1728. <!--- END MUSE #6 POPUP --->
  1729.  
  1730. <!--- START MUSE #7 POPUP --->
  1731.  
  1732.  
  1733. <div id="box7" class="popup_block">
  1734. <div class="hestia">
  1735.  
  1736. <div class="tyche"></div>
  1737.  
  1738. <div class="eros">
  1739. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1740. </div>
  1741.  
  1742. <div class="erebus">
  1743. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1744.  
  1745. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1746. </div>
  1747.  
  1748. <!--- change ur muse's bio here --->
  1749.  
  1750. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1751.  
  1752. <div class="nemesis">
  1753.  
  1754. <!--- change ur muse's links here --->
  1755.  
  1756. <a href="URL">biography</a> /
  1757. <a href="URL">visage</a> /
  1758. <a href="URL">plots</a> /
  1759. <a href="URL">shipper</a> /
  1760. <a href="URL">edits</a> /
  1761. <a href="URL">pinterest</a> </div>
  1762.  
  1763. <div class="thanatos">
  1764.  
  1765.  
  1766. <!--- change ur muse's quote here --->
  1767.  
  1768. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1769. </div>
  1770.  
  1771. <div class="aura">
  1772.  
  1773. <span class="atlas">age:</span> twenty
  1774. <br>
  1775. <span class="atlas">occupation:</span> idol, model, mc, actress
  1776. <br>
  1777. <span class="atlas">zodiac sign:</span> sagittarius
  1778. <br>
  1779. <span class="atlas">place of birth:</span> somewhere in south korea
  1780. <br>
  1781. <span class="atlas">date of birth:</span> 12.04
  1782. <br>
  1783. <span class="atlas">something:</span> something
  1784. <br>
  1785. <span class="atlas">something:</span> something
  1786. <br>
  1787. <span class="atlas">something:</span> something
  1788. <br>
  1789. </div></div></div>
  1790.  
  1791. <!--- END MUSE #7 POPUP --->
  1792.  
  1793. <!--- START MUSE #8 POPUP --->
  1794.  
  1795.  
  1796. <div id="box8" class="popup_block">
  1797. <div class="hestia">
  1798.  
  1799. <div class="tyche"></div>
  1800.  
  1801. <div class="eros">
  1802. <img src="https://placehold.it/180x150"> <!--- change ur muse's img here --->
  1803. </div>
  1804.  
  1805. <div class="erebus">
  1806. <div class="gaia">surname name</div> <!--- change ur muse's name here --->
  1807.  
  1808. <div class="hypnos">the label</div> <!--- change ur muse's label here --->
  1809. </div>
  1810.  
  1811. <!--- change ur muse's bio here --->
  1812.  
  1813. <div class="nyx">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  1814.  
  1815. <div class="nemesis">
  1816.  
  1817. <!--- change ur muse's links here --->
  1818.  
  1819. <a href="URL">biography</a> /
  1820. <a href="URL">visage</a> /
  1821. <a href="URL">plots</a> /
  1822. <a href="URL">shipper</a> /
  1823. <a href="URL">edits</a> /
  1824. <a href="URL">pinterest</a> </div>
  1825.  
  1826. <div class="thanatos">
  1827.  
  1828.  
  1829. <!--- change ur muse's quote here --->
  1830.  
  1831. <div class="theia">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</div>
  1832. </div>
  1833.  
  1834. <div class="aura">
  1835.  
  1836. <span class="atlas">age:</span> twenty
  1837. <br>
  1838. <span class="atlas">occupation:</span> idol, model, mc, actress
  1839. <br>
  1840. <span class="atlas">zodiac sign:</span> sagittarius
  1841. <br>
  1842. <span class="atlas">place of birth:</span> somewhere in south korea
  1843. <br>
  1844. <span class="atlas">date of birth:</span> 12.04
  1845. <br>
  1846. <span class="atlas">something:</span> something
  1847. <br>
  1848. <span class="atlas">something:</span> something
  1849. <br>
  1850. <span class="atlas">something:</span> something
  1851. <br>
  1852. </div></div></div>
  1853.  
  1854. <!--- END MUSE #8 POPUP --->
  1855.  
  1856. <!--- whenever u add more popups make sure to match the box numbers on both the img & the popup ( the one that says box1 at the beginning of each muse )--->
  1857.  
  1858.  
  1859. </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!