API tools faq
paste
Advertisement
Guest User

Fic Rec Theme

a guest
Jan 29th, 2015
1,130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.32 KB | None | 0 0
raw download clone embed print report
  1. <!Doctype html public>
  2.  
  3. <!--- Fic Rec theme by Chipsoo
  4. - Please do not remove credit
  5. - Please do not use it as a base
  6. - Please do not claim it as your own/redistribute it
  7. - Inspiration credit: http://pohroro.com/post/60833950439/p-a-g-e-preview-code-wait-for-5
  8. - Customization help on the post
  9. - Please do not mix my codes with others' --->
  10.  
  11.  
  12. <html>
  13. <head>
  14.  
  15. <title>{Title}</title>
  16.  
  17. <style type="text/css">
  18.  
  19. body {
  20.     font-family: consolas; /*font*/
  21.     font-size: 11px;
  22.     color: #484848;
  23.     background-color: #e1fffe; /*bg color*/
  24. }
  25.  
  26. ::-webkit-scrollbar {
  27.     width: 3px;
  28.     height: 5px;
  29.     background-color: #ffffff; /*scrollbar bg*/
  30. }
  31.  
  32. ::-webkit-scrollbar-thumb {
  33.     background-color: #c0c0c0; /*scrollbar color*/
  34.     border-radius: 10px;
  35. }
  36.  
  37. a {
  38.     text-decoration: none;
  39.    transition: 0.5s ease-in-out;
  40.     -webkit-transition: 0.5s ease-in-out;
  41.     -o-transition: 0.5s ease-in-out;
  42.     -moz-transition: 0.5s ease-in-out;
  43. }
  44.  
  45. a:hover {
  46.     transition: 0.5s ease-in-out;
  47.     -webkit-transition: 0.5s ease-in-out;
  48.     -o-transition: 0.5s ease-in-out;
  49.     -moz-transition: 0.5s ease-in-out;
  50. }
  51.  
  52.     .sidebar {
  53.         width: 330px;
  54.         height: 500px;
  55.         left: 0px;
  56.         bottom: 0px;
  57.         position: fixed;
  58.     }
  59.    
  60.     .sidebar img {
  61.         width: 300px;
  62.         max-height: 350px;
  63.         bottom: 0px;
  64.         left: 0px;
  65.         position: absolute;
  66.     }
  67.    
  68.     .navilinks {text-transform: uppercase;}
  69.    
  70.     .index a {
  71.         width: 75px;
  72.         height: 500px;
  73.         background-color: #8eb4e6; /*index bg*/
  74.         text-align: center;
  75.         padding-top: 20px;
  76.         position: absolute;
  77.         border-radius: 0px 10px;
  78.         color: #ffffff; /*index link bg*/
  79.     }
  80.    
  81.     .index a:hover {
  82.         transition: 0.5s ease-in-out;
  83.     -webkit-transition: 0.5s ease-in-out;
  84.     -o-transition: 0.5s ease-in-out;
  85.     -moz-transition: 0.5s ease-in-out;
  86.         background-color: #ffe6b5; /*index bg hover*/
  87.         color: #808080; /*index link hover*/
  88.     }
  89.    
  90.     .msg a {
  91.         width: 75px;
  92.         height: 450px;
  93.         background-color: #a9c5eb; /*ask bg*/
  94.         text-align: center;
  95.         padding-top: 20px;
  96.         left: 75px;
  97.         position: absolute;
  98.         bottom: 0px;
  99.         border-radius: 0px 10px;
  100.         color: #ffffff; /*ask link */
  101.     }
  102.    
  103.     .msg a:hover {
  104.         background-color: #fffac4; /*ask bg hover*/
  105.         color: #808080; /*ask link hover*/
  106.         transition: 0.5s ease-in-out;
  107.     -webkit-transition: 0.5s ease-in-out;
  108.     -o-transition: 0.5s ease-in-out;
  109.     -moz-transition: 0.5s ease-in-out;
  110.     }
  111.    
  112.     .archive a {
  113.         width: 75px;
  114.         height: 400px;
  115.         background-color: #bad0ef; /*past bg*/
  116.         text-align: center;
  117.         padding-top: 20px;
  118.         left: 150px;
  119.         position: absolute;
  120.         bottom: 0px;
  121.         border-radius: 0px 10px;
  122.         color: #ffffff; /*past link*/
  123.     }
  124.    
  125.     .archive a:hover {
  126.         color: #808080; /*past link hover*/
  127.         background-color: #fff2d9; /*past bg hover*/
  128.         transition: 0.5s ease-in-out;
  129.     -webkit-transition: 0.5s ease-in-out;
  130.     -o-transition: 0.5s ease-in-out;
  131.     -moz-transition: 0.5s ease-in-out;;
  132.     }
  133.    
  134.     .credit a {
  135.         width: 75px;
  136.         height: 350px;
  137.         background-color: #cedef4; /*credit bg*/
  138.         text-align: center;
  139.         padding-top: 20px;
  140.         left: 225px;
  141.         position: absolute;
  142.         bottom: 0px;
  143.         border-radius: 0px 10px;
  144.         color: #ffffff; /*credit link*/
  145.     }
  146.    
  147.     .credit a:hover {
  148.         color: #808080; /*credit link hover*/
  149.         background-color: #fff7e6; /*credit bg hover*/
  150.         transition: 0.5s ease-in-out;
  151.     -webkit-transition: 0.5s ease-in-out;
  152.     -o-transition: 0.5s ease-in-out;
  153.     -moz-transition: 0.5s ease-in-out;
  154.     }
  155.    
  156.     table {
  157.         position: absolute;
  158.         margin-top: 50px;
  159.         margin-left: 400px;
  160.         margin-bottom: 30px;
  161.         width: 750px;
  162.     }
  163.     td {
  164.         padding: 10px;
  165.     }
  166.    
  167.     .fictitle {
  168.         text-transform: uppercase;
  169.         text-align: center;
  170.         background-color: #ffa8a8; /*fic title bg*/
  171.         font-size: 14px;
  172.         padding: 3px;
  173.         border-bottom: dashed #c0c0c0 1px; /*border between the fictitle and author tag*/
  174.     }
  175.    
  176.     .fictitle a {color: #ffffff;} /*fic title*/
  177.     .fictitle a:hover {color: #484848;} /*fic title hover*/
  178.    
  179.     .author {
  180.         text-transform: uppercase;
  181.         text-align: center;
  182.         background-color: #ffcece; /*author tag bg*/
  183.         font-size: 11px;
  184.         padding: 3px;
  185.         border-bottom: dashed #c0c0c0 1px; /*border between author and pairing tag*/
  186.     }
  187.    
  188.     .pairing {
  189.         font-size: 10px;
  190.         padding: 3px;
  191.         text-transform: uppercase;
  192.         color: #606060; /*pairing color*/
  193.         background-color: #ffdfdf; /*pairing tag bg*/
  194.         border-bottom: dashed #c0c0c0 1px; //*border between pairing and rating/lenght*/
  195.     }
  196.    
  197.     .info1 {
  198.         color: #707070; /*rating color*/
  199.         width: 104px;
  200.         padding: 3px;
  201.         background-color: #ffeaea; /*rating bg*/
  202.         font-size: 10px;
  203.         text-transform: capitalize;
  204.         position: absolute;
  205.         border-bottom: dashed #c0c0c0 1px; /*border between rating and genres*/
  206.     }
  207.    
  208.     .info2 {
  209.         color: #707070; /*length color*/
  210.         width: 110px;
  211.         padding: 3px;
  212.         background-color: #ffecec; /*length tag bg*/
  213.         font-size: 10px;
  214.         text-transform: capitalize;
  215.         margin-left: 110px;
  216.         border-left: dashed #c0c0c0 1px; /*border between length and rating*/
  217.         border-bottom: dashed #c0c0c0 1px; /*border between length and genres*/
  218.     }
  219.    
  220.     .info3 {
  221.         font-size: 10px;
  222.         padding: 3px;
  223.         color: #808080; /*genres color*/
  224.         background-color: #fff2f2; /*genres tag bg*/
  225.         border-bottom: dashed #d0d0d0 1px; /*border between genres and summary*/
  226.         position: relative;
  227.         text-transform: capitalize;
  228.     }
  229.    
  230.     .info4 {
  231.         font-size: 10px;
  232.         padding: 3px;
  233.         color: #909090; /*summary color*/
  234.         background-color: #fffdfd; /*summary tag bg*/
  235.         border-bottom: dashed #d0d0d0 1px; /*border between summary and notes*/
  236.         height: 80px;
  237.         overflow-y: auto;
  238.     }
  239.    
  240.     .info5 {
  241.         font-size: 10px;
  242.         padding: 3px;
  243.         color: #a0a0a0; /*notes color*/
  244.         background-color: #fffefb; /*notes tag bg color*/
  245.         border-bottom: dashed #d0d0d0 1px; /*border of notes tag*/
  246.         height: 40px;
  247.         overflow-y: auto;
  248.     }
  249.    
  250. </style>
  251.  
  252. </head>
  253.  
  254. <body>
  255.    
  256.  
  257. <div class="sidebar">
  258.  
  259. <div class="navilinks">
  260. <span class="index"><a href="/">index</a></span>
  261. <span class="msg"><a href="/ask">ask</a></span>
  262. <span class="archive"><a href="/archive">past</a></span>
  263. <span class="credit"><a href="http://chipsoo.tumblr.com/">credit</a></span>
  264. </div>
  265.  
  266. <img class="sidebarpic" src="http://fc06.deviantart.net/fs71/f/2013/192/d/8/free__iwatobi_swim_club_ver__01_render_by_tenten143-d6d3pis.png" /></div>
  267. <!---img url here--->
  268.  
  269. <table>
  270.  
  271. <tr><!---1st row--->
  272.  
  273. <td><!---1st fic--->
  274. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  275. <div class="author">by: author name</div>
  276. <div class="pairing">pairing: pairing name</div>
  277. <div class="info1">rating: g</div>
  278. <div class="info2">length: word count</div>
  279. <div class="info3">genre: genres</div>
  280. <div class="info4">Summary: Enter summary here</div>
  281. <div class="info5">Notes: Enter notes here</div>
  282. </td>
  283. <!---end of 1st fic--->
  284.  
  285. <td> <!---2nd fic--->
  286. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  287. <div class="author">by: author name</div>
  288. <div class="pairing">pairing: pairing name</div>
  289. <div class="info1">rating: g</div>
  290. <div class="info2">length: word count</div>
  291. <div class="info3">genre: genres</div>
  292. <div class="info4">Summary: Enter the fic's summary here</div>
  293. <div class="info5">Notes: Enter notes here</div>
  294. </td> <!---end of 2nd fic--->
  295.  
  296. <td> <!---3rd fic--->
  297. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  298. <div class="author">by: author name</div>
  299. <div class="pairing">pairing: pairing name</div>
  300. <div class="info1">rating: g</div>
  301. <div class="info2">length: word count</div>
  302. <div class="info3">genre: genres</div>
  303. <div class="info4">Summary: Enter the fic's summary here</div>
  304. <div class="info5">Notes: Enter notes here</div>
  305. </td><!--- end of 3rd fic--->
  306.  
  307. </tr> <!---end of 1st row--->
  308.  
  309. <tr><!---2nd row--->
  310.  
  311. <td><!---4th fic--->
  312. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  313. <div class="author">by: author name</div>
  314. <div class="pairing">pairing: pairing name</div>
  315. <div class="info1">rating: g</div>
  316. <div class="info2">length: word count</div>
  317. <div class="info3">genre: genres</div>
  318. <div class="info4">Summary: Enter the fic's summary here</div>
  319. <div class="info5">Notes: Enter notes here</div>
  320. </td>
  321. <!---end of 4th fic--->
  322.  
  323. <td> <!---5th fic--->
  324. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  325. <div class="author">by: author name</div>
  326. <div class="pairing">pairing: pairing name</div>
  327. <div class="info1">rating: g</div>
  328. <div class="info2">length: word count</div>
  329. <div class="info3">genre: genres</div>
  330. <div class="info4">Summary: Enter the fic's summary here</div>
  331. <div class="info5">Notes: Enter notes here</div>
  332. </td> <!---end of 5th fic--->
  333.  
  334. <td> <!---6th fic--->
  335. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  336. <div class="author">by: author name</div>
  337. <div class="pairing">pairing: pairing name</div>
  338. <div class="info1">rating: g</div>
  339. <div class="info2">length: word count</div>
  340. <div class="info3">genre: genres</div>
  341. <div class="info4">Summary: Enter the fic's summary here</div>
  342. <div class="info5">Notes: Enter notes here</div>
  343. </td><!--- end of 6th fic--->
  344.  
  345. </tr> <!---end of 2nd row--->
  346.  
  347. <tr><!---3rd row--->
  348.  
  349. <td><!---7th fic--->
  350. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  351. <div class="author">by: author name</div>
  352. <div class="pairing">pairing: pairing name</div>
  353. <div class="info1">rating: g</div>
  354. <div class="info2">length: word count</div>
  355. <div class="info3">genre: genres</div>
  356. <div class="info4">Summary: Enter the fic's summary here</div>
  357. <div class="info5">Notes: Enter notes here</div>
  358. </td>
  359. <!---end of 7th fic--->
  360.  
  361. <td> <!---8th fic--->
  362. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  363. <div class="author">by: author name</div>
  364. <div class="pairing">pairing: pairing name</div>
  365. <div class="info1">rating: g</div>
  366. <div class="info2">length: word count</div>
  367. <div class="info3">genre: genres</div>
  368. <div class="info4">Summary: Enter the fic's summary here</div>
  369. <div class="info5">Notes: Enter notes here</div>
  370. </td> <!---end of 8th fic--->
  371.  
  372. <td> <!---9th fic--->
  373. <div class="fictitle"><a href="FIC URL HERE">Fic title</a></div>
  374. <div class="author">by: author name</div>
  375. <div class="pairing">pairing: pairing name</div>
  376. <div class="info1">rating: g</div>
  377. <div class="info2">length: word count</div>
  378. <div class="info3">genre: genres</div>
  379. <div class="info4">Summary: Enter the fic's summary here</div>
  380. <div class="info5">Notes: Enter notes here</div>
  381. </td><!--- end of 9th fic--->
  382.  
  383. </tr> <!---end of 3rd row--->
  384.  
  385. </table>
  386.  
  387. </body>
  388.  
  389. </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!