API tools faq
paste
Advertisement
Tsunland

Portfolio

Tsunland
Oct 25th, 2016
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Portfolio</title>
  6.  
  7. <!--
  8.  
  9. Theme by Tumblr User spoilers
  10.  
  11. Please do not remove credit
  12.  
  13. For Instructions: Hit Ctrl+F / Cmmnd + F and Search for every '###'. That's where I'll explain what to do. The Instructions are pretty detailed, and sometimes I go on explaining stuff you might not want to hear about, but I suggest reading everything.
  14.  
  15.  
  16. If you want to change colours, just search for them, hit Cltr+F / Cmmnd + F again, and replace all with a colour of your choice.
  17.  
  18. These are the colours I use throughout this theme:
  19.  
  20. #31deee - blue (main accent)
  21. deeppink - pink (second accent)
  22. #0f0f0f - sidebar and filmtitle background
  23. #262524 - background actors sidebar
  24. #333 - darkgrey
  25. #fff - white (various)
  26. white
  27. #ffffff
  28. #f0f0f0 - grey-white (links, titles, various)
  29.  
  30. If you have any more questions, don't be afraid to ask.
  31. -->
  32.  
  33. <link rel="shortcut icon" href="{Favicon}" />
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  35. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
  36.  
  37. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  38. <link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
  39.  
  40.  
  41. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  42.  
  43. <script type="text/javascript" src="http://static.tumblr.com/etgrokk/qYYnfg3h6/isotope.pkgd.min.js"></script>
  44.  
  45. <script type="text/javascript" >
  46. $( function() {
  47.  
  48.  
  49. $('#sort').click(function () {
  50. $('.content').addClass('open'); });
  51.  
  52.  
  53. $('#people').click(function () {
  54. $('.content').removeClass('open');
  55. $('.content').addClass('moreopen'); });
  56.  
  57.  
  58. $('#close').click(function () {
  59. $('.content').removeClass('moreopen');
  60. $('.content').addClass('open'); });
  61.  
  62. $('#closebutton').click(function () {
  63. $('.content').removeClass('moreopen');
  64. $('.content').removeClass('open'); });
  65.  
  66.  
  67. });
  68.  
  69.  
  70.  
  71.  
  72. $( function() {
  73. // init Isotope
  74. var $container = $('.content').isotope({
  75. filter: '*:not(.towatch)',
  76. itemSelector: '.film',
  77. layoutMode: 'masonry',
  78. // options...
  79.  
  80. getSortData: {
  81. filmtitle: '.filmtitle',
  82. filmdirector: '[data-category]',
  83. filmyear: '.filmyear',
  84.  
  85. },
  86. sortAscending: {
  87. filmtitle: true,
  88. filmdirector: true,
  89. filmyear: false,
  90.  
  91. }
  92.  
  93. });
  94.  
  95.  
  96.  
  97. // bind filter button click
  98. $('.filtermenu a, .actors a, .closer a, #sort').click(function(){
  99.  
  100.  
  101.  
  102. var selector = $(this).attr('data-filter');
  103. $container.isotope({
  104. filter: selector,
  105. animationOptions: {
  106. duration: 750,
  107. easing: 'linear',
  108. queue: false,
  109. }
  110. });});
  111.  
  112.  
  113. $('.sortingmenu a').click(function(){
  114.  
  115. var sortByValue = $(this).attr('data-sort-by');
  116. $container.isotope({ sortBy: sortByValue });
  117.  
  118. return false;
  119.  
  120.  
  121. });
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130.  
  131. });
  132.  
  133. </script>
  134.  
  135.  
  136.  
  137.  
  138. <script type="text/javascript" >
  139.  
  140.  
  141. $( function() {
  142. // init Isotope
  143. var $container = $('.actors').isotope({
  144. filter: '.NOHK',
  145. itemSelector: '.actor',
  146. layoutMode: 'masonry',
  147.  
  148. transitionDuration: '0.4s',
  149.  
  150. });
  151. // bind filter button click
  152. $('.peoplesort a').click(function(){
  153.  
  154.  
  155.  
  156. var selector = $(this).attr('data-filter');
  157. $container.isotope({
  158. filter: selector,
  159.  
  160. animationOptions: {
  161. duration: 750,
  162. easing: 'linear',
  163. queue: false,
  164. }
  165. });
  166.  
  167. return false;
  168.  
  169. });
  170.  
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179. });
  180.  
  181. </script>
  182.  
  183.  
  184. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  185. <script>
  186. (function($){
  187. $(document).ready(function(){
  188. $("[title]").style_my_tooltips({
  189. tip_follows_cursor:true,
  190. tip_delay_time:0,
  191. tip_fade_speed:300
  192. }
  193. );
  194. });
  195. })(jQuery);
  196. </script>
  197.  
  198.  
  199.  
  200.  
  201. <script type="text/javascript" >
  202. $(function() {
  203.  
  204. $('#actortitle').click(function () {
  205.  
  206. $( ".actorsort" ).animate({width: "toggle"}, 800, function() {
  207. // Animation complete.
  208. });});
  209.  
  210. $('#directortitle').click(function () {
  211.  
  212. $( ".directorsort" ).animate({width: "toggle"}, 800, function() {
  213. // Animation complete.
  214. });});
  215.  
  216.  
  217.  
  218.  
  219.  
  220.  
  221. });
  222.  
  223. </script>
  224.  
  225. <script type="text/javascript">
  226. $(document).ready(function(){
  227.  
  228. $('.peoplesort a').click(function() {
  229. $('.actor a').removeClass('active');
  230.  
  231.  
  232. });
  233.  
  234.  
  235.  
  236. $('.actor a').click(function() {
  237. $('.actor a').addClass('active');
  238. $(this).removeClass('active');
  239.  
  240. });
  241.  
  242. $('.ratingtoggle a').click(function() {
  243. $('.ratingtoggle a').removeClass('active');
  244. $(this).addClass('active');
  245.  
  246. });
  247.  
  248. $('.genretoggle a').click(function() {
  249. $('.genretoggle a').removeClass('active');
  250. $(this).addClass('active');
  251.  
  252. });
  253.  
  254. $('.datetoggle a').click(function() {
  255. $('.datetoggle a').removeClass('active');
  256. $(this).addClass('active');
  257.  
  258. });
  259.  
  260.  
  261. $('.peoplesort a').click(function() {
  262. $('.peoplesort a').removeClass('active');
  263. $(this).addClass('active');
  264.  
  265. });
  266.  
  267. $('.sortingmenu a').click(function() {
  268.  
  269.  
  270. $('.sortingmenu a').removeClass('active');
  271. $(this).addClass('active');
  272.  
  273. });
  274.  
  275. $('.filtermenu a').click(function() {
  276. $('.actor a').removeClass('active');
  277.  
  278. $('.filtermenu a').removeClass('active');
  279. $(this).addClass('active');
  280.  
  281. });
  282.  
  283. $('#genre, #month, #rating, #towatch, #people, #all').click(function() {
  284. $('#genre, #month, #rating, #towatch, #people, #all').removeClass('active');
  285. $(this).addClass('active');});
  286. });
  287.  
  288. </script>
  289.  
  290.  
  291.  
  292.  
  293. <script type="text/javascript" >
  294. $(function() {
  295.  
  296. $('.peoplesort a').click(function () {
  297. $('.sortmenu a').removeClass('active');
  298.  
  299. });
  300.  
  301.  
  302.  
  303. $('#close').click(function () {
  304. $('.sortmenu a').removeClass('active');
  305.  
  306.  
  307.  
  308. $('.sortmenu').animate({'marginLeft' : "0px"}, 800, function() {});
  309.  
  310. $('.content').animate({'marginLeft' : "275px"}, 800, function() {});
  311.  
  312. $( ".people" ).animate({
  313. 'width' : "0px",
  314. 'padding-top' : "0px",
  315. 'padding-right' : "0px",
  316. 'padding-bottom' : "0px",
  317. 'padding-left' : "0px",}, 800, function() {});});
  318.  
  319.  
  320. $('#closebutton').click(function () {
  321.  
  322. $('.actor a').removeClass('active');
  323.  
  324. $(".datetoggle, .ratingtoggle, .genretoggle").hide("slow");
  325.  
  326.  
  327. $('.sortmenu a').removeClass('active');
  328.  
  329.  
  330.  
  331. $('.content').animate({'marginLeft' : "175px"}, 800, function() {});
  332.  
  333. $( ".people" ).animate({
  334. 'width' : "0px",
  335. 'padding-top' : "0px",
  336. 'padding-right' : "0px",
  337. 'padding-bottom' : "0px",
  338. 'padding-left' : "0px",}, 800, function() {});
  339.  
  340. $( ".sortmenu" ).animate({
  341. 'width' : "0px",
  342. 'margin-left': "0px",}, 800, function() {});});
  343.  
  344.  
  345. $('#sort').click(function () {
  346.  
  347.  
  348. $( ".sortmenu" ).animate({
  349. 'width' : "100px",
  350. 'padding-top' : "200px"}, 800, function() {});
  351.  
  352. $('.content').animate({'marginLeft' : "275px"}, 800, function() {});});
  353.  
  354.  
  355. $('#people').click(function () {
  356.  
  357.  
  358.  
  359.  
  360.  
  361. $( ".people" ).animate({
  362. 'width' : "370px",
  363. 'padding-top' : "15px",
  364. 'padding-right' : "10px",
  365. 'padding-bottom' : "10px",
  366. 'padding-left' : "10px",
  367. }, 800, function() {
  368. // Animation complete.
  369. });
  370.  
  371.  
  372.  
  373. $('.content').animate({
  374. 'marginLeft' : "665px" //moves left
  375. }, 800, function() {
  376. });
  377.  
  378. $('.sortmenu').animate({
  379. 'marginLeft' : "390px" //moves left
  380. }, 800, function() {
  381. }); });
  382.  
  383.  
  384.  
  385. });
  386.  
  387.  
  388.  
  389.  
  390.  
  391. </script>
  392.  
  393. <script type="text/javascript">
  394. $(function() {
  395. $('#infotoggle').click(function() {
  396. $('.infotoggle').slideToggle('slow');
  397. return false;
  398. });
  399. });
  400. </script>
  401.  
  402. <script type="text/javascript">
  403. $(function() {
  404.  
  405.  
  406.  
  407.  
  408. $('#genre').click(function() {
  409. $('.genretoggle').slideToggle('slow').siblings(".datetoggle, .ratingtoggle").hide("slow");
  410.  
  411. return false;
  412. });
  413.  
  414. $('#month').click(function() {
  415. $('.datetoggle').slideToggle('slow').siblings(".genretoggle, .ratingtoggle").hide("slow");
  416.  
  417. return false;
  418. });
  419.  
  420. $('#rating').click(function() {
  421. $('.ratingtoggle').slideToggle('slow').siblings(".datetoggle, .genretoggle,").hide("slow");
  422.  
  423. return false;
  424. });
  425.  
  426. $('#towatch, #people, #all').click(function() {
  427. $(".datetoggle, .genretoggle, .monthtoggle").hide("slow");
  428.  
  429. return false;
  430. });
  431.  
  432.  
  433. });
  434. </script>
  435.  
  436.  
  437.  
  438.  
  439. <style type="text/css">
  440.  
  441. body {
  442. background-color: white;
  443. color: gray;
  444. font-family:'Roboto Condensed', Arial, sans-serif;
  445. font-size: 12px;
  446. line-height: 100%;
  447. height:100%;
  448. overflow-x:hidden!important;
  449.  
  450. }
  451.  
  452. a {
  453. text-decoration:none;
  454. outline:none;
  455. -moz-outline-style:none;
  456. color:gray;
  457. }
  458.  
  459. img {
  460. border:none;
  461. }
  462.  
  463. #s-m-t-tooltip{
  464. position:absolute;
  465. z-index:90000;
  466. display:inline-block;
  467. background-color: deeppink;
  468. font-family: "Arial Narrow",Arial, sans-serif;
  469. z-index:999999999999;
  470. color:#f0f0f0;
  471. padding: 3px 5px;
  472. margin-left:35px;
  473. font-size: 11px;
  474. text-transform: uppercase;
  475. letter-spacing: 1px;
  476. word-wrap: break-word;
  477. word-break: break-all;
  478. line-height: 11px;}
  479.  
  480. ::-webkit-scrollbar-thumb {
  481. height:auto;
  482. background-color:#31deee;
  483. }
  484.  
  485. ::-webkit-scrollbar {
  486. height:5px;
  487. width:5px;
  488. background-color:white;
  489. }
  490.  
  491.  
  492.  
  493. #sidebar {position:fixed; width:175px; background:#0f0f0f; height:100%; float:left;z-index:9999999999;top:0; left:0; overflow:hidden;}
  494. #sidebarcontent {position:absolute; bottom:0; margin-bottom:250px;}
  495. #thetitle {position:relative; color:white; font-size:36px; text-align:center; width:175px; font-family: 'Open Sans', sans-serif; line-height:26px;}
  496. #subtitle {position:relative; color:white; font-size:24px; text-align:center; width:175px; font-family: 'Open Sans', sans-serif; line-height:22px; color:#31deee; margin-top:1px;}
  497. .links {position:relative; text-align:center; width:175px; color:#31deee; margin-top:10px;}
  498. .links a {text-decoration:none; color:#f0f0f0;}
  499.  
  500. .content { position:absolute; background:none; margin-left:175px; height:auto; padding:10px; width:calc(100% - 195px);
  501. width:-webkit-calc(100% - 195px);
  502. width:-moz-calc(100% - 195px);
  503. float:left; }
  504.  
  505.  
  506. .content.open {width:calc(100% - 295px);
  507. width:-webkit-calc(100% - 295px);
  508. width:-moz-calc(100% - 295px);}
  509.  
  510. .content.moreopen {width:calc(100% - 685px);
  511. width:-webkit-calc(100% - 685px);
  512. width:-moz-calc(100% - 685px);}
  513.  
  514.  
  515.  
  516. .film { position:relative; margin:10px; width:350px; height:225px; background:#0f0f0f; float:left; overflow:hidden; }
  517.  
  518. .cover {width:350px; height:175px; overflow:hidden; position:relative; z-index:1; background:#f0f0f0;}
  519. .cover img {width:350px;}
  520.  
  521. .filminfo {width:310px; z-index:0; position:relative; padding:0 20px; height:100px; background:#0f0f0f; -webkit-transition-duration: 1s;
  522. -moz-transition-duration: 1s;
  523. transition-duration: 1s;}
  524.  
  525. .rewatch img { float:left;}
  526. .rewatch { background:#31deee; font-family:'lobster', cursive; color:white; text-align:center; line-height:30px; font-size:18px;
  527. }
  528.  
  529. .filmtitle {width:310px; text-align:center; color:white; font-family: 'Open Sans', sans-serif;
  530. line-height:38px; font-size:22px; }
  531. .filmyear {width:310px; p text-align:center; color:white; font-family: 'Open Sans', sans-serif; margin-top:-8px; color:#31deee; text-align:center;}
  532.  
  533. .filmdirector {font-family: "Arial Narrow",Arial, sans-serif;
  534. color:#f0f0f0; text-transform:uppercase; font-style:italic; font-size:14px; width:310px; text-align:left; line-height:14px; border-top:1px solid #f0f0f0; width:310px; padding:0px; position:relative; margin-top:10px; padding-top:10px; }
  535.  
  536. .filmdate {font-family: "Arial Narrow",Arial, sans-serif;
  537. color:#f0f0f0; text-transform:uppercase; word-spacing:5px; font-size:14px; text-align:right; line-height:14px; padding:0px; position:relative; margin-top:-14px; }
  538.  
  539.  
  540. .film:hover .filminfo {margin-top:-45px; -webkit-transition-duration: 1s;
  541. -moz-transition-duration: 1s;
  542. transition-duration: 1s;}
  543.  
  544. .sortmenu {position:fixed; left:175px; background:#31deee; height:100%; width:0px;top:0; z-index:999; overflow:hidden; padding-top:0px; font-family:'lobster', cursive; font-size:20px; color:#fff; text-align:center; line-height:8px; }
  545.  
  546. .sortmenu a {display:inline-block; width:70px; padding:5px; color:#f0f0f0; background:#31deee; margin-top:5px !important; font-family:'Roboto Condensed', Arial, sans-serif; font-size:13px; border:1px solid #f0f0f0; -moz-transition-duration:1s;
  547. -webkit-transition-duration:1s;
  548. -o-transition-duration:1s;}
  549.  
  550. .sortmenu a:hover {background:#f0f0f0; color:#31deee; -moz-transition-duration:1s;
  551. -webkit-transition-duration:1s;
  552. -o-transition-duration:1s;}
  553.  
  554.  
  555.  
  556. .sortmenu a.active {background:#f0f0f0; color:#31deee; -moz-transition-duration:1s;
  557. -webkit-transition-duration:1s;
  558. -o-transition-duration:1s;}
  559.  
  560.  
  561.  
  562. .genretoggle, .ratingtoggle, .datetoggle, .titletoggle {height:auto; display: none;}
  563.  
  564. .genretoggle a, .ratingtoggle a, .datetoggle a, .titletoggle a{ border:1px solid #31deee}
  565. .genretoggle a:hover, .datetoggle a:hover{ text-decoration:underline; color:#f0f0f0; background:none;}
  566. .genretoggle a.active, .datetoggle a.active { text-decoration:underline; color:#f0f0f0; background:none;}
  567.  
  568.  
  569. .ratingtoggle a {width:10px; height:10px; line-height:10px; margin:-2px; border-radius:50%;}
  570. .ratingtoggle a:hover {color:deeppink; background:#f0f0f0;}
  571. .ratingtoggle a.active {color:deeppink; background:#f0f0f0;}
  572.  
  573. .cred {
  574. display:block;
  575. position:fixed;
  576. font-family:'Roboto Condensed', Arial, sans-serif;
  577. text-transform:uppercase;
  578. font-size:8px;
  579. right:0px;
  580. bottom:0px;
  581. width:31px;
  582. height:31px;
  583. padding:-8px 4px 4px -8px;
  584. background:none;
  585. z-index:99999999;
  586.  
  587. letter-spacing:1px; -moz-transition-duration:1s;
  588. -webkit-transition-duration:1s;
  589. -o-transition-duration:1s;
  590. }
  591.  
  592. .infotoggle {display:none; margin:10px 30px 50px 30px;}
  593. .cred a {width:8px; z-index:9999 ; position:fixed; right:9px; bottom:9px; float:left; height:8px; background:#0f0f0f; color:#f0f0f0; display:inline-block; text-align:center; text-decoration:none; padding:5px 5px 7px 5px; float:left; -moz-transition-duration:1s;
  594. -webkit-transition-duration:1s;
  595. -o-transition-duration:1s;}
  596.  
  597. .cred a:hover {color:#f0f0f0; border-radius:50%; padding-right:-8px;
  598. background:#31deee; -moz-transition-duration:1s;
  599. -webkit-transition-duration:1s;
  600. -o-transition-duration:1s; }
  601.  
  602. a span.en, a:hover span.mi {
  603. display: inline-block;
  604. -moz-transition-duration:1s;
  605. -webkit-transition-duration:1s;
  606. -o-transition-duration:1s;
  607.  
  608. }
  609. a:hover span.en, a span.mi {
  610. display: none;
  611. -moz-transition-duration:1s;
  612. -webkit-transition-duration:1s;
  613. -o-transition-duration:1s;
  614. }
  615.  
  616. .isotope {
  617. background: #DDD;
  618. max-width: 1200px;
  619. }
  620.  
  621. /* clear fix */
  622. .isotope:after {
  623. content: '';
  624. display: block;
  625. clear: both;
  626. }
  627.  
  628. .people {position:fixed; height:100%; overflow-y:auto; overflow-x:hidden; left:175px; background:#262524; width:0px; z-index:9999999999999; top:0; padding:0px; text-align:center; overflow:hidden;}
  629.  
  630. .peopletitle {position:relative; color:white; font-size:36px; font-family: 'Lobster', cursive; text-transform:lowercase; line-height:36px; padding:10px 10px 00px 40px; text-align:left; -moz-transition-duration:1s;
  631. -webkit-transition-duration:1s;
  632. -o-transition-duration:1s;}
  633.  
  634. .peopletitle a {color:white;}
  635.  
  636. .peoplesort {padding:20px;}
  637.  
  638. .peoplesort a {font-size:24px; line-height:32.5px; padding:5px; width:32.5px; height:32.5px; float:left; color:white; background:deeppink; margin:5px; display:inline-block; text-align:center; font-family:'lobster', cursive; text-transform:lowercase;}
  639.  
  640. .peoplesort a:hover {background:#31deee;}
  641. .peoplesort a.active {background:#31deee;}
  642.  
  643. .nothing {background:#333 !important;}
  644.  
  645. .actor {position:relative; margin:10px; width:auto; height:auto; background:none; float:left; overflow:hidden; font-family:'Roboto Condensed'; font-size:13px; color:white; padding:5px; margin:5px; float:left; text-align:left; }
  646.  
  647. .actor a {width:auto; background:#31deee; font-family:'Roboto Condensed'; font-size:13px; color:white; padding:5px; height:13px; line-height:13px; display:inline-block; margin:5px; float:left; text-align:center; text-transform:lowercase;}
  648.  
  649. .actor a.active {background:#262524}
  650.  
  651.  
  652. .actors {position:absolute; margin: 240px 20px 0 20px; margin-bottom:10px; width:310px; height:100px; }
  653.  
  654. .closer {padding:0; margin:0; width:0; height:0;}
  655. .closebutton
  656. {
  657. width:25px;
  658. height:25px;
  659. background-color:none;
  660. border-radius:50%;
  661. text-align:center; -moz-transition-duration:1s;
  662. -webkit-transition-duration:1s;
  663. -o-transition-duration:1s;
  664.  
  665. }
  666.  
  667. .one {margin-bottom:20px; margin-top:-200px; margin-left:60px;}
  668.  
  669. .two { margin-left:340px; padding-bottom:20px !important; margin-top:-3px; position:relative; z-index:99999999999; }
  670.  
  671. .closer a {padding:0; margin:0; border:0px; width:0; height:0;}
  672.  
  673.  
  674. .closebutton:hover .close1 {transform: rotate(135deg); background-color:white;
  675. -ms-transform: rotate(135deg); /* IE 9 */
  676. -webkit-transform: rotate(135deg); -moz-transition-duration:1s;
  677. -webkit-transition-duration:1s;
  678. -o-transition-duration:1s;}
  679.  
  680. .closebutton:hover .close2 {background-color:white; transform: rotate(270deg);
  681. -moz-transition-duration:1s;
  682. -webkit-transition-duration:1s;
  683. -o-transition-duration:1s;}
  684.  
  685. .closebutton:hover{background-color:none;
  686. -moz-transition-duration:1s;
  687. -webkit-transition-duration:1s;
  688. -o-transition-duration:1s;}
  689.  
  690. .close1
  691. {
  692. height:25px;
  693. width:2px;
  694. margin-left:12px;
  695. background-color:white;
  696. transform: rotate(45deg);
  697. -ms-transform: rotate(45deg); /* IE 9 */
  698. -webkit-transform: rotate(45deg); /* Safari and Chrome */
  699. Z-index:1; -moz-transition-duration:1s;
  700. -webkit-transition-duration:1s;
  701. -o-transition-duration:1s;
  702.  
  703. }
  704. .close2
  705. {
  706. height:25px;
  707. width:2px; -moz-transition-duration:1s;
  708. -webkit-transition-duration:1s;
  709. -o-transition-duration:1s;
  710.  
  711. background-color:white;
  712. transform: rotate(90deg);
  713. -ms-transform: rotate(90deg); /* IE 9 */
  714. -webkit-transform: rotate(90deg); /* Safari and Chrome */
  715. Z-index:2;
  716.  
  717. }
  718.  
  719.  
  720.  
  721.  
  722.  
  723.  
  724. </style>
  725.  
  726. </head>
  727.  
  728.  
  729.  
  730.  
  731. <body>
  732.  
  733. <div id="sidebar">
  734. <div id="sidebarcontent">
  735. <div id="thetitle">Portfolio</div>
  736. <div id="subtitle"></div>
  737. <div class="links">
  738. <a href="/">Home</a>
  739. <a href="#" id="sort" data-filter="*:not(.towatch)">Menu</a>
  740.  
  741.  
  742.  
  743.  
  744. </div>
  745. </div>
  746. </div>
  747.  
  748. <div class="sortmenu">
  749. <div class="closer">
  750. <a href="#" data-filter="*:not(.towatch)" id="closebutton">
  751. <div class="closebutton one">
  752. <div class="close1">
  753. <div class="close2"></div></div>
  754. </div></a></div>
  755.  
  756. Sort by:<p></p>
  757. <div class="sortingmenu">
  758. <a href="#" data-sort-by="filmtitle" id="title" data-filter="*:not(.towatch)" title="A - Z">Title</a>
  759.  
  760. <a href="#" data-sort-by="filmdirector" id="director" data-filter="*:not(.towatch)" title="A - Z (Last Name)">Director</a>
  761.  
  762. <a href="#" data-sort-by="filmyear" id="year" data-filter="*:not(.towatch)" title="New - Old">Year</a>
  763.  
  764. <a href="#" data-sort-by="original-order" data-filter="*:not(.towatch)" id="date" title="Most - Least Recent">Date</a>
  765.  
  766. </div>
  767.  
  768. <p></p>
  769. Filter by:<p></p>
  770.  
  771.  
  772. <a href="#" id="genre" data-filter="*:not(.towatch)">Genre</a>
  773. <div class="genretoggle filtermenu">
  774.  
  775. <!-- ###
  776.  
  777. As you can see, you are now inside the genre menu. You can remove and add genres, simply by copying this line:
  778.  
  779. <a href="#" data-filter=".heregoesyournewgenre">Here goes your new Genre</a>
  780.  
  781. Don't forget to change the filter and the text.
  782.  
  783. -->
  784. <a href="#" data-filter=".comedy" >Comedy</a>
  785. <a href="#" data-filter=".docu" >Documentary</a>
  786. <a href="#" data-filter=".noir">Film Noir</a>
  787. <a href="#" data-filter=".scifi" >Sci-fi</a>
  788. <a href="#" data-filter=".superhero" >Superhero</a>
  789.  
  790. <!-- ###
  791.  
  792. I put these in italics (<i></i>), because they're not actual genres.You might want to keep Rewatch. Notice how it says ".re" for data-filter. This is important. For now, just remember this.
  793.  
  794. -->
  795.  
  796. <a href="#" data-filter=".re"><i>Rewatch</i></a>
  797. <a href="#" data-filter=".school"><i>School Related</i></a> </div>
  798.  
  799.  
  800.  
  801. <a href="#" id="month" data-filter="*:not(.towatch)">Month</a>
  802. <div class="datetoggle filtermenu">
  803.  
  804. <!-- ###
  805.  
  806. This is where you can add Months, to navigate more easily between them. Just add a line whenever a new month begins. Don't forget to change the filter as well.
  807.  
  808. -->
  809. <a href="#" data-filter=".november2014" >November '14</a>
  810. <a href="#" data-filter=".october2014" >October '14</a>
  811.  
  812. </div>
  813. <a href="#" id="rating" data-filter="*:not(.towatch)">Rating</a>
  814.  
  815. <div class="ratingtoggle filtermenu">
  816.  
  817.  
  818. <!-- ###
  819.  
  820. I chose this grading system, you'll have to deal with it. ;-)
  821.  
  822. -->
  823. <a href="#" data-filter=".a" >A</a>
  824. <a href="#" data-filter=".b" >B</a>
  825. <a href="#" data-filter=".c" >C</a> <br>
  826. <a href="#" data-filter=".d" >D</a>
  827. <a href="#" data-filter=".e" >E</a>
  828. <a href="#" data-filter=".f" >F</a>
  829. </div>
  830.  
  831. <p></p>
  832. More<p></p>
  833.  
  834. <div class="filtermenu">
  835.  
  836. <!--
  837.  
  838. Same principle. If you don't want the actors menu, the best thing would be to completely delete it from the code, but that would require a lot of work, and I won't help you with that. A very simple solution would be to simply delete the Actors link. The script would still be there, but you can't open it, so who cares.
  839.  
  840. You might have noticed that this: "*:not(.towatch)" is something that pops up quite a bit. Since I have a .towatch category, and I don't want it to show unless I specifically ask for it, I need to include :not(.towatch); if you don't want a towatch category, you can replace it with "*".
  841.  
  842. -->
  843. <a href="#" data-filter=".towatch" id="towatch">To Watch</a>
  844.  
  845. <a href="#" id="people" data-filter="*:not(.towatch)">Actors</a>
  846. <a href="#" id="all" data-filter="*:not(.towatch)">Show All</a>
  847.  
  848.  
  849. </div></div>
  850.  
  851. <div class="people">
  852. <div class="closer">
  853. <a href="#" data-filter="*:not(.towatch)" id="close">
  854. <div class="closebutton two">
  855. <div class="close1">
  856. <div class="close2"></div></div>
  857. </div></a>
  858. </div>
  859.  
  860. <div class="peopletitle" title="first name">
  861.  
  862. Actors</div>
  863.  
  864. <div class="peoplesort">
  865.  
  866. <!-- ###
  867.  
  868. This menu allows you to filter trough movies by actors. As you can see, some links are pink, and some are grey. Clicking on the pink ones shows actors, clicking on the grey ones does nothing. Why? Because there are no actors whose name begin with that letter yet. In the list below you can see some letters have a class="nothing". You've guessed correct, that's for when there's nothing there.
  869.  
  870. So, when you update this with your own films and actors, don't forget to update this list. (Add or Remove 'class="nothing"')
  871.  
  872. -->
  873. <a href="#" data-filter=".aaa">A</a>
  874. <a href="#" data-filter=".bbb" class="nothing">B</a>
  875. <a href="#" data-filter=".ccc" class="nothing">C</a>
  876. <a href="#" data-filter=".ddd" class="nothing">D</a>
  877. <a href="#" data-filter=".eee" class="nothing">E</a>
  878. <a href="#" data-filter=".fff" class="nothing">F</a>
  879. <a href="#" data-filter=".ggg">G</a>
  880. <a href="#" data-filter=".hhh">H</a>
  881. <a href="#" data-filter=".iii" class="nothing">I</a>
  882. <a href="#" data-filter=".jjj">J</a>
  883. <a href="#" data-filter=".kkk">K</a>
  884. <a href="#" data-filter=".lll" class="nothing">L</a>
  885. <a href="#" data-filter=".mmm">M</a>
  886. <a href="#" data-filter=".nnn" class="nothing">N</a>
  887. <a href="#" data-filter=".ooo" class="nothing">O</a>
  888. <a href="#" data-filter=".ppp" class="nothing">P</a>
  889. <a href="#" data-filter=".qqq" class="nothing">Q</a>
  890. <a href="#" data-filter=".rrr" >R</a>
  891. <a href="#" data-filter=".sss" class="nothing">S</a>
  892. <a href="#" data-filter=".ttt" class="nothing">T</a>
  893. <a href="#" data-filter=".uuu" class="nothing">U</a>
  894. <a href="#" data-filter=".vvv" class="nothing">V</a>
  895. <a href="#" data-filter=".www" class="nothing">W</a>
  896. <a href="#" data-filter=".xxx" class="nothing">X</a>
  897. <a href="#" data-filter=".yyy" class="nothing">Y</a>
  898. <a href="#" data-filter=".zzz" class="nothing">Z</a>
  899. </div>
  900.  
  901. <div class="actors">
  902.  
  903.  
  904. <!-- ####
  905.  
  906. And now the actors.
  907.  
  908. Example 1: You want to add Woody Harrelson
  909.  
  910. 1. There is no actor whose name begins with a 'w' yet, so first, you have to update the list above and remove class="nothing" from the W link.
  911.  
  912. 2. Add this below the other actors: (I suggest keeping things alphabetical for a better structure.)
  913.  
  914. <div class="actor www">
  915. <a href="#" data-filter=".wh">Woody Harrelson</a>
  916. </div>
  917.  
  918. => You have to add a new class because Woody's the first W. It needs to have class 'www' because that's the filter of the W link in the menu above.
  919.  
  920. => You have to add a data-filter. I'm simply using the initials of the actors, since that's easy to use and to remember. In case of doubles (Melissa McCartney and Matthew McConaughey) just differentiate however you like (mmc and mm).
  921.  
  922. 3. You're done.
  923.  
  924. Example 2: You want to add Jennifer Lawrence
  925.  
  926. 1. We already have a J, so this is pretty simple. Simply copy this
  927.  
  928. <a href="#" data-filter=".jl">Jennifer Lawrence</a>
  929.  
  930. right before this
  931.  
  932. <a href="#" data-filter=".jc">Jessica Chastain</a>
  933.  
  934. 2. You're done.
  935.  
  936.  
  937. -->
  938.  
  939.  
  940. <div class="actor aaa">
  941. <a href="#" data-filter=".ah">Anne Hathaway</a>
  942. </div>
  943.  
  944. <div class="actor ggg">
  945. <a href="#" data-filter=".gp">Gwyneth Paltrow</a>
  946. </div>
  947.  
  948. <div class="actor hhh">
  949. <a href="#" data-filter=".hr">Halina Reijn</a>
  950. </div>
  951.  
  952. <div class="actor jjj">
  953. <a href="#" data-filter=".jc">Jessica Chastain</a>
  954. </div>
  955.  
  956. <div class="kkk actor">
  957. <a href="#" data-filter=".kw">Kristen Wiig</a>
  958. </div>
  959.  
  960. <div class="mmm actor">
  961. <a href="#" data-filter=".md">Matt Damon</a>
  962. <a href="#" data-filter=".mm">Matthew McConaughey</a>
  963. <a href="#" data-filter=".mmc" >Melissa McCartney</a>
  964. </div>
  965.  
  966. <div class="actor rrr" >
  967. <a href="#" data-filter=".rw">Rebel Wilson</a>
  968. <a href="#" data-filter=".rd" >Robert Downey Jr.</a>
  969. </div>
  970.  
  971. </div>
  972.  
  973. </div>
  974.  
  975.  
  976. <div class="content">
  977.  
  978. <!-- ####
  979.  
  980.  
  981. This is where you add your films. We've just walked through a lot of filters. They obviously need to come back in the films. I'll use Interstellar as a way to explain where everything should go.
  982.  
  983. <div class="film a ah md jc scifi november2014 mm" data-category="nolan christopher">
  984.  
  985. FILM: every film needs to have the film class!
  986.  
  987. A: This is the rating. You can change it to A+ or A- inside the film, but NOT in the class.
  988.  
  989. AH: Anne Hathaway
  990. MD: Matt Damon the
  991. MM: Matthew McConaughey actors
  992. JC: Jessica Chastain
  993.  
  994. SCIFI: This is the genre.
  995.  
  996. NOVEMBER2014: This is the month.
  997.  
  998. data-category= The director ALWAYS needs to be inside the data-category="".
  999. "nolan Otherwise you won't be able to sort through directors by their
  1000. christopher" last name.
  1001.  
  1002.  
  1003. <div class="cover"><img src="http://static.tumblr.com/etgrokk/jXvnfp7fp /oie_bbddfualwdnu.jpg"></div>
  1004.  
  1005. This is where you paste your image url. It's not strictly necessary but I recommend scaling it down to 350px x 175px. If you have a lot of large image files, the page will take longer to load. As for as dimensions go:
  1006. 1 Width = 2 Height (or less; NOT MORE)
  1007.  
  1008. <div class="filminfo">
  1009. <div class="filmtitle">Interstellar</div> Title
  1010. <div class="filmyear">(2014)</div> Year
  1011. <div class="filmdirector">by Christopher Nolan</div> Director These are
  1012. <div class="filmdate">20/11 Date Watched visible
  1013. <a style="color:deeppink;">A+</a> Rating on hover
  1014. </div>
  1015. </div></div>
  1016.  
  1017. That's all pretty straightforward I think.
  1018.  
  1019. In order for the sort by date (which is the original order) to work, you need to add the films in order. (I prefer from most to least recent, but you can change that if you like. )
  1020.  
  1021.  
  1022.  
  1023.  
  1024. You're almost done! All that remains are rewatches and films you want to watch.
  1025.  
  1026. -->
  1027.  
  1028.  
  1029. <div class="film a ah md mm jc scifi september2015 " data-category="nolan christopher">
  1030. <div class="cover"><img src="http://static.tumblr.com/cczutf2/1Yaoflwdt/budgetteren.png"></div>
  1031. <div class="filminfo">
  1032. <div class="filmtitle">Immersive Space</div>
  1033. <div class="filmyear">Unearth The Legend</div>
  1034. <div class="filmdirector">Demise of Cleopatra</div>
  1035. <div class="filmdate"><a style="color:deeppink;">Lees Meer</a></div>
  1036. </div></div>
  1037.  
  1038. <div class="film docu a hr november2015" data-category="van Haalen">
  1039. <div class="cover"><img src="http://static.tumblr.com/cczutf2/1Yaoflwdt/budgetteren.png"></div>
  1040. <div class="filminfo">
  1041. <div class="filmtitle">Communicatie Project</div>
  1042. <div class="filmyear">Budgetteren</div>
  1043. <div class="filmdirector">Jouwhulponline</div>
  1044. <div class="filmdate"> <a style="color:deeppink;">Lees Meer</a></div>
  1045. </div></div>
  1046.  
  1047.  
  1048. <div class="film b rd gp superhero februari2016" data-category="Black Shane">
  1049. <div class="cover"><img src="http://static.tumblr.com/cczutf2/cDKoflwky/brush.png"></div>
  1050. <div class="filminfo">
  1051. <div class="filmtitle">Serious Game Design</div>
  1052. <div class="filmyear">Brush 'M</div>
  1053. <div class="filmdirector">Tandpraktijken</div>
  1054. <div class="filmdate"> <a style="color:deeppink;">Lees Meer</a></div>
  1055. </div></div>
  1056.  
  1057. <!-- ###
  1058.  
  1059. This is a rewatch. As I've pointed out, the data-filter for rewatch is .re (and not .rewatch), so you have to add class re (NOT REWATCH) to film. (The reason you can't do that, is because rewatch is an existing style, that would mess up the layout of the filmtitle.)
  1060.  
  1061. In order to get the blue banner on top of the film, you only need to change the cover class. Add a rewatch class (REWATCH, NOT RE), and add the word Rewatch right before the img tag. Your picture will not shrink, but it will get cut off at the bottom. If you don't want that either, use a picture that has 350 (w) x 145 (h) as dimensions.
  1062.  
  1063. Voila, you're done.
  1064.  
  1065. -->
  1066. <div class="film october2014 rw mmc kw comedy a march2016" data-category="Feig Paul">
  1067. <div class="cover"><img src="http://static.tumblr.com/cczutf2/O7Qoflwrl/welkom-in-gamestad.png"></div>
  1068. <div class="filminfo">
  1069. <div class="filmtitle">Serious Game Design</div>
  1070. <div class="filmyear">Welkom in Gamestad</div>
  1071. <div class="filmdirector">by Paul Feig</div>
  1072. <div class="filmdate">30/10 <a style="color:deeppink;">Lees Meer</a></div>
  1073. </div></div>
  1074.  
  1075. <div class="film noir a october2014 school" data-categorie="Preminger Otto">
  1076. <div class="cover"><img src="http://static.tumblr.com/cczutf2/kcUoflwwd/origami.png"></div>
  1077. <div class="filminfo">
  1078. <div class="filmtitle">Visual Design</div>
  1079. <div class="filmyear">De Wereld van Origami</div>
  1080. <div class="filmdirector">Work in Progress</div>
  1081. <div class="filmdate"><a style="color:deeppink;">Lees Meer</a></div>
  1082. </div></div>
  1083.  
  1084. <!-- ### TO WATCH
  1085.  
  1086. Here is where you can put films you want to watch. It's the same system as the other films. You should only have two classes (film and towatch). Everything else is the same, except that you don't have a filmdate or a rating yet.
  1087.  
  1088.  
  1089. Now. That's it! You're done. Congratz!
  1090. Hope you have fun with it!
  1091.  
  1092.  
  1093. -->
  1094.  
  1095.  
  1096.  
  1097.  
  1098. </div>
  1099.  
  1100.  
  1101.  
  1102.  
  1103.  
  1104. </body>
  1105. </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!