cordiiceps

THEME 02 / MUSE PAGE. BY CORDEECEPS

Feb 20th, 2021 (edited)
365
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.44 KB | None | 0 0
  1. <!--
  2.  
  3. THEME CREATED BY CORDEECEPS !
  4.  
  5. DO NOT STEAL, REDISTRIBUTE, USE AS A BASE, REMOVE THE CREDIT OR CLAIM AS YOUR OWN !!
  6.  
  7. -->
  8.  
  9. <html>
  10. <head>
  11.  
  12.  
  13.  
  14. <title>if i ever were to lose you</title> <!-- PAGE TITLE -->
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18.  
  19. <link rel="preconnect" href="https://fonts.gstatic.com">
  20. <link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
  21.  
  22. <link rel="preconnect" href="https://fonts.gstatic.com">
  23. <link href="https://fonts.googleapis.com/css2?family=Kumar+One&display=swap" rel="stylesheet">
  24.  
  25. <link rel="preconnect" href="https://fonts.gstatic.com">
  26. <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  27.  
  28. <link rel="preconnect" href="https://fonts.gstatic.com">
  29. <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet">
  30.  
  31. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  32.  
  33. <link rel="preconnect" href="https://fonts.gstatic.com">
  34. <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
  35.  
  36.  
  37.  
  38. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  39. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  40. <script>
  41. (function($){
  42. $(document).ready(function(){
  43. $("a[title]").style_my_tooltips({
  44. tip_follows_cursor:true,
  45. tip_delay_time:90,
  46. tip_fade_speed:600,
  47. attribute:"title"
  48. });
  49. });
  50. })(jQuery);
  51. </script>
  52.  
  53.  
  54. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  55. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  56.  
  57. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  58.  
  59.  
  60. <script>
  61. $(document).ready(function() {
  62. var $container = $(".grid"); // the container with all the elements to filter inside
  63. var filters = {}; //should be outside the scope of the filtering function
  64. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  65. var $grid = $container.isotope({
  66. itemSelector: ".item", // the elements to filter
  67. percentPosition: true // put true if you use percentage widths, otherwise put false
  68. });
  69. $(".option-set a").click(function(e) {
  70. var $this = $(this); // cache the clicked link
  71. var filterAttr = "data-filter-value";
  72. var filterValue = $this.attr(filterAttr); // cache the filter
  73. var $optionSet = $this.parents(".option-set"); // cache the parent element
  74. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  75. var filterGroup = filters[group];
  76. if (!filterGroup) {
  77. filterGroup = filters[group] = [];
  78. }
  79. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  80. var activeClass = "selected", // the class for active links
  81. exclClass = "exclusive"; // the class for exclusive groups
  82. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  83. var comboFilter = getComboFilter(filters);
  84. $grid.isotope({
  85. filter: comboFilter
  86. });
  87. $this.toggleClass(activeClass);
  88. e.preventDefault();
  89. });
  90. });
  91. </script>
  92.  
  93.  
  94.  
  95. </head>
  96. <style type="text/css">
  97.  
  98.  
  99. #s-m-t-tooltip { /* HOVER NAME */
  100. max-width:400px;
  101. margin:-20px 10px 10px 10px;
  102. background-color:#151515; /* HOVER NAME BG COLOUR */
  103. font-family: 'Kumar One';
  104. padding-top:5px;
  105. padding-bottom:0px;
  106. padding-left:10px;
  107. padding-right:10px;
  108. font-size:18px;
  109. letter-spacing:1px;
  110. text-transform:uppercase;
  111. color:#358e82; /* HOVER NAME TEXT COLOUR */
  112. text-shadow: 0px 0px 5px #00656a; /* HOVER NAME TEXT SHADOW COLOUR */
  113. z-index:999999999999999999999999999999999999;
  114. border-radius: 2px 2px 2px 2px;
  115. -moz-border-radius: 2px 2px 2px 2px;
  116. -webkit-border-radius: 2px 2px 2px 2px;
  117. border: 1px solid #8f5242; /* HOVER NAME BORDER COLOUR */
  118. }
  119.  
  120.  
  121. ::-webkit-scrollbar {
  122. width: 0px;
  123. height: 0px;
  124. }
  125. ::-webkit-scrollbar-button {
  126. width: 0px;
  127. height: 0px;
  128. }
  129. ::-webkit-scrollbar-thumb {
  130. background: white;
  131. border: 0px none #151515;
  132. border-radius: 50px;
  133. }
  134. ::-webkit-scrollbar-thumb:hover {
  135. background:#151515;
  136. }
  137. ::-webkit-scrollbar-thumb:active {
  138. background: #151515;
  139. }
  140. ::-webkit-scrollbar-track {
  141. background: #151515;
  142. border: 0px none #151515;
  143. border-radius: 0px;
  144. }
  145. ::-webkit-scrollbar-track:hover {
  146. background: #151515;
  147. }
  148. ::-webkit-scrollbar-track:active {
  149. background: #151515;
  150. }
  151. ::-webkit-scrollbar-corner {
  152. background: transparent;
  153. }
  154.  
  155.  
  156. body {
  157. background-color: #202020; /* BACKGROUND COLOUR */
  158. font-family: 'Inconsolata', monospace;
  159. font-size: 13px;
  160. color: #eeeeee; /* BODY TEXT COLOUR */
  161. letter-spacing:0.5px;
  162.  
  163. }
  164.  
  165. sub, small, sup {
  166. font-size:13px;
  167. }
  168.  
  169. a {
  170. text-decoration:none;
  171. color: #3dbca6; /* LINKS COLOUR */
  172. -webkit-transition: all 0.5s ease;
  173. -moz-transition: all 0.5s ease;
  174. -o-transition: all 0.5s ease;
  175. }
  176.  
  177. a:hover {
  178. color: #d3b790; /* LINKS HOVER COLOUR */
  179. }
  180.  
  181. b, strong {
  182. color: #bc5437; /* BOLD COLOUR */
  183. font-weight:900;
  184. text-shadow: 0px 0px 5px #00656a; /* BOLD TEXT SHADOW COLOUR */
  185. font-size:14px;
  186. }
  187.  
  188. i, em {
  189. color: #d3b790; /* ITALICS COLOUR */
  190. font-family: 'Syne Mono', monospace;
  191. font-size:14px;
  192. }
  193.  
  194. h1 {
  195. font-size:14px;
  196. padding:0px;
  197. text-transform:uppercase;
  198. line-height:0px;
  199. }
  200.  
  201. h2 {
  202. font-size:30px;
  203. line-height:0px;
  204. text-align: left;
  205. padding-right:0px;
  206. padding-left:0px;
  207. font-family: 'Kumar One';
  208. color: #3dbca6; /* TITLE COLOUR */
  209. letter-spacing: 2px;
  210. text-shadow: 0px 0px 5px #00656a; /* TITLE TEXT SHADOW COLOUR */
  211. }
  212.  
  213. img {
  214. max-width: 100%;
  215. }
  216.  
  217. #container {
  218. position:absolute;
  219. margin:auto;
  220. left:0px;
  221. right:0px;
  222. top:0px;
  223. bottom:0px;
  224. background-color: #151515; /* CONTAINER BG COLOUR */
  225. height: 460px;
  226. width: 800px;
  227. padding:30px;
  228. border-radius: 2px 2px 2px 2px;
  229. -moz-border-radius: 2px 2px 2px 2px;
  230. -webkit-border-radius: 2px 2px 2px 2px;
  231. border:1px solid #303030; /* CONTAINTER BORDER COLOUR */
  232. z-index:9!important;
  233. display:block;
  234. }
  235.  
  236. #topbanner {
  237. position:absolute;
  238. margin:auto;
  239. left:0px;
  240. right:0px;
  241. top:-610px;
  242. bottom:0px;
  243. background-color: #151515; /* TOP BANNER COLOUR - if no image bg */
  244. height: 60px;
  245. width: 860px;
  246. border-radius: 2px 2px 2px 2px;
  247. -moz-border-radius: 2px 2px 2px 2px;
  248. -webkit-border-radius: 2px 2px 2px 2px;
  249. border: 1px solid #303030; /* TOP BANNER BORDER COLOUR */
  250. z-index:9!important;
  251. display:block;
  252. }
  253.  
  254. #tbimage {
  255. max-height:60px;
  256. max-width:860px;
  257. }
  258.  
  259. #bottombanner {
  260. position:absolute;
  261. margin:auto;
  262. left:0px;
  263. right:0px;
  264. top:610px;
  265. bottom:0px;
  266. background-color: #151515; /* BOTTOM BANNER COLOUR - if no image bg */
  267. height: 60px;
  268. width: 860px;
  269. border-radius: 2px 2px 2px 2px;
  270. -moz-border-radius: 2px 2px 2px 2px;
  271. -webkit-border-radius: 2px 2px 2px 2px;
  272. border: 1px solid #303030; /* BOTTOM BANNER BORDER COLOUR */
  273. z-index:9!important;
  274. display:block;
  275. }
  276.  
  277. #bbimage {
  278. max-height:60px;
  279. max-width:860px;
  280. }
  281.  
  282. .grid {
  283. width:720px;
  284. max-height:381px !important;
  285. min-height:381px !important;
  286. position:relative;
  287. margin-top:85px;
  288. overflow:auto;
  289. left:40px;
  290. }
  291.  
  292. .item {
  293. position:relative;
  294. width:150px;
  295. height:110px;
  296. background-color:transparent;
  297. margin-left:15px;
  298. margin-right:15px;
  299. margin-bottom:22px;
  300. margin-top:1px;
  301. }
  302.  
  303. .item img {
  304. width:150px;
  305. height:110px;
  306. overflow:hidden;
  307. display:block;
  308. outline:1px solid #8f5242; /* CHARACTER IMAGE BORDER COLOUR */
  309. }
  310.  
  311. .title {
  312. position:fixed;
  313. width:600px;
  314. margin-left: 20px;
  315. margin-top: -52px;
  316. font-size:17px;
  317. text-align:left;
  318. padding:1px;
  319. letter-spacing: 2px;
  320. overflow:hidden;
  321. text-transform:uppercase;
  322. }
  323.  
  324. .filters {
  325. margin-top:-15px;
  326. height:90px;
  327. position:absolute;
  328. width:850px;
  329. padding:0px;
  330. text-align:center;
  331. margin-left:-25px;
  332. }
  333.  
  334. .filters ul {
  335. color:#bc5437; /* FILTER TITLE COLOUR */
  336. font-family: 'Share Tech Mono', monospace;
  337. display: inline-block;
  338. padding:0px;
  339. margin-left:5px;
  340. margin-right:5px;
  341. text-align:center;
  342. max-width:280px;
  343. margin-bottom:10px;
  344. margin-top:3px;
  345. }
  346.  
  347. .filters li {
  348. color: #3dbca6; /* FULL STOP AFTER FILTER COLOUR */
  349. font-weight:900;
  350. display: inline;
  351. max-width: 100px;
  352. line-height:18px;
  353. }
  354.  
  355. .filters h1 {
  356. margin-bottom:1px;
  357. }
  358.  
  359. .filters a {
  360. color:#bbb; /* FILTER COLOUR */
  361. }
  362.  
  363. .filters a.selected {
  364. background-color: #3dbca6; /* SELECTED FILTER BG COLOUR */
  365. color:#151515; /* SELECTED FILTER TEXT COLOUR */
  366. font-weight:900;
  367. text-transform:uppercase;
  368. }
  369.  
  370. .mainlinks {
  371. font-size:14px;
  372. color: #eee;
  373. text-align:right;
  374. overflow:hidden;
  375. height:auto;
  376. background:black;
  377. margin-left:650px;
  378. margin-top:-50px;
  379. max-width:300px;
  380. line-height:20px;
  381. padding-right:20px;
  382. font-weight:600;
  383. text-transform:uppercase;
  384. }
  385.  
  386.  
  387. #credit {
  388. z-index:9;
  389. bottom:20px;
  390. right:20px;
  391. position:fixed;
  392. padding:10px;
  393. color: #3dbca6; /* CREDIT COLOUR, DON'T MAKE IT INVISIBLE!! */
  394. }
  395.  
  396.  
  397. </style><body>
  398.  
  399.  
  400. <div id="topbanner">
  401. <div id="tbimage">
  402.  
  403. <img src="https://i.imgur.com/SpFq56C.jpg"> <!-- TOP BANNER IMAGE -->
  404. <div class="title">
  405. <h2>if i ever were to lose you,</h2></div> <!-- TITLE TEXT -->
  406.  
  407.  
  408.  
  409. </div>
  410. </div>
  411.  
  412. <div id="bottombanner">
  413. <div id="tbimage">
  414.  
  415. <img src="https://i.imgur.com/SpFq56C.jpg"> <!-- BOTTOM BANNER IMAGE -->
  416.  
  417. <div class="mainlinks"> <!-- BOTTOM BANNER LINKS -->
  418.  
  419. <a href="/">back.</a> &nbsp;
  420. <a href="/">another link.</a>
  421. <a href="/">navigation.</a> &nbsp;
  422. <a href="/">rp main.</a>
  423.  
  424. </div>
  425. </div>
  426. </div>
  427.  
  428. <div id="container">
  429.  
  430. <!-- FILTER INSTRUCTIONS:
  431.  
  432. 1. make sure each 'data-filter-group' has a different name.
  433. 2. make sure each 'data-filter-value' has a different name.
  434. 3. you might need to add a <br> at the end of some filter names to make them all fit onto three lines, the titles fall at different heights otherwise.
  435. 4. keep the '.' at the beginning of the 'data-filter-value' name.
  436. 5. for a character to fall into the right filter, copy the name of the 'data-filter-value' WITHOUT the '.'
  437. 5a. paste the name after 'item' where it says
  438. <div class="item
  439. (control+f to search)
  440. 6. don't remove 'item' from
  441. <div class="item
  442. because this is how they show up when you click 'all'.
  443.  
  444. to add more filter categories, copy and past the below:
  445.  
  446. <ul class="filter option-set exclusive" data-filter-group="group1">
  447. <ul><h1>a filter title</h1></ul>
  448. <br><li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
  449. <li><a href="#" data-filter-value=".thisisa">oc's</a>.</li>
  450. <li><a href="#" data-filter-value=".12">canon</a>.</li><br>
  451. <li><a href="#" data-filter-value=".13">semi canon</a>.</li>
  452. </ul>
  453.  
  454. -->
  455.  
  456. <div class="filters">
  457.  
  458. <ul class="filter option-set exclusive" data-filter-group="group1">
  459. <ul><h1>a filter title</h1></ul> <!-- FILTER CATEGORY TITLE -->
  460. <br><li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
  461. <li><a href="#" data-filter-value=".thisisa">oc's</a>.</li>
  462. <li><a href="#" data-filter-value=".12">canon</a>.</li><br>
  463. <li><a href="#" data-filter-value=".13">semi canon</a>.</li>
  464. </ul>
  465.  
  466. <ul class="filter option-set exclusive" data-filter-group="group2">
  467. <ul><h1>moral alignment</h1></ul><br>
  468. <li><a href="#" data-filter-value="" class="selected">all</a>.</li>
  469. <li><a href="#" data-filter-value=".21">lawful g</a>.</li>
  470. <li><a href="#" data-filter-value=".22">neutral g</a>.</li>
  471. <li><a href="#" data-filter-value=".23">chaotic g</a>.</li>
  472. <li><a href="#" data-filter-value=".24">lawful n</a>.</li>
  473. <li><a href="#" data-filter-value=".25">true n</a>.</li>
  474. <li><a href="#" data-filter-value=".26">chaotic n</a>.</li>
  475. <li><a href="#" data-filter-value=".27">lawful e</a>.</li>
  476. <li><a href="#" data-filter-value=".28">neutral e</a>.</li>
  477. <li><a href="#" data-filter-value=".30">chaotic e</a>.</li>
  478. </ul>
  479.  
  480. <ul class="filter option-set exclusive" data-filter-group="group3">
  481. <ul><h1>sexuality</h1></ul><br>
  482. <li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
  483. <li><a href="#" data-filter-value=".31">homosexual</a>.</li><br>
  484. <li><a href="#" data-filter-value=".32">bisexual</a>.</li>
  485. <li><a href="#" data-filter-value=".33">asexual</a>.</li>
  486. </ul>
  487.  
  488. <ul class="filter option-set exclusive" data-filter-group="group4">
  489. <ul><h1>slaps hood</h1></ul><br>
  490. <li><a href="#" data-filter-value="" class="selected">all</a>.</li>
  491. <li><a href="#" data-filter-value=".41">this bad boy</a>.</li><br>
  492. <li><a href="#" data-filter-value=".42">can fit so many</a>.</li><br>
  493. <li><a href="#" data-filter-value=".43">filters in it</a>.</li>
  494. </ul>
  495.  
  496.  
  497. </div>
  498.  
  499. <div class="grid">
  500.  
  501.  
  502. <!-- CHAR 01 -->
  503. <a href="/" title="ellie"> <!-- LINK & HOVER NAME -->
  504. <div class="item 11 21 31"> <!-- DATA FILTER VALUES -->
  505. <div id="item img">
  506. <img src="https://i.imgur.com/Sg2lXts.jpg"> <!-- CHAR IMG -->
  507. </div>
  508. </div></a>
  509.  
  510.  
  511. <!-- CHAR 02 -->
  512. <a href="/" title="abby">
  513. <div class="item 12 22 32">
  514. <div id="item img">
  515. <img src="https://i.imgur.com/62yEXOH.jpg">
  516. </div>
  517. </div></a>
  518.  
  519.  
  520. <!-- CHAR 03 -->
  521. <a href="/" title="joel">
  522. <div class="item 11 21 31">
  523. <div id="item img">
  524. <img src="https://i.imgur.com/WsRfe8I.jpg">
  525. </div>
  526. </div></a>
  527.  
  528.  
  529. <!-- CHAR 04 -->
  530. <a href="/" title="dina">
  531. <div class="item 12 22 32">
  532. <div id="item img">
  533. <img src="https://i.imgur.com/KKo8Ojn.jpg">
  534. </div>
  535. </div></a>
  536.  
  537.  
  538. <!-- CHAR 05 -->
  539. <a href="/" title="lev">
  540. <div class="item 11 21 31">
  541. <div id="item img">
  542. <img src="https://i.imgur.com/oAqUgwm.jpg">
  543. </div>
  544. </div></a>
  545.  
  546.  
  547. <!-- CHAR 06 -->
  548. <a href="/" title="jesse">
  549. <div class="item 12 22 32">
  550. <div id="item img">
  551. <img src="https://i.imgur.com/NqSczxX.jpg">
  552. </div>
  553. </div></a>
  554.  
  555.  
  556. <!-- CHAR 07 -->
  557. <a href="/" title="yara">
  558. <div class="item 11 21 31">
  559. <div id="item img">
  560. <img src="https://i.imgur.com/r0Zgxe5.jpg">
  561. </div>
  562. </div></a>
  563.  
  564.  
  565. <!-- CHAR 08 -->
  566. <a href="/" title="manny">
  567. <div class="item 12 22 32">
  568. <div id="item img">
  569. <img src="https://i.imgur.com/zwonr5D.png">
  570. </div>
  571. </div></a>
  572.  
  573.  
  574. <!-- CHAR 09 -->
  575. <a href="/" title="nora">
  576. <div class="item 11 21 31">
  577. <div id="item img">
  578. <img src="https://i.imgur.com/Yuut4RV.png">
  579. </div>
  580. </div></a>
  581.  
  582.  
  583. <!-- CHAR 10 -->
  584. <a href="/" title="tommy">
  585. <div class="item 12 22 32">
  586. <div id="item img">
  587. <img src="https://i.imgur.com/Kwz4KUz.jpg">
  588. </div>
  589. </div></a>
  590.  
  591.  
  592. <!-- CHAR 11 -->
  593. <a href="/" title="maria">
  594. <div class="item 11 21 31">
  595. <div id="item img">
  596. <img src="https://i.imgur.com/ImsFo1v.png">
  597. </div>
  598. </div></a>
  599.  
  600.  
  601. <!-- CHAR 12 -->
  602. <a href="/" title="owen">
  603. <div class="item 12 22 32">
  604. <div id="item img">
  605. <img src="https://i.imgur.com/jyH4hcr.jpg">
  606. </div>
  607. </div></a>
  608.  
  609.  
  610. <!-- CHAR 13 -->
  611. <a href="/" title="ellie">
  612. <div class="item 11 21 31">
  613. <div id="item img">
  614. <img src="https://i.imgur.com/Sg2lXts.jpg">
  615. </div>
  616. </div></a>
  617.  
  618.  
  619. <!-- CHAR 14 -->
  620. <a href="/" title="abby">
  621. <div class="item 12 22 32">
  622. <div id="item img">
  623. <img src="https://i.imgur.com/62yEXOH.jpg">
  624. </div>
  625. </div></a>
  626.  
  627.  
  628. <!-- CHAR 15 -->
  629. <a href="/" title="joel">
  630. <div class="item 11 21 31">
  631. <div id="item img">
  632. <img src="https://i.imgur.com/WsRfe8I.jpg">
  633. </div>
  634. </div></a>
  635.  
  636.  
  637. <!-- CHAR 16 -->
  638. <a href="/" title="dina">
  639. <div class="item 12 22 32">
  640. <div id="item img">
  641. <img src="https://i.imgur.com/KKo8Ojn.jpg">
  642. </div>
  643. </div></a>
  644.  
  645.  
  646. <!-- CHAR 17 -->
  647. <a href="/" title="lev">
  648. <div class="item 11 21 31">
  649. <div id="item img">
  650. <img src="https://i.imgur.com/oAqUgwm.jpg">
  651. </div>
  652. </div></a>
  653.  
  654.  
  655. <!-- CHAR 18 -->
  656. <a href="/" title="jesse">
  657. <div class="item 12 22 32">
  658. <div id="item img">
  659. <img src="https://i.imgur.com/NqSczxX.jpg">
  660. </div>
  661. </div></a>
  662.  
  663.  
  664. <!-- CHAR 19 -->
  665. <a href="/" title="yara">
  666. <div class="item 11 21 31">
  667. <div id="item img">
  668. <img src="https://i.imgur.com/r0Zgxe5.jpg">
  669. </div>
  670. </div></a>
  671.  
  672.  
  673. <!-- CHAR 20 -->
  674. <a href="/" title="manny">
  675. <div class="item 12 22 32">
  676. <div id="item img">
  677. <img src="https://i.imgur.com/zwonr5D.png">
  678. </div>
  679. </div></a>
  680.  
  681.  
  682.  
  683.  
  684.  
  685. </div>
  686. </div>
  687.  
  688. <div id="credit"><a href="https://cordeeceps.tumblr.com/tagged/themes%3A-mine." title="theme by cordeeceps"><span class="th th-alien-o"></span></a></div>
  689.  
  690. </body></html>
Add Comment
Please, Sign In to add comment