API tools faq
paste
Advertisement
cvndythemes

Titans Filtering Masterlist

cvndythemes
Oct 17th, 2023
56
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Titans: Families</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // TITANS RP PAGE PACK - FAMILIES PAGE
  9.  
  10. Designed by Ethereal Themes
  11. ethereal-themes.tumblr.com
  12. ⓒ 2016 - 2023
  13. Static Preview Images via unsplash.com and copyrighted to their respective owners:
  14. Terrah Holly @tlholly
  15. Zeyneo Sumer @zeynorjane
  16. Davyd Markovskyi @marik_m
  17. Christian Kock @xt1an
  18.  
  19. >> TERMS OF USE
  20.  
  21. Do NOT remove the credit
  22. Do NOT claim as your own
  23.  
  24. *You can move the credit, but leave it visible
  25. *Edit as much as you'd like
  26. *Feel free to ask about basic customization
  27. *Page suggestions always welcomed
  28.  
  29. >> COLOR CHEAT SHEET:
  30.  
  31. Black - #000000
  32. White - #ffffff
  33. Background - #f9f9f9
  34. Text - #000000
  35. Borders - #e5e5e5
  36. Red - #97211a
  37. Pale Green - #929d87
  38. Pale Baby Blue - #86a8a1
  39.  
  40. To add a background image, search:
  41. BACKGROUND IMAGE HERE
  42.  
  43. You may also go through the css and change specific sections
  44.  
  45. -->
  46.  
  47.  
  48. <!-- SCRIPTS -->
  49.  
  50. <!-- jQuery Ver. 3.5.1 -->
  51. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  52.  
  53. <!-- Jam Icons: https://jam-icons.com/ -->
  54. <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
  55.  
  56. <!-- Tippy JS by Bootstrap: https://tippyjs.bootcss.com -->
  57. <script src="https://unpkg.com/popper.js@1"></script>
  58. <script src="https://unpkg.com/tippy.js@5"></script>
  59. <script>
  60. $(document).ready(function(){
  61. tippy('[title]', {
  62. arrow: false,
  63. placement: 'bottom',
  64. delay: 5,
  65. distance: 10,
  66. maxWidth: 300,
  67.  
  68. followCursor: true,
  69. allowHTML: true,
  70. theme: 'custom',
  71. ignoreAttributes: true,
  72. content(reference) {
  73. const title = reference.getAttribute('title');
  74. reference.removeAttribute('title');
  75. return title;
  76. },
  77. });
  78. });
  79. </script>
  80.  
  81. <!--------------------------------------------
  82. ----------------------------------------------
  83.  
  84. These are the same fonts as the RHEA theme, you can use any you like by adding the name by searching
  85.  
  86. BODY {
  87.  
  88. and swapping out KARLA on the font name (example shown below):
  89.  
  90. font-family:'Karla', sans-serif;
  91.  
  92. ----------------------------------------------
  93. --------------------------------------------->
  94. <!-- Google Fonts: Font Plugins: https://fonts.google.com/ -->
  95. <link rel="preconnect" href="https://fonts.googleapis.com">
  96. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  97. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,600&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  98. <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  99.  
  100.  
  101. <!-- STYLESHEET -->
  102. <style type="text/css">
  103.  
  104. /* --- SCROLLBAR ---*/
  105.  
  106. ::-webkit-scrollbar-thumb {background-color:#000000;border:3px solid #f9f9f9;}
  107.  
  108. ::-webkit-scrollbar {background:#ddd;width:7px;border:3px solid #f9f9f9;}
  109.  
  110. div::-webkit-scrollbar-thumb {border:0px;width:0px;}
  111.  
  112. div::-webkit-scrollbar {border:0px;width:0px;}
  113.  
  114. div::-webkit-scrollbar-track {border:0px;width:0px;}
  115.  
  116. /* --- SELECTION ---*/
  117.  
  118. ::-moz-selection {color:#ffffff;background:#97211a;opacity:1;}
  119.  
  120. ::selection {color:#ffffff;background:#97211a;opacity:1;}
  121.  
  122. /* --- TOOLTIPS ---*/
  123.  
  124. .tippy-tooltip.custom-theme {
  125. $tooltipBg: #ffffff;
  126. background-color: #ffffff;
  127. color:#000000;
  128. border-radius:0px;
  129. letter-spacing:0.5px;
  130. margin:10px 0px 0px 50px;
  131. }
  132.  
  133. .tippy-content {
  134. padding:0px 5px;
  135. text-transform:uppercase;
  136. font-size:calc(10.5pt - 1pt);
  137. border:1px solid #ebebeb;
  138. }
  139.  
  140. /* --- TUMBLR TOOLS --- */
  141.  
  142. iframe.tmblr-iframe {
  143. position:fixed;
  144. z-index:14!important;
  145. top:10px!important;
  146. right:10px!important;
  147. opacity:0.5;
  148. padding-right:0px;
  149. transform:scale(0.47);
  150. transform-origin:100% 0;
  151. -webkit-transform:scale(0.47);
  152. -webkit-transform-origin:100% 0;
  153. -o-transform:scale(0.47);
  154. -o-transform-origin:100% 0;
  155. -moz-transform:scale(0.47);
  156. -moz-transform-origin:100% 0;
  157. -ms-transform:scale(0.47);
  158. -ms-transform-origin:100% 0;
  159. transition:.2s ease-in-out;
  160. -webkit-transition:.2s ease-in-out;
  161. -moz-transition:.2s ease-in-out;
  162.  
  163. /* --- CHANGE 1 TO 0 BELOW FOR LIGHT TUMBLR TOOLS --- */
  164.  
  165. filter:invert(1);
  166. -webkit-filter:invert(1);
  167. -o-filter:invert(1);
  168. -moz-filter:invert(1);
  169. -ms-filter:invert(1);
  170.  
  171. /* --- CHANGE 1 TO 0 BELOW FOR LIGHT TUMBLR TOOLS --- */
  172. }
  173.  
  174. /* --- BODY --- */
  175.  
  176. body {
  177. margin: 0px;
  178. padding: 0px;
  179. font-family:'Raleway', sans-serif;
  180. color:#000000;
  181. font-size:10.5pt;
  182. line-height:160%;
  183. font-weight:normal;
  184. word-wrap:normal;
  185. text-align:left;
  186. background:#f9f9f9;
  187. -webkit-font-feature-settings: "lnum";
  188. -moz-font-feature-settings: "lnum";
  189. font-feature-settings: "lnum";
  190. }
  191.  
  192. a {
  193. color:#000000;
  194. text-decoration:none;
  195. border-bottom:0px;
  196. padding:0px;
  197. cursor:help;
  198. transition:0.2s ease-in-out;
  199. -webkit-transition:0.2s ease-in-out;
  200. -moz-transition:0.2s ease-in-out;
  201. }
  202.  
  203. small, big {font-size:10.5pt;}
  204.  
  205. b {font-weight:bold;color:#97211a;}
  206.  
  207. i {font-style:italic;font-weight:bold;color:#86a8a1;}
  208.  
  209. em {font-style:normal;color:#929d87;}
  210.  
  211. hr.divider, hr, hr.separator {display:block;margin:0.5em auto;border-style:inset;border-color:#e5e5e5;border-bottom:1px;}
  212.  
  213. pre {
  214. white-space:pre-wrap;
  215. white-space:-moz-pre-wrap;
  216. white-space:-pre-wrap;
  217. white-space:-o-pre-wrap;
  218. word-wrap:break-word;
  219. font-family:'Raleway', sans-serif;
  220. color:#ffffff;
  221. font-size:10.5pt;
  222. padding:10px;
  223. border:0px!important;
  224. margin:10px 0px;
  225. background:#929d87;
  226. }
  227.  
  228. ul, ol, li {text-align:left;}
  229.  
  230. ul, ol {margin:0px;padding:0;}
  231.  
  232. ul li, ol li {margin-bottom:5px;}
  233.  
  234. blockquote {
  235. padding:10px 0px 10px 15px;
  236. text-decoration:none;
  237. border-left:2px solid #97211a;
  238. margin:10px 0px 10px 10px;
  239. }
  240.  
  241. blockquote a, blockquote b, blockquote i, blockquote em {color:#000000;}
  242.  
  243. blockquote img {max-width:100%;display:block;margin-bottom:5px;}
  244.  
  245. .et {
  246. position:fixed;
  247. height:20px;
  248. width:20px;
  249. line-height:22px;
  250. right:10px;
  251. bottom:10px;
  252. opacity:0.2;
  253. text-align:center;
  254. font-size:7pt;
  255. background:#000000;
  256. border-radius:50%;
  257. z-index:10;
  258. }
  259.  
  260. .et a {text-transform:uppercase;color:#ffffff;}
  261.  
  262. /* --- TOPBAR --- */
  263.  
  264. .topbar {
  265. position:fixed;
  266. top:0px;
  267. left:0px;
  268. width:100%;
  269. padding:25px 0px;
  270. text-align:center;
  271. z-index:7;
  272. border-bottom:1px solid #e5e5e5;
  273. background:#ffffff;
  274. }
  275.  
  276. .topbar a {position:relative;text-transform:uppercase;margin:0px 20px;vertical-align:middle;padding:4px 2px;color:#000000;border-top:2px solid transparent;border-bottom:2px solid transparent;}
  277.  
  278. .topbar a:nth-child(3n+1):hover {border-top:2px solid #97211a;border-bottom:2px solid #97211a;}
  279.  
  280. .topbar a:nth-child(3n+2):hover {border-top:2px solid #929d87;border-bottom:2px solid #929d87;}
  281.  
  282. .topbar a:nth-child(3n+3):hover {border-top:2px solid #86a8a1;border-bottom:2px solid #86a8a1;}
  283.  
  284. /* --- FILTER BAR --- */
  285.  
  286. .filter_cont {
  287. position:fixed;
  288. top:0px;
  289. left:0px;
  290. width:100%;
  291. padding:25px 0px;
  292. text-align:center;
  293. z-index:7;
  294. border-bottom:1px solid #e5e5e5;
  295. background:#ffffff;
  296. }
  297.  
  298. /* --- FILTERS --- */
  299.  
  300. .filters_cont {
  301. position:fixed;
  302. top:79px;
  303. left:30px;
  304. width:200px;
  305. height:calc(100% - 100px);
  306. padding:20px;
  307. text-transform:lowercase;
  308. z-index:10;
  309. }
  310.  
  311. .filters, .filters_cont h1, .filters button, .buttons b, .buttons b:before {color:#000000;}
  312.  
  313. .filters_cont h1 {
  314. font-family: 'Raleway', serif;
  315. text-align:left;
  316. text-transform:uppercase;
  317. font-size:14pt;
  318. font-weight:400;
  319. letter-spacing:1px;
  320. margin-top:20px;
  321. margin-bottom:10px;
  322. }
  323.  
  324. .filters_cont h1:first-of-type {margin-top:0px;}
  325.  
  326. .filters {
  327. position:relative;
  328. top:50%;
  329. margin-top:-40px;
  330. width:160px;
  331. padding:20px;
  332. text-transform:lowercase;
  333. transform:translateY(-50%);
  334. display:inline-block;
  335. border:1px solid #e5e5e5;
  336. background:#ffffff;
  337. }
  338.  
  339. .filters button {
  340. display:block;
  341. font-size:9.5pt;
  342. text-align:left;
  343. padding:0px;
  344. border:none;
  345. text-decoration:none;
  346. margin-bottom:5px;
  347. text-transform:lowercase;
  348. background-color:transparent;
  349. }
  350.  
  351. .filters button:active {border-color:transparent;}
  352.  
  353. button.active.focus, button.active:focus, button.focus, button:active.focus, button:active:focus, button:focus {outline:none;box-shadow:none;background-color:transparent;}
  354.  
  355. .buttons b:before {
  356. display: inline-block;
  357. margin-right:5px;
  358. width:15px;
  359. font-family:jam-icons;
  360. content: '\ebe8';
  361. vertical-align: middle;
  362. text-align: left;
  363. font-weight:400;
  364. }
  365.  
  366. .buttons b {position:relative;left:-15px;font-weight:400;}
  367.  
  368. .filters .button:before {
  369. display:inline-block;
  370. width:15px;
  371. font-family:jam-icons;
  372. content:'';
  373. vertical-align:middle;
  374. text-align:left;
  375. }
  376.  
  377. .filters .button.is-checked:before {
  378. content:'\e9a7';
  379. color:#87a8a1;
  380. font-weight:700;
  381. z-index:2;
  382. }
  383.  
  384. /* --- CONTAINER --- */
  385.  
  386. #container {position:absolute;top:120px;left:280px;width:calc(100% - 200px - 130px);text-align:center;}
  387.  
  388. .content {margin:0 auto;}
  389.  
  390. /* --- ITEMS --- */
  391.  
  392. .item {
  393. display:inline-block;
  394. width:200px;
  395. height:350px;
  396. border:1px solid #e5e5e5;
  397. margin:0px 20px 45px 20px;
  398. overflow:hidden;
  399. background:#ffffff;
  400. }
  401.  
  402. .item_image {width:200px;height:170px;margin:0px 0px 10px 0px;}
  403.  
  404. .item_image img {width:200px;height:170px;margin:0;}
  405.  
  406. .item_section {text-align:left;height:115px;padding:20px 15px;overflow-y:scroll;}
  407.  
  408. .item_section h1 {
  409. width:185px;
  410. margin:-20px 0px 20px -20px;
  411. padding:10px;
  412. text-align:center;
  413. color:#ffffff;
  414. text-transform:uppercase;
  415. font-size:16pt;
  416. border-bottom:1px solid #e5e5e5;
  417. font-weight:400;
  418. }
  419.  
  420. .item:nth-of-type(6n+1) .item_section h1 {background:#97211a;}
  421. .item:nth-of-type(6n+2) .item_section h1 {background:#919d87;}
  422. .item:nth-of-type(6n+3) .item_section h1 {background:#87a8a1;}
  423. .item:nth-of-type(6n+4) .item_section h1 {background:#87a8a1;}
  424. .item:nth-of-type(6n+5) .item_section h1 {background:#97211a;}
  425. .item:nth-of-type(6n+6) .item_section h1 {background:#919d87;}
  426.  
  427. .item_section h2, .item_section h3 {
  428. text-align:left;
  429. color:#000000;
  430. text-transform:uppercase;
  431. font-size:16pt;
  432. margin:20px 0px 20px 0px;
  433. font-weight:400;
  434. }
  435.  
  436. </style>
  437.  
  438. </head>
  439. <body>
  440.  
  441.  
  442.  
  443.  
  444.  
  445. <!-- DO NOT EDIT -->
  446. <div class="et"><a href="https://ethereal-themes.tumblr.com">et</a></div>
  447.  
  448.  
  449.  
  450.  
  451.  
  452.  
  453.  
  454. <!---------------------------------------------
  455.  
  456. -----------------------------------------------
  457.  
  458. START TOPBAR
  459.  
  460. -----------------------------------------------
  461.  
  462. ---------------------------------------------->
  463. <div class="topbar">
  464.  
  465. <a href="/">Home</a>
  466. <a href="/ask">Ask</a>
  467. <a href="https://">Link</a>
  468. <a href="https://">Link</a>
  469.  
  470.  
  471. <a href="https://">Link</a>
  472. <a href="https://">Link</a>
  473. <a href="https://">Link</a>
  474. <a href="https://">Link</a>
  475.  
  476. </div>
  477. <!-- END TOPBAR ----------------->
  478.  
  479.  
  480.  
  481.  
  482.  
  483.  
  484.  
  485.  
  486.  
  487.  
  488.  
  489. <!----------------------------------------
  490.  
  491. ------------------------------------------
  492.  
  493. START FILTERS:
  494.  
  495. HOW TO
  496.  
  497. //
  498.  
  499. TO ADD FILTERING TO THE ACTUAL ITEM BLOCKS SEE THE ITEM CONTAINER RIGHT BELOW THIS FILTERING TAGS BAR TO LINK THESE FILTER TAGS WITH YOUR ITEMS
  500.  
  501. Title your Catergory between <h1> and </h1>
  502.  
  503. Under the Catergory title, there's the main button group codes, you can name these after the catergories or simply number them, they group the filter tags so if you click "all" on a different catergory, it doesn't completely reset the entire page
  504.  
  505. For the main tag (eg "All") the default code is:
  506.  
  507. <button class="button is-checked" data-filter="">
  508.  
  509. the "is-checked" is the intitial checked box. For all other sub tags use this code for EACH new filter
  510.  
  511. <button class="button" data-filter=".filter"><b>Filter Name</b></button>
  512.  
  513. Change the .filter to the filter link you want, ie location, type of location, hiring or not, etc. I set my preview page as a locations / occupation page, but you can use this for skeletons, wanted / banned, etc
  514.  
  515. For example here are some filter tags I'd need
  516.  
  517. <button class="button" data-filter=".nyhavn"><b>Nyhavn</b></button>
  518. <button class="button" data-filter=".fooddrink"><b>Food & Drink</b></button>
  519. <button class="button" data-filter=".health"><b>Health</b></button>
  520.  
  521. REMEMBER TO ONLY USE ONE TAG PER LINK
  522.  
  523.  
  524. ------------------------------------------
  525.  
  526. ----------------------------------------->
  527. <div class="filters_cont">
  528. <div class="filters">
  529. <div class="buttons">
  530.  
  531. <h1>Neighborhood</h1>
  532. <div class="button-group" data-filter-group="one">
  533. <button class="button is-checked" data-filter=""><b>all</b></button>
  534. <button class="button" data-filter=".nyhavn"><b>Nyhavn</b></button>
  535. <button class="button" data-filter=".soren"><b>Soren</b></button>
  536. <button class="button" data-filter=".orestad"><b>Orestad</b></button>
  537. </div>
  538.  
  539. <h1>Category</h1>
  540. <div class="button-group" data-filter-group="two">
  541. <button class="button is-checked" data-filter=""><b>all</b></button>
  542. <button class="button" data-filter=".houses"><b>Houses</b></button>
  543. <button class="button" data-filter=".fooddrink"><b>Food & Drink</b></button>
  544. <button class="button" data-filter=".health"><b>Health & Beauty</b></button>
  545. <button class="button" data-filter=".rec"><b>Recreational</b></button>
  546. </div>
  547.  
  548.  
  549.  
  550. </div>
  551. </div>
  552. </div>
  553. <!-- END FILTERS --------------------------->
  554.  
  555.  
  556.  
  557.  
  558.  
  559.  
  560.  
  561. <!---------------------------------------------
  562.  
  563. -----------------------------------------------
  564.  
  565. START CONTAINER:
  566.  
  567. 1. To add more info blocks, copy from "Start Individual Item" to "End Individual Item" and paste after the last block
  568.  
  569. -----------------------------------------------
  570.  
  571. ---------------------------------------------->
  572. <div id="container"><div class="content">
  573. <!----------------------------------------
  574.  
  575. ------------------------------------------
  576.  
  577. HOW TO ADD FILTERING SEE THE FILTERING HTML RIGHT ABOVE THIS CONTAINER BLOCK AND CONTINUE BELOW FOR ITEM DIVS
  578.  
  579. Right under "Start Individual Item" there's this code:
  580.  
  581. <div class="item">
  582.  
  583. Make sure you leave "item" because that's the "all" filter and has all the stylying attached. Add your one word filters after item making sure to use a space between each tag. For example, my bakery in Soren would have these filters:
  584.  
  585. <div class="item soren fooddrink">
  586.  
  587. My gym in Orestad would have:
  588.  
  589. <div class="item orestad health">
  590.  
  591. You can have as many filters as you want as long as you match them to the filtering tags links above
  592.  
  593. With the filter tag links you made on the filters bar, add the relevant tag to each item, so all the bars and restaurants have:
  594.  
  595. <div class="item fooddrink">
  596.  
  597. and all the bars and resaurants in Nyhavn have:
  598.  
  599. <div class="item nyhavn fooddrink">
  600.  
  601. So when you click the "Soren" tag and then the "Health" tag on the filter bar, only the items you've tagged with nyhavn and health will show
  602.  
  603.  
  604. ------------------------------------------
  605.  
  606. ----------------------------------------->
  607.  
  608.  
  609.  
  610.  
  611.  
  612.  
  613.  
  614.  
  615.  
  616. <!------- START INDIVIDUAL ITEM ----------->
  617. <div class="item soren houses"><!----- Add filter tags here -->
  618.  
  619. <div class="item_image">
  620. <img src="https://static.tumblr.com/zvesamf/S7Pr625yg/filter_soren_islandsbryggeapt.jpg" />
  621. </div>
  622.  
  623. <div class="item_section">
  624.  
  625. <h1>Brygge House</h1>
  626.  
  627. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i>.
  628.  
  629. <pre>Preformatted text block</pre>
  630.  
  631. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i> fermentum ante. Donec nec elit <em>molestie</em> massa finibus. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna.
  632.  
  633. </div>
  634.  
  635. </div>
  636. <!------- END INDIVIDUAL ITEM ----------->
  637.  
  638.  
  639.  
  640.  
  641.  
  642.  
  643.  
  644.  
  645.  
  646. <!------- START INDIVIDUAL ITEM ----------->
  647. <div class="item nyhavn health"><!----- Add filter tags here -->
  648.  
  649. <div class="item_image">
  650. <img src="https://static.tumblr.com/zvesamf/JOnr625yi/filter_nyhavn_noliahair.jpg" />
  651. </div>
  652.  
  653. <div class="item_section">
  654.  
  655. <h1>Nolia Hair</h1>
  656.  
  657. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i>.
  658.  
  659. <pre>Preformatted text block</pre>
  660.  
  661. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i> fermentum ante. Donec nec elit <em>molestie</em> massa finibus. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna.
  662.  
  663. </div>
  664.  
  665. </div>
  666. <!------- END INDIVIDUAL ITEM ----------->
  667.  
  668.  
  669.  
  670.  
  671.  
  672.  
  673.  
  674.  
  675.  
  676. <!------- START INDIVIDUAL ITEM ----------->
  677. <div class="item filter filter"><!----- Add filter tags here -->
  678.  
  679. <div class="item_image">
  680. <img src="https://static.tumblr.com/zvesamf/hoCr625yr/200x170.png" />
  681. </div>
  682.  
  683. <div class="item_section">
  684.  
  685. <h1>Item Name</h1>
  686.  
  687. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i>.
  688.  
  689. <pre>Preformatted text block</pre>
  690.  
  691. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna et velit dignissim, a <b>placerat</b> nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, <i>fringilla</i> fermentum ante. Donec nec elit <em>molestie</em> massa finibus. Lorem ipsum dolor sit amet, a <em>consectetur</em> adipiscing elit. Aliquam pretium magna.
  692.  
  693. </div>
  694.  
  695. </div>
  696. <!------- END INDIVIDUAL ITEM ----------->
  697.  
  698.  
  699.  
  700.  
  701.  
  702.  
  703.  
  704.  
  705.  
  706.  
  707. <!------- END ITEMS ABOVE -------->
  708. </div></div>
  709. <!----------- END CONTAINER ----------->
  710.  
  711.  
  712.  
  713.  
  714.  
  715.  
  716. <!------- SCRIPTS: DO NOT EDIT ------->
  717. <!-- Masonry Grid Layout by Desandro: https://masonry.desandro.com/ -->
  718. <script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  719. <!-- Isotope by Metafizzy: https://isotope.metafizzy.co/ -->
  720. <script src="//unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  721. <!-- imagesLoaded by Desandro: https://imagesloaded.desandro.com/ -->
  722. <script src="//unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  723. <!-- Start Masonry, Isotope, imageLoaded -->
  724. <script>
  725. var $grid = $('.content').masonry({
  726. itemSelector: '.item',
  727. columnWidth: '.item',
  728. fitWidth: true
  729. });
  730.  
  731. $grid.imagesLoaded().progress( function() {
  732. $grid.masonry('layout');
  733. });
  734. </script>
  735. <script type="text/javascript">
  736. $(document).ready(function() {
  737. // init Isotope
  738. var $grid = $('#container').isotope({
  739. itemSelector: '.item',
  740. masonry: {
  741. gutter: 1
  742. },
  743. hiddenStyle: {
  744. opacity: 0
  745. },
  746. visibleStyle: {
  747. opacity: 1
  748. },
  749. transitionDuration: '0.5s'
  750. });
  751. // layout Isotope after each image loads
  752. $grid.imagesLoaded().progress(function() {
  753. $grid.isotope('layout');
  754. });
  755. // store filter for each group
  756. var filters = {};
  757. $('.filters').on('click', '.button', function() {
  758. var $this = $(this);
  759. // get group key
  760. var $buttonGroup = $this.parents('.button-group');
  761. var filterGroup = $buttonGroup.attr('data-filter-group');
  762. // set filter for group
  763. filters[filterGroup] = $this.attr('data-filter');
  764. // combine filters
  765. var filterValue = concatValues(filters);
  766. // set filter for Isotope
  767. $grid.isotope({
  768. filter: filterValue
  769. });
  770. });
  771. // change is-checked class on buttons
  772. $('.button-group').each(function(i, buttonGroup) {
  773. var $buttonGroup = $(buttonGroup);
  774. $buttonGroup.on('click', 'button', function() {
  775. $buttonGroup.find('.is-checked').removeClass('is-checked');
  776. $(this).addClass('is-checked');
  777. });
  778. });
  779. // change size of item by toggling gigante class
  780. $grid.on('click', '.item', function() {
  781. $(this).toggleClass('expand');
  782. // trigger layout after item size changes
  783. $grid.isotope('layout');
  784. });
  785. });
  786. // flatten object by concatting values
  787. function concatValues(obj) {
  788. var value = '';
  789. for (var prop in obj) {
  790. value += obj[prop];
  791. }
  792. return value;
  793. }
  794. </script>
  795. </body></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!