API tools faq
paste
bychloethemes

Faves Page 1 - by Chloe

bychloethemes
Jul 20th, 2015
458
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6. _ _ _
  7. | |__ _ _ ___| |__ | | ___ ___
  8. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  9. | |_) | |_| | | (__| | | | | (_) | __/
  10. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  11. |___/
  12.  
  13. Faves Page 1 by Chloe | @dontbrag | @bychloethemes
  14. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistibute.
  15.  
  16. For html help go to @htmlqueens
  17.  
  18. -->
  19. <title>Faves</title>
  20. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  21. <style type="text/css">
  22. div.scrollit::-webkit-scrollbar {
  23. background-color: rgba(0,0,0,0);
  24. height: 5px;
  25. width: 5px;
  26. }
  27. div.scrollit::-webkit-scrollbar-thumb {
  28. background-color: #f00; /*scrollbar color*/
  29. width: 5px;
  30. height: 5px;
  31. }
  32. body {
  33. background:#eee url('http://static.tumblr.com/yxfeliq/tfAnrmfgs/normal.png') repeat fixed; /*the current picture is a see through grid so you can change the colour before it and it will change your grid*/
  34. /*delete between here and the next comment if you change the background image*/
  35. -webkit-background-size: 15px; /*these numbers change the grid size*/
  36. -moz-background-size: 15px; /*you will need to change all of them*/
  37. -o-background-size: 15px;
  38. background-size: 15px;
  39. /*delete above from previous comment to here if you change the background image*/
  40. font-family:'consolas';/*change the font here*/
  41. font-size:14px; /*change the font size here*/
  42. color:#000; /*change the font color here*/
  43. overflow:hidden;
  44. height:100%;
  45. }
  46. .main {
  47. width:900px;
  48. height:500px;
  49. background:#fff; /*change the main background color here*/
  50. border-radius:5px; /*rounds the corners*/
  51. border:1px solid #f00; /*gives it a border*/
  52. box-shadow:5px 5px rgba(204,204,204,0.5);/*gives it a shadow*/
  53. margin:auto;
  54. position:absolute;
  55. left:0;
  56. right:0;
  57. top:0;
  58. bottom:0;
  59. }
  60. a {
  61. color:#00f; /*link color*/
  62. text-decoration:none;
  63. }
  64. a:hover {
  65. color:#00f; /*link color on hover*/
  66. }
  67. .title {
  68. width:250px;
  69. height:30px;
  70. padding:5px;
  71. font-size:30px;
  72. text-align:center;
  73. background:#fff; /*change the main background color here*/
  74. border-radius:5px; /*rounds the corners*/
  75. border:1px solid #f00; /*gives it a border*/
  76. box-shadow:5px 5px rgba(204,204,204,0.5);/*gives it a shadow*/
  77. z-index:9999;
  78. margin:auto;
  79. position:absolute;
  80. left:0;
  81. right:0;
  82. top:-580px;
  83. bottom:0;
  84. }
  85. .back {
  86. width:100px;
  87. height:20px;
  88. padding:5px;
  89. font-size:20px;
  90. text-align:center;
  91. background:#fff; /*change the main background color here*/
  92. border-radius:5px; /*rounds the corners*/
  93. border:1px solid #f00; /*gives it a border*/
  94. box-shadow:5px 5px rgba(204,204,204,0.5);/*gives it a shadow*/
  95. z-index:9999;
  96. margin:auto;
  97. position:absolute;
  98. left:0;
  99. right:0;
  100. top:560px;
  101. bottom:0;
  102. }
  103. table {
  104. width:100%;
  105. height:100%;
  106. border-spacing: 15px;
  107. border-collapse: separate;
  108. }
  109. td {
  110. vertical-align:top;
  111. text-align:center;
  112. padding:0;
  113. }
  114. h3 {
  115. background:#ff0; /*subtitle background*/
  116. border-radius:5px; /*makes the corners rounded*/
  117. margin-top:0;
  118. margin-bottom:0;
  119. font-size:20px;
  120. line-height:22px;
  121.  
  122. }
  123. .scrollit {
  124. max-height:189px;
  125. overflow:auto;
  126. margin-top:15px;
  127. }
  128. .credit {
  129. width:14px;
  130. height:13px;
  131. color: #000;
  132. position:fixed;
  133. bottom: 10px;
  134. right: 10px;
  135. line-height: 14px;
  136. font-size:12px;
  137. font-family: 'consolas';
  138. text-transform: uppercase;
  139. padding:3px 4px;
  140. overflow: hidden;
  141. z-index:999999999999999999;
  142. text-align:left;
  143. -webkit-transition: all 0.5s ease-in-out;
  144. -moz-transition: all 0.5s ease-in-out;
  145. -o-transition: all 0.5s ease-in-out;
  146. transition: all 0.5s ease-in-out;
  147. }
  148. .fa-diamond {
  149. right:4px;
  150. position:absolute;
  151. }
  152. .credit:hover {
  153. width:111px;
  154. background:#000;
  155. color:#fff;
  156. -webkit-transition: all 0.5s ease-in-out;
  157. -moz-transition: all 0.5s ease-in-out;
  158. -o-transition: all 0.5s ease-in-out;
  159. transition: all 0.5s ease-in-out;
  160. }
  161. .credit a {
  162. color:#fff;
  163. text-decoration: none;
  164. }
  165. .credit .mine {
  166. opacity:0;
  167. visibility:hidden;
  168. }
  169. .credit:hover .mine {
  170. opacity: 1;
  171. visibility: visible;
  172. -webkit-transition: all 0.5s ease-in-out 0.5s;
  173. -moz-transition: all 0.5s ease-in-out 0.5s;
  174. -o-transition: all 0.5s ease-in-out 0.5s;
  175. transition: all 0.5s ease-in-out 0.5s;
  176. }
  177. </style>
  178. </head>
  179. <body>
  180. <div class="title">
  181. FAVES
  182. </div>
  183. <div class="back">
  184. <a href="/">BACK</a>
  185. </div>
  186. <div class="main">
  187. <table>
  188. <tr>
  189. <td>
  190. <h3>A-B-C</h3>
  191. <div class="scrollit">
  192. <a href="/">Blogs Here</a><br>
  193. <a href="/">Blogs Here</a><br>
  194. <a href="/">Blogs Here</a><br>
  195. <a href="/">Blogs Here</a><br>
  196. <a href="/">Blogs Here</a><br>
  197. <a href="/">Blogs Here</a><br>
  198. <a href="/">Blogs Here</a><br>
  199. <a href="/">Blogs Here</a><br>
  200. <a href="/">Blogs Here</a><br>
  201. <a href="/">Blogs Here</a><br>
  202. <a href="/">Blogs Here</a><br>
  203. <a href="/">Blogs Here</a><br>
  204. <a href="/">Blogs Here</a><br>
  205. <a href="/">Blogs Here</a><br>
  206. <a href="/">Blogs Here</a><br>
  207. <a href="/">Blogs Here</a><br>
  208. <a href="/">Blogs Here</a><br>
  209. </div>
  210. </td>
  211. <td>
  212. <h3>D-E-F</h3>
  213. <div class="scrollit">
  214. <a href="/">Blogs Here</a><br>
  215. <a href="/">Blogs Here</a><br>
  216. <a href="/">Blogs Here</a><br>
  217. <a href="/">Blogs Here</a><br>
  218. <a href="/">Blogs Here</a><br>
  219. <a href="/">Blogs Here</a><br>
  220. <a href="/">Blogs Here</a><br>
  221. <a href="/">Blogs Here</a><br>
  222. <a href="/">Blogs Here</a><br>
  223. <a href="/">Blogs Here</a><br>
  224. <a href="/">Blogs Here</a><br>
  225. <a href="/">Blogs Here</a><br>
  226. <a href="/">Blogs Here</a><br>
  227. <a href="/">Blogs Here</a><br>
  228. <a href="/">Blogs Here</a><br>
  229. <a href="/">Blogs Here</a><br>
  230. <a href="/">Blogs Here</a><br>
  231. </div>
  232. </td>
  233. <td>
  234. <h3>G-H-I</h3>
  235. <div class="scrollit">
  236. <a href="/">Blogs Here</a><br>
  237. <a href="/">Blogs Here</a><br>
  238. <a href="/">Blogs Here</a><br>
  239. <a href="/">Blogs Here</a><br>
  240. <a href="/">Blogs Here</a><br>
  241. <a href="/">Blogs Here</a><br>
  242. <a href="/">Blogs Here</a><br>
  243. <a href="/">Blogs Here</a><br>
  244. <a href="/">Blogs Here</a><br>
  245. <a href="/">Blogs Here</a><br>
  246. <a href="/">Blogs Here</a><br>
  247. <a href="/">Blogs Here</a><br>
  248. <a href="/">Blogs Here</a><br>
  249. <a href="/">Blogs Here</a><br>
  250. <a href="/">Blogs Here</a><br>
  251. <a href="/">Blogs Here</a><br>
  252. <a href="/">Blogs Here</a><br>
  253. </div>
  254. </td>
  255. <td>
  256. <h3>J-K-L</h3>
  257. <div class="scrollit">
  258. <a href="/">Blogs Here</a><br>
  259. <a href="/">Blogs Here</a><br>
  260. <a href="/">Blogs Here</a><br>
  261. <a href="/">Blogs Here</a><br>
  262. <a href="/">Blogs Here</a><br>
  263. <a href="/">Blogs Here</a><br>
  264. <a href="/">Blogs Here</a><br>
  265. <a href="/">Blogs Here</a><br>
  266. <a href="/">Blogs Here</a><br>
  267. <a href="/">Blogs Here</a><br>
  268. <a href="/">Blogs Here</a><br>
  269. <a href="/">Blogs Here</a><br>
  270. <a href="/">Blogs Here</a><br>
  271. <a href="/">Blogs Here</a><br>
  272. <a href="/">Blogs Here</a><br>
  273. <a href="/">Blogs Here</a><br>
  274. <a href="/">Blogs Here</a><br>
  275. </div>
  276. </td>
  277. </tr>
  278. <tr>
  279. <td>
  280. <h3>M-N-O</h3>
  281. <div class="scrollit">
  282. <a href="/">Blogs Here</a><br>
  283. <a href="/">Blogs Here</a><br>
  284. <a href="/">Blogs Here</a><br>
  285. <a href="/">Blogs Here</a><br>
  286. <a href="/">Blogs Here</a><br>
  287. <a href="/">Blogs Here</a><br>
  288. <a href="/">Blogs Here</a><br>
  289. <a href="/">Blogs Here</a><br>
  290. <a href="/">Blogs Here</a><br>
  291. <a href="/">Blogs Here</a><br>
  292. <a href="/">Blogs Here</a><br>
  293. <a href="/">Blogs Here</a><br>
  294. <a href="/">Blogs Here</a><br>
  295. <a href="/">Blogs Here</a><br>
  296. <a href="/">Blogs Here</a><br>
  297. <a href="/">Blogs Here</a><br>
  298. <a href="/">Blogs Here</a><br>
  299. </div>
  300. </td>
  301. <td>
  302. <h3>P-Q-R-S</h3>
  303. <div class="scrollit">
  304. <a href="/">Blogs Here</a><br>
  305. <a href="/">Blogs Here</a><br>
  306. <a href="/">Blogs Here</a><br>
  307. <a href="/">Blogs Here</a><br>
  308. <a href="/">Blogs Here</a><br>
  309. <a href="/">Blogs Here</a><br>
  310. <a href="/">Blogs Here</a><br>
  311. <a href="/">Blogs Here</a><br>
  312. <a href="/">Blogs Here</a><br>
  313. <a href="/">Blogs Here</a><br>
  314. <a href="/">Blogs Here</a><br>
  315. <a href="/">Blogs Here</a><br>
  316. <a href="/">Blogs Here</a><br>
  317. <a href="/">Blogs Here</a><br>
  318. <a href="/">Blogs Here</a><br>
  319. <a href="/">Blogs Here</a><br>
  320. <a href="/">Blogs Here</a><br>
  321. </div>
  322. </td>
  323. <td>
  324. <h3>T-U-V-W</h3>
  325. <div class="scrollit">
  326. <a href="/">Blogs Here</a><br>
  327. <a href="/">Blogs Here</a><br>
  328. <a href="/">Blogs Here</a><br>
  329. <a href="/">Blogs Here</a><br>
  330. <a href="/">Blogs Here</a><br>
  331. <a href="/">Blogs Here</a><br>
  332. <a href="/">Blogs Here</a><br>
  333. <a href="/">Blogs Here</a><br>
  334. <a href="/">Blogs Here</a><br>
  335. <a href="/">Blogs Here</a><br>
  336. <a href="/">Blogs Here</a><br>
  337. <a href="/">Blogs Here</a><br>
  338. <a href="/">Blogs Here</a><br>
  339. <a href="/">Blogs Here</a><br>
  340. <a href="/">Blogs Here</a><br>
  341. <a href="/">Blogs Here</a><br>
  342. <a href="/">Blogs Here</a><br>
  343. </div>
  344. </td>
  345. <td>
  346. <h3>X-Y-Z-#</h3>
  347. <div class="scrollit">
  348. <a href="/">Blogs Here</a><br>
  349. <a href="/">Blogs Here</a><br>
  350. <a href="/">Blogs Here</a><br>
  351. <a href="/">Blogs Here</a><br>
  352. <a href="/">Blogs Here</a><br>
  353. <a href="/">Blogs Here</a><br>
  354. <a href="/">Blogs Here</a><br>
  355. <a href="/">Blogs Here</a><br>
  356. <a href="/">Blogs Here</a><br>
  357. <a href="/">Blogs Here</a><br>
  358. <a href="/">Blogs Here</a><br>
  359. <a href="/">Blogs Here</a><br>
  360. <a href="/">Blogs Here</a><br>
  361. <a href="/">Blogs Here</a><br>
  362. <a href="/">Blogs Here</a><br>
  363. <a href="/">Blogs Here</a><br>
  364. <a href="/">Blogs Here</a><br>
  365. </div>
  366. </td>
  367. </tr>
  368. </table>
  369. </div>
  370. <div class="credit">
  371. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  372. </div>
  373. </body>
  374. </html>
Advertisement
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!