API tools faq
paste
cvndythemes

zcilovs_muselist

cvndythemes
May 21st, 2020
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>BLOG TITLE</title>
  6.  
  7.  
  8.  
  9.  
  10. <!--
  11.  
  12. >> ETHEREAL THEMES // CUSTOM THEME for @zcilovs
  13.  
  14. Designed by etherealthemes
  15. etherealthemes.tumblr.com
  16. ⓒ 2016 - 2020
  17. //
  18.  
  19.  
  20. Background Image by Ahmed Sharyaan @sharyaan at unsplash.com
  21. Fonts by Google Fonts
  22. Icons by Jam Icons @ jam-icons.com
  23. Tumblr controls styling by cyantists @ cyantists.tumblr.com
  24. PXU Photosets by chloethemes @ bychloethemes.tumblr.com
  25.  
  26. >> TIPS AND HOW TO'S
  27.  
  28. Please feel free to contact me for any questions or help
  29.  
  30. -->
  31.  
  32.  
  33.  
  34.  
  35. <!-- SCRIPTS -->
  36.  
  37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  38.  
  39. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  40.  
  41. <script>
  42. (function($){
  43. $(document).ready(function(){
  44. $("[title]").style_my_tooltips({
  45. tip_delay_time:200,
  46. tip_fade_speed:300,
  47. tip_follows_cursor:true
  48. }
  49. );
  50. });
  51. })(jQuery);
  52. </script>
  53.  
  54. <script>
  55. $container.infinitescroll({
  56. itemSelector: '.posts',
  57. navSelector: '.pagination',
  58. nextSelector: '.pagination a',
  59. loadingImg: '',
  60. loadingText: '<em></em>',
  61. bufferPx: 2000
  62. },
  63. function( newElements ) {
  64. var $newElems = $(newElements);
  65. var $newElemsIDs = $newElems.map(function(){
  66. return this.id;
  67. }).get();
  68. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  69. });
  70. </script>
  71.  
  72. <!-- TIPPY JS -->
  73. <script src="https://unpkg.com/popper.js@1"></script>
  74. <script src="https://unpkg.com/tippy.js@5"></script>
  75. <script>
  76. $(document).ready(function(){
  77. tippy('[title]', {
  78. arrow: false,
  79. placement: 'top',
  80. delay: 5,
  81. distance: 10,
  82. maxWidth: 300,
  83.  
  84. followCursor: true,
  85. allowHTML: true,
  86. theme: 'custom',
  87. ignoreAttributes: true,
  88. content(reference) {
  89. const title = reference.getAttribute('title');
  90. reference.removeAttribute('title');
  91. return title;
  92. },
  93. });
  94. });
  95. </script>
  96.  
  97. <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
  98.  
  99. <link href="https://fonts.googleapis.com/css?family=DM+Serif+Text|Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  100.  
  101.  
  102.  
  103. <!-- STYLESHEET -->
  104. <style type="text/css">
  105.  
  106. @font-face { font-family: "redstockscript"; src: url('https://dl.dropboxusercontent.com/s/sf70f80r3vdtxr2/redstockscript-wf.ttf'); }
  107.  
  108. /* --- SELECTION ---*/
  109.  
  110. ::-moz-selection {
  111. color:#ffffff;
  112. background:#1d7898;
  113. opacity:1;
  114. }
  115.  
  116. ::selection {
  117. color:#ffffff;
  118. background:#1d7898;
  119. opacity:1;
  120. }
  121.  
  122. /* --- TOOLTIPS ---*/
  123.  
  124. .tippy-tooltip.custom-theme {
  125. $tooltipBg:#ffffff;
  126. background-color:#ffffff;
  127. color:#000000;
  128. border-radius:5%;
  129. font-size:10pt;
  130. margin-left:15px;
  131. }
  132.  
  133. .tippy-content {padding:4px 5px 4px 5px!important;}
  134.  
  135. /* --- SCROLLBAR ---*/
  136.  
  137. ::-webkit-scrollbar {width:0px;}
  138.  
  139. ::-webkit-scrollbar-track {width:0px;}
  140.  
  141. ::-webkit-scrollbar-thumb {width:0px;}
  142.  
  143. /* --- TUMBLR TOOLS --- */
  144.  
  145. iframe.tmblr-iframe {
  146. top:16px!important;
  147. right:25!important;
  148. opacity:1;
  149. padding:0px;
  150. z-index:4!important;
  151. transform:scale(0.5);
  152. transform-origin:100% 0;
  153. -webkit-transform:scale(0.5);
  154. -webkit-transform-origin:100% 0;
  155. -o-transform:scale(0.5);
  156. -o-transform-origin:100% 0;
  157. -moz-transform:scale(0.5);
  158. -moz-transform-origin:100% 0;
  159. -ms-transform:scale(0.5);
  160. -ms-transform-origin:100% 0;
  161. transition:0.2s ease-in-out;
  162. -webkit-transition:0.2s ease-in-out;
  163. -moz-transition:0.2s ease-in-out;
  164. filter:invert(1);
  165. -webkit-filter:invert(1);
  166. -o-filter:invert(1);
  167. -moz-filter:invert(1);
  168. -ms-filter:invert(1);
  169. }
  170.  
  171. /* --- BODY --- */
  172.  
  173. body {
  174. background-color:#ffffff;
  175. margin:0px;
  176. color:#000000;
  177. text-transform:normal;
  178. font-style:normal;
  179. font-weight:400;
  180. font-family: 'Karla', sans-serif;
  181. font-size:10.5pt;
  182. text-decoration:none;
  183. line-height:160%;
  184. }
  185.  
  186.  
  187. .cover {
  188. position:fixed;
  189. top:0px;
  190. left:0px;
  191. margin:0px;
  192. height:100%;
  193. width:100%;
  194. background-image:url('https://static.tumblr.com/zvesamf/6mFq9kgzl/background.jpg');
  195. background-position:bottom center;
  196. -webkit-background-size: cover;
  197. -moz-background-size: cover;
  198. -o-background-size: cover;
  199. background-size: cover;
  200. z-index:-1;
  201. }
  202.  
  203.  
  204. a {color:#000000;text-decoration:none;transition:0.3s ease-in-out;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;}
  205.  
  206. b, bold, strong {color:#000000;!important;font-weight:700;}
  207. i, em, italic {color:#000000;letter-spacing:0.5px;}
  208. sub, sup {border:0px;}
  209. small {font-size:10.5pt;color:#000000;}
  210.  
  211.  
  212. hr.divider, hr, hr.separator {
  213. display:block;
  214. margin-top:0.5em;
  215. margin-bottom:0.5em;
  216. margin-left:auto;
  217. margin-right:auto;
  218. border-style:inset;
  219. border-color:#000000;
  220. border-bottom:1px;
  221. }
  222.  
  223. pre {
  224. white-space:pre-wrap;
  225. white-space:-moz-pre-wrap;
  226. white-space:-pre-wrap;
  227. white-space:-o-pre-wrap;
  228. word-wrap:break-word;
  229. }
  230.  
  231. /* --- CONTAINER --- */
  232.  
  233. .container {
  234. position:fixed;
  235. top:50%;
  236. left:50%;
  237. transform: translate(-50%, -50%);
  238. width:850px;
  239. height:620px;
  240. background:rgba(255,255,255,0.65);
  241. }
  242.  
  243. .border {
  244. position:relative;
  245. top:60px;
  246. left:90px;
  247. width:830px;
  248. height:540px;
  249. background:#94d3e0;
  250. }
  251.  
  252. /* --- CONTENT --- */
  253.  
  254. .content {
  255. position:relative;
  256. top:-440px;
  257. left:60px;
  258. width:815px;
  259. height:450px;
  260. background:#ffffff;
  261. }
  262.  
  263.  
  264. /* --- CHARACTER NAME --- */
  265.  
  266. .charactername {
  267. float:right;
  268. text-align:right;
  269. }
  270.  
  271. .print {
  272. position:relative;
  273. top:-84px;
  274. left:-50px;
  275. width:400px;
  276. line-height:50pt;
  277. text-align:right;
  278. text-transform:lowercase;
  279. font-family: 'DM Serif Text', serif;
  280. color:#000000;
  281. font-size:50pt;
  282. z-index:5;
  283. }
  284.  
  285. .print h1 {
  286. position:relative;
  287. top:-190px;
  288. left:20px;
  289. text-transform:lowercase;
  290. margin-bottom:-300px;
  291. font-family: redstockscript;
  292. color:#1d7898;
  293. font-size:140pt;
  294. line-height:140pt;
  295. font-weight:400;
  296. z-index:6;
  297. }
  298.  
  299. /* --- PAGE CONTENT --- */
  300.  
  301. .page_container {
  302. position:relative;
  303. top:0px;
  304. left:25px;
  305. width:790px;
  306. height:450px;
  307. background:#ffffff;
  308. }
  309.  
  310. .character_portraits {
  311. position:relative;
  312. float:left;
  313. top:-55px;
  314. left:10px;
  315. text-align:center;
  316. display:inline-block;
  317. overflow-x:hidden;
  318. padding:20px;
  319. overflow-y:scroll;
  320. width:730px;
  321. height:380px;
  322. z-index:15;
  323. }
  324.  
  325. .character_portraits h1 {
  326. position:relative;
  327. top:0px;
  328. left:-200px;
  329. display:inline-block;
  330. font-weight:400;
  331. text-transform:lowercase;
  332. font-family: 'DM Serif Text', serif;
  333. color:#000000;
  334. font-size:30pt;
  335. border-bottom:10px solid #94d3e0;
  336. line-height:15pt;
  337. padding:0px 60px 0px 20px;
  338. margin:0px 0px 35px 0px;
  339. }
  340.  
  341. .individual {
  342. display:inline-block;
  343. text-align:center;
  344. height:100px;
  345. width:80px;
  346. margin:0px 7px 0px 7px;
  347. }
  348.  
  349. .individual img {height:100px;width:80px;margin-bottom:-10px;}
  350.  
  351. .individual_hover {
  352. position:relative;
  353. top:-103px;
  354. left:0px;
  355. height:102px;
  356. width:80px;
  357. margin-bottom:-100px;
  358. text-align:center;
  359. opacity:0;
  360. transition:0.3s ease-in-out;
  361. -webkit-transition:0.3s ease-in-out;
  362. -moz-transition:0.3s ease-in-out;
  363. background:rgba(255,255,255,0.7);
  364. }
  365.  
  366. .individual_hover:hover {opacity:1;}
  367.  
  368. .individual h2 {
  369. position:relative;
  370. top:50%;
  371. left:50%;
  372. transform: translate(-50%, -50%);
  373. font-family: 'DM Serif Text', serif;
  374. color:#000000;
  375. line-height:12pt;
  376. font-size:10pt;
  377. font-weight:400;
  378. text-transform:lowercase;
  379. }
  380.  
  381. /* --- NAVIGATION --- */
  382.  
  383. .icon_container {
  384. position:relative;
  385. top:0px;
  386. left:30px;
  387. height:25px;
  388. width:784px;
  389. border-right:1px solid #ffffff;
  390. border-bottom:1px solid #ffffff;
  391. padding:0px;
  392. text-align:right;
  393. }
  394.  
  395. .icons {
  396. position:relative;
  397. top:-50px;
  398. left:520px;
  399. width:200px;
  400. padding:0px!important;
  401. text-align:right!important;
  402. z-index:5!important;
  403. }
  404.  
  405. .icons a {
  406. display:inline-block;
  407. line-height:36px;
  408. border-radius:50%;
  409. color:#000000;
  410. padding:10px;
  411. background:#ffffff;
  412. font-size:14pt;
  413. margin:0px 10px;
  414. }
  415.  
  416.  
  417. </style>
  418. </head>
  419.  
  420.  
  421. <body>
  422.  
  423.  
  424.  
  425. <div class="cover"></div>
  426.  
  427.  
  428.  
  429. <!-- START CONTAINER -->
  430. <div class="container">
  431. <div class="border"></div>
  432.  
  433.  
  434. <!-- START CONTENT -->
  435. <div class="content">
  436.  
  437.  
  438.  
  439.  
  440.  
  441.  
  442.  
  443. <!-------------------------------
  444.  
  445. ---------------------------------
  446.  
  447. START PAGE TITLE
  448.  
  449. ---------------------------------
  450.  
  451. -------------------------------->
  452. <div class="charactername">
  453. <div class="print">muses
  454. <h1>my</h1>
  455. </div>
  456. </div>
  457. <!-- END PAGE TITLE -->
  458.  
  459.  
  460.  
  461.  
  462.  
  463.  
  464. <!-------------------------------
  465.  
  466. ---------------------------------
  467.  
  468. START CHARACTERS
  469.  
  470. ---------------------------------
  471.  
  472. -------------------------------->
  473. <div class="page_container">
  474.  
  475. <div class="character_portraits">
  476. <h1>Main Title</h1><br>
  477.  
  478.  
  479.  
  480.  
  481.  
  482.  
  483. <!-- START ONE CHARACTER -->
  484. <div class="individual">
  485. <a href="TAG PAGE URL">
  486. <img src="https://placehold.it/80X100" />
  487. <div class="individual_hover">
  488. <h2>Character Name</h2>
  489. </div>
  490. </a>
  491. </div>
  492. <!-- END ONE CHARACTER -->
  493.  
  494.  
  495.  
  496.  
  497.  
  498.  
  499.  
  500. <!-- START ONE CHARACTER -->
  501. <div class="individual">
  502. <a href="TAG PAGE URL">
  503. <img src="https://placehold.it/80X100" />
  504. <div class="individual_hover">
  505. <h2>Character Name</h2>
  506. </div>
  507. </a>
  508. </div>
  509. <!-- END ONE CHARACTER -->
  510.  
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517. <!-- START ONE CHARACTER -->
  518. <div class="individual">
  519. <a href="TAG PAGE URL">
  520. <img src="https://placehold.it/80X100" />
  521. <div class="individual_hover">
  522. <h2>Character Name</h2>
  523. </div>
  524. </a>
  525. </div>
  526. <!-- END ONE CHARACTER -->
  527.  
  528.  
  529.  
  530.  
  531.  
  532.  
  533.  
  534. <!-- START ONE CHARACTER -->
  535. <div class="individual">
  536. <a href="TAG PAGE URL">
  537. <img src="https://placehold.it/80X100" />
  538. <div class="individual_hover">
  539. <h2>Character Name</h2>
  540. </div>
  541. </a>
  542. </div>
  543. <!-- END ONE CHARACTER -->
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550.  
  551. <!-- START ONE CHARACTER -->
  552. <div class="individual">
  553. <a href="TAG PAGE URL">
  554. <img src="https://placehold.it/80X100" />
  555. <div class="individual_hover">
  556. <h2>Character Name</h2>
  557. </div>
  558. </a>
  559. </div>
  560. <!-- END ONE CHARACTER -->
  561.  
  562.  
  563.  
  564.  
  565.  
  566.  
  567.  
  568. <!-- START ONE CHARACTER -->
  569. <div class="individual">
  570. <a href="TAG PAGE URL">
  571. <img src="https://placehold.it/80X100" />
  572. <div class="individual_hover">
  573. <h2>Character Name</h2>
  574. </div>
  575. </a>
  576. </div>
  577. <!-- END ONE CHARACTER -->
  578.  
  579.  
  580.  
  581.  
  582.  
  583.  
  584.  
  585. <!-- START ONE CHARACTER -->
  586. <div class="individual">
  587. <a href="TAG PAGE URL">
  588. <img src="https://placehold.it/80X100" />
  589. <div class="individual_hover">
  590. <h2>Character Name</h2>
  591. </div>
  592. </a>
  593. </div>
  594. <!-- END ONE CHARACTER -->
  595.  
  596.  
  597.  
  598.  
  599.  
  600.  
  601.  
  602. <!-- START ONE CHARACTER -->
  603. <div class="individual">
  604. <a href="TAG PAGE URL">
  605. <img src="https://placehold.it/80X100" />
  606. <div class="individual_hover">
  607. <h2>Character Name</h2>
  608. </div>
  609. </a>
  610. </div>
  611. <!-- END ONE CHARACTER -->
  612.  
  613.  
  614.  
  615.  
  616.  
  617.  
  618.  
  619.  
  620. <!-- START ONE CHARACTER -->
  621. <div class="individual">
  622. <a href="TAG PAGE URL">
  623. <img src="https://placehold.it/80X100" />
  624. <div class="individual_hover">
  625. <h2>Character Name</h2>
  626. </div>
  627. </a>
  628. </div>
  629. <!-- END ONE CHARACTER -->
  630.  
  631.  
  632.  
  633.  
  634.  
  635.  
  636.  
  637.  
  638. <!-- START ONE CHARACTER -->
  639. <div class="individual">
  640. <a href="TAG PAGE URL">
  641. <img src="https://placehold.it/80X100" />
  642. <div class="individual_hover">
  643. <h2>Character Name</h2>
  644. </div>
  645. </a>
  646. </div>
  647. <!-- END ONE CHARACTER -->
  648.  
  649.  
  650.  
  651.  
  652.  
  653.  
  654.  
  655.  
  656. <!-- START ONE CHARACTER -->
  657. <div class="individual">
  658. <a href="TAG PAGE URL">
  659. <img src="https://placehold.it/80X100" />
  660. <div class="individual_hover">
  661. <h2>Character Name</h2>
  662. </div>
  663. </a>
  664. </div>
  665. <!-- END ONE CHARACTER -->
  666.  
  667.  
  668.  
  669.  
  670.  
  671.  
  672.  
  673.  
  674.  
  675.  
  676.  
  677.  
  678.  
  679.  
  680.  
  681. </div>
  682. </div>
  683. <!-- END CHARACTER INFORMATION -->
  684.  
  685.  
  686.  
  687.  
  688.  
  689.  
  690.  
  691.  
  692. <!-------------------------------
  693.  
  694. ---------------------------------
  695.  
  696. START NAVIGATION ICONS
  697.  
  698. ---------------------------------
  699.  
  700. -------------------------------->
  701. <div class="icon_container">
  702. <div class="icons">
  703.  
  704. <a title="home" href="/"><span class="jam jam-home"></span></a>
  705.  
  706. <a title="contact" href="/ask"><span class="jam jam-envelope"></span></a>
  707.  
  708. <a title="muses" href="/"><span class="jam jam-user"></span></a>
  709.  
  710. </div>
  711. </div>
  712. <!-- END NAVIGATION ICONS -->
  713.  
  714.  
  715.  
  716.  
  717.  
  718.  
  719.  
  720. </div>
  721. <!-- END CONTENT -->
  722.  
  723. </div>
  724. <!-- END CONTAINER -->
  725.  
  726. </body></html>
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!