API tools faq
paste
Advertisement
attractedtosin

Fic Recs Page 001d

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