API tools faq
paste
Advertisement
word-bazaar

MUSE PAGE N° 3: WINTER BIRD

word-bazaar
Nov 15th, 2017
3,081
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.86 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:516px;
  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:400px;
  121. top: 97px;
  122. padding:10px;
  123. width:150px;
  124. height:435px;
  125. position:fixed;
  126. overflow:auto;
  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: 540px;
  167. height: 403px;
  168. margin-top: 150px;
  169. margin-left: 600px;
  170. overflow: auto;
  171. position: fixed;
  172. background: #cfcfcf;
  173. }
  174.  
  175.  
  176. #container{
  177. top: 9px;
  178. left: 10px;
  179. position: fixed;
  180. width: 530px;
  181. overflow: auto;
  182. height: auto;
  183. padding-bottom: 10px;
  184. }
  185.  
  186.  
  187. .muses{
  188. width:200px;
  189. margin:20px;
  190. padding:20px;
  191. overflow: auto;
  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: 75px;
  201. height: 75px;
  202. color: black;
  203. text-align: justify;
  204. overflow: auto;
  205. background: #e8e8e8;
  206. margin: 7px; }
  207.  
  208.  
  209. .boxer {
  210. width: 100px;
  211. height: 100px;
  212. color: black;
  213. text-align: justify;
  214. overflow: auto;
  215. background: #e8e8e8;
  216. margin-top: -14px;
  217. margin-left: -14px;
  218. border:1px solid white;
  219. }
  220.  
  221.  
  222. .boxer img {
  223. width: 100px;
  224. height:100px;
  225. display:inline-block;
  226. margin-right:0px;
  227. margin-left:0px; }
  228.  
  229.  
  230.  
  231. #ho:hover { opacity: 0.9;
  232. margin-top: -100px;
  233. margin-left:0px;
  234. }
  235.  
  236.  
  237. #ho { opacity: 0;
  238. width:100px;
  239. height:100px;
  240. background:#F2F2F2;
  241. float:left;
  242. margin-top: -100px;
  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:90px;
  256. height:90px;
  257. margin-top: 5px;
  258. margin-left: 5px;
  259. overflow: auto;
  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 #1 ------>
  338. <div id="sort">
  339. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  340. <h1>AVAILABILITY</h1>
  341. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  342. <li><a href="#filter" data-option-filter=".un">active</a></li>
  343. <li><a href="#filter" data-option-filter=".deux">selective</a></li>
  344. <li><a href="#filter" data-option-filter=".trois">private</a></li>
  345. </ul>
  346. </div>
  347. <br>
  348. <!------ end of category #1 ------>
  349.  
  350.  
  351.  
  352.  
  353. <!------ beginning of category #2 ------>
  354. <div id="sort">
  355. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  356. <h1>GENDER</h1>
  357. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  358. <li><a href="#filter" data-option-filter=".one">lady</a></li>
  359. <li><a href="#filter" data-option-filter=".two">gentleman</a></li>
  360. </ul>
  361. </div>
  362. <br>
  363. <!------ end of category #2 ------>
  364.  
  365.  
  366.  
  367. <!------ beginning of category #3 ------>
  368. <div id="sort">
  369. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  370. <h1>FANDOM</h1>
  371. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  372. <li><a href="#filter" data-option-filter=".1">fandomless</a></li>
  373. <li><a href="#filter" data-option-filter=".2">harry potter</a></li>
  374. <li><a href="#filter" data-option-filter=".3">the 100</a></li>
  375. <li><a href="#filter" data-option-filter=".4">poj</a></li>
  376. <li><a href="#filter" data-option-filter=".5">the raven cycle</a></li>
  377. </ul>
  378. </div>
  379. <br>
  380. <!------ ending of category #3 ------>
  381.  
  382.  
  383.  
  384.  
  385. <!------ beginning of category #4 ------>
  386. <div id="sort">
  387. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  388. <h1>TYPE</h1>
  389. <li><a href="#filter" data-option-filter=".muses">all</a></li>
  390. <li><a href="#filter" data-option-filter=".uno">oc</a></li>
  391. <li><a href="#filter" data-option-filter=".dos">canon</a></li>
  392. </ul>
  393. </div>
  394. <br>
  395. <!------ ending of category #4 ------>
  396.  
  397.  
  398. </div>
  399.  
  400.  
  401.  
  402.  
  403. <div id="container" class="clearfix">
  404.  
  405. <!------ 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" ------>
  406.  
  407.  
  408. <!------ beginning of muse box ------>
  409. <div id="box" class="muses un one 1 uno">
  410. <div class="boxer">
  411. <img src="http://via.placeholder.com/100x100">
  412. <div id="ho">
  413. <div class="quo">
  414. <h2>Muse Name</h2><br><br>
  415. A few words.
  416. <br>
  417. <br>
  418. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  419.  
  420. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  421.  
  422. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  423.  
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. <!------ ending of muse box ------>
  429.  
  430.  
  431.  
  432. <!------ beginning of new muse box ------>
  433. <div id="box" class="muses un one 1 uno">
  434. <div class="boxer">
  435. <img src="http://via.placeholder.com/100x100">
  436. <div id="ho">
  437. <div class="quo">
  438. <h2>Muse Name</h2><br><br>
  439. A few words.
  440. <br>
  441. <br>
  442. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  443.  
  444. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  445.  
  446. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  447.  
  448. </div>
  449. </div>
  450. </div>
  451. </div>
  452. <!------ ending of new muse box ------>
  453.  
  454.  
  455.  
  456.  
  457.  
  458.  
  459. <!------ beginning of new muse box ------>
  460. <div id="box" class="muses un one 1 uno">
  461. <div class="boxer">
  462. <img src="http://via.placeholder.com/100x100">
  463. <div id="ho">
  464. <div class="quo">
  465. <h2>Muse Name</h2><br><br>
  466. A few words.
  467. <br>
  468. <br>
  469. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  470.  
  471. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  472.  
  473. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  474.  
  475. </div>
  476. </div>
  477. </div>
  478. </div>
  479. <!------ ending of new muse box ------>
  480.  
  481.  
  482.  
  483.  
  484.  
  485.  
  486. <!------ beginning of new muse box ------>
  487. <div id="box" class="muses un one 1 uno">
  488. <div class="boxer">
  489. <img src="http://via.placeholder.com/100x100">
  490. <div id="ho">
  491. <div class="quo">
  492. <h2>Muse Name</h2><br><br>
  493. A few words.
  494. <br>
  495. <br>
  496. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  497.  
  498. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  499.  
  500. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  501.  
  502. </div>
  503. </div>
  504. </div>
  505. </div>
  506. <!------ ending of new muse box ------>
  507.  
  508.  
  509.  
  510.  
  511.  
  512.  
  513. <!------ beginning of new muse box ------>
  514. <div id="box" class="muses un one 1 uno">
  515. <div class="boxer">
  516. <img src="http://via.placeholder.com/100x100">
  517. <div id="ho">
  518. <div class="quo">
  519. <h2>Muse Name</h2><br><br>
  520. A few words.
  521. <br>
  522. <br>
  523. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  524.  
  525. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  526.  
  527. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  528.  
  529. </div>
  530. </div>
  531. </div>
  532. </div>
  533. <!------ ending of new muse box ------>
  534.  
  535.  
  536.  
  537.  
  538.  
  539.  
  540. <!------ beginning of new muse box ------>
  541. <div id="box" class="muses un one 1 uno">
  542. <div class="boxer">
  543. <img src="http://via.placeholder.com/100x100">
  544. <div id="ho">
  545. <div class="quo">
  546. <h2>Muse Name</h2><br><br>
  547. A few words.
  548. <br>
  549. <br>
  550. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  551.  
  552. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  553.  
  554. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  555.  
  556. </div>
  557. </div>
  558. </div>
  559. </div>
  560. <!------ ending of new muse box ------>
  561.  
  562.  
  563.  
  564.  
  565.  
  566.  
  567. <!------ beginning of new muse box ------>
  568. <div id="box" class="muses un one 1 uno">
  569. <div class="boxer">
  570. <img src="http://via.placeholder.com/100x100">
  571. <div id="ho">
  572. <div class="quo">
  573. <h2>Muse Name</h2><br><br>
  574. A few words.
  575. <br>
  576. <br>
  577. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  578.  
  579. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  580.  
  581. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  582.  
  583. </div>
  584. </div>
  585. </div>
  586. </div>
  587. <!------ ending of new muse box ------>
  588.  
  589.  
  590.  
  591.  
  592.  
  593.  
  594.  
  595. <!------ beginning of new muse box ------>
  596. <div id="box" class="muses un one 1 uno">
  597. <div class="boxer">
  598. <img src="http://via.placeholder.com/100x100">
  599. <div id="ho">
  600. <div class="quo">
  601. <h2>Muse Name</h2><br><br>
  602. A few words.
  603. <br>
  604. <br>
  605. <a title="biography" href="/"><i class="fa fa-book" aria-hidden="true"></i></a>&nbsp;<!--- link 1 --->
  606.  
  607. <a title="musings" href="/"><i class="fa fa-user" aria-hidden="true"></i></i></a>&nbsp;<!--- link 2 --->
  608.  
  609. <a title="starters" href="/"><i class="fa fa-envelope" aria-hidden="true"></i></a><!--- link 3 --->
  610.  
  611. </div>
  612. </div>
  613. </div>
  614. </div>
  615. <!------ ending of new muse box ------>
  616.  
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623. <!------ CREDITS: DO NOT REMOVE !! ------>
  624. <div id="credit">
  625. <p><a title="theme by cassiopeis" href="http://cassiopeis.tumblr.com">S</a></p>
  626. </a></div>
  627.  
  628.  
  629. </body>
  630.  
  631.  
  632.  
  633. <!------- filter scripts -------->
  634. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  635. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  636.  
  637.  
  638. <script>
  639. $(function(){
  640.  
  641. var $container = $('#container');
  642.  
  643. $container.isotope({
  644. itemSelector : '.muses'
  645. });
  646.  
  647.  
  648. var $optionSets = $('#sort .option-set'),
  649. $optionLinks = $optionSets.find('a');
  650.  
  651. $optionLinks.click(function(){
  652. var $this = $(this);
  653. // don't proceed if already selected
  654. if ( $this.hasClass('selected') ) {
  655. return false;
  656. }
  657. var $optionSet = $this.parents('.option-set');
  658. $optionSet.find('.selected').removeClass('selected');
  659. $this.addClass('selected');
  660.  
  661. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  662. var options = {},
  663. key = $optionSet.attr('data-option-key'),
  664. value = $this.attr('data-option-filter');
  665. // parse 'false' as false boolean
  666. value = value === 'false' ? false : value;
  667. options[ key ] = value;
  668. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  669. // changes in layout modes need extra logic
  670. changeLayoutMode( $this, options )
  671. } else {
  672. // otherwise, apply new options
  673. $container.isotope( options );
  674. }
  675.  
  676. return false;
  677. });
  678.  
  679.  
  680. });
  681. </script>
  682.  
  683. <!-----end filter scripts------>
  684.  
  685. </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!