API tools faq
paste
wuunderstruckthemes

THEME #13 - CHERRIES & WINE

wuunderstruckthemes
Jan 20th, 2019 (edited)
5,426
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- ✧ THEME #13 BY SKYOFRP - CHERRIES & WINE ✧
  6.  
  7. theme made using neonbikethemes' base code. icons hosted by suiomi. muse page icons by alydae. imessage code by animalities. audio player code by padyluppet (& modified by me).
  8.  
  9. edit as much as you'd like for personal use, and use it to learn html if you wish, but do not use as a base code and do not directly lift code from this theme and redistribute it as your own. do not touch the credit.
  10.  
  11. enjoy and let me know if you have any questions or problems! if you run into a bug or an issue, drop me an ask and i'll try to help! and finally, thank you for using my theme, it means the world.-->
  12.  
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16. <meta charset="utf-8">
  17. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  18. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <meta name="image:sidebar" content="">
  23. <meta name="image:abouttab" content="">
  24. <meta name="image:background" content="">
  25.  
  26. <meta name="color:background" content="#ffffff" />
  27. <meta name="color:posts" content="#ffffff" />
  28. <meta name="color:sidebar" content="#f2f2f2" />
  29. <meta name="color:accent" content="#ff6f61" />
  30. <meta name="color:borders" content="#a6a6a6" />
  31. <meta name="color:links hover" content="#a0a0a0" />
  32. <meta name="color:text" content="#000000" />
  33. <meta name="color:chat bubble 1" content="#ffb6af">
  34. <meta name="color:chat bubble 2" content="#eeeeee">
  35.  
  36. <meta name="text:title" content=""/>
  37. <meta name="text:tab 3 title" content="tab 3 title" />
  38. <meta name="text:tab 4 title" content="tab 4 title" />
  39. <meta name="text:link 1" content="/" />
  40. <meta name="text:link 1 title" content="link" />
  41. <meta name="text:link 2" content="/" />
  42. <meta name="text:link 2 title" content="link" />
  43. <meta name="text:link 3" content="/" />
  44. <meta name="text:link 3 title" content="link" />
  45. <meta name="text:link 4" content="/" />
  46. <meta name="text:link 4 title" content="link" />
  47. <meta name="text:link 5" content="/" />
  48. <meta name="text:link 5 title" content="link" />
  49. <meta name="text:link 6" content="/" />
  50. <meta name="text:link 6 title" content="link" />
  51. <meta name="text:url for askbox" content="" />
  52. <meta name="text:sidebar stats" content="name, age, pronouns, timezone...? whatever u want! keep it to one line tho!" />
  53. <meta name="text:one line" content="lyrics or whatever u want!" />
  54. <meta name="text:about description" content="description, rules, anything!" />
  55.  
  56. <meta name="select:grayscale" title="0%" content="0%" />
  57. <meta name="select:grayscale" title="60%" content="60%" />
  58. <meta name="select:grayscale" title="70%" content="70%" />
  59. <meta name="select:grayscale" title="80%" content="80%" />
  60. <meta name="select:grayscale" title="90%" content="90%" />
  61. <meta name="select:grayscale" title="100%" content="100%" />
  62.  
  63. <meta name="if:cherry" content="1">
  64. <meta name="if:thetruth" content="0"/>
  65. <meta name="if:contained" content="1"/>
  66.  
  67.  
  68.  
  69. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  70.  
  71. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  72.  
  73. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  74.  
  75. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  76.  
  77. <!-- TOOLTIP SCRIPT (REMOVE ONLY IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  78.  
  79. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  80. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81. <script>
  82. (function($){
  83. $(document).ready(function(){
  84. $("a[title]").style_my_tooltips({
  85. tip_follows_cursor:true,
  86. tip_delay_time:90,
  87. tip_fade_speed:600,
  88. attribute:"title"
  89. });
  90. });
  91. })(jQuery);
  92. </script>
  93.  
  94. <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  95.  
  96. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  97.  
  98. <style type="text/css">
  99.  
  100. /*----------------------------- FONTS ------------------------------- */
  101.  
  102. @font-face { font-family: "tamoro script"; src: url('https://dl.dropboxusercontent.com/s/6cjwbj582ho61kv/TamoroScript_PersonalUseOnly.ttf?dl=0'); format("opentype");}
  103. @font-face { font-family: "frontage outline"; src: url('https://dl.dropboxusercontent.com/s/452n0o323kateo7/Frontage-Outline.otf?dl=0'); format("opentype");}
  104. @font-face { font-family: hightide; src: url('https://dl.dropboxusercontent.com/s/94upkctje3nnnmx/High%20Tide%20-%20Demo.ttf') ; }
  105.  
  106. /* ---------------------------- GENERAL ----------------------------- */
  107.  
  108. /* -------- SELECTION TOOL ------- */
  109.  
  110. ::-moz-selection {
  111. background: {color:text};
  112. color: {color:background};
  113. }
  114.  
  115. ::selection {
  116. background: {color:text};
  117. color: {color:background};
  118. }
  119.  
  120. /* -------- SCROLLBAR ------- */
  121.  
  122. ::-webkit-scrollbar {
  123. width: 0px;
  124. }
  125.  
  126. /* Track */
  127. ::-webkit-scrollbar-track {
  128. background:{color:background};
  129. }
  130.  
  131. /* Handle */
  132. ::-webkit-scrollbar-thumb {
  133. background:{color:text};
  134. }
  135. ::-webkit-scrollbar-thumb:window-inactive {
  136. background: transparent;
  137. }
  138.  
  139. /* ------- TOOLTIPS ------ */
  140.  
  141. #s-m-t-tooltip {
  142. max-width:300px;
  143. margin:10px 0px 0px 10px;
  144. background-color:{color:accent};
  145. font-family:'work sans';
  146. font-size:10px;
  147. color:{color:posts};
  148. font-weight:bold;
  149. z-index:999999999999999999999999999999999999;
  150. padding:10px;
  151. border-radius:10px;
  152. text-transform:lowercase;
  153. letter-spacing:2px;
  154. }
  155.  
  156. /* -------- BASICS ------- */
  157.  
  158. body {
  159. background:{color:Background} url({image:background});
  160. color: {color:text};
  161. font-family:'work sans';
  162. font-size: 11px;
  163. margin: 0;
  164. padding: 0;
  165. word-wrap: break-word;
  166. line-height:150%;
  167. }
  168.  
  169. a {
  170. color:{color:accent};
  171. text-decoration: none;
  172. -webkit-transition: all .3s;
  173. -moz-transition: all .3s;
  174. -o-transition: all .3s;
  175. -ms-transition: all .3s;
  176. transition: all .3s;
  177. }
  178.  
  179. a:hover{
  180. color:{color:links hover};
  181. -webkit-transition: all .3s;
  182. -moz-transition: all .3s;
  183. -o-transition: all .3s;
  184. -ms-transition: all .3s;
  185. transition: all .3s;
  186. }
  187.  
  188. b, strong {
  189. color:{color:accent};
  190. }
  191.  
  192. blockquote {
  193. margin: 10px;
  194. padding-left:20px;
  195. padding-top:10px;
  196. padding-bottom:10px;
  197. padding-right:10px;
  198. background-color:{color:posts};
  199. border-radius:0px;
  200. border-left:solid 2px {color:accent};
  201. }
  202.  
  203. iframe, img, embed, object, video {
  204. max-width: 100%;
  205. }
  206.  
  207. p{
  208. margin-bottom:10px;
  209. }
  210.  
  211. small, sub, sup {
  212. font-size:10px;
  213. }
  214.  
  215. ul{
  216. list-style-type:square;
  217. }
  218.  
  219. ol{
  220. list-style-type:;
  221. }
  222.  
  223. h1, h1 a {
  224. font-family:'work sans';
  225. text-align:center;
  226. font-size:32px;
  227. letter-spacing:5px;
  228. text-transform:uppercase;
  229. color:{color:borders};
  230. line-height:120%;
  231. }
  232.  
  233. h2 {
  234. font-family:'work sans';
  235. color:{color:accent};
  236. text-align:center;
  237. font-size:22px;
  238. letter-spacing:5px;
  239. text-transform:uppercase;
  240. line-height:120%;
  241. }
  242.  
  243. #bigcon{
  244. width:420px;
  245. margin-left:auto;
  246. margin-right:auto;
  247. }
  248.  
  249. .tabcontent {
  250. position:absolute;
  251. margin-left:auto;
  252. margin-right:auto;
  253. width: 420px;
  254. text-align:center;
  255. margin-bottom:0px;
  256. height:550px;
  257. max-height:550px;
  258. overflow-y:scroll;
  259. left:50%;
  260. margin-left:-100px;
  261. top:50%;
  262. margin-top:-300px;
  263. padding:10px;
  264. }
  265.  
  266. #postcontainer {
  267. position:absolute;
  268. width: 420px;
  269. overflow:hidden;
  270. text-align:center;
  271. margin-bottom:20px;
  272. overflow-y:scroll;
  273. left:50%;
  274. margin-left:-100px;
  275. {block:ifcontained}
  276. top:50%;
  277. margin-top:-210px;
  278. height:420px;
  279. max-height:420px;
  280. overflow-y:scroll;
  281. {/block:ifcontained}
  282. padding:10px;
  283. }
  284.  
  285.  
  286. /* ----------------------------- HEADER STUFF ---------------------------*/
  287.  
  288. #sidebar {
  289. background-color:{color:sidebar};
  290. position:fixed;
  291. width:200px;
  292. height:420px;
  293. margin-bottom:50px;
  294. text-align:center;
  295. margin-left:0px;
  296. top:50%;
  297. margin-top:-210px;
  298. left:50%;
  299. margin-left:-400px;
  300. padding:10px;
  301. border-radius:5px;
  302. }
  303.  
  304. #sidebar img {
  305. width:80px;
  306. height:80px;
  307. border-radius:100px;
  308. border:solid 2px {color:accent};
  309. padding:3px;
  310. }
  311.  
  312. .speechbubble{
  313. margin-bottom:20px;
  314. margin-top:10px;
  315. position: relative;
  316. background:{color:accent};
  317. color:#fff;
  318. border-radius: .4em;
  319. height:30px;
  320. }
  321.  
  322. .speechbubble:after {
  323. content: '';
  324. position: absolute;
  325. bottom: 0;
  326. left: 50%;
  327. width: 0;
  328. height: 0;
  329. border: 10px solid transparent;
  330. border-top-color:{color:accent};
  331. border-bottom: 0;
  332. border-left: 0;
  333. margin-left: -5px;
  334. margin-bottom: -10px;
  335. }
  336.  
  337. .blogtitle, .blogtitle a {
  338. font-family:'work sans';
  339. text-transform:lowercase;
  340. font-size:15px;
  341. letter-spacing:2px;
  342. font-weight:bold;
  343. color:#fff;
  344. z-index:9999;
  345. position:absolute;
  346. margin-top:5px;
  347. text-align:center;
  348. width:200px;
  349. left:50%;
  350. margin-left:-100px;
  351. margin-top:3px;
  352. }
  353.  
  354. .subtitle {
  355. font-size:10px;
  356. font-family:'work sans';
  357. margin-top:0px;
  358. background-color:{color:accent};
  359. color:{color:posts};
  360. border-radius:3px;
  361. padding:3px;
  362. font-weight:bold;
  363. width:120px;
  364. text-align:center;
  365. left:50%;
  366. margin-left:40px;
  367. }
  368.  
  369. .description{
  370. margin-bottom:20px;
  371. height:100px;
  372. max-height:100px;
  373. overflow-y:scroll;
  374. font-size:10px;
  375. background-color:{color:posts};
  376. padding:5px;
  377. border-radius:10px;
  378. color:{color:borders};
  379. line-height:2.5;
  380. border:solid 1px {color:borders};
  381. letter-spacing:2px;
  382. }
  383.  
  384. #navbar{
  385. display:inline-block;
  386. text-align:center;
  387. }
  388.  
  389. /* ------------------------------ TABS ------------------------------ */
  390.  
  391. .tabs {
  392. width:100%;
  393. margin-left:0px;
  394. display:inline-block;
  395. }
  396.  
  397. /*----- Tab Links -----*/
  398.  
  399. /* Clearfix */
  400. .tab-links:after {
  401. display:block;
  402. clear:both;
  403. content:'';
  404. }
  405.  
  406. .tab-links {
  407. z-index:9999999999;
  408. margin-top:3px;
  409. }
  410. .tab-links li {
  411. margin-right:3px;
  412. display:inline-block;
  413. list-style:none;
  414. text-transform:uppercase;
  415. margin-bottom:5px;
  416. }
  417.  
  418. .tab-links a {
  419. padding-top:9px;
  420. padding-right:8px;
  421. padding-left:8px;
  422. padding-bottom:9px;
  423. display:inline-block;
  424. color:{color:accent};
  425. border-bottom:1px solid transparent;
  426. font-weight:bold;
  427. font-size:20px;
  428. font-family:'frontage outline';
  429. border-radius:10px;
  430. }
  431.  
  432. .tab-links a:hover {
  433. text-decoration:none;
  434. -ms-transform: rotate(15deg); /* IE 9 */
  435. -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
  436. transform: rotate(15deg);
  437.  
  438. }
  439.  
  440. li.active a, li.active a:hover {
  441. color:{color:accent};
  442. -webkit-transition: all 1s;
  443. -moz-transition: all 1s;
  444. -o-transition: all 1s;
  445. -ms-transition: all 1s;
  446. transition: all 1s;
  447. }
  448.  
  449. /*----- Content of Tabs -----*/
  450. .tab-content {
  451. }
  452.  
  453. .tab {
  454. display:none;
  455. }
  456.  
  457. .tab.active {
  458. display:block;
  459. }
  460.  
  461. /* --------------------------- POSTS (articles) --------------------- */
  462.  
  463. article {
  464. float:left;
  465. background:{color:posts};
  466. padding: 10px;
  467. width: 400px;
  468. text-align:left;
  469. margin-bottom:80px;
  470. border-radius:5px;
  471. border:solid 1px {color:borders};
  472. }
  473.  
  474. .photoset
  475. {
  476. border-radius:5px;
  477. -webkit-filter: grayscale({select:grayscale}); /* Safari 6.0 - 9.0 */
  478. filter: grayscale({select:grayscale});
  479. -webkit-transition: all 0.5s ease-in-out;
  480. -moz-transition: all 0.5s ease-in-out;
  481. -o-transition: all 0.5s ease-in-out;
  482. -ms-transition: all 0.5s ease-in-out;
  483. transition: all 0.5s ease-in-out;
  484. opacity:0.9;
  485. }
  486.  
  487. .photoset:hover {
  488. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  489. filter: grayscale(0%);
  490. -webkit-transition: all 0.5s ease-in-out;
  491. -moz-transition: all 0.5s ease-in-out;
  492. -o-transition: all 0.5s ease-in-out;
  493. -ms-transition: all 0.5s ease-in-out;
  494. transition: all 0.5s ease-in-out;
  495. opacity:1;
  496. }
  497.  
  498. article img {
  499. height: auto;
  500. width:auto;
  501. max-width:100%;
  502. border-radius:5px;
  503. -webkit-filter: grayscale({select:grayscale}); /* Safari 6.0 - 9.0 */
  504. filter: grayscale({select:grayscale});
  505. -webkit-transition: all 0.5s ease-in-out;
  506. -moz-transition: all 0.5s ease-in-out;
  507. -o-transition: all 0.5s ease-in-out;
  508. -ms-transition: all 0.5s ease-in-out;
  509. transition: all 0.5s ease-in-out;
  510. opacity:0.9;
  511. }
  512.  
  513. article img:hover {
  514. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  515. filter: grayscale(0%);
  516. -webkit-transition: all 0.7s ease-in-out;
  517. -moz-transition: all 0.7s ease-in-out;
  518. -o-transition: all 0.7s ease-in-out;
  519. opacity:1;
  520. }
  521.  
  522. /* ---------------------------- POST INFO -----------------------------*/
  523.  
  524. .permalink, .permalink a {
  525. background-color:{color:accent};
  526. color:{color:posts};
  527. font-weight:bold;
  528. letter-spacing:2px;
  529. text-transform:lowercase;
  530. border-radius:3px;
  531. padding:3px;
  532. margin-bottom:5px;
  533. text-align:right;
  534. }
  535.  
  536. .postinfo, .postinfo a {
  537. margin-top:10px;
  538. text-align:center;
  539. text-transform:uppercase;
  540. background-color:{color:posts};
  541. padding:5px;
  542. border-radius:5px;
  543. letter-spacing:3px;
  544. font-size:10px;
  545. font-weight:bold;
  546. color:{color:borders};
  547. }
  548.  
  549. .postinfo a:hover {
  550. color:{color:links hover};
  551. }
  552.  
  553. .tags {
  554. margin-top:5px;
  555. font-weight:normal;
  556. }
  557.  
  558. .tags a {
  559. color:{color:borders};
  560. text-transform:lowercase;
  561. font-size:10px;
  562. display:inline-block;
  563. }
  564.  
  565. .tags a:hover {
  566. color:{color:links hover};
  567. letter-spacing:5px;
  568. -webkit-transition: all 0.7s ease-in-out;
  569. -moz-transition: all 0.7s ease-in-out;
  570. -o-transition: all 0.7s ease-in-out;
  571. }
  572.  
  573. /* ---------------------------- NAVTAB ------------------------- */
  574.  
  575. .aboutme {
  576. width:150px;
  577. height:160px;
  578. max-height:160px;
  579. overflow-y:scroll;
  580. background-color:{color:posts};
  581. padding:10px;
  582. border-radius:10px;
  583. border:solid 1px {color:borders};
  584. font-size:10px;
  585. z-index:999;
  586. top:50%;
  587. margin-top:100px;
  588. font-size:10px;
  589. padding:5px;
  590. line-height:2.5;
  591. letter-spacing:2px;
  592. }
  593.  
  594. .aboutpic {
  595. width:220px;
  596. float:right;
  597. }
  598.  
  599. .aboutpic img {
  600. width:220px;
  601. height:400px;
  602. border-radius:10px;
  603. float:right;
  604. top:50%;
  605. margin-top:100px;
  606. border:solid 2px {color:accent};
  607. padding:3px;
  608. }
  609.  
  610. h5 {
  611. font-family:'work sans';
  612. text-transform:uppercase;
  613. font-weight:bold;
  614. padding:5px;
  615. font-size:26px;
  616. color:{color:borders};
  617. text-align:right;
  618. margin-top:-0px;
  619. width:150px;
  620. line-height:100%;
  621. margin-top:30px;
  622. letter-spacing:3px;
  623. border-bottom:solid 2px {color:accent};
  624. max-height:50px;
  625. overflow:hidden;
  626. }
  627.  
  628. h6 {
  629. float:right;
  630. margin-top:-350px;
  631. margin-right:10px;
  632. text-transform:uppercase;
  633. font-size:20px;
  634. font-family:'frontage outline';
  635. line-height:150%;
  636. background: -webkit-linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  637. -webkit-background-clip: text;
  638. -webkit-text-fill-color: transparent;
  639. width:190px;
  640. }
  641.  
  642. .aboutlinks {
  643. width:165px;
  644. margin-top:-10px;
  645. text-align:center;
  646. display:inline-block;
  647. margin-left:-40px;
  648. }
  649.  
  650. .aboutlinks a {
  651. font-family:'frontage outline';
  652. font-size:20px;
  653. background-color:{color:accent};
  654. padding:10px;
  655. border-radius:100px;
  656. display:inline-block;
  657. width:20px;
  658. height:20px;
  659. color:{color:posts};
  660. margin:5px;
  661. z-index:9999999999999999999999999;
  662. -webkit-transition: all 0.7s ease-in-out;
  663. -moz-transition: all 0.7s ease-in-out;
  664. -o-transition: all 0.7s ease-in-out;
  665. }
  666.  
  667. .aboutlinks a:hover {
  668. background-color:{color:posts};
  669. color:{color:accent};
  670. -ms-transform: rotate(15deg); /* IE 9 */
  671. -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
  672. transform: rotate(15deg);
  673. }
  674.  
  675. /* ---------------------------- MUSES ------------------------- */
  676.  
  677. .muse {
  678. width:100px;
  679. height:110px;
  680. display:inline-block;
  681. padding:10px;
  682. margin:5px;
  683. background:{color:posts};
  684. border-radius:10px;
  685. }
  686.  
  687. .muse img {
  688. width:80px;
  689. height:80px;
  690. border-radius:100px;
  691. border:solid 2px {color:accent};
  692. padding:3px;
  693. -webkit-filter: grayscale({select:grayscale}); /* Safari 6.0 - 9.0 */
  694. filter: grayscale({select:grayscale});
  695. -webkit-transition: all 0.5s ease-in-out;
  696. -moz-transition: all 0.5s ease-in-out;
  697. -o-transition: all 0.5s ease-in-out;
  698. -ms-transition: all 0.5s ease-in-out;
  699. transition: all 0.5s ease-in-out;
  700. }
  701.  
  702. .muse img:hover {
  703. -ms-transform: rotate(-7deg); /* IE 9 */
  704. -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  705. transform: rotate(-7deg);
  706. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  707. filter: grayscale(0%);
  708. -webkit-transition: all 0.5s ease-in-out;
  709. -moz-transition: all 0.5s ease-in-out;
  710. -o-transition: all 0.5s ease-in-out;
  711. -ms-transition: all 0.5s ease-in-out;
  712. transition: all 0.5s ease-in-out;
  713. }
  714.  
  715. h4 {
  716. font-family:'work sans';
  717. padding:5px;
  718. font-size:18px;
  719. margin-top:-20px;
  720. z-index:99999999999999999;
  721. color:{color:accent};
  722. text-transform:uppercase;
  723. -ms-transform: rotate(-7deg); /* IE 9 */
  724. -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  725. transform: rotate(-7deg);
  726. }
  727.  
  728. h4:hover {
  729. -ms-transform: rotate(7deg); /* IE 9 */
  730. -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  731. transform: rotate(7deg);
  732. -webkit-transition: all 0.5s ease-in-out;
  733. -moz-transition: all 0.5s ease-in-out;
  734. -o-transition: all 0.5s ease-in-out;
  735. -ms-transition: all 0.5s ease-in-out;
  736. transition: all 0.5s ease-in-out;
  737. }
  738.  
  739. /* ---------------------------- POST NOTES ------------------------- */
  740.  
  741. ol.notes {
  742. display:block;
  743. text-align:left;
  744. list-style-type:none;
  745. margin-left:-35px;
  746. }
  747.  
  748. ol.notes li.note{
  749. margin-bottom:5px;
  750. }
  751.  
  752. .pagenotes {
  753. text-align:left;
  754. margin-top:15px;
  755. }
  756.  
  757. .pagenotes img{
  758. margin-right:5px;
  759. margin-top:5px;
  760. margin-bottom:-5px;
  761. border-radius:100px;
  762. }
  763.  
  764.  
  765. /* -------------------------- POST TYPES -------------------------- */
  766.  
  767. /*----------chat---------*/
  768.  
  769. /* IMESSAGE CHAT POST */
  770. .answer span,
  771.  
  772. .convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}
  773.  
  774. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:chat bubble 2};color:#000;left:3px}
  775.  
  776. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:chat bubble 2};border-bottom-right-radius:1em .5em}
  777.  
  778. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:chat bubble 1};color:#000}
  779.  
  780. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:chat bubble 1}; border-bottom-left-radius:1em .5em}
  781.  
  782. .me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  783.  
  784. .asked p {
  785. text-align: left;
  786. margin: 0 0px 10px 0px;
  787. padding: 0;
  788. color: #666666;
  789. font-family:'rubik';
  790. font-size: 12px;
  791. line-height: 0px;
  792. }
  793. .footerright .viasrc {
  794. float: left;
  795. }
  796. .asked a {
  797. margin:0;padding:0;
  798. }
  799. .user_4{background-color:{color:chat bubble 1};color:#000}.user_4::after{border-color:{color:chat bubble one}}.user_6{background-color:{color:chat bubble 1};color:#000000}.user_6::after{color: chat bubble 1}}.user_5{background-color:{color:chat bubble 2};color:#000}.user_5::after{{color:chat bubble 2}}.user_3{background-color:{color:chat bubble 2};color:#000}.user_3::after{border-color:{color:chat bubble 2}}.user_7{background-color:{color:chat bubble 2};color:#000}.user_7::after{{color:chat bubble 2}}.user_8{background-color:{color:chat bubble 1};color:#000}.user_8::after{{color:chat bubble 2}}.user_9{color:chat bubble 1}.user_9::after{{color:chat bubble 2}}
  800. .convo {
  801. overflow: hidden;
  802. list-style-type: none;
  803. padding: 0;
  804. margin: 0;
  805. }
  806.  
  807. /* QUOTES */
  808.  
  809. .quote{
  810. font-family:'work sans';
  811. text-align:center;
  812. font-size:20px;
  813. line-height:110%;
  814. }
  815.  
  816. .quotesource{
  817. text-align:center;
  818. margin-bottom:15px;
  819. margin-top:15px;
  820. }
  821.  
  822. /* QUESTIONS */
  823.  
  824. .question{
  825. margin-bottom:0px;
  826. text-transform:uppercase;
  827. letter-spacing:2px;
  828. text-align:center;
  829. background-color:{color:sidebar};
  830. color:{color:borders};
  831. border-radius:5px;
  832. padding:20px;
  833. }
  834.  
  835. .answer {
  836. font-size:11px;
  837. }
  838.  
  839. .askerimg{
  840. position:relative;
  841. float:right;
  842. border-radius:100px;
  843. }
  844.  
  845. .asker {
  846. font-family:'work sans';
  847. text-align:center;
  848. font-size:20px;
  849. text-transform:lowercase;
  850. }
  851.  
  852. /*----------audio---------*/
  853.  
  854. .playerbuttonbg {
  855. position: absolute;
  856. left: 25px;
  857. top: 25px;
  858. background-color:transparent;
  859. padding: 10px;
  860. opacity: .4;
  861. filter: alpha(opacity=40);
  862. -moz-opacity: 0.4;
  863. -khtml-opacity: 0.4;
  864. transition: opacity .7s ease-in-out;
  865. -moz-transition: opacity .7s ease-in-out;
  866. -webkit-transition: opacity .7s ease-in-out;
  867. padding-bottom:20px;
  868. }
  869.  
  870. .playerbuttonbg:hover {
  871. opacity: 1;
  872. filter: alpha(opacity=100);
  873. -moz-opacity: 1;
  874. -khtml-opacity: 1;
  875. }
  876.  
  877. .tumblr_audio_player {
  878. height: 90px;
  879. width: 32px;
  880. }
  881.  
  882. .audioimgwrapper {
  883. position: absolute;
  884. left: 0px;
  885. top: 0px;
  886. -webkit-border-radius: 5px;
  887. -moz-border-radius: 5px;
  888. border-radius: 5px;
  889. overflow: hidden;
  890. width: 100px;
  891. height: 100px;
  892. }
  893.  
  894. .audioimgwrapper img {
  895. width: 100%;
  896. height: auto;
  897. -webkit-border-radius: 5px;
  898. -moz-border-radius: 5px;
  899. border-radius: 5px;
  900. }
  901.  
  902. .trackdetails {
  903. width: auto;
  904. display:inline-block;
  905. margin-left: 150px;
  906. font-family:'work sans';
  907. font-weight:bold;
  908. text-transform:uppercase;
  909. letter-spacing:3px;
  910. text-align:center;
  911. line-height:100%;
  912. }
  913.  
  914. .audiowrapper {
  915. position: relative;
  916. display:inline-block;
  917. }
  918. /* ------------------------- PAGINATION ------------------------- */
  919.  
  920. #pagination{
  921. position:static;
  922. margin-top:30px;
  923. text-align:center;
  924. }
  925.  
  926. .pagibutton {
  927. position:relative;
  928. display:inline-block;
  929. padding:5px;
  930. text-transform:uppercase;
  931. font-weight:bold;
  932. border-radius:5px;
  933. margin-right:5px;
  934. height:15px;
  935. margin-top:20px;
  936. color:{color:borders};
  937. }
  938.  
  939. .pagibutton a {
  940. color:{color:borders};
  941. }
  942.  
  943. .pagibutton a:hover {
  944. letter-spacing:3px;
  945. -moz-transition-duration:0.7s;
  946. -webkit-transition-duration:0.7s;
  947. -o-transition-duration:0.7s;
  948. }
  949.  
  950. /*----------credit---------*/
  951.  
  952. .credit {
  953. font-size:15px;
  954. position:fixed;
  955. font-weight:normal;
  956. bottom:10px;
  957. right:15px;
  958. z-index:10;
  959. text-align:right;
  960. }
  961.  
  962. .credit a {
  963. background-color:{color:accent};
  964. color:{color:posts};
  965. padding-top:6px;
  966. padding-right:7px;
  967. padding-left:6px;
  968. border-radius:5px;
  969. }
  970.  
  971. .credit a:hover {
  972. color:{color:accent};
  973. background-color:{color:posts};
  974. -moz-transition-duration:0.5s;
  975. -webkit-transition-duration:0.5s;
  976. -o-transition-duration:0.5s;
  977. }
  978.  
  979. /* --------------------------- Custom CSS -------------------------- */
  980. {CustomCSS}
  981. </style>
  982. </head>
  983. <body>
  984.  
  985.  
  986. <div id="bigcon">
  987. <div class="credit">
  988. <a title="skyofrp" href="https://skyofrp.tumblr.com/"><span class="th th-avocado-o
  989. "></span></a></div>
  990.  
  991. <!--SIDEBAR-->
  992.  
  993. <div id="sidebar">
  994.  
  995. <div class="speechbubble">
  996. <div class="blogtitle">
  997. <a href="/">{text:title}</a>
  998. </div>
  999. </div>
  1000.  
  1001. <img src="{image:sidebar}">
  1002.  
  1003. <div id="navbar">
  1004. <div class="tabs">
  1005. <ul class="tab-links">
  1006. {block:ifcherry}
  1007. <li class="active" style="margin-left:-30px">
  1008. <a title="home" href="#tab1"><span class="th th-directions-o"></span></a></li>
  1009. <li><a title="ask" href="#tab2"><span class="th th-paperclip"></span></a></li>
  1010. <li><a title="{text:tab 3 title}" href="#tab3"><span class="th th-watermelon-o"></span></a></li>
  1011. <li><a title="{text:tab 4 title}" href="#tab4"><span class="th th-cherry-o"></span></a></li>
  1012. {/block:ifcherry}
  1013. {block:ifthetruth}
  1014. <li class="active" style="margin-left:-30px">
  1015. <a title="home" href="#tab1"><span class="th th-earth-o"></span></a></li>
  1016. <li><a title="ask" href="#tab2"><span class="th th-moon-o"></span></a></li>
  1017. <li><a title="{text:tab 3 title}" href="#tab3"><span class="th th-fox-o"></span></a></li>
  1018. <li><a title="{text:tab 4 title}" href="#tab4"><span class="th th-ufo-o"></span></a></li>
  1019. {/block:ifthetruth}
  1020. </ul>
  1021. </div>
  1022.  
  1023. <div class="description">{description}</div>
  1024.  
  1025. <div class="subtitle"><span class="th th-quote-up"></span> {text:sidebar stats}</div>
  1026. <!--PAGINATION-->
  1027. {block:Pagination}
  1028. <div class="pagination">
  1029. {block:PreviousPage}
  1030. <a href="{PreviousPage}">
  1031. <div class="pagibutton">( back )</a></div>
  1032. {/block:PreviousPage}
  1033. {block:NextPage}
  1034. <a href="{NextPage}">
  1035. <div class="pagibutton">( forward )</a></div>
  1036. {/block:NextPage}
  1037. </div>
  1038. {/block:Pagination}
  1039. </div>
  1040.  
  1041. </div>
  1042.  
  1043.  
  1044. <!-- --------------------------- TABS -------------------------- -->
  1045.  
  1046.  
  1047. <div class="tabs">
  1048.  
  1049.  
  1050. <!-- --------------------------- TAB 1 -------------------------- -->
  1051.  
  1052. <div class="tab-content">
  1053. <div id="tab1" class="tab active">
  1054.  
  1055. <div id="postcontainer">
  1056.  
  1057. {block:Posts}
  1058. <article>
  1059.  
  1060. <!--PERMALINK-->
  1061. <div class="permalink">
  1062. <a title="{TimeAgo}" href="{Permalink}">
  1063. {block:Date}
  1064. <span class="th th-calendar-o"></span> {DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix}, {Year}
  1065. {/block:Date}
  1066. </a>
  1067. </div>
  1068.  
  1069. <!--TEXT POST-->
  1070. {block:Text}
  1071. {block:Title}
  1072. <h1 class="title">
  1073. <a href="{Permalink}">{Title}</a></h1>
  1074. {/block:Title}
  1075. {Body}
  1076. {/block:Text}
  1077.  
  1078.  
  1079. <!--PHOTO POST-->
  1080. {block:Photo}
  1081. {block:IndexPage}
  1082. {LinkOpenTag}
  1083. <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  1084. {LinkCloseTag}
  1085. {/block:IndexPage}
  1086. {block:PermalinkPage}
  1087. {LinkOpenTag}
  1088. <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  1089. {LinkCloseTag}{/block:PermalinkPage}
  1090. {/block:Photo}
  1091.  
  1092.  
  1093. <!--PHOTOSET POST-->
  1094. {block:Photoset}
  1095. {block:IndexPage}{Photoset-400}{/block:IndexPage}
  1096. {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}
  1097. {/block:Photoset}
  1098.  
  1099.  
  1100. <!--QUOTE POST-->
  1101. {block:Quote}
  1102. <div class="quote">{Quote}</div>
  1103. {block:Source}
  1104. <div class="quotesource">&mdash; <b>{Source}</b></div>
  1105. {/block:Source}
  1106. {/block:Quote}
  1107.  
  1108.  
  1109. <!--LINK POST-->
  1110. {block:Link}
  1111. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  1112. {block:Description}{Description}{/block:Description}
  1113. {/block:Link}
  1114.  
  1115.  
  1116. <!--CHAT POST-->
  1117. {block:Chat}
  1118. {block:Title}
  1119. <h1>{Title}</h1>{/block:Title}<br>
  1120. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1121. {Line}</li>{/block:Lines}</ul>
  1122. {/block:Chat}
  1123.  
  1124.  
  1125. <!--AUDIO POST-->
  1126. {block:Audio}
  1127. {block:AudioPlayer}
  1128. <div class="audiowrapper">
  1129. {block:AlbumArt}
  1130. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1131. {/block:AlbumArt}
  1132.  
  1133. <div class="playerbuttonbg">
  1134. <div class="newplayerbutton">
  1135. <div class="playerbuttonhug">
  1136.  
  1137. {AudioPlayer}
  1138.  
  1139. </div>
  1140. </div>
  1141. </div>
  1142.  
  1143. <div class="trackdetails">
  1144.  
  1145. {block:TrackName}<h2>{TrackName}</h2>{/block:TrackName}<br/>
  1146. {block:Artist}{Artist}{/block:Artist}<br/>
  1147. </div>
  1148. </div>
  1149. {/block:AudioPlayer}
  1150.  
  1151. {/block:Audio}
  1152.  
  1153.  
  1154. <!--VIDEO POST-->
  1155. {block:Video}
  1156. <div class="video">
  1157. <div class="video-player">{Video-400}</div>
  1158. {/block:Video}
  1159.  
  1160.  
  1161. <!--ANSWER POST-->
  1162. {block:Answer}
  1163. <div class="askerimg"><img src="{AskerPortraitURL-64}"></div>
  1164. <div class="question">{Question}
  1165. <div class="asker">&mdash; {Asker}</div></div>
  1166. <p><div class="answer">{Answer}</div>
  1167. {/block:Answer}
  1168.  
  1169. <!--CAPTIONS-->
  1170. {block:Caption}
  1171. {Caption}
  1172. {/block:Caption}
  1173.  
  1174. <!--POST INFORMATION-->
  1175. <div class="postinfo">
  1176.  
  1177. <!--NOTES-->
  1178. {block:NoteCount}
  1179. <a title="{NoteCountwithLabel}" href="{Permalink}"> <span class="th th-heart-1-o"></span> {NoteCountwithLabel}</a>
  1180. {/block:NoteCount}
  1181.  
  1182. <!--VIA AND SOURCE-->
  1183. {block:RebloggedFrom}
  1184. &nbsp;
  1185. <a href="{ReblogParentURL}" title="{ReblogParentname}"><span class="th th-layers-o"></span> via</a>
  1186. {/block:RebloggedFrom}
  1187. {block:ContentSource}
  1188. &nbsp;
  1189. <a title="{SourceTitle}" href="{SourceURL}"><span class="th th-home-o"></span> source</a>
  1190. {/block:ContentSource}
  1191. {block:RebloggedFrom} {/block:RebloggedFrom}
  1192.  
  1193. <!--TAGS-->
  1194. {block:HasTags}
  1195. <div class="tags">
  1196. {block:Tags}
  1197. <a href="{TagURL}">#{Tag}</a>
  1198. {/block:Tags}
  1199. </div>
  1200. {/block:HasTags}
  1201.  
  1202. </div>
  1203.  
  1204. <!--POST NOTES-->
  1205. {block:PostNotes}
  1206. <div class="pagenotes">{PostNotes-16}</div>
  1207. {/block:PostNotes}
  1208.  
  1209.  
  1210. </article>
  1211. {/block:Posts}
  1212. <!--Close of article-->
  1213.  
  1214. </div>
  1215.  
  1216. </div>
  1217.  
  1218. <!-- -------------------------- TAB 2 -------------------------- -->
  1219.  
  1220. <div id="tab2" class="tab">
  1221. <div class="tabcontent">
  1222.  
  1223. <h1 style="margin-top:100px;">ask</h1>
  1224. <div align="center">
  1225. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{text:url for askbox}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></div>
  1226. </div>
  1227. </div>
  1228.  
  1229.  
  1230. <!-- -------------------------- TAB 3 -------------------------- -->
  1231.  
  1232. <div id="tab3" class="tab">
  1233. <div class="tabcontent">
  1234.  
  1235. <div class="aboutpic"><img src="{image:abouttab}"></div>
  1236.  
  1237. <div class="aboutme">{text:about description}</div>
  1238.  
  1239. <h5>{text:one line}</h5>
  1240.  
  1241. <div class="aboutlinks">
  1242. {block:ifcherry}
  1243. <a title="{text:link 1 title}" href="{text:link 1}"><span class="th th-orange-o"></span></a>
  1244. <a title="{text:link 2 title}" href="{text:link 2}"><span class="th th-apple-o"></span></a>
  1245. <a title="{text:link 3 title}" href="{text:link 3}"><span class="th th-lollipop-o"></span></a>
  1246. <a title="{text:link 4 title}" href="{text:link 4}"><span class="th th-pie-o"></span></a>
  1247. <a title="{text:link 5 title}" href="{text:link 5}"><span class="th th-cake-4-o"></span></a>
  1248. <a title="{text:link 6 title}" href="{text:link 6}"><span class="th th-donut-1-o"></span></a>
  1249. {/block:ifcherry}
  1250.  
  1251. {block:ifthetruth}
  1252. <a title="{text:link 1 title}" href="{text:link 1}"><span class="th th-alien-o"></span></a>
  1253. <a title="{text:link 2 title}" href="{text:link 2}"><span class="th th-stars-o"></span></a>
  1254. <a title="{text:link 3 title}" href="{text:link 3}"><span class="th th-planet-1-o"></span></a>
  1255. <a title="{text:link 4 title}" href="{text:link 4}"><span class="th th-planet-2-o"></span></a>
  1256. <a title="{text:link 5 title}" href="{text:link 5}"><span class="th th-meteorite-o"></span></a>
  1257. <a title="{text:link 6 title}" href="{text:link 6}"><span class="th th-constellation-o"></span></a>
  1258. {/block:ifthetruth}
  1259. </div>
  1260.  
  1261.  
  1262. </div>
  1263. </div>
  1264.  
  1265.  
  1266. <!-- -------------------------- TAB 4 -------------------------- -->
  1267.  
  1268. <div id="tab4" class="tab">
  1269. <div class="tabcontent">
  1270.  
  1271. <div class="muse">
  1272. <a title="muse name, age, label." href="/">
  1273. <img src="https://i.imgur.com/7LTV0KA.png">
  1274. <h4>muse name</h4>
  1275. </a>
  1276. </div>
  1277.  
  1278. <div class="muse">
  1279. <a title="muse name, age, label." href="/">
  1280. <img src="https://i.imgur.com/3PrC6Y3.png">
  1281. <h4>muse name</h4>
  1282. </a>
  1283. </div>
  1284.  
  1285. <div class="muse">
  1286. <a title="muse name, age, label." href="/">
  1287. <img src="https://i.imgur.com/K0dUdqe.png">
  1288. <h4>muse name</h4>
  1289. </a>
  1290. </div>
  1291.  
  1292. <div class="muse">
  1293. <a title="muse name, age, label." href="/">
  1294. <img src="https://i.imgur.com/OGHVKzX.png">
  1295. <h4>muse name</h4>
  1296. </a>
  1297. </div>
  1298.  
  1299. <div class="muse">
  1300. <a title="muse name, age, label." href="/">
  1301. <img src="https://i.imgur.com/SlD2DV6.png">
  1302. <h4>muse name</h4>
  1303. </a>
  1304. </div>
  1305.  
  1306. <div class="muse">
  1307. <a title="muse name, age, label." href="/">
  1308. <img src="https://i.imgur.com/QD5ancR.png">
  1309. <h4>muse name</h4>
  1310. </a>
  1311. </div>
  1312.  
  1313. <div class="muse">
  1314. <a title="muse name, age, label." href="/">
  1315. <img src="https://i.imgur.com/C1YvYKf.png">
  1316. <h4>muse name</h4>
  1317. </a>
  1318. </div>
  1319.  
  1320. <div class="muse">
  1321. <a title="muse name, age, label." href="/">
  1322. <img src="https://i.imgur.com/Ex1ol9o.png">
  1323. <h4>muse name</h4>
  1324. </a>
  1325. </div>
  1326.  
  1327. <div class="muse">
  1328. <a title="muse name, age, label." href="/">
  1329. <img src="https://i.imgur.com/MRUb7YP.png">
  1330. <h4>muse name</h4>
  1331. </a>
  1332. </div>
  1333.  
  1334. <div class="muse">
  1335. <a title="muse name, age, label." href="/">
  1336. <img src="https://i.imgur.com/Avdrf6c.png">
  1337. <h4>muse name</h4>
  1338. </a>
  1339. </div>
  1340.  
  1341. <div class="muse">
  1342. <a title="muse name, age, label." href="/">
  1343. <img src="https://i.imgur.com/KPILlKn.png">
  1344. <h4>muse name</h4>
  1345. </a>
  1346. </div>
  1347.  
  1348. <div class="muse">
  1349. <a title="muse name, age, label." href="/">
  1350. <img src="https://i.imgur.com/7pLNSPF.png">
  1351. <h4>muse name</h4>
  1352. </a>
  1353. </div>
  1354.  
  1355. <div class="muse">
  1356. <a title="muse name, age, label." href="/">
  1357. <img src="https://i.imgur.com/7LTV0KA.png">
  1358. <h4>muse name</h4>
  1359. </a>
  1360. </div>
  1361.  
  1362. <div class="muse">
  1363. <a title="muse name, age, label." href="/">
  1364. <img src="https://i.imgur.com/3PrC6Y3.png">
  1365. <h4>muse name</h4>
  1366. </a>
  1367. </div>
  1368.  
  1369. <div class="muse">
  1370. <a title="muse name, age, label." href="/">
  1371. <img src="https://i.imgur.com/K0dUdqe.png">
  1372. <h4>muse name</h4>
  1373. </a>
  1374. </div>
  1375.  
  1376. <div class="muse">
  1377. <a title="muse name, age, label." href="/">
  1378. <img src="https://i.imgur.com/OGHVKzX.png">
  1379. <h4>muse name</h4>
  1380. </a>
  1381. </div>
  1382.  
  1383. <div class="muse">
  1384. <a title="muse name, age, label." href="/">
  1385. <img src="https://i.imgur.com/SlD2DV6.png">
  1386. <h4>muse name</h4>
  1387. </a>
  1388. </div>
  1389.  
  1390. <div class="muse">
  1391. <a title="muse name, age, label." href="/">
  1392. <img src="https://i.imgur.com/QD5ancR.png">
  1393. <h4>muse name</h4>
  1394. </a>
  1395. </div>
  1396.  
  1397. <div class="muse">
  1398. <a title="muse name, age, label." href="/">
  1399. <img src="https://i.imgur.com/C1YvYKf.png">
  1400. <h4>muse name</h4>
  1401. </a>
  1402. </div>
  1403.  
  1404. <div class="muse">
  1405. <a title="muse name, age, label." href="/">
  1406. <img src="https://i.imgur.com/Ex1ol9o.png">
  1407. <h4>muse name</h4>
  1408. </a>
  1409. </div>
  1410.  
  1411. <div class="muse">
  1412. <a title="muse name, age, label." href="/">
  1413. <img src="https://i.imgur.com/MRUb7YP.png">
  1414. <h4>muse name</h4>
  1415. </a>
  1416. </div>
  1417.  
  1418. <div class="muse">
  1419. <a title="muse name, age, label." href="/">
  1420. <img src="https://i.imgur.com/Avdrf6c.png">
  1421. <h4>muse name</h4>
  1422. </a>
  1423. </div>
  1424.  
  1425. <div class="muse">
  1426. <a title="muse name, age, label." href="/">
  1427. <img src="https://i.imgur.com/KPILlKn.png">
  1428. <h4>muse name</h4>
  1429. </a>
  1430. </div>
  1431.  
  1432. <div class="muse">
  1433. <a title="muse name, age, label." href="/">
  1434. <img src="https://i.imgur.com/7pLNSPF.png">
  1435. <h4>muse name</h4>
  1436. </a>
  1437. </div>
  1438.  
  1439. <!--- to add another muse, just copy this:
  1440.  
  1441. <div class="muse">
  1442. <a title="muse name, age, label." href="/">
  1443. <img src="https://i.imgur.com/tDVMvip.png">
  1444. <h4>muse name</h4>
  1445. </a>
  1446. </div>
  1447.  
  1448. ---->
  1449.  
  1450.  
  1451. </div>
  1452. </div>
  1453.  
  1454.  
  1455.  
  1456. <!-- END OF TABS -->
  1457.  
  1458. </div>
  1459. </div>
  1460. </div>
  1461. </div>
  1462. </div>
  1463.  
  1464.  
  1465. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1466.  
  1467. <script>
  1468. $(document).ready(function() {
  1469. $('.tabs .tab-links a').on('click', function(e) {
  1470. var currentAttrValue = $(this).attr('href');
  1471.  
  1472. // Show/Hide Tabs
  1473. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1474.  
  1475. // Change/remove current tab to active
  1476. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1477.  
  1478. e.preventDefault();
  1479. });
  1480. });
  1481. </script>
  1482.  
  1483. <script>
  1484. $(document).ready(function() {
  1485. $('#filterOptions li a').click(function() {
  1486. // fetch the class of the clicked item
  1487. var ourClass = $(this).attr('class');
  1488.  
  1489. // reset the active class on all the buttons
  1490. $('#filterOptions li').removeClass('active');
  1491. // update the active state on our clicked button
  1492. $(this).parent().addClass('active');
  1493.  
  1494. if(ourClass == 'all') {
  1495. // show all our items
  1496. $('#ourHolder').children('div.item').show();
  1497. }
  1498. else {
  1499. // hide all elements that don't share ourClass
  1500. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1501. // show all elements that do share ourClass
  1502. $('#ourHolder').children('div.' + ourClass).show();
  1503. }
  1504. return false;
  1505. });
  1506. });
  1507. </script>
  1508.  
  1509.  
  1510.  
  1511.  
  1512. </body>
  1513. </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!