API tools faq
paste
lovesjoon

14. cherub club (single muse/personal) - 500px

lovesjoon
Jun 19th, 2021
2,880
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14. <!--- 14. cherub club by capitae.
  15.  
  16.  
  17. ♡ USER GUIDE ♡
  18.  
  19. ・｡* small sidebar img: width:210px; height:135px;
  20.  
  21. ・｡* big sidebar img: width:160px; height:420px;
  22.  
  23. ・｡* png img: width:220px; height:540px;
  24.  
  25. ・｡* navi img: width:500px; height:160px;
  26.  
  27. ・｡* muse img: width:130px; height:80px
  28.  
  29.  
  30. ♡ READ ME ♡
  31.  
  32. ・｡* base code by @pixiemail
  33.  
  34. ・｡* please don't recreate and/or steal parts of this code
  35.  
  36. ・｡* don't remove the credit
  37.  
  38. ・｡* feel free to reach out if there are any bugs or questions!
  39.  
  40.  
  41. i hope you enjoy this code !! --->
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52. <title>{Title}</title>
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  54. <link rel="shortcut icon" href="{Favicon}">
  55. {block:Description}
  56. <meta name="description" content="{MetaDescription}">
  57. {/block:Description}
  58.  
  59.  
  60.  
  61.  
  62. <meta name="image:background" content=""/>
  63. <meta name="image:small graph" content="https://via.placeholder.com/210x135"/>
  64. <meta name="image:big graph" content="https://via.placeholder.com/160x420"/>
  65. <meta name="image:navi graph" content="https://via.placeholder.com/500x160"/>
  66. <meta name="image:png" content=""/>
  67.  
  68. <meta name="color:background" content="#f1f0f0"/>
  69. <meta name="color:headers" content="#f6f5f5"/>
  70. <meta name="color:container" content="#f8f8f8"/>
  71. <meta name="color:posts" content="#fbfbfb"/>
  72. <meta name="color:post border" content="#fbfbfb"/>
  73. <meta name="color:borders" content="#e8e6e7"/>
  74. <meta name="color:accent" content="#cda79b"/>
  75. <meta name="color:accent2" content="#e2ceb6"/>
  76. <meta name="color:accent3" content="#98a3a9"/>
  77. <meta name="color:text" content="#aaa"/>
  78. <meta name="color:text shadow" content="#fff"/>
  79. <meta name="color:links" content="#c6c3c8"/>
  80. <meta name="color:hover" content="#98a3a9"/>
  81. <meta name="color:bold" content="#98a3a9"/>
  82. <meta name="color:italic" content="#e2ceb6"/>
  83.  
  84. <meta name="select:body font" content="roboto" title="roboto"/>
  85. <meta name="select:body font" content="montserrat" title="montserrat"/>
  86. <meta name="select:body font" content="ibm plex sans" title="ibm plex sans"/>
  87. <meta name="select:body font" content="inconsolata" title="inconsolata"/>
  88. <meta name="select:body font" content="raleway" title="raleway"/>
  89. <meta name="select:body font" content="josefin sans" title="josefin sans"/>
  90. <meta name="select:body font" content="libre baskerville" title="libre baskerville"/>
  91.  
  92. <meta name="select:font size" content="11" title="11px"/>
  93. <meta name="select:font size" content="12" title="12px"/>
  94. <meta name="select:font size" content="13" title="13px"/>
  95.  
  96. <meta name="if:border radius" content="0"/>
  97. <meta name="if:grayscale" content="0"/>
  98. <meta name="if:text shadow" content="0"/>
  99.  
  100. <meta name="text:title" content="Cherub Club."/>
  101. <meta name="text:subtitle" content="my heart sings for you my dearest"/>
  102. <meta name="text:top title" content="ooc info or a mini quote, whatever you want besties!!"/>
  103. <meta name="text:description" content="<b>venus</b> sat down at last on a hard pine stump & <i>sighed</i> to the wind: ' blow, big boy, blow! possess me, caress me, distress my hair! i'm all <b>yours</b>, if you've got the time. no one else seems to know i'm there. for you, big boy, believe me, i'm already a <i>meadow</i>. just feel my flowers! honey, i could spend hours making you <b>happy</b>, giving you joy— we're all looking for love, even Love! even me! even this stump that in life was a tree! ' "/>
  104. <meta name="text:navi title" content="angelic ;"/>
  105. <meta name="text:navi desc" content="<b>lorem ipsum</b> dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut <b>enim</b> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <b>aliquip ex</b> consequat."/>
  106. <meta name="text:navi link 01 url" content="/"/>
  107. <meta name="text:navi link 01 title" content="link 01"/>
  108. <meta name="text:navi link 02 url" content="/"/>
  109. <meta name="text:navi link 02 title" content="link 02"/>
  110. <meta name="text:navi link 03 url" content="/"/>
  111. <meta name="text:navi link 03 title" content="link 03"/>
  112. <meta name="text:navi link 04 url" content="/"/>
  113. <meta name="text:navi link 04 title" content="link 04"/>
  114. <meta name="text:navi link 05 url" content="/"/>
  115. <meta name="text:navi link 05 title" content="link 05"/>
  116. <meta name="text:navi link 06 url" content="/"/>
  117. <meta name="text:navi link 06 title" content="link 06"/>
  118.  
  119.  
  120.  
  121.  
  122. <!--- 01: SCRIPTS + FONTS INSTALLED ---->
  123.  
  124.  
  125.  
  126.  
  127. <!--- JQUERY SCRIPTS --->
  128.  
  129. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  130. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  131.  
  132.  
  133.  
  134.  
  135. <!--- TOOLTIP SCRIPT ---->
  136.  
  137. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  138. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  139. <script> (function($){ $(document).ready(function(){ $("a[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:50, tip_fade_speed:600, attribute:"title" }); }); })(jQuery); </script>
  140.  
  141.  
  142.  
  143.  
  144. <!--- ICON FONTS ---->
  145.  
  146. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  147. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
  148.  
  149. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  150.  
  151. <script src="//pull.cappuccicons.com/cpf.js"></script>
  152.  
  153. <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
  154.  
  155. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
  156.  
  157.  
  158. <!-- POST STYLING FONTS -->
  159.  
  160. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  161.  
  162. <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  163.  
  164. <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
  165.  
  166.  
  167. <!-- BODY FONTS -->
  168.  
  169. <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  170.  
  171. <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  172.  
  173. <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  174.  
  175. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  176.  
  177. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  178.  
  179. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  180.  
  181. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  182.  
  183.  
  184.  
  185.  
  186. <!--- VIDEO SCRIPT by shythemes ---->
  187.  
  188. <script> $(document).ready(function(){ $('.video iframe').each(function(){ var scale = $(this).parents('.video').width() / 500; $(this).attr({ width: Math.floor($(this).attr('width') * scale), height: Math.floor($(this).attr('height') * scale) });});}); </script>
  189.  
  190.  
  191.  
  192.  
  193. <!--- TAB SCRIPT by capitae ---->
  194.  
  195. <script> function openCapitae(evt, capitaeName) { var i, tcontent, tlinks; tcontent = document.getElementsByClassName("tcontent"); for (i = 0; i < tcontent.length; i++) { tcontent[i].style.display = "none"; } tlinks = document.getElementsByClassName("tlinks"); for (i = 0; i < tlinks.length; i++) { tlinks[i].className = tlinks[i].className.replace(" active", ""); } document.getElementById(capitaeName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
  196.  
  197. <script> $(document).ready(function(){ $("button").click(function(){ $(".tcontent").fadeOut("slow"); }); }); </script>
  198.  
  199.  
  200.  
  201.  
  202. <!--- TAB SCRIPT by www.w3schools.com ---->
  203.  
  204. <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace("active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += "active"; } </script>
  205.  
  206.  
  207.  
  208.  
  209. <style type="text/css">
  210.  
  211.  
  212.  
  213.  
  214. /*--- FONTS HOSTED by capitae ---*/
  215.  
  216. @font-face{ font-family:"mondeline"; src: url('https://dl.dropboxusercontent.com/s/vs96bofgivapfcg/MondelineRegular.tt’)'); }
  217.  
  218.  
  219.  
  220.  
  221. /*--- 02: TOOLTIP + SCROLLBAR + SELECTION ---*/
  222.  
  223.  
  224.  
  225.  
  226. /* TOOLTIP */
  227.  
  228. #s-m-t-tooltip { max-width:250px; max-height:auto; background:{color:posts}; color:{color:text}; margin:20px; padding:10px; border:1px solid {color:borders}; border-radius:5px; z-index:9999999999; font-family:'poppins', sans-serif; font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:1px; }
  229.  
  230.  
  231. /* SCROLLBAR */
  232.  
  233. ::-webkit-scrollbar-thumb { background-color:{color:accent}; }
  234.  
  235. ::-webkit-scrollbar { width:3px; height:3px; background:transparent; }
  236.  
  237.  
  238.  
  239. /* SELECTION */
  240.  
  241. ::-moz-selection { background:{color:accent}; color:{color:posts}; }
  242.  
  243. ::selection { background:{color:accent}; color:{color:posts};}
  244.  
  245.  
  246.  
  247.  
  248. /*--- 03: BODY + TEXT STYLING + ANIMATIONS ---*/
  249.  
  250.  
  251.  
  252.  
  253. /* TYPE: BODY */
  254.  
  255. body { width:100%; height:100%; background:{color:background}; color:{color:text}; background-image:url({image:background}); background-attachment:fixed; background-repeat:repeat; margin:0; padding:0; font-weight:400; text-align:justify;
  256.  
  257. font-family:{select:body font};
  258. font-size:{select:font size}px;
  259. line-height: -moz-calc({select:font size}px + 8px);
  260. line-height: -webkit-calc({select:font size}px + 8px);
  261. line-height: -o-calc({select:font size}px + 8px);
  262. line-height: calc({select:font size}px + 8px);
  263.  
  264. {block:ifTextShadow} text-shadow: 0px 0px 2px {color:text shadow}; {/block:ifTextShadow} }
  265.  
  266.  
  267. /* TYPE: IMAGES */
  268.  
  269. iframe, img, embed, object { max-width:100%; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  270.  
  271. iframe:hover, img:hover, embed:hover, object:hover {
  272.  
  273. {block:ifGrayscale} filter: grayscale(0%);
  274. -webkit-transition: all .8s;
  275. -moz-transition: all .8s;
  276. -o-transition: all .8s;
  277. -ms-transition: all .8s;
  278. transition: all .8s; {/block:ifGrayscale} }
  279.  
  280. img { max-width:100%; height:auto; margin:auto; border:none; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  281.  
  282. img:hover { {block:ifGrayscale} filter: grayscale(0%);
  283.  
  284. -webkit-transition: all .8s;
  285. -moz-transition: all .8s;
  286. -o-transition: all .8s;
  287. -ms-transition: all .8s;
  288. transition: all .8s; {/block:ifGrayscale} }
  289.  
  290.  
  291. /* TYPE: TEXT STYLING */
  292.  
  293. select, textarea, input, a { outline:none; }
  294.  
  295. p { margin-top:5px; margin-bottom:5px; }
  296.  
  297. small, sub, sup { font-size:100%; }
  298.  
  299. big { font-size:110%; }
  300.  
  301. h1 { color:{color:accent}; font-family:'abril fatface', cursive; font-weight:400; line-height:28px; text-align:center; word-spacing:2px;
  302.  
  303. font-size: -moz-calc({select:font size}px + 20px);
  304. font-size: -webkit-calc({select:font size}px + 20px);
  305. font-size: -o-calc({select:font size}px + 20px);
  306. font-size: calc({select:font size}px + 20px); }
  307.  
  308. h2 { color:{color:accent2}; font-family:'source sans pro', sans-serif; font-weight:700; line-height:18px; text-align:right; text-transform:uppercase;
  309.  
  310. font-size: -moz-calc({select:font size}px + 5px);
  311. font-size: -webkit-calc({select:font size}px + 5px);
  312. font-size: -o-calc({select:font size}px + 5px);
  313. font-size: calc({select:font size}px + 5px); }
  314.  
  315. a { color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; text-decoration:none; letter-spacing:1px; }
  316.  
  317. a:hover { color:{color:hover};
  318.  
  319. -webkit-transition: all .3s;
  320. -moz-transition: all .3s;
  321. -o-transition: all .3s;
  322. -ms-transition: all .3s;
  323. transition: all .3s; }
  324.  
  325. ul, ol, li { margin:5px 10px; padding:0px;
  326.  
  327. line-height: -moz-calc({select:font size}px + 10px);
  328. line-height: -webkit-calc({select:font size}px + 10px);
  329. line-height: -o-calc({select:font size}px + 10px);
  330. line-height: calc({select:font size}px + 10px); }
  331.  
  332. b, strong { color:{color:bold}; margin:0px 2px 0px 2px; font-family:"poppins", sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:110%; }
  333.  
  334. i, em { color:{color:italic}; margin:0px 5px 0px 5px; font-family:"mondeline"; font-size:28px; font-weight:400; text-transform:lowercase; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1px; vertical-align:-1px; }
  335.  
  336. blockquote { margin:5px; padding-left:20px; border-left:1px solid {color:borders}; }
  337.  
  338.  
  339. /* TYPE: TUMBLR CONTROLS */
  340.  
  341. iframe.tmblr-iframe { top:0px!important; right:0px!important; opacity:0.8; transform:scale(0.6); transform-origin:100% 0; -webkit-transform:scale(0.65); -webkit-transform-origin:100% 0; -o-transform:scale(0.65); -o-transform-origin:100% 0; -moz-transform:scale(0.65); -moz-transform-origin:100% 0; -ms-transform:scale(0.65); -ms-transform-origin:100% 0; z-index:100000!important; }
  342.  
  343. iframe.tmblr-iframe:hover { opacity:1!important; }
  344.  
  345.  
  346.  
  347.  
  348. /*--- 04: CONTAINER + SIDEBAR STYLING ---*/
  349.  
  350.  
  351.  
  352.  
  353. /* CONTAINER */
  354.  
  355. #container { position:absolute; width:990px; height:540px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; background:{color:container}; border:1px solid {color:borders};
  356.  
  357. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  358. box-shadow: 2px 2px 15px -2px {color:borders}; }
  359.  
  360. .png { position:absolute; width:220px; height:540px; bottom:-20px; left:-90px; background:transparent; z-index:999999999; }
  361.  
  362. .png img { width:220px; height:540px; }
  363.  
  364. #container-top { position:absolute; width:100%; height:30px; top:0px; left:0px; z-index:9999999; background:{color:headers}; border-bottom:1px solid {color:borders}; }
  365.  
  366. .top-title { position:absolute; width:500px; height:30px; line-height:30px; right:10px; font-family:"roboto", sans-serif; font-size:9px; font-weight:800; text-shadow: 0px 0px 2px #fff; letter-spacing:2px; color:{color:accent3}; text-transform:uppercase; font-style:italic; text-align:right; }
  367.  
  368.  
  369. /* SEARCH BOX TUTORIAL BY LMTHEMES */
  370.  
  371. .sfm { position:absolute; width:120px; height:15px; top:7.5px; left:10px; background:transparent; padding:0px 0px 0px 5px; border:1px solid {color:borders}; z-index:99999; line-height:15px; }
  372.  
  373. .sfm input { font-size:6px; text-transform:uppercase; letter-spacing:1px; font-family:"roboto", sans-serif; border:none; font-weight:bold; background-color:transparent; color:{color:links}; }
  374.  
  375. .sfm i { margin-right:5px; font-size:8px; color:{color:links}; }
  376.  
  377. #container-left { position:absolute; width:210px; height:100%; bottom:0px; left:0px; background:{color:headers}; z-index:999999; border-right:1px solid {color:borders};
  378.  
  379. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  380. box-shadow: 2px 2px 15px -2px {color:borders}; }
  381.  
  382.  
  383. .desc { position:absolute; width:130px; height:320px; bottom:30px; left:0px; overflow:hidden; padding:0px 40px 0px 40px; font-family:"roboto", sans-serif; font-size:11px; line-height:20px; text-transform:lowercase; text-align:justify; }
  384.  
  385. .desc b { font-family:"poppins", sans-serif; font-size:12px; margin:0px 5px 0px 5px; text-transform:uppercase; letter-spacing:.5px; }
  386.  
  387. .graphic { position:absolute; width:210px; height:135px; top:30px; left:0px; background:black; }
  388.  
  389. .graphic img { width:210px; height:135px; }
  390.  
  391. #graph { position:absolute; width:160px; height:420px; top:31px; right:0px; background:black; overflow:hidden; }
  392.  
  393. #graph img { width:160px; height:420px; }
  394.  
  395. #container-bottom { position:absolute; width:100%; height:90px; bottom:0px; left:0px; background:{color:headers}; z-index:99999; border-top:1px solid {color:borders}; }
  396.  
  397. .title { position:absolute; width:350px; height:90px; top:0px; right:45px; text-align:center; font-family:"mondeline"; font-size:65px; font-weight:400; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1px; color:{color:accent}; line-height:95px; }
  398.  
  399. .subtitle { position:absolute; width:350px; height:20px; bottom:12px; right:45px; text-align:center; font-family:"roboto", sans-serif; font-size:7.5px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; font-style:italic; }
  400.  
  401. .links { position:absolute; width:400px; height:90px; left:227.5px; top:10px; }
  402.  
  403. .links li { display:inline-block; float:left; width:95px; height:25px; background:{color:posts}; margin:5px; line-height:25px; text-align:center; border:1px solid {color:borders}; }
  404.  
  405. .links a { color:{color:accent3}; font-family:"roboto", sans-serif; font-weight:600; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
  406.  
  407.  
  408.  
  409.  
  410. /*--- 05: POSTS + ENTRIES ---*/
  411.  
  412.  
  413.  
  414.  
  415. /* POSTS */
  416.  
  417. #posts { position:absolute; width:600px; height:403px; left:210px; top:31px; padding-top:15px; padding-left:20px; overflow-x:hidden; overflow-y:auto; z-index:1000; border-right:1px solid {color:borders}; }
  418.  
  419.  
  420. /* ENTRY STYLING */
  421.  
  422. .entry { width:500px; height:auto; background:{color:posts}; margin:20px; padding:20px 20px 0px 20px; border:1px solid {color:borders}; border-radius:0px; {block:ifBorderRadius} border-radius:10px; {/block:ifBorderRadius} display:inline-block;
  423.  
  424. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  425. box-shadow: 2px 2px 15px -2px {color:borders}; }
  426.  
  427. .entry img { margin:0px; padding:0px; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  428.  
  429. .entry img:hover {
  430.  
  431. {block:ifGrayscale} filter: grayscale(0%);
  432. -webkit-transition: all .8s;
  433. -moz-transition: all .8s;
  434. -o-transition: all .8s;
  435. -ms-transition: all .8s;
  436. transition: all .8s; {/block:ifGrayscale} }
  437.  
  438.  
  439.  
  440.  
  441. /*--- 06: POST INFO + NOTES + PAGINATION ---*/
  442.  
  443.  
  444.  
  445.  
  446. /* POST INFO */
  447.  
  448. .topinfo { width:520px; height:20px; margin:-20px 0px 25px -20px; padding:10px 10px 10px 10px; background:{color:post border}; border-bottom:1px solid {color:borders}; border-radius:0px; {block:ifBorderRadius} border-top-left-radius:10px; border-top-right-radius:10px; {/block:ifBorderRadius} line-height:12px; }
  449.  
  450. .topinfo a { margin-left:0px; color:{color:links}; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  451.  
  452. font-size: -moz-calc({select:font size}px - 2px);
  453. font-size: -webkit-calc({select:font size}px - 2px);
  454. font-size: -o-calc({select:font size}px - 2px);
  455. font-size: calc({select:font size}px - 2px); }
  456.  
  457. .topinfo a:hover { color:{color:hover}; font-weight:500;
  458.  
  459. -webkit-transition: all .3s;
  460. -moz-transition: all .3s;
  461. -o-transition: all .3s;
  462. -ms-transition: all .3s;
  463. transition: all .3s; }
  464.  
  465. .topinfo .iconify { color:{color:links}; }
  466.  
  467.  
  468. /* TAGS */
  469.  
  470. .tags { width:520px; min-height:20px; background:{color:post border}; color:{color:text}; margin:25px 0px -20px -20px; padding:10px; border-radius:0px; {block:ifBorderRadius} border-bottom-left-radius:10px; border-bottom-right-radius:10px; {/block:ifBorderRadius} border-top:1px solid {color:borders}; overflow:hidden; text-align:justify; }
  471.  
  472. .tags span { color:{color:links}; padding-right:5px; font-family:'poppins', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  473.  
  474. font-size: -moz-calc({select:font size}px - 2px);
  475. font-size: -webkit-calc({select:font size}px - 2px);
  476. font-size: -o-calc({select:font size}px - 2px);
  477. font-size: calc({select:font size}px - 2px); }
  478.  
  479. .tags a { margin-right:5px; padding:0px; color:{color:text}; font-family:'poppins', sans-serif; font-size:8px; font-weight:400; text-transform:uppercase; letter-spacing:1px;
  480.  
  481. font-size: -moz-calc({select:font size}px - 2px);
  482. font-size: -webkit-calc({select:font size}px - 2px);
  483. font-size: -o-calc({select:font size}px - 2px);
  484. font-size: calc({select:font size}px - 2px); }
  485.  
  486. .tags a:hover { color:{color:hover}; font-weight:500;
  487.  
  488. -webkit-transition: all .3s;
  489. -moz-transition: all .3s;
  490. -o-transition: all .3s;
  491. -ms-transition: all .3s;
  492. transition: all .3s; }
  493.  
  494.  
  495. /* POST NOTES */
  496.  
  497. .note { width:540px; margin:20px 0px 0px -31px; font-size:10px; text-transform:uppercase; }
  498.  
  499. .note li { list-style-type:none; float:left; width:540px; background:{color:posts}; margin:0; padding:15px 0px 15px 0px; border-left:1px solid {color:borders}; border-top:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; }
  500.  
  501. .note img.avatar { display:none; }
  502.  
  503.  
  504. /* PAGINATION */
  505.  
  506. .pagination { width:100%; text-align:center; margin-left:-7.5px; padding-bottom:20px; }
  507.  
  508. .pagination a { padding:8px; word-spacing:2px; }
  509.  
  510. .pagination a:hover { color:{color:text}; }
  511.  
  512. .pagination .iconify { color:{color:links}; font-size:25px; }
  513.  
  514.  
  515. /* READ MORE */
  516.  
  517. .more { width:100%; margin-top:20px 0px 5px 0px; text-align:center; }
  518.  
  519. .more a { background:{color:accent}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  520.  
  521. .more a:hover { background:{color:accent2}; color:{color:posts}; padding:4px 11px 4px 11px; font-size:9px; font-weight:bold; text-transform:uppercase; }
  522.  
  523.  
  524.  
  525.  
  526. /*--- 07: CREDIT, do not touch or remove pls ! ---*/
  527.  
  528.  
  529.  
  530.  
  531. /* CREDIT */
  532.  
  533. .credit { position:fixed; width:auto; height:auto; bottom:10px; right:10px; background:{color:container}; border-top-right-radius:10px; border-bottom-left-radius:10px; border:1px solid {color:borders}; z-index:9999; }
  534.  
  535. .credit span { padding:10px; font-size:15px; color:{color:accent}; }
  536.  
  537.  
  538.  
  539.  
  540. /*--- 08: POST TYPES ---*/
  541.  
  542.  
  543.  
  544.  
  545. /* TYPE: CHATS */
  546.  
  547. .answer span,.convo li { position:relative; max-width:75%; margin:0 0 15px; padding:.9em 10px; border-radius:1em; clear:both; }
  548.  
  549. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{ left:3px; background:#e6e6e6; color:#555555; float:left; }
  550.  
  551. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{ content:""; position:absolute; width:.5em; height:1em; bottom:0; left:-.5em; border-right:.9em solid #e6e6e6; border-bottom-right-radius:1em .5em; }
  552.  
  553. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{ right:3px; background:#147efb; color:white; float:right; }
  554.  
  555. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{ content:""; position:absolute; width:.5em; height:1em; bottom:0; right:-.5em; border-left:.9em solid #147efb; border-bottom-left-radius:1em .5em; }
  556.  
  557. .me p,.answer,.asked span{ margin:0; padding:0; }
  558.  
  559. .answer{ overflow:hidden; }
  560.  
  561. .asked p { margin:0 0px 10px 0px; padding:0; color:white; font-size:{select:font size}px; text-align:left; line-height:0px; }
  562.  
  563. .footerright .viasrc { float:left; }
  564.  
  565. .asked a { margin:0; padding:0; }
  566.  
  567. .user_3{ background:#e6e6e6; color:#555555; }
  568.  
  569. .user_3::after{ border-color:#e6e6e6; }
  570.  
  571. .user_4{ background:#147efb; color:white; }
  572.  
  573. .user_4::after{ border-color:#147efb; }
  574.  
  575. .user_5{ background:#e6e6e6; color:#555555; }
  576.  
  577. .user_5::after{ border-color:#e6e6e6; }
  578.  
  579. .user_6{ background:#147efb; color:white; }
  580.  
  581. .user_6::after{ border-color:#147efb; }
  582.  
  583. .user_7{ background:#e6e6e6; color:#555555; }
  584.  
  585. .user_7::after{ border-color:#e6e6e6; }
  586.  
  587. .user_8{ background:#147efb; color:white; }
  588.  
  589. .user_8::after{ border-color:#147efb; }
  590.  
  591. .user_9{ background:#e6e6e6; color:#555555; }
  592.  
  593. .user_9::after{ border-color:#e6e6e6; }
  594.  
  595. .convo { margin:0; padding:0; overflow:hidden; list-style-type:none; }
  596.  
  597. .delivered { width:500px; color:{color:text}; margin-top:-10px 0px 0px 0px; font-size:8px; font-weight:400; text-align:right; text-transform:uppercase; letter-spacing:1px; }
  598.  
  599.  
  600. /* TYPE: QUOTES */
  601.  
  602. .quote { color:{color:accent}; padding:0px 10px 0px 10px; font-family: 'Abril Fatface', cursive; font-weight:normal; line-height:28px; text-align:center; word-spacing:2px;
  603.  
  604. font-size: -moz-calc({select:font size}px + 20px);
  605. font-size: -webkit-calc({select:font size}px + 20px);
  606. font-size: -o-calc({select:font size}px + 20px);
  607. font-size: calc({select:font size}px + 20px); }
  608.  
  609. .source { text-align:right; margin-top:15px;
  610.  
  611. font-size: -moz-calc({select:font size}px - 1px);
  612. font-size: -webkit-calc({select:font size}px - 1px);
  613. font-size: -o-calc({select:font size}px - 1px);
  614. font-size: calc({select:font size}px - 1px);
  615.  
  616. line-height: -moz-calc({select:font size}px + 8px);
  617. line-height: -webkit-calc({select:font size}px + 8px);
  618. line-height: -o-calc({select:font size}px + 8px);
  619. line-height: calc({select:font size}px + 8px); }
  620.  
  621.  
  622. /* TYPE: ASKS */
  623.  
  624. #question { background:{color:background}; color:{color:text}; margin:5px 0px 15px 0px; padding:10px 20px 0px 20px; overflow:hidden; text-align:justify; }
  625.  
  626. #asker { width:100%; height:30px; background:{color:accent}; color:{color:posts}; margin:10px 0px 0px -30px; padding:10px 15px 0px 35px; font-size:8px; font-weight:400; text-align:right; text-transform:uppercase; letter-spacing:1.5px; line-height:23px; }
  627.  
  628. #asker a { color:{color:posts}; font-weight:500; }
  629.  
  630.  
  631. /* TYPE: LINKS */
  632.  
  633. .linktitle { color:{color:accent}; margin-top:-5px; font-family: 'Abril Fatface', cursive; font-weight:normal; text-align:center; line-height:28px; word-spacing:2px;
  634.  
  635. font-size: -moz-calc({select:font size}px + 20px);
  636. font-size: -webkit-calc({select:font size}px + 20px);
  637. font-size: -o-calc({select:font size}px + 20px);
  638. font-size: calc({select:font size}px + 20px); }
  639.  
  640.  
  641. /* TYPE: AUDIO */
  642.  
  643. .albumart { position:relative; width:60px; height:60px; padding:20px; border:1px solid {color:borders}; border-top-left-radius:5px; border-bottom-left-radius:5px; }
  644.  
  645. .albumtrack { position:absolute; width:33px; height:30px; top:0px; right:0px; bottom:0px; left:0px; margin:auto; opacity:.6; }
  646.  
  647. .albuminfo { position:relative; width:calc(100% - 142.5px); height:60px; padding:20px; margin:-102px 0px 0px 100px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders}; border-right:1px solid {color:borders}; text-align:center; border-top-right-radius:5px; border-bottom-right-radius:5px; line-height:20px; }
  648.  
  649. .albuminfo-text { position:absolute; width:100%; height:auto; top:27.5%; left:0%; font-size:10px; }
  650.  
  651. .albuminfo-text b { color:{color:accent}; }
  652.  
  653.  
  654. /* TYPE: VIDEOS */
  655.  
  656. .tumblr_video_container { width:auto!important; height:auto!important; {block:ifGrayscale} filter: grayscale(100%); {/block:ifGrayscale} }
  657.  
  658. .tumblr_video_container:hover {
  659.  
  660. {block:ifGrayscale} filter: grayscale(0%);
  661. -webkit-transition: all .8s;
  662. -moz-transition: all .8s;
  663. -o-transition: all .8s;
  664. -ms-transition: all .8s;
  665. transition: all .8s; {/block:ifGrayscale} }
  666.  
  667.  
  668.  
  669.  
  670. /*--- 09: TAB STYLING ---*/
  671.  
  672.  
  673.  
  674.  
  675. /* TAB + CLOSE CONTENT */
  676.  
  677. .tcontent { position:absolute; width:620px; height:420px; right:160px; bottom:90px; background:{color:container}; overflow:hidden; z-index:9999; display:none; animation:fadeEffect 1s; }
  678.  
  679. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  680.  
  681. .tcontent button { position:absolute; top:0px; right:0px; padding:15px; background:transparent; color:{color:links}; border:none; z-index:99999; }
  682.  
  683. .tcontent button:hover { cursor:pointer; }
  684.  
  685. .tcontent button:focus { outline:0; }
  686.  
  687.  
  688. /* NAVI TAB STYLING */
  689.  
  690. .ngraph { position:absolute; width:500px; height:160px; top:50px; left:60px; border:1px solid {color:borders}; overflow:hidden;
  691.  
  692. -webkit-box-shadow: 2px 2px 15px -2px {color:borders};
  693. box-shadow: 2px 2px 15px -2px {color:borders}; }
  694.  
  695. .ngraph img { width:500px; height:160px; }
  696.  
  697. .ntitle { position:absolute; width:200px; height:auto; top:190px; right:50px; text-align:right; font-family:"mondeline"; font-size:60px; font-weight:400; letter-spacing:1px; color:{color:accent}; }
  698.  
  699. .nlinks { position:absolute; width:125px; height:150px; bottom:30px; left:90px; }
  700.  
  701. .nlinks li { float:left; display:inline-block; width:40px; height:40px; line-height:40px; margin:5px; background:{color:posts}; border:1px solid {color:borders}; border-radius:4px; text-align:center; }
  702.  
  703. .nlinks .iconify { font-size:15px; vertical-align:-4px; }
  704.  
  705. .ndesc { position:absolute; width:350px; height:130px; bottom:40px; right:55px; text-align:center; }
  706.  
  707. .ndesc i { color:{color:accent3}; font-size:22px; }
  708.  
  709. .ndescription { position:absolute; width:auto; height:85px; bottom:5px; left:0px; padding:0px 20px 0px 20px; overflow:auto; line-height:17px; font-family:"roboto", sans-serif; font-size:10px; }
  710.  
  711.  
  712. /* MUSE TAB STYLING */
  713.  
  714. .muses { position:absolute; width:550px; height:290px; bottom:20px; left:37.5px; overflow:scroll; }
  715.  
  716. .muses li { float:left; display:inline-block; width:130px; height:80px; background:black; margin:7px; }
  717.  
  718. .muses img { width:130px; height:80px; }
  719.  
  720. .mtitle { position:absolute; width:200px; height:90px; top:15px; left:30px; text-align:left; font-family:"mondeline"; font-size:60px; font-weight:400; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1px; color:{color:accent}; line-height:95px; }
  721.  
  722. .msubtitle { position:absolute; width:250px; height:20px; top:72.5px; left:65px; text-align:left; font-family:"roboto", sans-serif; font-size:7.5px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; font-style:italic; }
  723.  
  724.  
  725. /* MUSE POPUPS */
  726.  
  727. .tabcontent { position:absolute; width:790px; height:420px; right:0px; bottom:90px; background:{color:container}; overflow:hidden; z-index:9999; display:none; animation:fadeEffect 1s; }
  728.  
  729. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  730.  
  731. .close { float:right; z-index:99999; color:{color:links}; font-size:13px; padding:15px; }
  732.  
  733. .close:hover { cursor:pointer; }
  734.  
  735.  
  736. /* MUSE POPUP STYLING */
  737.  
  738. .ptitle { position:absolute; width:100%; height:20px; top:12.5px; left:0px; text-align:center; font-family:"roboto", sans-serif; font-size:10px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; font-style:italic; }
  739.  
  740. /* popup link styling */
  741.  
  742. .plinks-bg { position:absolute; width:529px; height:100px; right:0px; bottom:0px; border-top:1px solid {color:borders}; background:{color:container}; }
  743.  
  744. .plinks { position:absolute; width:490px; height:65px; left:95px; bottom:0px; }
  745.  
  746. .plinks li { float:left; display:inline-block; width:40px; height:40px; line-height:40px; margin:7px; background:{color:posts}; border:1px solid {color:borders}; border-radius:4px; text-align:center; }
  747.  
  748. .plinks .iconify { font-size:15px; vertical-align:-4px; }
  749.  
  750. /* stats styling */
  751.  
  752. .pstats-title { position:absolute; width:530px; height:20px; top:35px; right:0px; text-align:center; font-family:"roboto", sans-serif; font-size:10px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; font-style:italic; }
  753.  
  754. .pstats { position:absolute; width:450px; height:60px; top:60px; right:17.5px; text-align:center; padding:0px 30px 0px 30px; overflow:scroll; font-style:italic; font-family:"roboto", sans-serif; font-size:10px; }
  755.  
  756. .pstats b { font-style:normal; }
  757.  
  758. /* bio styling */
  759.  
  760. .pbio-title { position:absolute; width:530px; height:20px; top:135px; right:0px; text-align:center; font-family:"roboto", sans-serif; font-size:10px; font-weight:800; text-shadow: 0px 0px 2px {color:text shadow}; letter-spacing:1.5px; color:{color:accent2}; text-transform:uppercase; font-style:italic; }
  761.  
  762. .pbio { position:absolute; width:450px; height:150px; top:160px; right:17.5px; text-align:center; padding:0px 30px 0px 30px; overflow:scroll; font-family:"roboto", sans-serif; font-size:11px; }
  763.  
  764. /* basic photography styling */
  765.  
  766. .photography { position:absolute; width:250px; height:420px; top:0px; left:10px; border-right:1px solid {color:borders}; background:{color:container}; }
  767.  
  768. .photo-content { position:absolute; width:250px; height:375px; bottom:0px; left:0px; overflow-x:hidden; overflow-y:scroll; }
  769.  
  770. .photo-post { display:block; width:250px; height:auto; padding:0px 0px 15px 0px; margin-bottom:20px; }
  771.  
  772. /* types of gallery styling */
  773.  
  774. .photo-time { margin-top:10px; margin-left:25px; line-height:15px; margin-bottom:10px; }
  775.  
  776. .photo-time b { font-size:13px; color:{color:accent}; }
  777.  
  778. .photo-time span { font-size:9px; font-family:"roboto", sans-serif; font-style:italic; letter-spacing:1px; }
  779.  
  780. .photo-time span .iconify { font-size:10px; vertical-align:-2.5px; }
  781.  
  782.  
  783. /* gallery: three pictures */
  784.  
  785. .photo-boxes { position:relative; width:245px; height:200px; }
  786.  
  787. .pic-one { float:left; margin-left:22.5px; width:100px; height:200px; background:gray; overflow:hidden; border-top-left-radius:8px; border-bottom-left-radius:8px; }
  788.  
  789. .pic-two { float:right; margin-right:17.5px; width:95px; height:95px; background:gray; overflow:hidden; border-top-right-radius:8px; }
  790.  
  791. .pic-three { float:right; margin-right:17.5px; margin-top:10px; width:95px; height:95px; background:gray; overflow:hidden; border-bottom-right-radius:8px; }
  792.  
  793.  
  794. /* gallery: video */
  795.  
  796. .photo-video { margin-left:22.5px; margin-top:0px; background:gray; width:205px; height:205px; overflow:hidden; border-radius:10px; }
  797.  
  798. .photo-video img { width:205px; height:205px; }
  799.  
  800. .video-symbol { width:30px; height:30px; margin-left:77.5px; margin-top:-127.5px; }
  801.  
  802. .video-symbol .iconify { font-size:25px; background:{color:posts}; padding:10px; border-radius:8.5px; border:1px solid {color:borders}; color:{color:accent3}; }
  803.  
  804.  
  805. /* gallery: two pictures */
  806.  
  807. .photo-boxes2 { position:relative; width:245px; height:160px; }
  808.  
  809. .pic-four { float:left; margin-left:22.5px; width:205px; height:75px; background:gray; overflow:hidden; border-top-left-radius:8px; border-top-right-radius:8px; }
  810.  
  811. .pic-four img { width:205px; height:75px; }
  812.  
  813. .pic-five { float:left; margin-left:22.5px; margin-top:10px; width:205px; height:75px; background:gray; overflow:hidden; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
  814.  
  815. .pic-five img { width:205px; height:75px; }
  816.  
  817.  
  818.  
  819.  
  820. /*--- 10: CUSTOM CSS ---*/
  821.  
  822.  
  823.  
  824.  
  825. {CustomCSS}
  826. </style></head><body>
  827.  
  828.  
  829.  
  830.  
  831. <div id="container">
  832.  
  833. <div class="png"> <img src="{image:png}" draggable="false"> </div>
  834.  
  835. <div id="container-top">
  836.  
  837. <form action="/search" method="get" class="sfm" name="theform">
  838. <i class="fas fa-search"></i>
  839. <input type="text" name="q" value="SEARCH"/>
  840. </form>
  841.  
  842. <div class="top-title">
  843.  
  844. {text:top title}
  845.  
  846. </div>
  847.  
  848. </div>
  849.  
  850. <div id="container-left">
  851.  
  852. <div class="graphic"> <img src="{image:small graph}" draggable="false"> </div>
  853.  
  854. <div class="desc"> {text:description} </div>
  855.  
  856. </div>
  857.  
  858. <div id="graph"> <img src="{image:big graph}" draggable="false"> </div>
  859.  
  860. <div id="container-bottom">
  861.  
  862. <div class="links">
  863.  
  864. <li><a href="/"> refresh. </a></li>
  865. <li><a href="/ask"> askbox. </a></li>
  866. <li><a href="#" class="tlinks" onclick="openCapitae(event, 'navi')"> navigate. </a></li>
  867. <li><a href="#" class="tablinks" onclick="openCity(event, 'about')"> about. </a></li>
  868. <li><a href="/"> free link. </a></li>
  869. <li><a href="/"> free link. </a></li>
  870.  
  871. </div>
  872.  
  873. <div class="subtitle"> {text:subtitle} </div>
  874. <div class="title"> {text:title} </div>
  875.  
  876.  
  877. </div>
  878.  
  879.  
  880.  
  881. <!-- TABS: navigation -->
  882.  
  883. <div id="navi" class="tcontent"> <button> x </button>
  884.  
  885. <div class="ngraph"> <img src="{image:navi graph}" draggable="false"> </div>
  886.  
  887. <div class="ntitle"> {text:navi title} </div>
  888.  
  889. <div class="nlinks">
  890.  
  891. <li> <a href="{text:navi link 01 url}" title="{text:navi link 01 title}"> <span class="iconify" data-icon="fluent:board-24-regular" data-inline="false" style="color:{color:accent}"></span> </a> </li>
  892. <li> <a href="{text:navi link 02 url}" title="{text:navi link 02 title}"> <span class="iconify" data-icon="fluent:settings-24-regular" data-inline="false" style="color:{color:accent2}"></span> </a> </li>
  893.  
  894. <li> <a href="{text:navi link 03 url}" title="{text:navi link 03 title}"> <span class="iconify" data-icon="fluent:tag-24-regular" data-inline="false" style="color:{color:accent2}"></span> </li>
  895. <li> <a href="{text:navi link 04 url}" title="{text:navi link 04 title}"> <span class="iconify" data-icon="fluent:save-24-regular" data-inline="false" style="color:{color:accent}"></span> </a> </li>
  896.  
  897. <li> <a href="{text:navi link 05 url}" title="{text:navi link 05 title}"> <span class="iconify" data-icon="fluent:document-bullet-list-24-regular" data-inline="false" style="color:{color:accent}"></span> </a> </li>
  898. <li> <a href="{text:navi link 06 url}" title="{text:navi link 06 title}"> <span class="iconify" data-icon="fluent:color-line-24-regular" data-inline="false" style="color:{color:accent2}"></span> </a> </li>
  899.  
  900. </div>
  901.  
  902. <div class="ndesc">
  903.  
  904. <i class="cp cp-flower-o"> </i>
  905.  
  906. <div class="ndescription">
  907.  
  908. {text:navi desc}
  909.  
  910. </div>
  911.  
  912. </div>
  913.  
  914. </div>
  915.  
  916.  
  917.  
  918.  
  919. <div id="about" class="tabcontent"> <span class="close" onclick="this.parentElement.style.display='none'"> x </span>
  920.  
  921. <!-- popup stats --->
  922.  
  923. <div class="pstats-title"> the basics ; </div>
  924.  
  925. <div class="pstats">
  926.  
  927. <b>name :</b> muse 01. &ensp;&bull; &bull;&ensp; <b>pronouns :</b> she/her. &ensp;&bull; &bull;&ensp; <b>gender :</b> cis woman. &ensp;&bull; &bull;&ensp; <b>age :</b> twenty &ensp;&bull; &bull;&ensp; <b>occupation :</b> answer. &ensp;&bull; &bull;&ensp; <b>hometown :</b> answer. &ensp;&bull; &bull;&ensp; <b>nationality :</b> answer. &ensp;&bull; &bull;&ensp; <b>ethnicity :</b> answer. &ensp;&bull; &bull;&ensp; <b>zodiac sign :</b> cancer. &ensp;&bull; &bull;&ensp; <b>alignment :</b> chaotic good. &ensp;&bull; &bull;&ensp; <b>sexuality :</b> bisexuality. &ensp;&bull; &bull;&ensp; <b>status :</b> available for plotting.
  928.  
  929. </div>
  930.  
  931. <!-- popup biography --->
  932.  
  933. <div class="pbio-title"> biography ; </div>
  934.  
  935. <div class="pbio">
  936.  
  937. &ensp;&bull; &bull; &bull;&ensp; <b>Contrary</b> to popular belief, Lorem Ipsum is not simply <b>random</b> text. It has roots in a piece of classical Latin <b>literature</b> from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure <b>Latin words</b>, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
  938.  
  939. <br></br>
  940.  
  941.  
  942. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  943.  
  944. </div>
  945.  
  946. <!-- popup photo gallery --->
  947.  
  948. <div class="photography">
  949.  
  950. <div class="ptitle"> photo gallery ; </div>
  951.  
  952. <div class="photo-content">
  953.  
  954. <!--- start post with 3 photos --->
  955.  
  956. <div class="photo-post">
  957.  
  958. <div class="photo-time">
  959.  
  960. <!--- date --->
  961.  
  962. <b>Yesterday</b> <br>
  963.  
  964. <!--- time --->
  965.  
  966. <span> <span class="iconify" data-icon="fluent:clock-20-regular" data-inline="false"></span> 10:02am
  967.  
  968. <!--- location --->
  969.  
  970. <span class="iconify" data-icon="fluent:location-20-regular" data-inline="false"></span> location </span>
  971.  
  972. </div>
  973.  
  974. <!--- 3 pictures --->
  975.  
  976. <div class="photo-boxes">
  977.  
  978. <div class="pic-one"> <img src="https://via.placeholder.com/100x200" draggable="false"> </div>
  979. <div class="pic-two"> <img src="https://via.placeholder.com/95x95" draggable="false"> </div>
  980. <div class="pic-three"> <img src="https://via.placeholder.com/95x95" draggable="false"> </div>
  981.  
  982. </div>
  983.  
  984. </div>
  985.  
  986. <!--- end post with 3 photos --->
  987.  
  988.  
  989. <!--- start video post --->
  990.  
  991. <div class="photo-post">
  992.  
  993. <div class="photo-time">
  994.  
  995. <!--- date --->
  996.  
  997. <b>May 17th</b> <br>
  998.  
  999. <!--- time --->
  1000.  
  1001. <span> <span class="iconify" data-icon="fluent:clock-20-regular" data-inline="false"></span> 13:38pm
  1002.  
  1003. <!--- location --->
  1004.  
  1005. <span class="iconify" data-icon="fluent:location-20-regular" data-inline="false"></span> location </span>
  1006.  
  1007.  
  1008. </div>
  1009.  
  1010. <div class="photo-video">
  1011.  
  1012. <img src="https://via.placeholder.com/205x205" draggable="false">
  1013. <div class="video-symbol"> <span class="iconify" data-icon="fluent:play-20-filled" data-inline="false"></span> </div>
  1014.  
  1015. </div>
  1016.  
  1017. </div>
  1018.  
  1019. <!--- end video post --->
  1020.  
  1021. <!--- start post with 2 photos --->
  1022.  
  1023. <div class="photo-post">
  1024.  
  1025. <div class="photo-time">
  1026.  
  1027. <!--- date --->
  1028.  
  1029. <b>May 2nd</b> <br>
  1030.  
  1031. <!--- time --->
  1032.  
  1033. <span> <span class="iconify" data-icon="fluent:clock-20-regular" data-inline="false"></span> 11:11am
  1034.  
  1035. <!--- location --->
  1036.  
  1037. <span class="iconify" data-icon="fluent:location-20-regular" data-inline="false"></span> location </span>
  1038.  
  1039. </div>
  1040.  
  1041. <!--- 3 pictures --->
  1042.  
  1043. <div class="photo-boxes2">
  1044.  
  1045. <div class="pic-four"> <img src="https://via.placeholder.com/205x75" draggable="false"> </div>
  1046. <div class="pic-five"> <img src="https://via.placeholder.com/205x75" draggable="false"> </div>
  1047.  
  1048. </div>
  1049.  
  1050. </div>
  1051.  
  1052. <!--- end post with 2 photos --->
  1053.  
  1054. <!--- start video post --->
  1055.  
  1056. <div class="photo-post">
  1057.  
  1058. <div class="photo-time">
  1059.  
  1060. <!--- date --->
  1061.  
  1062. <b>April 23rd</b> <br>
  1063.  
  1064. <!--- time --->
  1065.  
  1066. <span> <span class="iconify" data-icon="fluent:clock-20-regular" data-inline="false"></span> 00:05am
  1067.  
  1068. <!--- location --->
  1069.  
  1070. <span class="iconify" data-icon="fluent:location-20-regular" data-inline="false"></span> location </span>
  1071.  
  1072.  
  1073. </div>
  1074.  
  1075. <div class="photo-video">
  1076.  
  1077. <img src="https://via.placeholder.com/205x205" draggable="false">
  1078.  
  1079. </div>
  1080.  
  1081. </div>
  1082.  
  1083. <!--- end video post --->
  1084.  
  1085. </div> <!-- end photo content -->
  1086.  
  1087. </div>
  1088.  
  1089. <!-- popup links --->
  1090.  
  1091. <div class="plinks-bg">
  1092.  
  1093. <div class="ptitle"> navigate ; </div>
  1094.  
  1095. <div class="plinks">
  1096.  
  1097. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:calendar-person-24-regular" data-inline="false" style="color:{color:accent}"></span> </a> </li>
  1098.  
  1099. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:collections-24-regular" data-inline="false" style="color:{color:accent2}"></span> </a> </li>
  1100.  
  1101. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:content-settings-24-regular" data-inline="false" style="color:{color:accent}"></span> </li>
  1102.  
  1103. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:glance-24-regular" data-inline="false" style="color:{color:accent2}"></span> </a> </li>
  1104.  
  1105. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:alert-on-24-regular" data-inline="false" style="color:{color:accent}"></span> </a> </li>
  1106.  
  1107. <li> <a href="/" title="link title"> <span class="iconify" data-icon="fluent:calendar-agenda-24-regular" data-inline="false" style="color:{color:accent2}"></span> </a> </li>
  1108.  
  1109.  
  1110.  
  1111. </div>
  1112.  
  1113. </div>
  1114.  
  1115.  
  1116. </div>
  1117.  
  1118.  
  1119.  
  1120.  
  1121. <!--- POSTS --->
  1122.  
  1123. <div id="posts">
  1124. {block:Posts}
  1125. <div class="entry">
  1126.  
  1127. <!-- TOP INFO --->
  1128.  
  1129. <div class="topinfo"> <p style="text-align:left;"> <a href="{Permalink}" title="posted {TimeAgo} with {NoteCountWithLabel}."> <span class="iconify" data-icon="clarity:calendar-line" data-inline="false" style="font-size:10px; vertical-align:-1px; padding-right:2px;"></span> {Month} {Year}</a> <span style="float:right;"> <a href="{ReblogURL}" target="_blank" title="reblog this post?"> <span class="iconify" data-icon="clarity:repeat-line" data-inline="false" style="font-size:10px; vertical-align:-1px; padding-right:1px;"></span> reblog</a> {block:ContentSource} <a href="{SourceURL}" title="posted by {SourceTitle}."> <span class="iconify" data-icon="clarity:directory-line" data-inline="false" style="font-size:10px; vertical-align:-2px; padding-left:7px;"></span> source</a>{/block:ContentSource} </span></p> </div>
  1130.  
  1131. <!-- TEXT --->
  1132.  
  1133. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1134.  
  1135. <!-- PHOTOS --->
  1136.  
  1137. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{/block:Photo}
  1138.  
  1139. {block:Photoset} {block:IndexPage}{Photoset-500}{/block:IndexPage} {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage} {/block:Photoset}
  1140.  
  1141. <!-- QUOTE --->
  1142.  
  1143. {block:Quote} <div class="quote"> {Quote} </div> <div class="source"> — {Source} </div> {/block:Quote}
  1144.  
  1145. <!-- LINKS --->
  1146.  
  1147. {block:Link} <div class="linktitle"> <a href="{URL}"><h1>{Name}</h1></a></div>
  1148. {block:Description} <p>{Description}</p> {/block:Description}{/block:Link}
  1149.  
  1150. <!-- CHATS --->
  1151.  
  1152. {block:Chat} <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold;">@{Label} </span>{/block:Label}
  1153. {Line}</li>{/block:Lines}</ul> <div class="delivered"> <span class="fas fa-check"></span> delivered. </div> {/block:Chat}
  1154.  
  1155. <!-- AUDIO --->
  1156.  
  1157. {block:Audio}
  1158. {block:AlbumArt}
  1159. <div class="albumart"> <img src="{AlbumArtURL}"/>{/block:AlbumArt} <div class="albumtrack"> {AudioPlayerGrey} </div> </div>
  1160. <div class="albuminfo"><div class="albuminfo-text">
  1161. {block:TrackName} <b>{TrackName}</b> {/block:TrackName} <br/> by {block:Artist} {Artist} {/block:Artist}
  1162. </div></div>
  1163. {/block:Audio}
  1164.  
  1165. <!-- VIDEO --->
  1166.  
  1167. {block:Video}<div class="video">{Video-500}</div>{/block:Video}
  1168.  
  1169. <!-- ASKS --->
  1170.  
  1171. {block:Answer}<div id="question">{Question} <div id="asker">written by {Asker}</div></div>{Answer} {/block:Answer}
  1172.  
  1173. <!-- POST CAPTIONS --->
  1174.  
  1175. {block:Caption}{Caption}{/block:Caption}
  1176.  
  1177. <!-- READ MORE --->
  1178.  
  1179. {block:More}<div class="more"><a href="{Permalink}" class="more-btn">read more</a></div>{/block:More}
  1180.  
  1181. <!-- TAGS --->
  1182.  
  1183. {block:HasTags} <div class="tags"> <span>with keywords: </span> {block:Tags}<a href="{TagURL}">#{Tag}, </a> &nbsp;{/block:Tags}<br></div>{/block:HasTags}
  1184.  
  1185. <!-- POST NOTES --->
  1186.  
  1187. <div class="note"> {block:PostNotes}{PostNotes}{/block:PostNotes} </div>
  1188.  
  1189. </div>
  1190. {/block:Posts}
  1191.  
  1192. <!-- PAGINATION -->
  1193.  
  1194. {block:Pagination} <div class="pagination"> {block:previouspage} <a href="{previouspage}"> <span class="iconify" data-icon="ei:chevron-left" data-inline="false"></span> </a> {/block:previouspage} {block:nextpage} <a href="{nextpage}"> <span class="iconify" data-icon="ei:chevron-right" data-inline="false"></span> </a> {/block:nextpage} </div> {/block:pagination}
  1195.  
  1196.  
  1197. </div>
  1198. </div>
  1199.  
  1200.  
  1201.  
  1202.  
  1203. <!-- CREDIT -->
  1204.  
  1205. <div class="credit">
  1206. <a href="http://capitae.tumblr.com" title="coded by julie."> <span class="th th-holly-o"></span> </a>
  1207. </div>
  1208.  
  1209.  
  1210.  
  1211.  
  1212. </body>
  1213. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!