API tools faq
paste
Advertisement
desolationresources6

newmusepagesave

desolationresources6
Aug 11th, 2022
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.40 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2. <!------------------------------------------------------------------------
  3.  
  4. ♡ made by http://cassiopeis.tumblr.com/ ♡
  5.  
  6. - YOU MAY EDIT OR CHANGE AS MUCH AS YOU LIKE BUT
  7. !!!!! DO NOT REMOVE CREDIT !!!!!
  8.  
  9. - IF YOU HAVE A QUESTION OR SOMETHING GOES WRONG, YOU CAN MESSAGE ME AT:
  10. http://scottpilgvrim.tumblr.com/ask
  11.  
  12.  
  13. ALSO !!!! I got the script in this theme from an incredible tutorial made by http://septembre.co.vu
  14. This blog is great, you should go check it out !
  15.  
  16.  
  17. -------------------------------------------------------------------------->
  18.  
  19. <html>
  20.  
  21. <head>
  22.  
  23. <title>Μυsεs</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
  28. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
  30.  
  31.  
  32.  
  33. <style type="text/css">
  34.  
  35.  
  36.  
  37.  
  38. body {
  39. background-image: url(http://78.media.tumblr.com/e373e165417e4e5abe9aeecd44c51dd6/tumblr_inline_mkjle4mZGl1qz4rgp.jpg); /* you can change the background image here */
  40. background-repeat: repeat;
  41. background: ; /* you can change the background color here */
  42. margin:0;
  43. font:11px Arial;
  44. position:fixed;
  45. }
  46.  
  47.  
  48.  
  49.  
  50. a {
  51. text-decoration:none;
  52. outline:none;
  53. color:#646464; /*change links color here */
  54. -webkit-transition: all 0.5s ease-in-out;
  55. -moz-transition: all 0.5s ease-in-out;
  56. -o-transition: all 0.5s ease-in-out;
  57. }
  58.  
  59.  
  60.  
  61. a:hover {
  62. color:#a9a9a9; /*change links hover color */
  63. -webkit-transition: all 0.5s ease-in-out;
  64. -moz-transition: all 0.5s ease-in-out;
  65. -o-transition: all 0.5s ease-in-out;
  66. }
  67.  
  68.  
  69.  
  70.  
  71. h1 {
  72. color: white;
  73. width: 50px;
  74. font-size: 13px;
  75. }
  76.  
  77.  
  78.  
  79.  
  80. h2 {
  81. font-family: 'Quicksand';
  82. font-size: 15px;
  83. font-style: bold;
  84. color: #5f5f5f;
  85. text-align:center;
  86. text-transform: uppercase;
  87. display:inline;
  88. line-height: 18px;
  89. }
  90.  
  91.  
  92.  
  93.  
  94. /* TITLE */
  95.  
  96. #head {
  97. background:#cfcfcf;
  98. width:596px;
  99. height: 35px;
  100. padding: 12px;
  101. font-size: 25px;
  102. margin-top:-53px;
  103. margin-left:0px;
  104. position:fixed;
  105. z-index:9999;
  106. color: white;
  107. font-family:'Quicksand';
  108. border-bottom: 1px solid white;
  109. text-align: center;
  110. }
  111.  
  112.  
  113.  
  114.  
  115.  
  116. /* SIDEBAR */
  117.  
  118. #sidebar{
  119.  
  120. left:200px;
  121. top: 97px;
  122. padding:10px;
  123. width:150px;
  124. height:400px;
  125. position:fixed;
  126.  
  127. color:#551f1f;
  128. background:#cfcfcf;
  129. }
  130.  
  131. #sort li {
  132. display:block;
  133. text-align:justify;
  134. list-style: none;
  135. margin-left:-30px;}
  136.  
  137. #sort h1 {
  138. display:block;
  139. text-align:center;
  140. list-style: none;
  141. margin-left:-35px;
  142. }
  143.  
  144. #sort ul {
  145. list-style: none;
  146. margin-top:-10px;}
  147.  
  148. #sort a {
  149. color:white;
  150. border:1px solid transparent;
  151. display:block;
  152. padding:0px;
  153. margin-bottom:5px;}
  154.  
  155. #sort li a.selected {
  156. color:#878787;
  157. }
  158.  
  159.  
  160.  
  161.  
  162.  
  163. /* MUSES */
  164.  
  165. #contenugeneral{
  166. width: 620px;
  167. height: 503px;
  168. margin-top: 150px;
  169. margin-left: 380px;
  170.  
  171. position: fixed;
  172. background: #cfcfcf;
  173. }
  174.  
  175.  
  176. #container{
  177. top: 9px;
  178. left: 10px;
  179. position: fixed;
  180. width: 610px;
  181.  
  182. height: auto;
  183. padding-bottom: 10px;
  184. }
  185.  
  186.  
  187. .muses{
  188. width: 200px;
  189. margin:20px;
  190. padding:20px;
  191.  
  192. transition-duration:1s;
  193. -moz-transition-duration:1s;
  194. -webkit-transition-duration:1s;
  195. -o-transition-duration:1s;
  196. }
  197.  
  198.  
  199. #box {
  200. width: 100px;
  201. height: 100px;
  202. color: black;
  203. text-align: justify;
  204.  
  205. background: #e8e8e8;
  206. margin: 5px; }
  207.  
  208.  
  209. .boxer {
  210. width: 125px;
  211. height: 125px;
  212. color: black;
  213. text-align: justify;
  214.  
  215. background: #e8e8e8;
  216. margin-top: -14px;
  217. margin-left: -14px;
  218. border:1px solid white;
  219. }
  220.  
  221.  
  222. .boxer img {
  223. width: 125px;
  224. height: 125px;
  225. display:inline-block;
  226. margin-right:0px;
  227. margin-left:0px; }
  228.  
  229.  
  230.  
  231. #ho:hover { opacity: 0.9;
  232. margin-top: -125px;
  233. margin-left:0px;
  234. }
  235.  
  236.  
  237. #ho { opacity: 0;
  238. width:125px;
  239. height:125px;
  240. background:#F2F2F2;
  241. float:left;
  242. margin-top: -125px;
  243. margin-left: 0px;
  244. -webkit-transition: all 1.3s ease;
  245. -moz-transition: all 1.3s ease;
  246. -o-transition: all 1.3s ease;}
  247.  
  248.  
  249. .quo {float:left;
  250. position:static;
  251. font-family: Times;
  252. font-size: 12px;
  253. font-style: bold;
  254. color: #5f5f5f;
  255. width: 120px;
  256. height: 120px;
  257. margin-top: 5px;
  258. margin-left: 5px;
  259.  
  260. text-align:center;
  261. line-height: 12px;
  262. }
  263.  
  264.  
  265. .quo a {
  266. color: #464646;
  267. font-size: 14px;
  268. }
  269.  
  270. .quo a:hover {
  271. color: #8c8c8c;
  272. }
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279. /* CREDITS "DON'T REMOVE !!" */
  280.  
  281. #credit a {
  282. opacity: 0.4;
  283. background-color: #c9c9c9;
  284. text-align: center;
  285. padding:2px;
  286. position:fixed;
  287. right:20px;
  288. font-size: 20px;
  289. bottom:20px;
  290. width: 25px;
  291. height: 25px;
  292. display: black;
  293. color: white;
  294. font-style: bold;
  295. font-family: 'Quicksand';
  296. border:1px solid white;
  297. border-radius: 25px;
  298. -moz-transition-duration:0.5s;
  299. -webkit-transition-duration:0.5s;
  300. -o-transition-duration:0.5s;
  301. }
  302.  
  303.  
  304. #credit a:hover{
  305. opacity:1;
  306. background-color: #e1e1e1 ;
  307. text-align: center;
  308. position:fixed;
  309. right:20px;
  310. bottom:25px;
  311. color: white ;
  312. border:1px solid white; }
  313.  
  314.  
  315.  
  316. </style>
  317.  
  318.  
  319. <body>
  320.  
  321. <div id="contenugeneral">
  322.  
  323. <div id="head">
  324.  
  325. MUSES <!------ change title here ------>
  326.  
  327. </div>
  328.  
  329. <div id="sidebar">
  330.  
  331.  
  332. <!------ SIDEBAR LINKS
  333. To add a new category, copy from "beginning of category #1" to "ending of category #1" and paste it after "ending of category #4" ------>
  334.  
  335.  
  336.  
  337. <!------ beginning of category #2 ------>
  338. <div id="sort">
  339. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  340. <h1>GENDER</h1>
  341. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  342. <li><a href="#filter" data-option-filter=".one">lady</a></li>
  343. <li><a href="#filter" data-option-filter=".two">gentleman</a></li>
  344. </ul>
  345. </div>
  346. <br>
  347. <!------ end of category #2 ------>
  348.  
  349.  
  350.  
  351. <!------ beginning of category #3 ------>
  352. <div id="sort">
  353. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  354. <h1>FANDOM</h1>
  355. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  356. <li><a href="#filter" data-option-filter=".1">morsmordre</a></li>
  357. <li><a href="#filter" data-option-filter=".2">dissendium</a></li>
  358. <li><a href="#filter" data-option-filter=".3">wicked legacies</a></li>
  359. <li><a href="#filter" data-option-filter=".4">epic universe</a></li>
  360. <li><a href="#filter" data-option-filter=".5">envied riches</a></li>
  361. <li><a href="#filter" data-option-filter=".6">sea of sin</a></li>
  362. <li><a href="#filter" data-option-filter=".6">hexical valhalla</a></li>
  363. </ul>
  364. </div>
  365. <br>
  366. <!------ ending of category #3 ------>
  367.  
  368.  
  369.  
  370.  
  371. <!------ beginning of category #4 ------>
  372. <div id="sort">
  373. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  374. <h1>TYPE</h1>
  375. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  376. <li><a href="#filter" data-option-filter=".uno">oc</a></li>
  377. <li><a href="#filter" data-option-filter=".dos">canon</a></li>
  378. </ul>
  379. </div>
  380. <br>
  381. <!------ ending of category #4 ------>
  382.  
  383.  
  384. </div>
  385.  
  386.  
  387.  
  388.  
  389. <div id="container" class="clearfix">
  390.  
  391. <!------ MUSES: to add a new muse, copy from "beginning of muse box" to "ending of muse box" and paste it under "enfing of muse box" ------>
  392.  
  393.  
  394. <!------ beginning of muse box ------>
  395. <div id="box" class="muses un one 1 uno">
  396. <div class="boxer">
  397. <img src="https://i.imgur.com/L5fof69.png">
  398. <div id="ho">
  399. <div class="quo">
  400. <h2>ISOLDE FINNIGAN</h2><br><br>
  401. Hufflepuff
  402. <br>
  403. <br>
  404. <a title="rpme page" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  405.  
  406. <a title="tags" href="/"><i class="fa fa-slack" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  407.  
  408. <a title="board" href="/"><i class="fa fa-pinterest" aria-hidden="true"></i></a><!--- link 3 --->
  409.  
  410. </div>
  411. </div>
  412. </div>
  413. </div>
  414. <!------ ending of muse box ------>
  415.  
  416.  
  417.  
  418. <!------ beginning of new muse box ------>
  419. <div id="box" class="muses un one 1 uno">
  420. <div class="boxer">
  421. <img src="http://via.placeholder.com/100x100">
  422. <div id="ho">
  423. <div class="quo">
  424. <h2>Muse Name</h2><br><br>
  425. A few words.
  426. <br>
  427. <br>
  428. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  429.  
  430. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  431.  
  432. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  433.  
  434. </div>
  435. </div>
  436. </div>
  437. </div>
  438. <!------ ending of new muse box ------>
  439.  
  440.  
  441.  
  442.  
  443.  
  444.  
  445. <!------ beginning of new muse box ------>
  446. <div id="box" class="muses un one 1 uno">
  447. <div class="boxer">
  448. <img src="http://via.placeholder.com/100x100">
  449. <div id="ho">
  450. <div class="quo">
  451. <h2>Muse Name</h2><br><br>
  452. A few words.
  453. <br>
  454. <br>
  455. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  456.  
  457. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  458.  
  459. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  460.  
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. <!------ ending of new muse box ------>
  466.  
  467.  
  468.  
  469.  
  470.  
  471.  
  472. <!------ beginning of new muse box ------>
  473. <div id="box" class="muses un one 1 uno">
  474. <div class="boxer">
  475. <img src="http://via.placeholder.com/100x100">
  476. <div id="ho">
  477. <div class="quo">
  478. <h2>Muse Name</h2><br><br>
  479. A few words.
  480. <br>
  481. <br>
  482. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  483.  
  484. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  485.  
  486. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  487.  
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. <!------ ending of new muse box ------>
  493.  
  494.  
  495.  
  496.  
  497.  
  498.  
  499. <!------ beginning of new muse box ------>
  500. <div id="box" class="muses un one 1 uno">
  501. <div class="boxer">
  502. <img src="http://via.placeholder.com/100x100">
  503. <div id="ho">
  504. <div class="quo">
  505. <h2>Muse Name</h2><br><br>
  506. A few words.
  507. <br>
  508. <br>
  509. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  510.  
  511. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  512.  
  513. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  514.  
  515. </div>
  516. </div>
  517. </div>
  518. </div>
  519. <!------ ending of new muse box ------>
  520.  
  521.  
  522.  
  523.  
  524.  
  525.  
  526. <!------ beginning of new muse box ------>
  527. <div id="box" class="muses un one 1 uno">
  528. <div class="boxer">
  529. <img src="http://via.placeholder.com/100x100">
  530. <div id="ho">
  531. <div class="quo">
  532. <h2>Muse Name</h2><br><br>
  533. A few words.
  534. <br>
  535. <br>
  536. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  537.  
  538. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  539.  
  540. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  541.  
  542. </div>
  543. </div>
  544. </div>
  545. </div>
  546. <!------ ending of new muse box ------>
  547.  
  548.  
  549.  
  550.  
  551.  
  552.  
  553. <!------ beginning of new muse box ------>
  554. <div id="box" class="muses un one 1 uno">
  555. <div class="boxer">
  556. <img src="http://via.placeholder.com/100x100">
  557. <div id="ho">
  558. <div class="quo">
  559. <h2>Muse Name</h2><br><br>
  560. A few words.
  561. <br>
  562. <br>
  563. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  564.  
  565. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  566.  
  567. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  568.  
  569. </div>
  570. </div>
  571. </div>
  572. </div>
  573. <!------ ending of new muse box ------>
  574.  
  575.  
  576.  
  577.  
  578.  
  579.  
  580.  
  581. <!------ beginning of new muse box ------>
  582. <div id="box" class="muses un one 1 uno">
  583. <div class="boxer">
  584. <img src="http://via.placeholder.com/100x100">
  585. <div id="ho">
  586. <div class="quo">
  587. <h2>Muse Name</h2><br><br>
  588. A few words.
  589. <br>
  590. <br>
  591. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  592.  
  593. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  594.  
  595. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  596.  
  597. </div>
  598. </div>
  599. </div>
  600. </div>
  601. <!------ ending of new muse box ------>
  602.  
  603.  
  604.  
  605.  
  606.  
  607.  
  608.  
  609. <!------ CREDITS: DO NOT REMOVE !! ------>
  610. <div id="credit">
  611. <p><a title="theme by cassiopeis" href="http://cassiopeis.tumblr.com">S</a></p>
  612. </a></div>
  613.  
  614.  
  615. </body>
  616.  
  617.  
  618.  
  619. <!------- filter scripts -------->
  620. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  621. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  622.  
  623.  
  624. <script>
  625. $(function(){
  626.  
  627. var $container = $('#container');
  628.  
  629. $container.isotope({
  630. itemSelector : '.muses'
  631. });
  632.  
  633.  
  634. var $optionSets = $('#sort .option-set'),
  635. $optionLinks = $optionSets.find('a');
  636.  
  637. $optionLinks.click(function(){
  638. var $this = $(this);
  639. // don't proceed if already selected
  640. if ( $this.hasClass('selected') ) {
  641. return false;
  642. }
  643. var $optionSet = $this.parents('.option-set');
  644. $optionSet.find('.selected').removeClass('selected');
  645. $this.addClass('selected');
  646.  
  647. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  648. var options = {},
  649. key = $optionSet.attr('data-option-key'),
  650. value = $this.attr('data-option-filter');
  651. // parse 'false' as false boolean
  652. value = value === 'false' ? false : value;
  653. options[ key ] = value;
  654. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  655. // changes in layout modes need extra logic
  656. changeLayoutMode( $this, options )
  657. } else {
  658. // otherwise, apply new options
  659. $container.isotope( options );
  660. }
  661.  
  662. return false;
  663. });
  664.  
  665.  
  666. });
  667. </script>
  668.  
  669. <!-----end filter scripts------>
  670.  
  671. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!