API tools faq
paste
Advertisement
kbgidget

cast page

kbgidget
Jun 25th, 2018
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <html>
  5.  
  6. <!--
  7.  
  8. Hey friends! I'm HendrixRPH and this is my first character page theme. Don't claim this as your own, don't remove the credit, and don't use as a base, please!
  9.  
  10. On the other hand, if you want to steal the code that lets you filter by multiple criteria, go ahead. I stole it from the Isotope documentation anyway. I would recommend you look at it yourself before using so that you get the HTML structure right. Here is where I got it from: http://isotope.metafizzy.co/filtering.html#combination-filters
  11.  
  12. That said, special thanks to Metafizzy for this awesome library!
  13.  
  14. -->
  15.  
  16. <head>
  17. <title>MURDER IN THE CITY CAST</title>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Khula:400,300,700' rel='stylesheet' type='text/css'>
  20.  
  21. <style>
  22. ::-webkit-scrollbar {background-color:#888; height:4px; width:6px}
  23. ::-webkit-scrollbar-thumb:vertical {background-color:#333; height:50px}
  24. ::-webkit-scrollbar-thumb:horizontal {background-color:#333; height:8px!important}
  25.  
  26. body, html {
  27. height:100%;
  28. margin:0;
  29. padding:0;
  30. font-family:"Khula", Helvetica, Arial, sans-serif;
  31. background-color:#eee;
  32. overflow:hidden;
  33. }
  34.  
  35. .sidebar {
  36. float:left;
  37. width:275px;
  38. background:#000;
  39. height:100%;
  40. padding:0;
  41. font-family:"Khula", Helvetica, Arial, sans-serif;
  42. overflow:hidden;
  43. }
  44.  
  45. .sidebar::after {
  46. clear:both;
  47. }
  48.  
  49. h1 {
  50. text-transform:uppercase;
  51. text-align:center;
  52. padding: 10px 20px;
  53. padding-bottom:0px;
  54. margin:10px 0px;
  55. z-index:0;
  56. position:relative;
  57. letter-spacing:1px;
  58. font-weight:300;
  59. color:#eee;
  60. }
  61.  
  62. .nav {
  63. font-size:10px;
  64. letter-spacing:2px;
  65. text-transform:lowercase;
  66. text-align:center;
  67. margin-bottom:10px;
  68. }
  69.  
  70. .nav a, a {
  71. color:#ccc;
  72. text-decoration:none;
  73. border-bottom:1px solid #000;
  74. transition:0.5s all;
  75. }
  76.  
  77. .nav a:hover, a:hover {
  78. color:#fff;
  79. letter-spacing:3px;
  80. }
  81.  
  82. .nav a {
  83. padding:0 5px;
  84. border-bottom:0px;
  85. }
  86.  
  87. .desc {
  88. padding: 0px 15px;
  89. text-align:center;
  90. font-size:11px;
  91. margin:0 10px;
  92. border:1px solid #000;
  93. text-transform:lowercase;
  94. letter-spacing:1px;
  95. font-weight:300;
  96. color:#ddd;
  97. }
  98.  
  99. h2 {
  100. text-align:center;
  101. font-weight:300;
  102. text-transform:lowercase;
  103. letter-spacing:2px;
  104. margin-top:20px;
  105. margin-bottom:5px;
  106. color:#eee;
  107. }
  108.  
  109. /* expanded buttons */
  110. .sidebar .button {
  111. display:block;
  112. background:none;
  113. border:1px solid #000;
  114. margin:6px auto;
  115. color:#ccc;
  116. width:100px;
  117. transition:0.5s all;
  118. }
  119.  
  120.  
  121. /* condensed buttons */
  122. /*.sidebar .button {
  123. display:inline;
  124. background:none;
  125. border:1px solid #555;
  126. margin:3px 0px;
  127. color:#ccc;
  128. width:75px;
  129. transition:0.5s all;
  130. } */
  131.  
  132. .button-group {
  133. width:200px;
  134. margin:0 auto;
  135. text-align:center;
  136. }
  137.  
  138. .sidebar .button:hover {
  139. background-color:#057669;
  140. border:#000 1px solid;
  141. color:#eee;
  142. }
  143.  
  144. .button.ischecked {
  145. background-color:#057669!important;
  146. border:#000 1px solid!important;
  147. color:#eee!important;
  148. }
  149.  
  150. .wrapper {
  151. background-color:#eee;
  152. max-height:100%;
  153. margin:0;
  154. padding:0;
  155. margin-left:300px;
  156. overflow-y:scroll;
  157. }
  158.  
  159. .wrapper:after {
  160. content: '';
  161. display: block;
  162. clear: both;
  163. }
  164.  
  165. .header {
  166. background-color:#333;
  167. margin:0;
  168. padding:0;
  169. height:100px;
  170. }
  171.  
  172. .header h1 {
  173. margin:0;
  174. padding-top:25px;
  175. padding-left:200px;
  176. font-size:40px;
  177. }
  178.  
  179. .chara {
  180. width:200px;
  181. height:250px;
  182. background-color:#888;
  183. float:left;
  184. margin:10px 15px;
  185. padding:0;
  186. z-index:0;
  187. position:relative;
  188. overflow:hidden;
  189. }
  190.  
  191. .charaimg {
  192. width:200px;
  193. z-index:1;
  194. position:relative;
  195. }
  196.  
  197. .charatitle {
  198. height:35px;
  199. line-height:35px;
  200. position:absolute;
  201. bottom:0;
  202. background-color:#333;
  203. width:180px;
  204. padding:10px;
  205. color:#fff;
  206. opacity:0.8;
  207. text-align:center;
  208. z-index:2;
  209. }
  210.  
  211. .charatitle span {
  212. margin:0;
  213. padding:0;
  214. display:inline-block;
  215. vertical-align:middle;
  216. line-height:1.5em;
  217. font-size:10px;
  218. letter-spacing:1px;
  219. font-weight:300;
  220.  
  221. }
  222.  
  223. .charatitle span p {
  224. margin:0;
  225. padding:0;
  226. }
  227.  
  228. .charahover {
  229. position:absolute;
  230. z-index:5;
  231. background-color:#333;
  232. width:190px;
  233. height:240px;
  234. opacity:0;
  235. transition:1s opacity;
  236. padding:5px 0;
  237. padding-right:10px;
  238. overflow:hidden;
  239. }
  240.  
  241. .charahover:hover {
  242. opacity:0.9;
  243. overflow-y:scroll;
  244. }
  245.  
  246. .charahover p {
  247. line-height:1.35em;
  248. font-size:10px;
  249. letter-spacing:1px;
  250. font-weight:300;
  251. padding:2px 8px;
  252. color:#fff;
  253. margin:0 3px;
  254. }
  255.  
  256. .charahover ul, .charahover ol {
  257. line-height:1.35em;
  258. font-size:10px;
  259. letter-spacing:1px;
  260. font-weight:300;
  261. color:#fff;
  262. padding-left:30px;
  263. }
  264.  
  265. .credit {
  266. position:absolute;
  267. margin:7px 13px;
  268. padding:3px 5px;
  269. font-size:8px;
  270. bottom:0;
  271. right:0;
  272. background-color:#888;
  273. color:#fff;
  274. opacity:0.5;
  275. transition:0.75s all;
  276. }
  277.  
  278. .credit:hover {
  279. opacity:0.8;
  280. letter-spacing:normal;
  281. }
  282.  
  283.  
  284.  
  285.  
  286. </style>
  287. </head>
  288.  
  289. <body>
  290.  
  291. <div class='sidebar'>
  292.  
  293. <h1><small>MURDER<br>IN THE<br>CITY</small></h1> <!-- Page title goes here. -->
  294.  
  295. <div class="nav">
  296. <!-- Navigation links, change them to whatever you want. -->
  297. </div>
  298.  
  299. <div class="desc">
  300. <p>hover over images for character info</p>
  301. </div>
  302.  
  303. <!--
  304.  
  305. Okay, changing the filters is potentially the most difficult part. I'll try to explain how you do it.
  306.  
  307. *** ADD A NEW OPTION TO AN EXISTING GROUP:
  308.  
  309. Let's say you want to stick to my defaults, but want to add a "ghost" option for species. Go down to the button group you want to add an option to, in this case species. It looks like this:
  310.  
  311. --
  312.  
  313. <h2>Species</h2>
  314. <div class="button-group" data-filter-group="species">
  315. <button data-filter="" class="button ischecked">any</button>
  316. <button data-filter=".human" class="button">human</button>
  317. <button data-filter=".vampire" class="button">vampire</button>
  318. <button data-filter=".vampire" class="button">mix</button>
  319.  
  320. </div>
  321.  
  322. --
  323.  
  324. To add an option, start by coping one of the buttons and pasting it on the line below. We'll copy the vampire one. Here's what it looks like now.
  325.  
  326. --
  327.  
  328. <h2>Species</h2>
  329. <div class="button-group" data-filter-group="species">
  330. <button data-filter="" class="button ischecked">any</button>
  331. <button data-filter=".human" class="button">human</button>
  332. <button data-filter=".vampire" class="button">vampire</button>
  333. <button data-filter=".vampire" class="button">mix</button>
  334. </div>
  335.  
  336. --
  337.  
  338. But we don't want two vampire ones, so we'll change the values. Here's what it will look like after the values are changed, compared to the original:
  339.  
  340. --
  341.  
  342. Original: <button data-filter=".vampire" class="button">vampire</button>
  343. New version: <button data-filter=".ghost" class="button">ghost</button>
  344. --
  345.  
  346. And that's it! Everything should work.
  347.  
  348.  
  349. *** REMOVE AN OPTION FROM AN EXISTING GROUP
  350.  
  351. This one's simple. Just find the code for the button that you want to remove and delete that one line. You're done!
  352.  
  353.  
  354. *** ADD A NEW FILTER GROUP
  355.  
  356. For this example, we'll pretend you want to add a filter group for the character's grade (freshman, sophomore, junior, or senior). First, copy and paste any of the filter groups, starting at the <h2> tag and ending at the </div>. Here's what we'll start with:
  357.  
  358. --
  359.  
  360. <h2>Species</h2>
  361. <div class="button-group" data-filter-group="species">
  362. <button data-filter="" class="button ischecked">any</button>
  363. <button data-filter=".human" class="button">human</button>
  364. <button data-filter=".werewolf" class="button">vampire</button>
  365. <button data-filter=".vampire" class="button">mix</button>
  366. </div>
  367.  
  368. --
  369.  
  370. Change the text between the <h2> tags to the title of your filter, in this case "Grade."
  371.  
  372. Next, we need to give the filter group a new official name. In the div tag, the one that looks like this:
  373.  
  374. <div class="button-group" data-filter-group="species">
  375.  
  376. Replace the content of data-filter-group="___" with whatever you want to call your group. In this case, grade works.
  377.  
  378. Don't mess with the first button! Having an "any" button is important, we don't want to remove it. If you really want to call it something else youc an change the "any" text to something else like "all", but leave all the attributes within the tag the same.
  379.  
  380. Now modify the other buttons to create your new options. You'll need to change the data-filter attribute (keep the period at the beginning, that's crucial!) and the label that's between the <button></button> tags.
  381.  
  382. For the data-filter, do not have any spaces. If you have multiple words, seperate them by dashes. Add and remove options as necessary.
  383.  
  384. In the end, it should look like this:
  385.  
  386. --
  387.  
  388. <h2>Grade</h2>
  389. <div class="button-group" data-filter-group="grade">
  390. <button data-filter="" class="button ischecked">any</button>
  391. <button data-filter=".freshman" class="button">freshman</button>
  392. <button data-filter=".sophomore" class="button">sophomore</button>
  393. <button data-filter=".junior" class="button">junior</button>
  394. <button data-filter=".senior" class="button">senior</button>
  395. </div>
  396.  
  397. --
  398.  
  399. And you're done! Make sure you add the new data filters to the class section of your character entries so the sorting will work. How to do that is covered further down.
  400.  
  401.  
  402. *** REMOVE A FILTER GROUP
  403.  
  404. To remove a filter group, locate the one you want to remove in the code. Delete everything starting from the <h2> tag and ending at the </div> tag.
  405.  
  406. -->
  407.  
  408. <div class="filters">
  409. <h2>sᴛᴀᴛᴜs</h2>
  410. <div class="button-group" data-filter-group="status">
  411. <button data-filter="" class="button ischecked">all</button>
  412. <button data-filter=".zcrew" class="button">zaira's crew</button>
  413. <button data-filter=".fcrew" class="button">fierro's crew</button>
  414. <button data-filter=".smpd" class="button">SMPD</button>
  415. </div>
  416.  
  417. <h2>ɢᴇɴᴅᴇʀ</h2>
  418. <div class="button-group" data-filter-group="gender">
  419. <button data-filter="" class="button ischecked">any</button>
  420. <button data-filter=".male" class="button">male</button>
  421. <button data-filter=".female" class="button">female</button>
  422. </div>
  423.  
  424. <h2>sᴘᴇᴄɪᴇs</h2>
  425. <div class="button-group" data-filter-group="species">
  426. <button data-filter="" class="button ischecked">any</button>
  427. <button data-filter=".human" class="button">human</button>
  428. <button data-filter=".vampire" class="button">vampire</button>
  429. <button data-filter=".mix" class="button">mix</button>
  430. </div>
  431. </div>
  432.  
  433. </div>
  434.  
  435. <div class="wrapper"> <!-- All of your character boxes should go in here. -->
  436.  
  437. <!-- BEGIN COPY PASTE -->
  438. <div class="chara open male human"> <!-- This is where you add the filter tags. Put them all in the class attribute, separated by spaces. Write them exactly as they are in the data-filter attributes of the filter buttons above, or else it won't work right.
  439. Don't remove the chara tag! That will break the code. -->
  440. <div class="charatitle"><span>
  441. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  442. <p>Zaira Coletta</p>
  443. <p>Lorem Ipsum</p>
  444. </span></div>
  445. <div class="charahover">
  446. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  447. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  448. <ul>
  449. <li>Here's</li>
  450. <li>a</li>
  451. <li>list</li>
  452. </ul>
  453. <ol>
  454. <li>Here's</li>
  455. <li>another</li>
  456. <li>list</li>
  457. </ol>
  458. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  459. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  460. </div>
  461. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  462. </div>
  463. <!-- END COPY PASTE -->
  464.  
  465. <!-- BEGIN COPY PASTE -->
  466. <div class="chara taken male human">
  467. <div class="charatitle"><span>
  468. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  469. <p>David Coletta</p>
  470. <p>Lorem Ipsum</p>
  471. </span></div>
  472. <div class="charahover">
  473. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  474. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  475. <ul>
  476. <li>Here's</li>
  477. <li>a</li>
  478. <li>list</li>
  479. </ul>
  480. <ol>
  481. <li>Here's</li>
  482. <li>another</li>
  483. <li>list</li>
  484. </ol>
  485. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  486. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  487. </div>
  488. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  489. </div>
  490. <!-- END COPY PASTE -->
  491.  
  492. <!-- BEGIN COPY PASTE -->
  493. <div class="chara open female human">
  494. <div class="charatitle"><span>
  495. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  496. <p>Aura Coletta</p>
  497. <p>Lorem Ipsum</p>
  498. </span></div>
  499. <div class="charahover">
  500. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  501. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  502. <ul>
  503. <li>Here's</li>
  504. <li>a</li>
  505. <li>list</li>
  506. </ul>
  507. <ol>
  508. <li>Here's</li>
  509. <li>another</li>
  510. <li>list</li>
  511. </ol>
  512. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  513. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  514. </div>
  515. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  516. </div>
  517. <!-- END COPY PASTE -->
  518.  
  519. <!-- BEGIN COPY PASTE -->
  520. <div class="chara taken female human">
  521. <div class="charatitle"><span>
  522. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  523. <p>Vladislaus Straud</p>
  524. <p>Lorem Ipsum</p>
  525. </span></div>
  526. <div class="charahover">
  527. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  528. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  529. <ul>
  530. <li>Here's</li>
  531. <li>a</li>
  532. <li>list</li>
  533. </ul>
  534. <ol>
  535. <li>Here's</li>
  536. <li>another</li>
  537. <li>list</li>
  538. </ol>
  539. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  540. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  541. </div>
  542. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  543. </div>
  544. <!-- END COPY PASTE -->
  545.  
  546. <!-- BEGIN COPY PASTE -->
  547. <div class="chara open nb human">
  548. <div class="charatitle"><span>
  549. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  550. <p>Eli Cardon</p>
  551. <p>Lorem Ipsum</p>
  552. </span></div>
  553. <div class="charahover">
  554. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  555. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  556. <ul>
  557. <li>Here's</li>
  558. <li>a</li>
  559. <li>list</li>
  560. </ul>
  561. <ol>
  562. <li>Here's</li>
  563. <li>another</li>
  564. <li>list</li>
  565. </ol>
  566. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  567. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  568. </div>
  569. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  570. </div>
  571. <!-- END COPY PASTE -->
  572.  
  573. <!-- BEGIN COPY PASTE -->
  574. <div class="chara taken nb human">
  575. <div class="charatitle"><span>
  576. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  577. <p>Michael Benett</p>
  578. <p>Lorem Ipsum</p>
  579. </span></div>
  580. <div class="charahover">
  581. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  582. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  583. <ul>
  584. <li>Here's</li>
  585. <li>a</li>
  586. <li>list</li>
  587. </ul>
  588. <ol>
  589. <li>Here's</li>
  590. <li>another</li>
  591. <li>list</li>
  592. </ol>
  593. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  594. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  595. </div>
  596. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  597. </div>
  598. <!-- END COPY PASTE -->
  599.  
  600. <!-- BEGIN COPY PASTE -->
  601. <div class="chara open male werewolf">
  602. <div class="charatitle"><span>
  603. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  604. <p>Jade Benett</p>
  605. <p>Lorem Ipsum</p>
  606. </span></div>
  607. <div class="charahover">
  608. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  609. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  610. <ul>
  611. <li>Here's</li>
  612. <li>a</li>
  613. <li>list</li>
  614. </ul>
  615. <ol>
  616. <li>Here's</li>
  617. <li>another</li>
  618. <li>list</li>
  619. </ol>
  620. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  621. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  622. </div>
  623. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  624. </div>
  625. <!-- END COPY PASTE -->
  626.  
  627. <!-- BEGIN COPY PASTE -->
  628. <div class="chara open male werewolf">
  629. <div class="charatitle"><span>
  630. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  631. <p>John Fierro</p>
  632. <p>Lorem Ipsum</p>
  633. </span></div>
  634. <div class="charahover">
  635. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  636. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  637. <ul>
  638. <li>Here's</li>
  639. <li>a</li>
  640. <li>list</li>
  641. </ul>
  642. <ol>
  643. <li>Here's</li>
  644. <li>another</li>
  645. <li>list</li>
  646. </ol>
  647. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  648. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  649. </div>
  650. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  651. </div>
  652. <!-- END COPY PASTE -->
  653.  
  654. <!-- BEGIN COPY PASTE -->
  655. <div class="chara open male werewolf">
  656. <div class="charatitle"><span>
  657. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  658. <p>Frank Caruso</p>
  659. <p>Lorem Ipsum</p>
  660. </span></div>
  661. <div class="charahover">
  662. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  663. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  664. <ul>
  665. <li>Here's</li>
  666. <li>a</li>
  667. <li>list</li>
  668. </ul>
  669. <ol>
  670. <li>Here's</li>
  671. <li>another</li>
  672. <li>list</li>
  673. </ol>
  674. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ipsum metus, placerat eget turpis vel, commodo ullamcorper velit. Cras elementum, massa id commodo tincidunt, augue ante dictum arcu, in iaculis ligula dolor non lacus. Cras vitae quam ac libero eleifend maximus vitae ac lacus. Fusce id augue sapien. In nec posuere ligula. Nam pulvinar sem semper mi aliquam cursus. Aliquam nulla turpis, egestas non eros in, luctus semper augue. Fusce facilisis erat ante, lacinia elementum turpis porta ac.</p>
  675. <p>Quisque sagittis in augue sit amet vestibulum. Suspendisse quis elementum dolor. Proin molestie rutrum elit, a blandit diam dictum sit amet. Curabitur sed lobortis nulla. Pellentesque vitae molestie magna, sed gravida arcu. Vivamus sit amet justo id nisi pretium placerat vel eget ligula. Donec ac turpis ex. Nulla quis pulvinar leo.</p>
  676. </div>
  677. <img src="https://78.media.tumblr.com/8211773f2b2f43a925c56fa4751e9a4d/tumblr_p12lhgVLeI1rz3ixwo1_1280.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  678. </div>
  679. <!-- END COPY PASTE -->
  680.  
  681.  
  682.  
  683.  
  684.  
  685. </div> <!-- Don't put any character boxes after this tag! -->
  686. <a href="http://hendrixrph.tumblr.com"><div class="credit">hendrixrph</div></a>
  687.  
  688.  
  689. <!-- All the filtering scripts. No need to mess with these unless you know what you're doing. -->
  690. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  691. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
  692. <script>
  693.  
  694. // external js: isotope.pkgd.js
  695.  
  696. $(document).ready( function() {
  697. // init Isotope
  698. var $grid = $('.wrapper').isotope({
  699. itemSelector: '.chara'
  700. });
  701.  
  702. // store filter for each group
  703. var filters = {};
  704.  
  705. $('.filters').on( 'click', '.button', function() {
  706. var $this = $(this);
  707. // get group key
  708. var $buttonGroup = $this.parents('.button-group');
  709. var filterGroup = $buttonGroup.attr('data-filter-group');
  710. // set filter for group
  711. filters[ filterGroup ] = $this.attr('data-filter');
  712. // combine filters
  713. var filterValue = concatValues( filters );
  714. // set filter for Isotope
  715. $grid.isotope({ filter: filterValue });
  716. });
  717.  
  718. // change is-checked class on buttons
  719. $('.button-group').each( function( i, buttonGroup ) {
  720. var $buttonGroup = $( buttonGroup );
  721. $buttonGroup.on( 'click', 'button', function() {
  722. $buttonGroup.find('.ischecked').removeClass('ischecked');
  723. $( this ).addClass('ischecked');
  724. });
  725. });
  726.  
  727. });
  728.  
  729. // flatten object by concatting values
  730. function concatValues( obj ) {
  731. var value = '';
  732. for ( var prop in obj ) {
  733. value += obj[ prop ];
  734. }
  735. return value;
  736. }
  737.  
  738. </script>
  739.  
  740. </body>
  741.  
  742. </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!