API tools faq
paste
booksinvolved

theme pack #1: media page

booksinvolved
Dec 27th, 2015
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.54 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.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.  
  7. <!---- theme by jasnahdavar
  8. ------ DO NOT steal/redistribute/remove credit
  9. ------ ASK ME if you want to use as a base code i promise i'm nice
  10. ------ COLOURS:
  11. I would recommend going with a single colour but of course it's up to you!
  12. If you're going for a single colour just ctrl+F: #fd96a9 and replace with whatever colour you want
  13. I've also marked all the places where you can change colours in the code. Please don't edit any part of the code that I haven't marked for editing unless you know what you're doing
  14. ------ Hope you like it!
  15. ------>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  20. <link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>
  23.  
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  26. <script type="text/javascript">
  27. $(document).ready(function(){
  28. $(".b1").click(function(){
  29. $(".p1").animate({
  30. height:'290px',
  31. overflow:'auto',
  32. });
  33. $(".p2").animate({
  34. height:'0px',
  35. overflow:'hidden',
  36. });
  37. $(".p3").animate({
  38. height:'0px',
  39. overflow:'hidden',
  40. });
  41. });
  42. $(".b2").click(function(){
  43. $(".p2").animate({
  44. height:'290px',
  45. overflow:'auto',
  46. });
  47. $(".p1").animate({
  48. height:'0px',
  49. overflow:'hidden',
  50. });
  51. $(".p3").animate({
  52. height:'0px',
  53. overflow:'hidden',
  54. });
  55. });
  56. $(".b3").click(function(){
  57. $(".p3").animate({
  58. height:'290px',
  59. overflow:'auto',
  60. });
  61. $(".p1").animate({
  62. height:'0px',
  63. overflow:'hidden',
  64. });
  65. $(".p2").animate({
  66. height:'0px',
  67. overflow:'hidden',
  68. });
  69. });
  70. });
  71. </script>
  72.  
  73.  
  74.  
  75.  
  76.  
  77. <style type="text/css">
  78.  
  79.  
  80.  
  81. ::-webkit-scrollbar-thumb:vertical { height:12px; border:2px solid #fff; background-color:#fd96a9; }
  82. ::-webkit-scrollbar-thumb:horizontal { background-color:#fff; }
  83. ::-webkit-scrollbar { width:11px; height:7px; border:5px solid #fff; background-color:#fd96a9; }
  84.  
  85. /* #fd96a9 in the three lines of code above is the scrollbar colour */
  86.  
  87. body {
  88. background: #fff; /* BACKGROUND COLOR */
  89. color: #000; /* TEXT COLOR */
  90. font-size: 10px;
  91. font-family:calibri;
  92. overflow:hidden;
  93.  
  94. }
  95.  
  96. a:link, a:visited, a:active {
  97. font-weight:none;
  98. text-decoration:none;
  99. color:#5d2e46; /* LINK COLOR (ALSO TITLE COLOR) */
  100. transition:0.6s;
  101. }
  102.  
  103. a:hover {
  104. color:#000;
  105. }
  106.  
  107. #cont {
  108. border-top:50px solid #fd96a9; /*MEDIA LINKS BACKGROUND COLOR */
  109. width:500px;
  110. height:300px;
  111. left:50%;
  112. margin-left:-250px;
  113. top:50%;
  114. margin-top:-180px;
  115. position:fixed;
  116. }
  117.  
  118. #title {
  119. position:fixed;
  120. height:40px;
  121. top:50%;
  122. left:0px;
  123. width:100%;
  124. margin-top:-215px;
  125. font-size:40px;
  126. font-family:arial;
  127. text-transform:lowercase;
  128. font-weight:bold;
  129. font-style:italic;
  130. text-align:Center;
  131. }
  132.  
  133. .buttons {
  134. margin-top:-18px;
  135. text-align:center;
  136. }
  137.  
  138. .b1, .b2, .b3 {
  139. font-family:arial;
  140. color:#f9f9f9; /* MEDIA LINKS COLOR */
  141. font-size:20px;
  142. font-weight:bold;
  143. cursor:help;
  144. display:inline-block;
  145. padding:0px 10px;
  146. transition:0.6s ease;
  147. }
  148.  
  149.  
  150. .b1:hover, .b2:hover, .b3:hover {
  151. color:#000; /* MEDIA LINKS HOVER COLOR */
  152. }
  153.  
  154.  
  155. /* do not edit the below section of code unless you are sure of what you are doing-*/
  156. .p1 {
  157. height:290px;
  158. width:490px;
  159. position:fixed;
  160. top:50%;
  161. margin-top:-125px;
  162. left:50%;
  163. margin-left:-250px;
  164. overflow:auto;
  165. padding:5px;
  166. }
  167.  
  168. .p2, .p3 {
  169. height:0px;
  170. width:490px;
  171. position:fixed;
  172. top:50%;
  173. margin-top:-125px;
  174. left:50%;
  175. margin-left:-250px;
  176. overflow:auto;
  177. }
  178.  
  179. #credit {
  180. position:fixed;
  181. z-index:100;
  182. bottom:10px;
  183. right:20px;
  184. }
  185.  
  186. #credit a {
  187. background:#eee;
  188. color:#000;
  189. font-family:cambria;
  190. font-size:10px;
  191. padding:2px;
  192. }
  193.  
  194. #credit a:hover {
  195. background:#000;
  196. color:#eee;
  197. }
  198.  
  199.  
  200. .film, .book, .show {
  201. height:120px;
  202. width:225px;
  203. margin:5px;
  204. display:inline-block;
  205. }
  206.  
  207. .film img {
  208. height:120px;
  209. width:80px;
  210. }
  211.  
  212.  
  213. .book img {
  214. height:120px;
  215. width:80px;
  216. margin-left:72px;
  217. transition:0.6s;
  218. }
  219.  
  220.  
  221. .show img {
  222. height:120px;
  223. width:80px;
  224. margin-left:145px;
  225. transition:0.6s;
  226. }
  227.  
  228.  
  229. .film:hover .filmname {
  230. padding-top:8px;
  231. height:12px;
  232. opacity:1;
  233. margin-top:-19px;
  234. }
  235.  
  236. .film:hover .filmdesc {
  237. width:135px;
  238. height:90px;
  239. padding:5px;
  240. opacity:1;
  241. margin-top:-120px;
  242. }
  243.  
  244. .filmdesc {
  245. width:135px;
  246. padding:0px 5px;
  247. height:0px;
  248. opacity:0;
  249. overflow:auto;
  250. position:absolute;
  251. transition:0.6s;
  252. margin-top:0px;
  253. margin-left:80px;
  254. }
  255.  
  256. .book:hover .bookdesc {
  257. opacity:1;
  258. margin-left:80px;
  259. }
  260.  
  261. .book:hover img {
  262. margin-left:0px;
  263. }
  264.  
  265. .show:hover .showname {
  266. padding-top:8px;
  267. height:12px;
  268. opacity:1;
  269. }
  270.  
  271. .showdesc {
  272. width:135px;
  273. padding:0px 5px;
  274. height:0px;
  275. opacity:0;
  276. overflow:auto;
  277. position:absolute;
  278. transition:0.6s;
  279. margin-top:-120px;
  280. }
  281.  
  282. .show:hover .showdesc {
  283. width:135px;
  284. height:90px;
  285. padding:5px;
  286. opacity:1;
  287. margin-top:-100px;
  288. }
  289.  
  290. /* now you can edit the code below */
  291.  
  292. /*--------------------------------FILMS--------------------------------*/
  293.  
  294.  
  295. .filmname {
  296. margin-top:0px;
  297. opacity:0;
  298. height:0px;
  299. background:#fd96a9; /* FILM TITLE BACKGROUND COLOUR */
  300. width:225px;
  301. position:absolute;
  302. font-style:italic;
  303. text-align:center;
  304. font-size:9px;
  305. color:#f9f9f9; /* FILM TITLE COLOUR */
  306. font-weight:bold;
  307. transition:0.6s;
  308. }
  309.  
  310.  
  311. /* -------------- BOOK ---------------------*/
  312.  
  313. .bookdesc {
  314. height:110px;
  315. width:115px;
  316. padding:5px;
  317. border-left:15px solid #fd96a9; /* BOOK SPINE COLOUR */
  318. margin-top:-120px;
  319. margin-left:72px;
  320. position:absolute;
  321. opacity:0;
  322. transition:0.6s;
  323. overflow:auto;
  324. }
  325.  
  326.  
  327. .bookname::first-letter {
  328. background:#fd96a9; /* BOOK TITLE FIRST LETTER BACKGROUND COLOUR */
  329. font-family:cambria;
  330. padding:0px 2px;
  331. text-transform:uppercase;
  332. font-weight:bold;
  333. font-size:16px;
  334. }
  335.  
  336. .bookname {
  337.  
  338. border-bottom:1px solid #fd96a9; /* BOOK TITLE BORDER COLOUR */
  339. text-transform:uppercase;
  340. font-family:cambria;
  341. font-size:10px;
  342. }
  343.  
  344. .author {
  345. text-align:right;
  346. font-weight:bold;
  347. text-transform:lowercase;
  348.  
  349. }
  350.  
  351.  
  352. /*---------------------TV----------------------------*/
  353.  
  354.  
  355. .showname {
  356. margin-top:-120px;
  357. height:0px;
  358. opacity:0;
  359. background:#fd96a9; /* SHOW TITLE BACKGROUND COLOUR */
  360. width:225px;
  361. position:absolute;
  362. font-style:italic;
  363. text-align:center;
  364. font-size:9px;
  365. color:#f9f9f9; /* SHOW TITLE COLOUR */
  366. font-weight:bold;
  367. transition:0.6s;
  368. }
  369.  
  370.  
  371. /* RATINGS AND DATE WATCHED/READ */
  372.  
  373. .stars {
  374. color:#e6d029; /* RATINGS COLOR */
  375. text-align:center;
  376. margin-bottom:5px;
  377. }
  378.  
  379. .date {
  380. color:#8a96b5; /* DATE WATCHED/READ COLOR */
  381. text-align:center;
  382. font-style:italic;
  383. font-weight:bold;
  384. font-size:10px;
  385. margin-bottom:5px;
  386. }
  387.  
  388.  
  389.  
  390.  
  391. </style>
  392.  
  393. </head>
  394. <body>
  395. <div id="cont">
  396. <div id="title">
  397. <a href="/">
  398.  
  399. PAGE TITLE HERE
  400.  
  401. </a>
  402. </div>
  403.  
  404. <div class="buttons">
  405. <div class="b1">
  406.  
  407. films
  408.  
  409. </div>
  410. <div class="b2">
  411.  
  412. books
  413.  
  414. </div>
  415. <div class="b3">
  416.  
  417. shows
  418.  
  419. </div>
  420. </div>
  421.  
  422. <!--------------------------- FILMS --------------------------------------->
  423.  
  424. <div class="p1">
  425.  
  426. <!--------------------------- FIRST FILM -------------------------->
  427. <div class="film">
  428.  
  429. <img src="URL">
  430.  
  431. <div class="filmname">
  432.  
  433. FILM TITLE
  434.  
  435. </div>
  436.  
  437. <div class="filmdesc">
  438.  
  439. <div class="stars">
  440. ☆☆☆☆☆
  441. </div>
  442. <div class="date">
  443. watched:
  444. </div>
  445.  
  446. Description here. Rating and date watched are optional! Remove the above 6 lines of code if you don't want them.
  447.  
  448. </div>
  449. </div>
  450.  
  451. <!--------------------- END FIRST FILM --------------------------->
  452.  
  453.  
  454. <!---------- sample code for other films, just copy and paste above
  455. -------------------------------------------------------------begin:
  456. <div class="film">
  457.  
  458. <img src="URL">
  459. <div class="filmname">
  460. FILM TITLE
  461. </div>
  462.  
  463. <div class="filmdesc">
  464.  
  465. <div class="stars">
  466. ☆☆☆☆☆
  467. </div>
  468. <div class="date">
  469. watched:
  470. </div>
  471.  
  472. DESCRIPTION
  473.  
  474. </div>
  475. </div>
  476.  
  477. end:------------------------------------------------------------->
  478.  
  479.  
  480. </div>
  481. <!------------------------------------------------- END OF FILMS -------------------------->
  482.  
  483.  
  484. <!---------------------------------- BOOKS ------------------------------------------->
  485. <div class="p2">
  486.  
  487. <!--------------------- FIRST BOOK -------------------->
  488. <div class="book">
  489.  
  490. <img src="URL">
  491.  
  492. <div class="bookdesc">
  493.  
  494. <div class="bookname">
  495.  
  496. TITLE
  497.  
  498. </div>
  499. <div class="author">
  500.  
  501. AUTHOR
  502.  
  503. </div>
  504.  
  505. DESCRIPTION HERE. Please notice that the html for the book code is slightly different from the film because .bookname appears within .bookdesc . Feel free to add the code for ratings or date read here as well.
  506.  
  507. </div>
  508. </div>
  509.  
  510. <!----------------------------- END FIRST BOOK -------------------------->
  511.  
  512.  
  513. <!---------- sample code for other books, just copy and paste above
  514. -------------------------------------------------------------begin:
  515. <div class="book">
  516.  
  517. <img src="URL">
  518.  
  519. <div class="bookdesc">
  520. <div class="bookname">
  521.  
  522. TITLE
  523.  
  524. </div>
  525. <div class="author">
  526.  
  527. AUTHOR
  528.  
  529. </div>
  530.  
  531. DESCRIPTION
  532.  
  533. </div>
  534. </div>
  535.  
  536. end:------------------------------------------------------------->
  537.  
  538. </div>
  539.  
  540. <!------------------------------------------------- END OF BOOKS -------------------------->
  541.  
  542. <!---------------------------------- SHOWS ------------------------------------------->
  543. <div class="p3">
  544.  
  545.  
  546. <!----------------------------- FIRST SHOW--------------------->
  547. <div class="show">
  548.  
  549. <img src="URL">
  550. <div class="showname">
  551.  
  552. SHOW NAME
  553.  
  554. </div>
  555.  
  556. <div class="showdesc">
  557.  
  558. Sample description. Again, you can add the code for ratings and date watched here.
  559.  
  560. </div>
  561. </div>
  562.  
  563. <!--------------------------------- END FIRST SHOW ------------------------>
  564.  
  565. <!---------- sample code for other books, just copy and paste above
  566. -------------------------------------------------------------begin:
  567.  
  568. <div class="show">
  569.  
  570. <img src="URL">
  571.  
  572. <div class="showname">
  573.  
  574. SHOW NAME
  575.  
  576. </div>
  577. <div class="showdesc">
  578.  
  579. DESCRIPTION
  580.  
  581. </div>
  582. </div>
  583.  
  584. end:------------------------------------------------------------->
  585.  
  586. </div>
  587. </div>
  588.  
  589. <!------------------------------------------------- END OF SHOWS-------------------------->
  590.  
  591.  
  592.  
  593.  
  594. <!----------------------------- please do not remove credit! :) -------------------->
  595.  
  596. <div id="credit">
  597. <a href="http://jasnahdavar.tumblr.com">JD.</a>
  598. </div>
  599. </body>
  600.  
  601.  
  602. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!