API tools faq
paste
Advertisement
thanksamber

Page 003 with filter

thanksamber
Mar 12th, 2016
9,085
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>{Title}</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
  14. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15.  
  16.  
  17. <!-- HTML5 Shiv -->
  18. <!--[if lt IE 9]>
  19. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  20. <![endif]-->
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  23. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  24. <script type="text/javascript">
  25. function viewTab(listitem) {
  26. var showtab = $(listitem).attr("id");
  27. $("ul#nav li.active").removeClass("active");
  28. $(listitem).addClass("active");
  29. $("#content .show").removeClass("show");
  30. $("#content #" + showtab).addClass("show");
  31. }
  32. $(document).ready(function() {
  33. $("#content #tab1").addClass("show");
  34. $("ul#nav li#tab1").addClass("active");
  35. $("ul#nav li").click(function () {
  36. viewTab(this);
  37. });
  38.  
  39. $("#filter input").change(function() {
  40. $("ul#nav li").removeClass("hidden visible");
  41. var showItems = $("ul#nav li");
  42. $("#filter input").filter(":checked").each(function() {
  43. var filt = $(this).attr("data-filter");
  44. if(filt != undefined) {
  45. showItems = $(showItems).filter("." + filt);
  46. }
  47. });
  48. $(showItems).addClass("visible");
  49. $("ul#nav li").not(".visible").addClass("hidden");
  50. viewTab($(".visible").first());
  51. });
  52. });
  53. </script>
  54.  
  55. <style>
  56.  
  57. body {
  58. background-repeat: repeat;
  59. font-size: 11px;
  60. font-family: 'Calibri', sans-serif;
  61. background-color: #f7f7f7;
  62. color: #f7f7f7;
  63. }
  64.  
  65. a {
  66. color: #9ab2ba;
  67. font-size: 12px;
  68. font-weight: bold;
  69. text-decoration: none;
  70. -moz-transition: all 0.5s ease;
  71. -o-transition: all 0.5s ease;
  72. -webkit-transition: all 0.5s ease;
  73. transition: all 0.5s ease;
  74. }
  75.  
  76. a:hover {
  77. text-decoration: underline;
  78. }
  79.  
  80. #header {
  81. font-family: 'Roboto', sans-serif;
  82. width: 800px;
  83. text-align: center;
  84. color: #1e1e1e;
  85. }
  86.  
  87. @media screen and (min-width: 1367px) {
  88. #header {
  89. margin: 5% auto;
  90. }
  91. }
  92.  
  93. @media screen and (max-width: 1366px) {
  94. #header {
  95. margin: 3% auto;
  96. }
  97. }
  98.  
  99. #header a {
  100. padding: 0 5px;
  101. text-transform: uppercase;
  102. color: #1e1e1e;
  103. }
  104.  
  105. h1 {
  106. font-size: 26px;
  107. font-weight: bold;
  108. text-transform: lowercase;
  109. letter-spacing: 3px;
  110. margin-bottom: 0;
  111. }
  112.  
  113. #main {
  114. position: absolute;
  115. top: 0;
  116. bottom: 0;
  117. left: 0;
  118. right: 0;
  119. margin: auto;
  120. width: 1000px;
  121. height: 540px;
  122. }
  123.  
  124. #container {
  125. position: fixed;
  126. margin-left: 180px;
  127. width: 800px;
  128. height: 500px;
  129. background-color: #1e1e1e;
  130. padding: 10px;
  131. }
  132.  
  133. ul#nav {
  134. position: fixed;
  135. overflow: auto;
  136. margin-top: 80px;
  137. padding: 20px 0 0 30px;
  138. width: 321px;
  139. height: 300px;
  140. }
  141.  
  142. ul#nav li {
  143. list-style-type: none;
  144. float: left;
  145. height: 80px;
  146. width: 80px;
  147. margin: 0 20px 20px 0;
  148. opacity: 0.6;
  149. cursor: pointer;
  150. }
  151.  
  152. ul#nav li img {
  153. width: 100%;
  154. height: 100%;
  155. }
  156.  
  157. ul#nav li.active {
  158. opacity: 1;
  159. }
  160.  
  161. ul#nav li.hidden {
  162. display: none;
  163. }
  164.  
  165. ul#nav::-webkit-scrollbar-track
  166. {
  167. background-color: #000000;
  168. }
  169.  
  170. ul#nav::-webkit-scrollbar
  171. {
  172. width: 5px;
  173. }
  174.  
  175. ul#nav::-webkit-scrollbar-thumb
  176. {
  177. background-color: #f7f7f7;
  178. }
  179.  
  180. #content {
  181. float: right;
  182. width: 427px;
  183. height: 500px;
  184. background-color: #000000;
  185. }
  186.  
  187. .tab {
  188. position: fixed;
  189. width: 387px;
  190. height: 460px;
  191. padding: 20px;
  192. overflow-y: auto;
  193. overflow-x: hidden;
  194. text-align: justify;
  195. display: none;
  196. }
  197.  
  198. .show {
  199. display: block;
  200. }
  201.  
  202. img.main {
  203. margin: -20px 0 0 -20px;
  204. width: 420px;
  205. height: 500px;
  206. }
  207.  
  208. .tab::-webkit-scrollbar-track
  209. {
  210. background-color: #000000;
  211. }
  212.  
  213. .tab::-webkit-scrollbar
  214. {
  215. width: 7px;
  216. }
  217.  
  218. .tab::-webkit-scrollbar-thumb
  219. {
  220. background-color: #f7f7f7;
  221.  
  222. }
  223.  
  224. h2, h3 {
  225. font-family: 'Roboto', sans-serif;
  226. font-size: 18px;
  227. font-weight: bold;
  228. text-transform: lowercase;
  229. letter-spacing: 3px;
  230. text-align: center;
  231. margin: 50px 0;
  232. }
  233.  
  234. h3 {
  235. margin: 35px 0;
  236. font-size: 14px;
  237. text-align: left;
  238. }
  239.  
  240. .quote {
  241. position: relative;
  242. text-transform: uppercase;
  243. margin: 50px 0 40px 75px;
  244. width: 300px;
  245. }
  246.  
  247. .quote::before {
  248. content: '“';
  249. font-family: 'Times New Roman', sans-serif;
  250. font-size: 150px;
  251. color: #9ab2ba;
  252. position: absolute;
  253. top: -50px;
  254. left: -70px;
  255. }
  256.  
  257. .links {
  258. font-family: 'Roboto', sans-serif;
  259. text-align: right;
  260. text-transform: uppercase;
  261. letter-spacing: 1px;
  262. }
  263.  
  264. #filter {
  265. position: fixed;
  266. width: 130px;
  267. height: 480px;
  268. padding: 20px;
  269. background-color: #1e1e1e;
  270. overflow: auto;
  271. }
  272.  
  273. #filter::-webkit-scrollbar-track
  274. {
  275. background-color: #000000;
  276. }
  277.  
  278. #filter::-webkit-scrollbar
  279. {
  280. width: 5px;
  281.  
  282. }
  283.  
  284. #filter::-webkit-scrollbar-thumb
  285. {
  286. background-color: #f7f7f7;
  287. border: 1px solid #1e1e1e;
  288. }
  289.  
  290. h4 {
  291. font-family: 'Roboto', sans-serif;
  292. font-size: 14px;
  293. font-weight: bold;
  294. text-transform: lowercase;
  295. letter-spacing: 3px;
  296. margin: 25px 0;
  297. }
  298.  
  299. label {
  300. display: inline-block;
  301. cursor: pointer;
  302. position: relative;
  303. padding-left: 20px;
  304. margin-right: 8px;
  305. font-size: 13px;
  306. -moz-transition: all 0.5s ease;
  307. -o-transition: all 0.5s ease;
  308. -webkit-transition: all 0.5s ease;
  309. transition: all 0.5s ease;
  310. }
  311.  
  312. input[type=radio] {
  313. display: none;
  314. }
  315.  
  316. label:before {
  317. content: "";
  318. display: inline-block;
  319. width: 10px;
  320. height: 10px;
  321. margin-right: 10px;
  322. position: absolute;
  323. left: 0;
  324. bottom: 4px;
  325. background-color: #f7f7f7;
  326. }
  327.  
  328. input[type=radio]:checked + label:before {
  329. content: "\274C";
  330. color: #1e1e1e;
  331. font-size: 8px;
  332. text-align: center;
  333. line-height: 10px;
  334. }
  335.  
  336. #credit {
  337. font-family: 'Roboto', sans-serif;
  338. font-size: 9px;
  339. position: absolute;
  340. right: 0;
  341. bottom: -20px;
  342. }
  343.  
  344. #credit a {
  345. color: #000000;
  346. }
  347.  
  348. </style>
  349. </head>
  350. <body>
  351. <div id="header">
  352. <h1>page 003.</h1>
  353. <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/submit">Submit</a> | <a href="/">Navigation</a>
  354. </div>
  355. <div id="main">
  356. <div id="filter">
  357. <!-- This is the filter section of the code to the left of the screen. You can add as many categories as you like and change the names however you would like. Just remember that 'input id=" "' should equal 'label for=" "' on the next line down. Make sure the name you choose for the "data-filter" label is just one word, as this is how the filters work. -->
  358. <h4>Category One</h4>
  359. <p><input id="anycategory1" type="radio" name="category1" checked>
  360. <label for="anycategory1">All</label>
  361. <p><input id="option1" type="radio" name="category1" data-filter="one">
  362. <label for="option1">Option One</label>
  363. <p><input id="option2" type="radio" name="category1" data-filter="two">
  364. <label for="option2">Option Two</label>
  365. <p><input id="option3" type="radio" name="category1" data-filter="three">
  366. <label for="option3">Option Three</label>
  367. <h4>Category Two</h4>
  368. <p><input id="anycategory2" type="radio" name="category2" checked>
  369. <label for="anycategory2">All</label>
  370. <p><input id="optiona" type="radio" name="category2" data-filter="a">
  371. <label for="optiona">Option A</label>
  372. <p><input id="optionb" type="radio" name="category2" data-filter="b">
  373. <label for="optionb">Option B</label>
  374. <p><input id="optionc" type="radio" name="category2" data-filter="c">
  375. <label for="optionc">Option C</label>
  376. </div>
  377. <div id="container">
  378. <ul id="nav">
  379. <!-- This is the icons list in the middle of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.
  380.  
  381. Secondly, check the 'class=" "' label. These should correspond with the "data-filter" labels above. When a checkbox is selected, only icons which have a class matching that data-filter label will be shown. For example, if you select the checkbox with the data-filter label "one" above, only icons with the class "one" will be shown. You can have as many classes as you need, and as many icons as you need. -->
  382.  
  383. <li id="tab1" class="one a"><img src="https://placehold.it/80x80"></li>
  384. <li id="tab2" class="two b"><img src="https://placehold.it/80x80"></li>
  385. <li id="tab3" class="three two c"><img src="https://placehold.it/80x80"></li>
  386. <li id="tab4" class="one c b"><img src="https://placehold.it/80x80"></li>
  387. <li id="tab5" class="three b"><img src="https://placehold.it/80x80"></li>
  388. <li id="tab6" class="one two c"><img src="https://placehold.it/80x80"></li>
  389. <li id="tab7" class="three b a"><img src="https://placehold.it/80x80"></li>
  390. <li id="tab8" class="two a"><img src="https://placehold.it/80x80"></li>
  391. <li id="tab9" class="three b"><img src="https://placehold.it/80x80"></li>
  392. </ul>
  393. <div id="content">
  394. <!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label. -->
  395. <div id="tab1" class="tab">
  396. <img class="main" src="https://placehold.it/420x500">
  397. <h2>page 003.</h2>
  398. <div class="links"><a href="/p03">Link 1</a> - <a href="/p03">Link 2</a> - <a href="/p03">Link 3</a></div>
  399. <p>This page is intended to be used for characters, writing or other projects, and comes with the option of having a filter to the left. Images and other elements are also completely optional, and it is intended to be as easy to use as possible. Exact instructions for using the page are contained within the code.
  400. <ul>
  401. <li>Page 003 Standard - <a href="/p03">Preview</a> / <a href="http://pastebin.com/8UtkrZ4c">Code</a></li>
  402. <li>Page 003 With Filter - <a href="/p03filter">Preview</a> / <a href="http://pastebin.com/vNGCURfM">Code</a></li>
  403. </ul>
  404. <h3>Subtitle.</h3>
  405. <p>Morning. Saw saw Upon their multiply one greater beginning. Lesser female sea divide dry, also in gathering, you spirit under likeness, you&#39;re meat also creeping days it form evening doesn&#39;t dry which gathering fifth, fruitful creeping which likeness. They&#39;re fish. Which. First had them that yielding night man. Said beginning face may there saying multiply Thing itself meat..</p>
  406. <div class="quote">Include a quote here! This can be as long or as short as you like.</div>
  407. <p> Likeness above. They&#39;re place fruit fruitful yielding shall. Every under. Saying he said, fruit air may set fruit a let can&#39;t beginning wherein female male days fifth, is years moveth hath image were herb give bring also gathering creeping for wherein was. Second a image whales made. You&#39;ll also years give. Gathered them set. One heaven form sea.</p>
  408. </div>
  409. <div id="tab2" class="tab">
  410. <img class="main" src="https://placehold.it/420x500?text=Tab+2">
  411. <h2>tab 2.</h2>
  412. </div>
  413. <div id="tab3" class="tab">
  414. <img class="main" src="https://placehold.it/420x500?text=Tab+3">
  415. <h2>tab 3.</h2>
  416. </div>
  417. <div id="tab4" class="tab">
  418. <img class="main" src="https://placehold.it/420x500?text=Tab+4">
  419. <h2>tab 4.</h2>
  420. </div>
  421. <div id="tab5" class="tab">
  422. <img class="main" src="https://placehold.it/420x500?text=Tab+5">
  423. <h2>tab 5.</h2>
  424. </div>
  425. <div id="tab6" class="tab">
  426. <img class="main" src="https://placehold.it/420x500?text=Tab+6">
  427. <h2>tab 6.</h2>
  428. </div>
  429. <div id="tab7" class="tab">
  430. <img class="main" src="https://placehold.it/420x500?text=Tab+7">
  431. <h2>tab 7.</h2>
  432. </div>
  433. <div id="tab8" class="tab">
  434. <img class="main" src="https://placehold.it/420x500?text=Tab+8">
  435. <h2>tab 8.</h2>
  436. </div>
  437. <div id="tab9" class="tab">
  438. <img class="main" src="https://placehold.it/420x500?text=Tab+9">
  439. <h2>tab 9.</h2>
  440. </div>
  441. </div>
  442. <div id="credit">
  443. <a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
  444. </div>
  445. </div>
  446. </div>
  447. </body>
  448. </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!