API tools faq
paste
Advertisement
hzrrys

navigationtheme1

hzrrys
Jul 26th, 2013
7,671
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.74 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3.  
  4. <!----
  5.  
  6. NAVIGATION THEME ONE BY SABRENA (HZRRYS)
  7. DON'T STEAL, REDISTRIBUTE, CLAIM AS YOUR OWN, OR USE AS BASE!
  8.  
  9. ---->
  10.  
  11.  
  12. <head>
  13.  
  14. <style type="text/css">
  15.  
  16. ::-webkit-scrollbar {background-color:#ccc; height:8px; width:3px}
  17. ::-webkit-scrollbar-thumb:vertical {border:1px solid #aaa; background-color:#888; height:50px; width:5px;}
  18. ::-webkit-scrollbar-thumb:horizontal {border:1px solid #aaa; background-color:#888; height:8px width:5px;!important}
  19.  
  20. @font-face {
  21. font-family:paintbrush;
  22. src: url('http://static.tumblr.com/ejm8w78/YOjmd9lbv/basicl.ttf');,
  23. }
  24.  
  25. body {
  26. font-family:consolas;
  27. font-size:9px;
  28. color:#888
  29. }
  30.  
  31. a {
  32. text-decoration:none;
  33. }
  34.  
  35. #container {
  36. width:443px;
  37. height:700px;
  38. background:transparent;
  39. margin:auto;
  40. margin-top:50px;
  41. }
  42.  
  43. /* below is the customizations for larger titles you see. h1 is the Tagged one, h2 is the Links one, and h3 is the Saved URLs one. you can change the text color (which is under "color:#??") and background color */
  44. h1 {
  45. font-size:40px;
  46. color:#fff;
  47. background:#a2c456;
  48. padding:10px;
  49. text-align:left;
  50. font-family:'paintbrush';
  51. }
  52.  
  53. h2 {
  54. font-size:40px;
  55. color:#fff;
  56. background:#e49183;
  57. padding:10px;
  58. text-align:right;
  59. font-family:'paintbrush';
  60. }
  61.  
  62. h3 {
  63. font-size:40px;
  64. color:#fff;
  65. background:#999683;
  66. padding:10px;
  67. text-align:left;
  68. font-family:'paintbrush';
  69. }
  70.  
  71.  
  72. .linkset1 {
  73. width:450px;
  74. height:100px;
  75. margin-left:-2px;
  76. margin-top:-20px;
  77. display:inline-block;
  78. background:transparent;
  79. text-align:left;
  80. padding:2px;
  81. font-size:10px;
  82. font-family:calibri;
  83. line-height:15px;
  84. line-height:100%;
  85. opacity:1;
  86. -webkit-transition: all 0.3s ease-in-out;
  87. -moz-transition: all 0.3s ease-in-out;
  88. -o-transition: all 0.3s ease-in-out;
  89. -ms-transition: all 0.3s ease-in-out;
  90. transition: all 0.3s ease-in-out;
  91. }
  92.  
  93. /* below is the customizations for the first AND third link-set. you can change the background color, border, and color if you want */
  94. .linkset1 a {
  95. background:#fafafa;
  96. border:1px solid #e5e5e5;
  97. padding:4px;
  98. width:77px;
  99. margin-top:3px;
  100. margin-left:0px;
  101. display:inline-block;
  102. color:#888;
  103. }
  104.  
  105. .linkset1 a:hover {
  106. background:#666;
  107. color:#fff;
  108. -webkit-transition: all 0.3s ease-in-out;
  109. -moz-transition: all 0.3s ease-in-out;
  110. -o-transition: all 0.3s ease-in-out;
  111. -ms-transition: all 0.3s ease-in-out;
  112. transition: all 0.3s ease-in-out;
  113. }
  114.  
  115. .linkset2 {
  116. width:450px;
  117. height:100px;
  118. margin-left:-7px;
  119. margin-top:-25px;
  120. display:inline-block;
  121. background:transparent;
  122. text-align:right;
  123. padding:2px;
  124. font-size:10px;
  125. font-family:calibri;
  126. line-height:15px;
  127. line-height:100%;
  128. opacity:1;
  129. -webkit-transition: all 0.3s ease-in-out;
  130. -moz-transition: all 0.3s ease-in-out;
  131. -o-transition: all 0.3s ease-in-out;
  132. -ms-transition: all 0.3s ease-in-out;
  133. transition: all 0.3s ease-in-out;
  134. }
  135.  
  136. /* below is the customizations for the second link-set. you can change the background color, border, and color if you want */
  137. .linkset2 a {
  138. background:#fafafa;
  139. border:1px solid #e5e5e5;
  140. padding:4px;
  141. width:77px;
  142. margin-top:3px;
  143. margin-left:0px;
  144. display:inline-block;
  145. color:#888;
  146. }
  147.  
  148. .linkset2 a:hover {
  149. background:#666;
  150. color:#fff;
  151. -webkit-transition: all 0.3s ease-in-out;
  152. -moz-transition: all 0.3s ease-in-out;
  153. -o-transition: all 0.3s ease-in-out;
  154. -ms-transition: all 0.3s ease-in-out;
  155. transition: all 0.3s ease-in-out;
  156. }
  157.  
  158. #linkbar {
  159. margin-left:-15px;
  160. margin-top:-50px;
  161. width:auto;
  162. color:#aaa;
  163. font-size:10px;
  164. word-spacing:5px;
  165. font-family:sans-serif;
  166. }
  167.  
  168. #linkbar a{
  169. color:#aaa;
  170. }
  171.  
  172. .credit {
  173. position:fixed;
  174. font-family:trebuchet ms;
  175. font-size:9px;
  176. line-height:100%;
  177. letter-spacing:0px;
  178. width:auto;
  179. right:7px;
  180. bottom:3px;
  181. text-transform:uppercase;
  182. text-align:center;
  183. -moz-transition-duration:0.7s;
  184. -webkit-transition-duration:0.7s;
  185. -o-transition-duration:0.7s;
  186. }
  187.  
  188. .credit a {
  189. display:block;
  190. width:13px;
  191. height:10px;
  192. padding:5px;
  193. color:#aaa;
  194. border:1px solid transparent;
  195. -moz-transition-duration:0.7s;
  196. -webkit-transition-duration:0.7s;
  197. -o-transition-duration:0.7s;
  198. }
  199.  
  200. .credit a:hover {
  201. color:#fff;
  202. background:#ccc;
  203. text-shadow:#ddd 0px 1px 1px;
  204. -moz-transition-duration:0.7s;
  205. -webkit-transition-duration:0.7s;
  206. -o-transition-duration:0.7s;
  207. }
  208.  
  209. </style>
  210.  
  211. </head>
  212.  
  213. <body>
  214.  
  215. <div id="container">
  216. <div id="linkbar"><a href="/">back</a> <a href="/ask">mail</a> <a href="http://hzrrys.tumblr.com">cred</a></div> <!--- you can customize you mail/ask links here but DO NOT remove the credit, thank you --->
  217.  
  218. <h1>Tagged</h1>
  219. <div class="linkset1">
  220. <a href="http://">tag one</a>
  221. <a href="http://">tag two</a>
  222. <a href="http://">tag three</a>
  223. <a href="http://">tag four</a>
  224. <a href="http://">tag five</a>
  225. <a href="http://">tag six</a>
  226. <a href="http://">tag seven</a>
  227. <a href="http://">tag eight</a>
  228. <a href="http://">tag nine</a>
  229. <a href="http://">tag ten</a>
  230. <a href="http://">tag eleven</a>
  231. <a href="http://">tag twelve</a>
  232. <a href="http://">tag thirteen</a>
  233. <a href="http://">tag fourteen</a>
  234. </div>
  235. <!--- to make the links your own simply change the "http://" section to the url and the "tag 1/2/3/4 etc" to the name of that tag --->
  236.  
  237. <h2>Links</h2>
  238. <div class="linkset2">
  239. <a href="http://">link one</a>
  240. <a href="http://">link two</a>
  241. <a href="http://">link three</a>
  242. <a href="http://">link four</a>
  243. <a href="http://">link five</a>
  244. <a href="http://">link six</a>
  245. <a href="http://">link seven</a>
  246. <a href="http://">link eight</a>
  247. <a href="http://">link nine</a>
  248. <a href="http://">link ten</a>
  249. <a href="http://">link eleven</a>
  250. <a href="http://">link twelve</a>
  251. <a href="http://">link thirteen</a>
  252. <a href="http://">link fourteen</a>&nbsp; <!--- don't remove the "&nbsp;" and if you're going to add more links add another "&nbsp;" to the end of the last link --->
  253. </div>
  254.  
  255. <h3>Saved URLS</h3>
  256. <div class="linkset1" style="margin-top:-31px;">
  257. <a href="http://">url one</a>
  258. <a href="http://">url two</a>
  259. <a href="http://">url three</a>
  260. <a href="http://">url four</a>
  261. <a href="http://">url five</a>
  262. <a href="http://">url six</a>
  263. <a href="http://">url seven</a>
  264. <a href="http://">url eight</a>
  265. <a href="http://">url nine</a>
  266. <a href="http://">url ten</a>
  267. <a href="http://">url eleven</a>
  268. <a href="http://">url twelve</a>
  269. <a href="http://">url thirteen</a>
  270. <a href="http://">url fourteen</a>
  271. </div>
  272.  
  273. </div>
  274.  
  275.  
  276.  
  277.  
  278. <div class="credit"><a href="http://hzrrys.tumblr.com"><b> HZ </b></a></div>
  279. </body>
  280. </html>
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!