API tools faq
paste
Advertisement
attractedtosin

Fic Recs Page 001b

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