API tools faq
paste
Advertisement
attractedtosin

Fic Recs Page 001a

attractedtosin
Aug 12th, 2013
3,047
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.76 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" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!------
  6. FICRECS PAGE 001a
  7. wolfwrecked [ohcodey.tumblr.com]
  8. Please observe common theme sharing etiquette:
  9. :you may alter but do not remove credit
  10. :do not use as a base or redistibute
  11. :etc
  12.  
  13. ----->
  14.  
  15. <title>FICRECS</title>
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
  18. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  19. <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  20.  
  21. <script type="text/javascript">
  22. function unhide(divID) {
  23. var item = document.getElementById(divID);
  24. if (item) {
  25. item.className=(item.className=='hidden')?'unhidden':'hidden';
  26. }
  27. }
  28. </script>
  29.  
  30. <style type="text/css">
  31.  
  32.  
  33.  
  34.  
  35. /* CUSTOMISABLE COLOURS */
  36.  
  37. /* SUBHEADINGS HOVER COLOURS AND TEXT HOVER COLOURS */
  38. .author:hover {background-color:#ff719f;color:#fff;}
  39. .wordcount:hover {background-color:#f5f248;color:#fff;}
  40. .pairing:hover {background-color:#78ea4a;color:#fff;}
  41. .rating:hover {background-color:#65e3ea;color:#fff;}
  42.  
  43.  
  44. /* KEYWORDS HEADINGS HOVER COLOUR AND TEXT HOVER COLOUR */
  45. #tags-bar h1:hover {background-color:#ffb14b; color:#fff;}
  46.  
  47.  
  48. /* FIC TITLE HOVER COLOUR AND TEXT HOVER COLOUR */
  49. .ficname:hover {background-color:#ffb14b;}
  50. .ficname:hover a {color:#fff;}
  51.  
  52.  
  53. /* HEADER ACCENT COLOURS */
  54. .firstletter {color:#ff719f;}
  55. .lastletter {color:#65e3ea;}
  56.  
  57.  
  58.  
  59.  
  60.  
  61. /*CSS*/
  62.  
  63.  
  64. body {
  65. margin-top:50px;
  66. margin-bottom:100px;
  67. background-color:#eeeeee;
  68. font-family: 'Roboto Condensed', sans-serif;
  69. }
  70.  
  71. a {text-decoration:none;}
  72.  
  73. .hidden {
  74. display: none;
  75. }
  76.  
  77. .unhidden {
  78. display: block;
  79. }
  80. .upcon {overflow:hidden;width:100%;margin-bottom:50px;}
  81.  
  82. .container {
  83. width:800px;
  84. margin-left:auto;
  85. margin-right:auto;
  86. }
  87.  
  88. .header {
  89. font-family: 'Archivo Black', sans-serif;
  90. font-size:50px;
  91. LETTER-SPacing:-3px;
  92. width:800px;
  93. margin-LEFT:60PX;
  94. color:#333333;
  95. }
  96.  
  97. .fic-list {}
  98.  
  99. .li {
  100. list-style:none;
  101. margin:0;
  102. }
  103.  
  104. .ul fic-list {
  105. margin-top:0;
  106. list-style:none;
  107. }
  108.  
  109. .list {
  110. margin:0px 0 0 0;
  111. list-style:none;
  112. }
  113.  
  114. .recbox {
  115. width:200px;
  116. height:200px;
  117. float: left;
  118. margin:20px;
  119. background-color:#ffffff;
  120. }
  121.  
  122. .ficname {
  123. width:190px;
  124. height:32px;
  125. text-align:center;
  126. font-size:12px;
  127. text-transform:uppercase;
  128. background-color:#333333;
  129. padding:5px;
  130. overflow:hidden;
  131. letter-spacing:+1px;
  132. transition: all 0.3s ease-out;
  133. -o-transition: all 0.3s ease-out;
  134. -webkit-transition: all 0.3s ease-out;
  135. -moz-transition: all 0.3s ease-out;
  136. }
  137.  
  138. .ficname:hover a {
  139. transition: all 0.3s ease-out;
  140. -o-transition: all 0.3s ease-out;
  141. -webkit-transition: all 0.3s ease-out;
  142. -moz-transition: all 0.3s ease-out;
  143. }
  144.  
  145.  
  146.  
  147. .ficname a {
  148. color:#ffffff;
  149. text-decoration:none;
  150. }
  151.  
  152.  
  153. .ficdesc {
  154. height:115px;
  155. font-family: droid sans, verdana, sans serif;
  156. font-size:11px;
  157. text-align:justify;
  158. padding:10px;
  159. margin-top:20px;
  160. overflow:auto;
  161. color:#444444;
  162. background-color:#ffffff;
  163. }
  164.  
  165. .fictags {
  166. display:none;
  167. }
  168.  
  169. .tags {
  170. height:0;
  171. }
  172.  
  173. .author {
  174. width:140px;
  175. height:12px;
  176. padding: 2px 0;
  177. float:left;
  178. text-align:center;
  179. letter-spacing:+1px;
  180. background-color:#d4d4d4;
  181. font-size:9px;
  182. text-transform:uppercase;
  183. overflow:hidden;
  184. color:#888;
  185. transition: all 0.3s ease-out;
  186. -o-transition: all 0.3s ease-out;
  187. -webkit-transition: all 0.3s ease-out;
  188. -moz-transition: all 0.3s ease-out;
  189. }
  190.  
  191.  
  192. .pairing {
  193. width:140px;
  194. height:12px;
  195. padding: 2px 0;
  196. float:left;
  197. letter-spacing:+1px;
  198. text-align:center;
  199. background-color:#e4e4e4;
  200. font-size:9px;
  201. text-transform:uppercase;
  202. overflow:hidden;
  203. color:#888;
  204. transition: all 0.3s ease-out;
  205. -o-transition: all 0.3s ease-out;
  206. -webkit-transition: all 0.3s ease-out;
  207. -moz-transition: all 0.3s ease-out;
  208. }
  209.  
  210.  
  211. .rating {
  212. width:60px;
  213. padding: 2px 0;
  214. height:12px;
  215. letter-spacing:+1px;
  216. float:left;
  217. text-align:center;
  218. background-color:#d4d4d4;
  219. font-size:9px;
  220. text-transform:uppercase;
  221. overflow:hidden;
  222. color:#888;
  223. transition: all 0.3s ease-out;
  224. -o-transition: all 0.3s ease-out;
  225. -webkit-transition: all 0.3s ease-out;
  226. -moz-transition: all 0.3s ease-out;
  227. }
  228.  
  229. .wordcount {
  230. width:60px;
  231. padding: 2px 0;
  232. height:12px;
  233. float:left;
  234. letter-spacing:+1px;
  235. text-align:center;
  236. background-color:#e4e4e4;
  237. font-size:9px;
  238. text-transform:uppercase;
  239. overflow:hidden;
  240. color:#888;
  241. }
  242.  
  243. .author:hover, .pairing:hover, .wordcount:hover, .rating:hover, #tags-bar h1:hover, a, #tags-bar h1 {transition: all 0.3s ease-out;
  244. -o-transition: all 0.3s ease-out;
  245. -webkit-transition: all 0.3s ease-out;
  246. -moz-transition: all 0.3s ease-out;
  247. }
  248.  
  249.  
  250. .tag-bar-header .hover, .tag-bar-header:hover .normal {
  251. display: none;
  252. transition: all 0.3s ease-out;
  253. -o-transition: all 0.3s ease-out;
  254. -webkit-transition: all 0.3s ease-out;
  255. -moz-transition: all 0.3s ease-out;
  256. }
  257.  
  258. .tag-bar-header:hover .hover {
  259. display: block;
  260. transition: all 0.3s ease-out;
  261. -o-transition: all 0.3s ease-out;
  262. -webkit-transition: all 0.3s ease-out;
  263. -moz-transition: all 0.3s ease-out;
  264. }
  265.  
  266. .search-bar {
  267. width:200px;
  268. height:40px;
  269. background-color:#333333;
  270. float:left;
  271. margin-left:60px;
  272.  
  273. }
  274.  
  275. .search {
  276. padding-left:10px;
  277. margin: 9px 0 0 20px;
  278. }
  279.  
  280. .tag-bar { width:415px;
  281. max-height:800px;
  282. background-color:#ffffff;
  283. border-bottom:solid 1px #eeeeee;
  284. border-left:solid 1px #eeeeee;
  285. margin-left:300px;
  286. text-align:right;
  287. font-size:12px;
  288. position:relative;
  289. z-index:20;}
  290.  
  291. #tags-bar { width:170px;
  292. max-height:502px;
  293. background-color:#ffffff;
  294. border-bottom:solid 1px #eeeeee;
  295. border-left:solid 1px #eeeeee;
  296. float:right;
  297. margin-right:-140px;
  298. margin-top:-41px;
  299. text-align:right;
  300. font-size:12px;
  301. position:relative;
  302. overflow: auto;
  303. z-index:20;
  304. }
  305.  
  306. #tags-bar a {display:block;
  307. height:30px;
  308. z-index:30;
  309. background-color:#333333;
  310. text-align:center;
  311. font-size:16px;
  312. text-transform:uppercase;
  313. padding-top:10px;
  314. color:#ffffff;
  315. text-decoration:none;
  316. }
  317.  
  318. .tags-bar-keywords {
  319. text-align:center;
  320. margin:0 5px;
  321. font-family: droid sans, verdana, sans serif;
  322. text-transform:lowercase;
  323. font-size:11px;
  324. letter-spacing:+1px;
  325. color:#444444;}
  326.  
  327. #tags-bar h1 {font-size:12px;display:block;padding:5px 0;background-color:#333333;color:#ffffff;font-weight:normal;text-transform:uppercase;
  328. letter-spacing:+1px;text-align:center;}
  329.  
  330. .tags-bar-header {
  331. width:100%;
  332. height:30px;
  333. margin-bottom:20px;
  334. z-index:30;
  335. background-color:#333333;
  336. text-align:center;
  337. font-size:12px;
  338. text-transform:uppercase;
  339. padding-top:10px;
  340. color:#ffffff;
  341. letter-spacing:+1px;
  342. }
  343.  
  344. .tag-bar a {
  345. color:#222222;
  346. text-decoration:none;
  347. font-size:28px;
  348. font-weight:900;
  349. padding:0 15px 10px 0;
  350. }
  351.  
  352.  
  353. .tag-bar-header {
  354. width:415px;
  355. height:30px;
  356. z-index:30;
  357. background-color:#333333;
  358. text-align:right;
  359. font-size:12px;
  360. text-transform:uppercase;
  361. padding:10px 20px 0px 5px;
  362. transition: all 0.3s ease-out;
  363. -o-transition: all 0.3s ease-out;
  364. -webkit-transition: all 0.3s ease-out;
  365. -moz-transition: all 0.3s ease-out;
  366. letter-spacing:+1px;
  367. }
  368.  
  369. .tag-bar-header a {
  370. font-weight:normal;
  371. color:#ffffff;
  372. text-decoration:none;
  373. font-size:12px;
  374. text-transform:uppercase;
  375. padding:0;
  376. transition: all 0.3s ease-out;
  377. -o-transition: all 0.3s ease-out;
  378. -webkit-transition: all 0.3s ease-out;
  379. -moz-transition: all 0.3s ease-out;
  380. letter-spacing:+1px;
  381. }
  382.  
  383.  
  384. ::selection {
  385. background-color:#333333;
  386. color:#ffffff;
  387. }
  388.  
  389. ::-moz-selection {
  390. background-color:#333333;
  391. color:#ffffff;
  392. }
  393.  
  394. ::-webkit-scrollbar {
  395. width:5px;
  396. height:auto;
  397. background:#ffffff;};
  398. }
  399.  
  400. ::-webkit-scrollbar-corner {
  401. background:#ffffff;
  402. }
  403.  
  404. ::-webkit-scrollbar-thumb:vertical {
  405. background:#444444;
  406. }
  407.  
  408. ::-webkit-scrollbar-thumb:horizontal {
  409. background:#444444;
  410. }
  411.  
  412. .credit {
  413. padding:2px 6px 4px 6px;
  414. font-size:14px;
  415. font-family:georgia;
  416. font-weight:bold;
  417. position:fixed;
  418. bottom:8px;
  419. right:8px;
  420. border:1px solid #ffffff;
  421. }
  422.  
  423. .credit a {color:#666666;}
  424.  
  425.  
  426. </style>
  427. </head>
  428.  
  429. <body>
  430. <div class="upcon">
  431. <div class="container">
  432. <div class="header">
  433. <span class="firstletter">F</span>IC RECS<span class="lastletter">.</span>
  434. </div>
  435.  
  436. <div id="fic-list">
  437.  
  438. <div class="search-bar">
  439. <input class="search" width="100" placeholder="search keyword(s)"/>
  440. </div>
  441.  
  442. <div class="tag-bar">
  443. <div class="tag-bar-header">
  444. <div class="normal"><a href="javascript:unhide('tags-bar');">KEYWORDS</a></div>
  445. <div class="hover"><a href="javascript:unhide('tags-bar');">CLICK ME</a></div>
  446. </div>
  447. </div>
  448. <div id="tags-bar" class="hidden">
  449. <div class="tags-bar-header">search suggestions:</div>
  450.  
  451.  
  452. <h1>HEADER</h1>
  453. <br>
  454.  
  455. <div class="tags-bar-keywords">
  456.  
  457. KEYWORD<br>
  458. KEYWORD<br>
  459. KEYWORD<br>
  460. KEYWORD<br>
  461. KEYWORD<br>
  462. KEYWORD<br>
  463.  
  464. </div>
  465. <br>
  466.  
  467.  
  468. <h1>HEADER</h1>
  469. <br>
  470.  
  471. <div class="tags-bar-keywords">
  472.  
  473. KEYWORD<br>
  474. KEYWORD<br>
  475. KEYWORD<br>
  476. KEYWORD<br>
  477. KEYWORD<br>
  478. KEYWORD<br>
  479.  
  480. </div>
  481. <br>
  482.  
  483. <a href="javascript:unhide('tags-bar');">↑</a>
  484. </div>
  485.  
  486.  
  487.  
  488. <ul class="list">
  489.  
  490. <!-- TEMPLATE - COPY & PASTE AFTER THE ARROW BELOW
  491.  
  492. <li>
  493. <div class="recbox">
  494.  
  495. <div class="ficname"><a href="LINK">TITLE</a></div>
  496. <div class="author">AUTHOR</div>
  497. <div class="wordcount">WC: </div>
  498. <div class="pairing">PAIRING</div>
  499. <div class="rating">RATED: </div>
  500.  
  501. <div class="ficdesc">
  502.  
  503. FIC DESCRIPTION
  504.  
  505. </div>
  506. <div class="fictags">
  507. <div class="tags">
  508.  
  509. PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
  510.  
  511. </div>
  512. </div>
  513. </div>
  514. </li>
  515.  
  516.  
  517. -->
  518.  
  519.  
  520.  
  521. <li>
  522. <div class="recbox">
  523.  
  524. <div class="ficname"><a href="LINK">TITLE</a></div>
  525. <div class="author">AUTHOR</div>
  526. <div class="wordcount">WC: </div>
  527. <div class="pairing">PAIRING</div>
  528. <div class="rating">RATED: </div>
  529.  
  530. <div class="ficdesc">
  531.  
  532. FIC DESCRIPTION
  533.  
  534. </div>
  535. <div class="fictags">
  536. <div class="tags">
  537.  
  538. PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
  539.  
  540. </div>
  541. </div>
  542. </div>
  543. </li>
  544.  
  545.  
  546. <li>
  547. <div class="recbox">
  548.  
  549. <div class="ficname"><a href="LINK">TITLE</a></div>
  550. <div class="author">AUTHOR</div>
  551. <div class="wordcount">WC: </div>
  552. <div class="pairing">PAIRING</div>
  553. <div class="rating">RATED: </div>
  554.  
  555. <div class="ficdesc">
  556.  
  557. FIC DESCRIPTION
  558.  
  559. </div>
  560. <div class="fictags">
  561. <div class="tags">
  562.  
  563. PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
  564.  
  565. </div>
  566. </div>
  567. </div>
  568. </li>
  569.  
  570.  
  571.  
  572.  
  573.  
  574.  
  575.  
  576.  
  577. </ul>
  578. </div>
  579. </div>
  580.  
  581.  
  582. <div class="credit">
  583. <a href="http://ohcodey.tumblr.com">&cent;</a>
  584. </div>
  585.  
  586. </div>
  587. <script src="http://static.tumblr.com/qwfkpqk/evSmlscpv/list.min.js"></script>
  588. <script type="text/javascript">
  589. var options = {
  590. valueNames: [ 'recbox', 'author', 'pairing', 'rated', 'wordcount' ]
  591. };
  592. var recboxList = new List('fic-list', options);
  593. </script>
  594.  
  595.  
  596. </body>
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!