API tools faq
paste
Advertisement
HendrixRPH

HendrixRPH Character Page Theme 01 (Condensed Buttons)

HendrixRPH
Jun 18th, 2015
5,675
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.81 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>Character Page Test</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:#333;
  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 #555;
  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 #555;
  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 #555;
  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:#555;
  140. border:#777 1px solid;
  141. color:#eee;
  142. }
  143.  
  144. .button.ischecked {
  145. background-color:#555!important;
  146. border:#777 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>Characters</h1> <!-- Page title goes here. -->
  294.  
  295. <div class="nav">
  296. <!-- Navigation links, change them to whatever you want. -->
  297. <a href="http://www.tumblr.com">link 1</a>
  298. <a href="http://www.tumblr.com">link 2</a>
  299. <a href="http://www.tumblr.com">link 3</a>
  300. </div>
  301.  
  302. <div class="desc">
  303. <p>Description goes here! You can sort by multiple criteria, give it a shot.</p>
  304. </div>
  305.  
  306. <!--
  307.  
  308. Okay, changing the filters is potentially the most difficult part. I'll try to explain how you do it.
  309.  
  310. *** ADD A NEW OPTION TO AN EXISTING GROUP:
  311.  
  312. 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:
  313.  
  314. --
  315.  
  316. <h2>Species</h2>
  317. <div class="button-group" data-filter-group="species">
  318. <button data-filter="" class="button ischecked">any</button>
  319. <button data-filter=".human" class="button">human</button>
  320. <button data-filter=".werewolf" class="button">werewolf</button>
  321. <button data-filter=".vampire" class="button">vampire</button>
  322. </div>
  323.  
  324. --
  325.  
  326. 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.
  327.  
  328. --
  329.  
  330. <h2>Species</h2>
  331. <div class="button-group" data-filter-group="species">
  332. <button data-filter="" class="button ischecked">any</button>
  333. <button data-filter=".human" class="button">human</button>
  334. <button data-filter=".werewolf" class="button">werewolf</button>
  335. <button data-filter=".vampire" class="button">vampire</button>
  336. <button data-filter=".vampire" class="button">vampire</button>
  337. </div>
  338.  
  339. --
  340.  
  341. 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:
  342.  
  343. --
  344.  
  345. Original: <button data-filter=".vampire" class="button">vampire</button>
  346. New version: <button data-filter=".ghost" class="button">ghost</button>
  347. --
  348.  
  349. And that's it! Everything should work.
  350.  
  351.  
  352. *** REMOVE AN OPTION FROM AN EXISTING GROUP
  353.  
  354. This one's simple. Just find the code for the button that you want to remove and delete that one line. You're done!
  355.  
  356.  
  357. *** ADD A NEW FILTER GROUP
  358.  
  359. 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:
  360.  
  361. --
  362.  
  363. <h2>Species</h2>
  364. <div class="button-group" data-filter-group="species">
  365. <button data-filter="" class="button ischecked">any</button>
  366. <button data-filter=".human" class="button">human</button>
  367. <button data-filter=".werewolf" class="button">werewolf</button>
  368. <button data-filter=".vampire" class="button">vampire</button>
  369. </div>
  370.  
  371. --
  372.  
  373. Change the text between the <h2> tags to the title of your filter, in this case "Grade."
  374.  
  375. Next, we need to give the filter group a new official name. In the div tag, the one that looks like this:
  376.  
  377. <div class="button-group" data-filter-group="species">
  378.  
  379. Replace the content of data-filter-group="___" with whatever you want to call your group. In this case, grade works.
  380.  
  381. 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.
  382.  
  383. 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.
  384.  
  385. For the data-filter, do not have any spaces. If you have multiple words, seperate them by dashes. Add and remove options as necessary.
  386.  
  387. In the end, it should look like this:
  388.  
  389. --
  390.  
  391. <h2>Grade</h2>
  392. <div class="button-group" data-filter-group="grade">
  393. <button data-filter="" class="button ischecked">any</button>
  394. <button data-filter=".freshman" class="button">freshman</button>
  395. <button data-filter=".sophomore" class="button">sophomore</button>
  396. <button data-filter=".junior" class="button">junior</button>
  397. <button data-filter=".senior" class="button">senior</button>
  398. </div>
  399.  
  400. --
  401.  
  402. 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.
  403.  
  404.  
  405. *** REMOVE A FILTER GROUP
  406.  
  407. 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.
  408.  
  409. -->
  410.  
  411. <div class="filters">
  412. <h2>Status</h2>
  413. <div class="button-group" data-filter-group="status">
  414. <button data-filter="" class="button ischecked">any</button>
  415. <button data-filter=".open" class="button">open</button>
  416. <button data-filter=".taken" class="button">taken</button>
  417. </div>
  418.  
  419. <h2>Gender</h2>
  420. <div class="button-group" data-filter-group="gender">
  421. <button data-filter="" class="button ischecked">any</button>
  422. <button data-filter=".male" class="button">male</button>
  423. <button data-filter=".female" class="button">female</button>
  424. <button data-filter=".nb" class="button">non-binary</button>
  425. </div>
  426.  
  427. <h2>Species</h2>
  428. <div class="button-group" data-filter-group="species">
  429. <button data-filter="" class="button ischecked">any</button>
  430. <button data-filter=".human" class="button">human</button>
  431. <button data-filter=".werewolf" class="button">werewolf</button>
  432. <button data-filter=".vampire" class="button">vampire</button>
  433. </div>
  434. </div>
  435.  
  436. </div>
  437.  
  438. <div class="wrapper"> <!-- All of your character boxes should go in here. -->
  439.  
  440. <!-- BEGIN COPY PASTE -->
  441. <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.
  442. Don't remove the chara tag! That will break the code. -->
  443. <div class="charatitle"><span>
  444. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  445. <p>Open Male Human</p>
  446. <p>Lorem Ipsum</p>
  447. </span></div>
  448. <div class="charahover">
  449. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  450. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  451. <ul>
  452. <li>Here's</li>
  453. <li>a</li>
  454. <li>list</li>
  455. </ul>
  456. <ol>
  457. <li>Here's</li>
  458. <li>another</li>
  459. <li>list</li>
  460. </ol>
  461. <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>
  462. <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>
  463. </div>
  464. <img src="https://s-media-cache-ak0.pinimg.com/236x/fa/ea/27/faea2726de1dbffb61bb38ca515a77dc.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  465. </div>
  466. <!-- END COPY PASTE -->
  467.  
  468. <!-- BEGIN COPY PASTE -->
  469. <div class="chara taken male human">
  470. <div class="charatitle"><span>
  471. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  472. <p>Taken Male Human</p>
  473. <p>Lorem Ipsum</p>
  474. </span></div>
  475. <div class="charahover">
  476. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  477. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  478. <ul>
  479. <li>Here's</li>
  480. <li>a</li>
  481. <li>list</li>
  482. </ul>
  483. <ol>
  484. <li>Here's</li>
  485. <li>another</li>
  486. <li>list</li>
  487. </ol>
  488. <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>
  489. <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>
  490. </div>
  491. <img src="http://25.media.tumblr.com/c7cc0c00106b2deb09a73babff4845a6/tumblr_mf5lr9phAB1rxyf78o1_250.png" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  492. </div>
  493. <!-- END COPY PASTE -->
  494.  
  495. <!-- BEGIN COPY PASTE -->
  496. <div class="chara open female human">
  497. <div class="charatitle"><span>
  498. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  499. <p>Open Female Human</p>
  500. <p>Lorem Ipsum</p>
  501. </span></div>
  502. <div class="charahover">
  503. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  504. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  505. <ul>
  506. <li>Here's</li>
  507. <li>a</li>
  508. <li>list</li>
  509. </ul>
  510. <ol>
  511. <li>Here's</li>
  512. <li>another</li>
  513. <li>list</li>
  514. </ol>
  515. <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>
  516. <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>
  517. </div>
  518. <img src="https://s-media-cache-ak0.pinimg.com/236x/b4/9e/ab/b49eaba85af902099b6f943395aad08a.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  519. </div>
  520. <!-- END COPY PASTE -->
  521.  
  522. <!-- BEGIN COPY PASTE -->
  523. <div class="chara taken female human">
  524. <div class="charatitle"><span>
  525. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  526. <p>Taken Female Human</p>
  527. <p>Lorem Ipsum</p>
  528. </span></div>
  529. <div class="charahover">
  530. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  531. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  532. <ul>
  533. <li>Here's</li>
  534. <li>a</li>
  535. <li>list</li>
  536. </ul>
  537. <ol>
  538. <li>Here's</li>
  539. <li>another</li>
  540. <li>list</li>
  541. </ol>
  542. <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>
  543. <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>
  544. </div>
  545. <img src="http://40.media.tumblr.com/faeef3a9535c04908fbb7739dee30dbe/tumblr_n8y2r0UJF61r99lyzo1_500.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  546. </div>
  547. <!-- END COPY PASTE -->
  548.  
  549. <!-- BEGIN COPY PASTE -->
  550. <div class="chara open nb human">
  551. <div class="charatitle"><span>
  552. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  553. <p>Open Non-binary Human</p>
  554. <p>Lorem Ipsum</p>
  555. </span></div>
  556. <div class="charahover">
  557. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  558. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  559. <ul>
  560. <li>Here's</li>
  561. <li>a</li>
  562. <li>list</li>
  563. </ul>
  564. <ol>
  565. <li>Here's</li>
  566. <li>another</li>
  567. <li>list</li>
  568. </ol>
  569. <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>
  570. <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>
  571. </div>
  572. <img src="http://galoremag.com/wp-content/uploads/2014/09/Erika-6.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  573. </div>
  574. <!-- END COPY PASTE -->
  575.  
  576. <!-- BEGIN COPY PASTE -->
  577. <div class="chara taken nb human">
  578. <div class="charatitle"><span>
  579. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  580. <p>Taken Non-binary Human</p>
  581. <p>Lorem Ipsum</p>
  582. </span></div>
  583. <div class="charahover">
  584. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  585. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  586. <ul>
  587. <li>Here's</li>
  588. <li>a</li>
  589. <li>list</li>
  590. </ul>
  591. <ol>
  592. <li>Here's</li>
  593. <li>another</li>
  594. <li>list</li>
  595. </ol>
  596. <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>
  597. <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>
  598. </div>
  599. <img src="http://cdn.papermag.com/uploaded_images/look_03_005_web.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  600. </div>
  601. <!-- END COPY PASTE -->
  602.  
  603. <!-- BEGIN COPY PASTE -->
  604. <div class="chara open male werewolf">
  605. <div class="charatitle"><span>
  606. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  607. <p>Open Male Werewolf</p>
  608. <p>Lorem Ipsum</p>
  609. </span></div>
  610. <div class="charahover">
  611. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  612. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  613. <ul>
  614. <li>Here's</li>
  615. <li>a</li>
  616. <li>list</li>
  617. </ul>
  618. <ol>
  619. <li>Here's</li>
  620. <li>another</li>
  621. <li>list</li>
  622. </ol>
  623. <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>
  624. <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>
  625. </div>
  626. <img src="http://orig12.deviantart.net/5d37/f/2014/343/e/f/werewolf_big_by_7wood-d899pks.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  627. </div>
  628. <!-- END COPY PASTE -->
  629.  
  630. <!-- BEGIN COPY PASTE -->
  631. <div class="chara taken male werewolf">
  632. <div class="charatitle"><span>
  633. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  634. <p>Taken Male Werewolf</p>
  635. <p>Lorem Ipsum</p>
  636. </span></div>
  637. <div class="charahover">
  638. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  639. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  640. <ul>
  641. <li>Here's</li>
  642. <li>a</li>
  643. <li>list</li>
  644. </ul>
  645. <ol>
  646. <li>Here's</li>
  647. <li>another</li>
  648. <li>list</li>
  649. </ol>
  650. <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>
  651. <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>
  652. </div>
  653. <img src="https://s-media-cache-ak0.pinimg.com/236x/e1/15/ca/e115ca3b9beb6587095737c10fdd7a5e.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  654. </div>
  655. <!-- END COPY PASTE -->
  656.  
  657. <!-- BEGIN COPY PASTE -->
  658. <div class="chara open female werewolf">
  659. <div class="charatitle"><span>
  660. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  661. <p>Open Female Werewolf</p>
  662. <p>Lorem Ipsum</p>
  663. </span></div>
  664. <div class="charahover">
  665. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  666. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  667. <ul>
  668. <li>Here's</li>
  669. <li>a</li>
  670. <li>list</li>
  671. </ul>
  672. <ol>
  673. <li>Here's</li>
  674. <li>another</li>
  675. <li>list</li>
  676. </ol>
  677. <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>
  678. <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>
  679. </div>
  680. <img src="https://ploogmissingpieces.files.wordpress.com/2012/08/werewolf-art.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  681. </div>
  682. <!-- END COPY PASTE -->
  683.  
  684. <!-- BEGIN COPY PASTE -->
  685. <div class="chara taken female werewolf">
  686. <div class="charatitle"><span>
  687. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  688. <p>Taken Female Werewolf</p>
  689. <p>Lorem Ipsum</p>
  690. </span></div>
  691. <div class="charahover">
  692. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  693. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  694. <ul>
  695. <li>Here's</li>
  696. <li>a</li>
  697. <li>list</li>
  698. </ul>
  699. <ol>
  700. <li>Here's</li>
  701. <li>another</li>
  702. <li>list</li>
  703. </ol>
  704. <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>
  705. <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>
  706. </div>
  707. <img src="http://www.creaturebrush.com/images2013/CA_werewolf_TH.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  708. </div>
  709. <!-- END COPY PASTE -->
  710.  
  711. <!-- BEGIN COPY PASTE -->
  712. <div class="chara open nb werewolf">
  713. <div class="charatitle"><span>
  714. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  715. <p>Open Non-binary Werewolf</p>
  716. <p>Lorem Ipsum</p>
  717. </span></div>
  718. <div class="charahover">
  719. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  720. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  721. <ul>
  722. <li>Here's</li>
  723. <li>a</li>
  724. <li>list</li>
  725. </ul>
  726. <ol>
  727. <li>Here's</li>
  728. <li>another</li>
  729. <li>list</li>
  730. </ol>
  731. <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>
  732. <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>
  733. </div>
  734. <img src="http://orig00.deviantart.net/8743/f/2011/137/a/3/werewolf_by_alanvadell-d3glafs.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  735. </div>
  736. <!-- END COPY PASTE -->
  737.  
  738. <!-- BEGIN COPY PASTE -->
  739. <div class="chara taken nb werewolf">
  740. <div class="charatitle"><span>
  741. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  742. <p>Taken Non-binary Werewolf</p>
  743. <p>Lorem Ipsum</p>
  744. </span></div>
  745. <div class="charahover">
  746. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  747. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  748. <ul>
  749. <li>Here's</li>
  750. <li>a</li>
  751. <li>list</li>
  752. </ul>
  753. <ol>
  754. <li>Here's</li>
  755. <li>another</li>
  756. <li>list</li>
  757. </ol>
  758. <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>
  759. <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>
  760. </div>
  761. <img src="http://www.paulmudie.com/images/howl-of-the-werewolf.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  762. </div>
  763. <!-- END COPY PASTE -->
  764.  
  765. <!-- BEGIN COPY PASTE -->
  766. <div class="chara open male vampire">
  767. <div class="charatitle"><span>
  768. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  769. <p>Open Male Vampire</p>
  770. <p>Lorem Ipsum</p>
  771. </span></div>
  772. <div class="charahover">
  773. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  774. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  775. <ul>
  776. <li>Here's</li>
  777. <li>a</li>
  778. <li>list</li>
  779. </ul>
  780. <ol>
  781. <li>Here's</li>
  782. <li>another</li>
  783. <li>list</li>
  784. </ol>
  785. <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>
  786. <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>
  787. </div>
  788. <img src="http://i975.photobucket.com/albums/ae237/heaventemptress/EXTRABGSSSSSSSSSSSSSS/fantasy-dark--Rocks-My-World--fantasy--vampire--favorites--male--vamp--satisfied--blood--Goth-and-Special-Pics--Other-2--man--Halloween-Imag.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  789. </div>
  790. <!-- END COPY PASTE -->
  791.  
  792. <!-- BEGIN COPY PASTE -->
  793. <div class="chara taken male vampire">
  794. <div class="charatitle"><span>
  795. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  796. <p>Taken Male Vampire</p>
  797. <p>Lorem Ipsum</p>
  798. </span></div>
  799. <div class="charahover">
  800. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  801. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  802. <ul>
  803. <li>Here's</li>
  804. <li>a</li>
  805. <li>list</li>
  806. </ul>
  807. <ol>
  808. <li>Here's</li>
  809. <li>another</li>
  810. <li>list</li>
  811. </ol>
  812. <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>
  813. <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>
  814. </div>
  815. <img src="http://images6.fanpop.com/image/polls/1254000/1254924_1375018786939_full.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  816. </div>
  817. <!-- END COPY PASTE -->
  818.  
  819. <!-- BEGIN COPY PASTE -->
  820. <div class="chara open female vampire">
  821. <div class="charatitle"><span>
  822. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  823. <p>Open Female Vampire</p>
  824. <p>Lorem Ipsum</p>
  825. </span></div>
  826. <div class="charahover">
  827. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  828. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  829. <ul>
  830. <li>Here's</li>
  831. <li>a</li>
  832. <li>list</li>
  833. </ul>
  834. <ol>
  835. <li>Here's</li>
  836. <li>another</li>
  837. <li>list</li>
  838. </ol>
  839. <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>
  840. <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>
  841. </div>
  842. <img src="http://evilladies.com/http://evilladies.com/wp-content/uploads/Woman-vampire-picture.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  843. </div>
  844. <!-- END COPY PASTE -->
  845.  
  846. <!-- BEGIN COPY PASTE -->
  847. <div class="chara taken female vampire">
  848. <div class="charatitle"><span>
  849. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  850. <p>Taken Female Vampire</p>
  851. <p>Lorem Ipsum</p>
  852. </span></div>
  853. <div class="charahover">
  854. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  855. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  856. <ul>
  857. <li>Here's</li>
  858. <li>a</li>
  859. <li>list</li>
  860. </ul>
  861. <ol>
  862. <li>Here's</li>
  863. <li>another</li>
  864. <li>list</li>
  865. </ol>
  866. <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>
  867. <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>
  868. </div>
  869. <img src="http://img08.deviantart.net/c2be/i/2013/132/c/a/vampire_girl_6_by_marija_buljeta-d6504nt.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  870. </div>
  871. <!-- END COPY PASTE -->
  872.  
  873. <!-- BEGIN COPY PASTE -->
  874. <div class="chara open nb vampire">
  875. <div class="charatitle"><span>
  876. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  877. <p>Open Non-binary Vampire</p>
  878. <p>Lorem Ipsum</p>
  879. </span></div>
  880. <div class="charahover">
  881. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  882. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  883. <ul>
  884. <li>Here's</li>
  885. <li>a</li>
  886. <li>list</li>
  887. </ul>
  888. <ol>
  889. <li>Here's</li>
  890. <li>another</li>
  891. <li>list</li>
  892. </ol>
  893. <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>
  894. <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>
  895. </div>
  896. <img src="http://img08.deviantart.net/191f/i/2010/202/7/9/real_vampire_by_illogan.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  897. </div>
  898. <!-- END COPY PASTE -->
  899.  
  900. <!-- BEGIN COPY PASTE -->
  901. <div class="chara taken nb vampire">
  902. <div class="charatitle"><span>
  903. <!-- This is where the title text goes. Keep it in the p tags. It looks best with 2 lines of text.-->
  904. <p>Taken Non-binary Vampire</p>
  905. <p>Lorem Ipsum</p>
  906. </span></div>
  907. <div class="charahover">
  908. <p>Extra info goes here! Use a p tag for every new paragraph.</p>
  909. <p><strong>Bold</strong>, <em>italics</em>, <del>strikethrough</del>, <a href="/">link</a></p>
  910. <ul>
  911. <li>Here's</li>
  912. <li>a</li>
  913. <li>list</li>
  914. </ul>
  915. <ol>
  916. <li>Here's</li>
  917. <li>another</li>
  918. <li>list</li>
  919. </ol>
  920. <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>
  921. <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>
  922. </div>
  923. <img src="http://www.grimerica.ca/wp-content/uploads/2013/06/20130615-190500.jpg" class="charaimg"> <!-- Put the url for your image between the quotes in src="". Images will look best at 200px by 250px. -->
  924. </div>
  925. <!-- END COPY PASTE -->
  926.  
  927.  
  928.  
  929.  
  930.  
  931. </div> <!-- Don't put any character boxes after this tag! -->
  932. <a href="http://hendrixrph.tumblr.com"><div class="credit">hendrixrph</div></a>
  933.  
  934.  
  935. <!-- All the filtering scripts. No need to mess with these unless you know what you're doing. -->
  936. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  937. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
  938. <script>
  939.  
  940. // external js: isotope.pkgd.js
  941.  
  942. $(document).ready( function() {
  943. // init Isotope
  944. var $grid = $('.wrapper').isotope({
  945. itemSelector: '.chara'
  946. });
  947.  
  948. // store filter for each group
  949. var filters = {};
  950.  
  951. $('.filters').on( 'click', '.button', function() {
  952. var $this = $(this);
  953. // get group key
  954. var $buttonGroup = $this.parents('.button-group');
  955. var filterGroup = $buttonGroup.attr('data-filter-group');
  956. // set filter for group
  957. filters[ filterGroup ] = $this.attr('data-filter');
  958. // combine filters
  959. var filterValue = concatValues( filters );
  960. // set filter for Isotope
  961. $grid.isotope({ filter: filterValue });
  962. });
  963.  
  964. // change is-checked class on buttons
  965. $('.button-group').each( function( i, buttonGroup ) {
  966. var $buttonGroup = $( buttonGroup );
  967. $buttonGroup.on( 'click', 'button', function() {
  968. $buttonGroup.find('.ischecked').removeClass('ischecked');
  969. $( this ).addClass('ischecked');
  970. });
  971. });
  972.  
  973. });
  974.  
  975. // flatten object by concatting values
  976. function concatValues( obj ) {
  977. var value = '';
  978. for ( var prop in obj ) {
  979. value += obj[ prop ];
  980. }
  981. return value;
  982. }
  983.  
  984. </script>
  985.  
  986. </body>
  987.  
  988. </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!