API tools faq
paste
Advertisement
b0rn-to-be-wild

Page: TV SHOW PAGE (dark)

b0rn-to-be-wild
Jun 10th, 2017
261
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.21 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">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | TV SHOW PAGE (dark)
  7.  
  8.  
  9. + Please do not redistribute this theme or remove credits.
  10. + You are allowed to make changes as long as you keep our credits.
  11. + If you have any questions or concerns, just contact us.
  12. + Thanks for using our page! We hope that you enjoy it!
  13.  
  14. ---->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <!--- Change the title of the page here --->
  21.  
  22. <title>{title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!--- Google fonts --->
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Bubbler+One" rel="stylesheet">
  30.  
  31. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  32.  
  33.  
  34. <style type="text/css">
  35.  
  36. /* -------- BASICS ------- */
  37.  
  38. body {
  39. margin:0;
  40. width:100%;
  41. height:100%;
  42. font-family:Avalon, Arial;
  43. font-size:12px;
  44. color:#333;
  45. background: #222222;
  46. }
  47.  
  48. /* Links */
  49.  
  50. a {
  51. text-decoration:none;
  52. outline:none;
  53. }
  54.  
  55. a:hover {
  56. color:#222222;
  57. -webkit-transition: all 0.5s ease-in-out;
  58. -moz-transition: all 0.5s ease-in-out;
  59. -o-transition: all 0.5s ease-in-out;
  60. }
  61.  
  62. /* Webkit scrollbar */
  63.  
  64. ::-webkit-scrollbar {
  65. width: 9px;
  66. height: 0px;
  67. }
  68.  
  69. ::-webkit-scrollbar-button:start:decrement,
  70. ::-webkit-scrollbar-button:end:increment {
  71. height: 0px;
  72. display: block;
  73. background-color: #000000;
  74. }
  75.  
  76. ::-webkit-scrollbar-track-piece {
  77. background-color: #000000;
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb:vertical {
  81. height: 0px;
  82. background-color: #eeeeee;
  83. border: 4px solid #000000;
  84. }
  85.  
  86. /* Tumblr controls */
  87.  
  88. iframe.tmblr-iframe {
  89. top:0px!important;
  90. right:40px!important;
  91. padding:0px;
  92. opacity:0.8;
  93. transform:scale(0.6);
  94. transform-origin:100% 0;
  95. -webkit-transform:scale(0.8);
  96. -webkit-transform-origin:100% 0;
  97. -o-transform:scale(0.8);
  98. -o-transform-origin:100% 0;
  99. -moz-transform:scale(0.8);
  100. -moz-transform-origin:100% 0;
  101. -ms-transform:scale(0.8);
  102. -ms-transform-origin:100% 0;
  103. z-index:100000!important;
  104. }
  105.  
  106. iframe.tmblr-iframe:hover {
  107. opacity:1!important;
  108. }
  109.  
  110. /* -------- CONTAINER ------- */
  111.  
  112. #maincontainer{
  113. position:fixed;
  114. left:50%;
  115. top:50%;
  116. width:810px;
  117. height:auto;
  118. background:#000000;
  119. border:1px solid #222222;
  120. overflow:hidden;
  121. -webkit-transform: translateX(-50%) translateY(-50%);
  122. -moz-transform: translateX(-50%) translateY(-50%);
  123. -ms-transform: translateX(-50%) translateY(-50%);
  124. transform: translateX(-50%) translateY(-50%);
  125. }
  126.  
  127. /* -------- MENU ------- */
  128.  
  129. #menu{
  130. position:absolute;
  131. margin:0px;
  132. width:780px;
  133. padding:0 15px;
  134. background:#000000;
  135. height:57px;
  136. border-bottom:1px solid #222222;
  137. z-index:10000;
  138. }
  139.  
  140. /* Blog title */
  141.  
  142. #blogtitle{
  143. float:left;
  144. margin-top:0px;
  145. font-size:30px;
  146. line-height:57px;
  147. height:57px;
  148. width:360px;
  149. font-family: 'Philosopher', sans-serif;
  150. color:#ffffff;
  151. }
  152.  
  153. /* Navigation icons */
  154.  
  155. #mainlinks{
  156. float:right;
  157. margin-top:19px;
  158. height:50px;
  159. font-family: 'Philosopher', sans-serif;
  160. color:#222222;
  161. }
  162.  
  163. #mainlinks a{
  164. display:inline-block;
  165. margin-left:3px;
  166. margin-bottom:3px;
  167. color:#cccccc;
  168. padding:3px;
  169. font-size:14px;
  170. }
  171.  
  172. #mainlinks a:hover{
  173. background:#000000;
  174. color:#ffffff;
  175. }
  176.  
  177. /* -------- CONTENT CONTAINER i------- */
  178.  
  179. #container{
  180. position:absolute;
  181. margin-left:0px;
  182. margin-top:58px;
  183. width:606px;
  184. min-height:485px;
  185. max-height:485px;
  186. padding-left:6px;
  187. padding-top:5px;
  188. border-right:1px solid #222222;
  189. overflow-y:auto!important;
  190. z-index:100;
  191. }
  192.  
  193. .story{
  194. width:120px;
  195. margin:13px;
  196. margin-bottom:80px;
  197. -moz-transition-duration:1s;
  198. -webkit-transition-duration:1s;
  199. -o-transition-duration:1s;
  200. }
  201.  
  202. .story h1{
  203. margin-top:28px;
  204. font-family: 'Philosopher', sans-serif;
  205. color:#ffffff;
  206. font-size:20px;
  207. line-height:30px;
  208. padding:10px;
  209. border-right:1px solid #222222;
  210. }
  211.  
  212. /* Posters */
  213.  
  214. #poster{
  215. width:120px;
  216. height:145px;
  217. font-size:11px;
  218. border:1px solid #000000;
  219. }
  220.  
  221. #poster img{
  222. width:120px;
  223. height:145px;
  224. }
  225.  
  226. .info{
  227. margin-top:0px;
  228. margin-left:-1px;
  229. width:110px;
  230. padding:5px;
  231. color:#bbbbbb;
  232. font-size:11px;
  233. line-height:17px;
  234. border:1px solid #000000;
  235. }
  236.  
  237. .info b{
  238. color:#ffffff;
  239. font-size:13px;
  240. }
  241.  
  242. .story1{
  243. width:400px;
  244. margin:12px;
  245. margin-bottom:70px;
  246. padding:5px;
  247. transition-duration:1s;
  248. -moz-transition-duration:1s;
  249. -webkit-transition-duration:1s;
  250. -o-transition-duration:1s;
  251. }
  252.  
  253. #poster:hover, #poster:hover .info{
  254. border:1px solid #222222;
  255. -moz-transition-duration:1s;
  256. -webkit-transition-duration:1s;
  257. -o-transition-duration:1s;
  258. }
  259.  
  260. /* -------- SORTING CONTENT ------- */
  261.  
  262. /* Sort box style */
  263.  
  264. #sort{
  265. position:absolute;
  266. margin-left:612px;
  267. margin-top:57px;
  268. width:177px;
  269. height:455px;
  270. padding:15px;
  271. z-index:10000;
  272. }
  273.  
  274. #sort ul {
  275. list-style: none;
  276. margin-top:0px;
  277. margin-left:0px;
  278. width:165px;
  279. padding:0px;
  280. }
  281.  
  282. /* Sort title */
  283.  
  284. #title1, #title2, #title3{
  285. margin:5px;
  286. padding:5px;
  287. font-size:15px;
  288. color:#ffffff;
  289. border-bottom:1px solid #ddd;
  290. cursor:pointer;
  291. font-family: 'Philosopher', sans-serif;
  292. }
  293.  
  294. #box1, #box2, #box3{
  295. display:none;
  296. }
  297.  
  298. /* Sort link style */
  299.  
  300. #sort a {
  301. display:block;
  302. margin-left:15px;
  303. width:125px;
  304. padding:5px;
  305. font-size:12px;
  306. color:#cccccc;
  307. }
  308.  
  309. #sort a:hover {
  310. color:#ffffff;
  311. background:#222222;
  312. }
  313.  
  314. #sort li a.selected {
  315. color:#ffffff;
  316. background:#222222;
  317. }
  318.  
  319. /* ----------------------- CREDITS ----------------------------- */
  320.  
  321. #credits {
  322. position:fixed;
  323. right:10px;
  324. top:10px;
  325. z-index:100000;
  326. }
  327.  
  328. #credits img{
  329. border:1px solid #eeeeee;
  330. max-width:25px;
  331. }
  332.  
  333. </style>
  334.  
  335. <!--Important sripts-->
  336.  
  337. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  338. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  339.  
  340. <script>
  341. $(document).ready(function(){
  342.  
  343. $("#title1").click(function(){
  344. $("#box1").slideToggle(500);
  345. });
  346.  
  347. $("#title2").click(function(){
  348. $("#box2").slideToggle(500);
  349. });
  350.  
  351. $("#title3").click(function(){
  352. $("#box3").slideToggle(500);
  353. });
  354.  
  355. });
  356. </script>
  357.  
  358. <!-- Filter scripts -->
  359.  
  360. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  361. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  362.  
  363. <script>
  364. $(function(){
  365.  
  366. var $container = $('#container');
  367.  
  368. $container.isotope({
  369. itemSelector : '.story'
  370. });
  371.  
  372. var $optionSets = $('#sort .option-set'),
  373. $optionLinks = $optionSets.find('a');
  374.  
  375. $optionLinks.click(function(){
  376. var $this = $(this);
  377. // don't proceed if already selected
  378. if ( $this.hasClass('selected') ) {
  379. return false;
  380. }
  381. var $optionSet = $this.parents('.option-set');
  382. $optionSet.find('.selected').removeClass('selected');
  383. $this.addClass('selected');
  384.  
  385. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  386. var options = {},
  387. key = $optionSet.attr('data-option-key'),
  388. value = $this.attr('data-option-filter');
  389. // parse 'false' as false boolean
  390. value = value === 'false' ? false : value;
  391. options[ key ] = value;
  392. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  393. // changes in layout modes need extra logic
  394. changeLayoutMode( $this, options )
  395. } else {
  396. // otherwise, apply new options
  397. $container.isotope( options );
  398. }
  399.  
  400. return false;
  401. });
  402.  
  403. });
  404. </script>
  405.  
  406. <!--end filter scripts-->
  407.  
  408. <meta charset="utf-8">
  409. <title>{Title}</title>
  410. <link rel="shortcut icon" href="{Favicon}">
  411. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  412.  
  413. </head>
  414.  
  415. <body>
  416.  
  417. <div id="maincontainer">
  418.  
  419. <div id="menu">
  420.  
  421. <div id="blogtitle">Tv show page</div>
  422.  
  423. <div id="mainlinks">
  424. <a href="/"> index</a> /
  425. <a href="/ask"> ask</a> /
  426. <a href="/submit"> submit</a>
  427. <a href="/archive"> archive</a>
  428. </div>
  429.  
  430. </div>
  431. <!--End menu->
  432.  
  433. <!----- Filter links (here you add tags as ".one", ".mystery", ".2017" etc. Do not change ".story" tag, it refreshes the page) ------>
  434.  
  435. <div id="sort">
  436.  
  437. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  438.  
  439. <!-- These are tags. Only replace .tag and it's name. You can add more tags. -->
  440.  
  441. <li><a href="#filter" data-option-filter=".story">all tv shows</a></li>
  442.  
  443. <div id="title1"> + Genre </div>
  444.  
  445. <div id="box1">
  446. <li><a href="#filter" data-option-filter=".comedy"> - Comedy</a></li>
  447. <li><a href="#filter" data-option-filter=".romance"> - Romance</a></li>
  448. <li><a href="#filter" data-option-filter=".fantasy"> - Fantasy</a></li>
  449. <li><a href="#filter" data-option-filter=".adventure"> - Adventure</a></li>
  450. <li><a href="#filter" data-option-filter=".action"> - Action</a></li>
  451. <li><a href="#filter" data-option-filter=".history"> - History</a></li>
  452. <li><a href="#filter" data-option-filter=".mystery"> - Mystery</a></li>
  453. <li><a href="#filter" data-option-filter=".drama"> - Drama</a></li>
  454. <li><a href="#filter" data-option-filter=".crime"> - Crime</a></li>
  455. <li><a href="#filter" data-option-filter=".thriller"> - Thriller</a></li>
  456. <li><a href="#filter" data-option-filter=".horror"> - Horror</a></li>
  457. </div>
  458. <!--End box1-->
  459.  
  460. <div id="title2"> + Number of seasons </div>
  461.  
  462. <div id="box2">
  463. <li><a href="#filter" data-option-filter=".one"> - One</a></li>
  464. <li><a href="#filter" data-option-filter=".two"> - Two</a></li>
  465. <li><a href="#filter" data-option-filter=".three"> - Three</a></li>
  466. <li><a href="#filter" data-option-filter=".four"> - Four</a></li>
  467. <li><a href="#filter" data-option-filter=".five"> - Five</a></li>
  468. <li><a href="#filter" data-option-filter=".six"> - Six</a></li>
  469. <li><a href="#filter" data-option-filter=".six"> - Seven</a></li>
  470. <li><a href="#filter" data-option-filter=".six"> - Eight</a></li>
  471. </div>
  472. <!--End box2-->
  473.  
  474. <div id="title3"> + Year </div>
  475.  
  476. <div id="box3">
  477. <li><a href="#filter" data-option-filter=".2011"> - 1992</a></li>
  478. <li><a href="#filter" data-option-filter=".2011"> - 2011</a></li>
  479. <li><a href="#filter" data-option-filter=".2012"> - 2012</a></li>
  480. <li><a href="#filter" data-option-filter=".2013"> - 2013</a></li>
  481. <li><a href="#filter" data-option-filter=".2014"> - 2014</a></li>
  482. <li><a href="#filter" data-option-filter=".2015"> - 2015</a></li>
  483. <li><a href="#filter" data-option-filter=".2016"> - 2016</a></li>
  484. <li><a href="#filter" data-option-filter=".2017"> - 2017</a></li>
  485. </div>
  486. <!--End year-->
  487.  
  488. </ul>
  489. </div>
  490. <!--End sort-->
  491.  
  492.  
  493. <div id="container" class="clearfix">
  494.  
  495. <!--- theme containers
  496.  
  497. in class="story tag1" "tag1" is actually a tag you can add, to add more tags for the same tv show simply put "tag1 tag2 tag3" for example: class="story one drama 2015". I suggest you writing two word tags as one word tag
  498.  
  499. --->
  500.  
  501. <!--HEADING-->
  502.  
  503. <div id="poster" class="story">
  504. <h1>Currently watching</h1>
  505. </div>
  506. <!--End poster-->
  507.  
  508. <div id="poster" class="story tag1 tag2 tag3">
  509. <img src=""></a>
  510. <div class="info"> <b>Title</b> (year)
  511. <br> genre <br> season/seasons</div>
  512. </div>
  513. <!--End poster-->
  514.  
  515. <div id="poster" class="story tag1 tag2 tag3">
  516. <img src=""></a>
  517. <div class="info"> <b>Title</b> (year)
  518. <br> genre <br> season/seasons</div>
  519. </div>
  520. <!--End poster-->
  521.  
  522. <div id="poster" class="story tag1 tag2 tag3">
  523. <img src=""></a>
  524. <div class="info"> <b>Title</b> (year)
  525. <br> genre <br> season/seasons</div>
  526. </div>
  527. <!--End poster-->
  528.  
  529. <!-- IMPORTANT! to push headings in the next row copy <div id="poster" class="story"></div> as many times as necessary -->
  530.  
  531.  
  532. <!--HEADING-->
  533.  
  534. <div id="poster" class="story">
  535. <h1>Waiting for the next season</h1>
  536. </div>
  537. <!--End heading-->
  538.  
  539. <div id="poster" class="story tag1 tag2 tag3">
  540. <img src=""></a>
  541. <div class="info"> <b>Title</b> (year)
  542. <br> genre <br> season/seasons</div>
  543. </div>
  544. <!--End poster-->
  545.  
  546. <div id="poster" class="story tag1 tag2 tag3">
  547. <img src=""></a>
  548. <div class="info"> <b>Title</b> (year)
  549. <br> genre <br> season/seasons</div>
  550. </div>
  551. <!--End poster-->
  552.  
  553. <div id="poster" class="story tag1 tag2 tag3">
  554. <img src=""></a>
  555. <div class="info"> <b>Title</b> (year)
  556. <br> genre <br> season/seasons</div>
  557. </div>
  558. <!--End poster-->
  559.  
  560. <!-- IMPORTANT! to push headings in the next row copy <div id="poster" class="story"></div> as many times as necessary -->
  561.  
  562.  
  563. <!--HEADING-->
  564.  
  565. <div id="poster" class="story">
  566. <h1>To start watching</h1>
  567. </div>
  568. <!--End poster-->
  569.  
  570. <div id="poster" class="story tag1 tag2 tag3">
  571. <img src=""></a>
  572. <div class="info"> <b>Title</b> (year)
  573. <br> genre <br> season/seasons</div>
  574. </div>
  575. <!--End poster-->
  576.  
  577. <div id="poster" class="story tag1 tag2 tag3">
  578. <img src=""></a>
  579. <div class="info"> <b>Title</b> (year)
  580. <br> genre <br> season/seasons</div>
  581. </div>
  582. <!--End poster-->
  583.  
  584. <div id="poster" class="story tag1 tag2 tag3">
  585. <img src=""></a>
  586. <div class="info"> <b>Title</b> (year)
  587. <br> genre <br> season/seasons</div>
  588. </div>
  589. <!--End poster-->
  590.  
  591. <!---- poster containers end, to add more containers just copy/paste:
  592.  
  593. <div id="poster" class="story tag1 tag2 tag3">
  594. <img src=""></a>
  595. <div class="info"> <b>Title</b> (year)
  596. <br> genre <br> season/seasons</div>
  597. </div>
  598.  
  599. ---->
  600.  
  601. </div>
  602. <!--End container-->
  603.  
  604. </div>
  605. <!--End maincontainer-->
  606.  
  607. <!--CREDIT (DO NOT REMOVE)-->
  608. <a href="http://borntobewildthemes.tumblr.com" title="page TV SHOW PAGE by borntobewildthemes"><div id="credits">
  609. <img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
  610.  
  611. </body>
  612.  
  613.  
  614. </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!