API tools faq
paste
Advertisement
elisewhite

Tags Page 01

elisewhite
Jan 18th, 2014
2,139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.52 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <link rel="shortcut icon" href="{Favicon}"/>
  4. <title>Tags</title>
  5. <link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>
  6.  
  7. <!---------------------------------------------------------------------
  8. ----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
  9. -------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
  10. ------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
  11. ---------------------------------------------------------------------->
  12.  
  13. <style type="text/css">
  14.  
  15. ::-webkit-scrollbar-thumb {
  16. height:auto;
  17. background-color: #8b8a8b;
  18. }
  19.  
  20. ::-webkit-scrollbar {
  21. height:9px;
  22. width:2px;
  23. background-color: #fff;
  24. }
  25.  
  26. #header {
  27. width:500px;
  28. height:150px;
  29. margin-left:auto;
  30. margin-right:auto;
  31. margin-top:-10px;
  32. text-align:center;
  33. }
  34.  
  35. #header img {
  36. width:500px;
  37. height:150px;
  38. }
  39.  
  40. #title {
  41. width:550px;
  42. font-family: 'Karla', sans-serif;
  43. text-transform:uppercase;
  44. background-color:#e0e0e0;
  45. margin-top:-150px;
  46. margin-left:-25px;
  47. opacity:0.8;
  48. color:black;
  49. padding:2px 0px 2px 0px;
  50. letter-spacing:1px;
  51. font-size:15px;
  52. }
  53.  
  54. #description {
  55. width:150px;
  56. margin-top:10px;
  57. margin-left:175px;
  58. background-color:#ffffff;
  59. opacity:0.8;
  60. color:#4c4c4c;
  61. padding:2px 2px 2px 2px;
  62. font-size:8px;
  63. font-family:calibri;
  64. text-align:center;
  65. letter-spacing:1px;
  66. text-transform:uppercase;
  67. }
  68.  
  69. #links {
  70. width:auto;
  71. margin-left:auto;
  72. margin-right:auto;
  73. margin-top:5px;
  74. padding-bottom:5px;
  75. border-bottom:1px solid #667371;
  76. }
  77.  
  78. #links a {
  79. display:inline-block;
  80. width:70px;
  81. padding:1px 0px 1px 0px;
  82. background-color:#ffffff;
  83. color:gray;
  84. font-size:10px;
  85. font-family:calibri;
  86. text-align:center;
  87. letter-spacing:1px;
  88. margin-left:2px;
  89. margin-right:2px;
  90. text-transform:uppercase;
  91. text-decoration:none;
  92. -o-transition: all 0.5s ease-out;
  93. -webkit-transition: all 0.5s ease-out;
  94. -moz-transition: all 0.5s ease-out;
  95. }
  96.  
  97. #links a:hover {
  98. background-color:#667371;
  99. color:#ffffff;
  100. -o-transition: all 0.5s ease-out;
  101. -webkit-transition: all 0.5s ease-out;
  102. -moz-transition: all 0.5s ease-out;
  103. }
  104.  
  105. #content {
  106. width:500px;
  107. margin-top:60px;
  108. margin-bottom:-30px;
  109. margin-left:auto;
  110. margin-right:auto;
  111. }
  112.  
  113. #tagtitle {
  114. margin-left:-10px;
  115. margin-top:-10px;
  116. width:500px;
  117. border-bottom:1px solid #DDDDDD;
  118. text-align:center;
  119. font-family:calibri;
  120. text-transform:uppercase;
  121. letter-spacing:1px;
  122. font-size:11px;
  123. color:gray;
  124. padding:5px 0px 5px 0px;
  125. }
  126.  
  127. #tagcontainer {
  128. margin-left:0px;
  129. width:480px;
  130. height:auto;
  131. padding:10px;
  132. border-top:1px solid #DDDDDD;
  133. border-bottom:1px solid #DDDDDD;
  134. }
  135.  
  136. #tags {
  137. -moz-column-count:4;
  138. -webkit-column-count:4;
  139. column-count:4;
  140. margin-top:15px;
  141. margin-bottom:5px;
  142. text-align:center;
  143. }
  144.  
  145. #tags a {
  146. display:block;
  147. width:110px;
  148. margin:3px 0px 3px 0px;
  149. font-family:calibri;
  150. text-transform:uppercase;
  151. font-size:10px;
  152. text-decoration:none;
  153. text-align:center;
  154. color:#808080;
  155. letter-spacing:1px;
  156. -o-transition: all 0.5s ease-out;
  157. -webkit-transition: all 0.5s ease-out;
  158. -moz-transition: all 0.5s ease-out;
  159. }
  160.  
  161. #tags a:hover {
  162. letter-spacing:3px;
  163. color:#666666;
  164. background-color:#E0E3E3;
  165. -o-transition: all 0.5s ease-out;
  166. -webkit-transition: all 0.5s ease-out;
  167. -moz-transition: all 0.5s ease-out;
  168. }
  169.  
  170. #credit {
  171. font-size:9px;
  172. font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  173. font-style:italic;
  174. letter-spacing:1px;
  175. }
  176.  
  177. #credit a {
  178. background-color:#fff;
  179. padding:5px;
  180. border-top:1px solid #e9e9e9;
  181. border-bottom:1px solid #e9e9e9;
  182. position:fixed;
  183. right:15px;
  184. bottom:10px;
  185. text-decoration:none;
  186. color:gray;
  187. -moz-transition-duration:1s;
  188. -webkit-transition-duration:1s;
  189. -o-transition-duration:1s;
  190. }
  191.  
  192. #credit a:hover {
  193. color:#fff;
  194. background-color:#747474;
  195. -moz-transition-duration:1s;
  196. -webkit-transition-duration:1s;
  197. -o-transition-duration:1s;
  198. }
  199.  
  200. </style>
  201.  
  202. <body>
  203.  
  204. <!------------------------------------
  205. HEADER
  206. ------------------------------------->
  207.  
  208. <div id="header">
  209. <img src="https://24.media.tumblr.com/fcabfe205b232886996566431cbd7cb4/tumblr_myvbq3xh5l1rv5n8go1_500.png">
  210. <div id="links">
  211. <a href="/">HOME</a>
  212. <a href="/ask">ASK</a>
  213. <a href="/tagged/answered">ANSWERED</a>
  214. <a href="http://tumblr.com/dashboard">DASH</a>
  215. </div>
  216. <div id="title">TITLE GOES HERE</div>
  217. <div id="description">Your description will go here. You'll want to keep it fairly short or it will run off of the header. Hope you like!! :)</div>
  218. </div>
  219.  
  220. <!------------------------------------
  221. TAG BOXES
  222. ------------------------------------->
  223.  
  224. <!------------ BOX 1 ------------>
  225.  
  226. <div id="content">
  227. <div id="tagcontainer">
  228. <div id="tagtitle">TAG SECTION TITLE</div>
  229. <div id="tags">
  230. <a href="/">TAG HERE</a>
  231. <a href="/">TAG HERE</a>
  232. <a href="/">TAG HERE</a>
  233. <a href="/">TAG HERE</a>
  234. <a href="/">TAG HERE</a>
  235. <a href="/">TAG HERE</a>
  236. <a href="/">TAG HERE</a>
  237. <a href="/">TAG HERE</a>
  238. </div>
  239. </div>
  240. </div>
  241.  
  242. <!------------ BOX 2 ------------>
  243.  
  244. <div id="content">
  245. <div id="tagcontainer">
  246. <div id="tagtitle">TAG SECTION TITLE</div>
  247. <div id="tags">
  248. <a href="/">TAG HERE</a>
  249. <a href="/">TAG HERE</a>
  250. <a href="/">TAG HERE</a>
  251. <a href="/">TAG HERE</a>
  252. <a href="/">TAG HERE</a>
  253. <a href="/">TAG HERE</a>
  254. <a href="/">TAG HERE</a>
  255. <a href="/">TAG HERE</a>
  256. </div>
  257. </div>
  258. </div>
  259.  
  260. <!------------ BOX 3 ------------>
  261.  
  262. <div id="content">
  263. <div id="tagcontainer">
  264. <div id="tagtitle">TAG SECTION TITLE</div>
  265. <div id="tags">
  266. <a href="/">TAG HERE</a>
  267. <a href="/">TAG HERE</a>
  268. <a href="/">TAG HERE</a>
  269. <a href="/">TAG HERE</a>
  270. <a href="/">TAG HERE</a>
  271. <a href="/">TAG HERE</a>
  272. <a href="/">TAG HERE</a>
  273. <a href="/">TAG HERE</a>
  274. </div>
  275. </div>
  276. </div>
  277.  
  278. <!------------ BOX 4 ------------>
  279.  
  280. <div id="content">
  281. <div id="tagcontainer">
  282. <div id="tagtitle">TAG SECTION TITLE</div>
  283. <div id="tags">
  284. <a href="/">TAG HERE</a>
  285. <a href="/">TAG HERE</a>
  286. <a href="/">TAG HERE</a>
  287. <a href="/">TAG HERE</a>
  288. <a href="/">TAG HERE</a>
  289. <a href="/">TAG HERE</a>
  290. <a href="/">TAG HERE</a>
  291. <a href="/">TAG HERE</a>
  292. </div>
  293. </div>
  294. </div>
  295.  
  296. <!--------------------------------------------
  297. In order to make more boxes, just copy
  298. and paste the above box codes. The
  299. 4-column layout will work with however
  300. many links you'd like, so delete some or
  301. add more and the height will auto-adjust.
  302. ---------------------------------------------->
  303.  
  304. <!--------------------------------------------
  305. CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
  306. --------------------------------------------->
  307.  
  308. <div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>
  309.  
  310. </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!