Advertisement
lonodon

Navigation Theme 01; 3D LIGHT VERSION

Aug 28th, 2013
356
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.75 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!--
  3. ╱╭╮╭╮╱╱╱╱╱╱╱╱╱╱╱╭╮╱╱╱╱╱╱╭╮╱╱╱╱╱╱╱╱╱╱╱╭╮
  4. ╭╯╰┫┃╱╱╱╱╱╱╱╱╱╱╱┃┃╱╱╱╱╱╱┃┃╱╱╱╱╱╱╱╱╱╱╱┃┃
  5. ╰╮╭┫╰━┳━━┳╮╭┳━━╮┃╰━┳╮╱╭╮┃┃╭━━┳━╮╭━━┳━╯┣━━┳━╮
  6. ╱┃┃┃╭╮┃┃━┫╰╯┃┃━┫┃╭╮┃┃╱┃┃┃┃┃╭╮┃╭╮┫╭╮┃╭╮┃╭╮┃╭╮╮
  7. ╱┃╰┫┃┃┃┃━┫┃┃┃┃━┫┃╰╯┃╰━╯┃┃╰┫╰╯┃┃┃┃╰╯┃╰╯┃╰╯┃┃┃┃
  8. ╱╰━┻╯╰┻━━┻┻┻┻━━╯╰━━┻━╮╭╯╰━┻━━┻╯╰┻━━┻━━┻━━┻╯╰╯
  9. ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╯┃
  10. ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━━╯
  11. -->
  12. <!-- NAVIGATION THEME 01; 3D BY LONODON, DO NOT STEAL OR REMOVE CREDIT. I SWEAR I WILL HUNT YOU DOWN. BASE CODE BY DYLAENOBRIENS -->
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16.  
  17. <head>
  18.  
  19. <title>{Title}</title>
  20.  
  21. {block:Description}<meta name="description" content="{MetaDescription}"/>
  22. {/block:Description}
  23. <link rel="shortcut icon" href="{Favicon}" />
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  25.  
  26. <style type="text/css">
  27.  
  28.  
  29. /*--scrollbar--*/
  30.  
  31. ::-webkit-scrollbar-thumb:vertical {border:3px solid #fff;height:12px; background-color:{color:scrollbar};}
  32. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  33. ::-webkit-scrollbar {background-color:{color:scrollbar};height:7px;width:12px;border:5px solid #fff;}
  34. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{background-color:{color:scrollbar};display:block;height:8px;border-right:2px solid #fff;border-left:2px solid #fff;
  35. }
  36. /*--body--*/
  37.  
  38.  
  39. body {
  40. font-style:none;
  41. background-color:{color:bg};
  42. font-family:calibri;
  43. color:{color:text};
  44. font-size:9px;
  45. }
  46.  
  47.  
  48. a {
  49. color:{color:link};
  50. text-decoration:none;
  51. -webkit-transition: all 0.5s ease-out;
  52. -moz-transition: all 0.5s ease-out;
  53. transition: all 0.5s ease-out;
  54. }
  55.  
  56. a:hover {
  57. color:{color:hover};
  58. text-decoration:none;
  59. -webkit-transition: all 0.8s ease-out;
  60. -moz-transition: all 0.8s ease-out;
  61. transition: all 0.8s ease-out;
  62. }
  63.  
  64. img {
  65. border:none;
  66. }
  67.  
  68. blockquote {
  69. padding-left:5px;
  70. border-left:2px solid {color:border};
  71. }
  72.  
  73. h1 {
  74. font-size:10px;
  75. }
  76.  
  77. /*--Cursor code--*/
  78.  
  79.  
  80. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }
  81.  
  82. /*everything*/
  83.  
  84. #everything {
  85. margin-left:250px;
  86. margin-top:100px;
  87. }
  88.  
  89. /*--title--*/
  90.  
  91. #title {
  92. font-family:'absender';
  93. font-size:80px;
  94. margin-top:-67px;
  95. margin-left:130px;
  96. color:#00000
  97. -size:8px;
  98. color:{color:links};
  99.  
  100.  
  101.  
  102. }
  103. /*--links--*/
  104.  
  105. #links {
  106. width:150px;
  107. font-family:'absender';
  108. text-transform:uppercase;
  109. text-align:center;
  110. margin-top:-50px;
  111. margin-left:334px;
  112. }
  113.  
  114. #links a {
  115. padding:3px;
  116. font-size:15px;
  117. color:#000;
  118. letter-spacing:1px
  119. -webkit-transition: all 0.4s ease-in-out;
  120. -moz-transition: all 0.4s ease-in-out;
  121. -o-transition: all 0.4s ease-in-out;
  122. -ms-transition: all 0.4s ease-in-out;
  123. transition: all 0.4s ease-in-out;
  124. }
  125.  
  126. #links a:hover {
  127. color:#fff;
  128. background-color:#000;
  129. letter-spacing:4px
  130. }
  131.  
  132.  
  133.  
  134. #grouptitle {
  135. padding:5px;
  136. text-align:center;
  137. font-style:italic;
  138. font-family:'times new roman';
  139. color:#bbbaba;
  140. font-size:17px;
  141. width:150px;
  142. margin-left:75px;
  143. margin-top:40px;
  144. border-left:4px solid #000;
  145. border-right:4px solid #000;
  146. border-top:4px solid #000;
  147. }
  148.  
  149.  
  150. #grouplinks {
  151. width:120px;
  152. margin-top:-25px;
  153. padding:20px;
  154. padding-bottom:0px;
  155. margin-left:75px;
  156. border:4px solid #000;
  157. }
  158.  
  159.  
  160. #grouplinks a {
  161. font-family:'absender';
  162. display:block;
  163. color:#000;
  164. font-size:10px;
  165. padding:2px;
  166. text-align:center;
  167. letter-spacing:4px;
  168. text-transform:uppercase;
  169. margin-bottom:5px;
  170. -webkit-transition: all 0.4s ease-in-out;
  171. -moz-transition: all 0.4s ease-in-out;
  172. -o-transition: all 0.4s ease-in-out;
  173. -ms-transition: all 0.4s ease-in-out;
  174. transition: all 0.4s ease-in-out;
  175. }
  176.  
  177. #grouplinks a:hover {
  178. background:#000;
  179. letter-spacing:8px;
  180. color:#fff;
  181. }
  182.  
  183. h1 {
  184. text-shadow: 2px 0 .2px #FF0000;
  185. color:#000;
  186. font:85px absneder;
  187. }
  188. h1 {
  189. text-shadow: -2px 0 .2px #00F1F5;
  190. color:#000;
  191. font:85px absender;
  192. }
  193. h1 {
  194. text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
  195. color:#000;
  196. font:85px absender;
  197. }
  198.  
  199. h2 {
  200. text-shadow: 2px 0 .2px #FF0000;
  201. color:#000;
  202. font:30px absender;
  203. }h2 {
  204. text-shadow: -2px 0 .2px #00F1F5;
  205. color:#000;
  206. font:30px absender;
  207. }h2 {
  208. text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
  209. color:#000;
  210. font:30px absender;
  211. }
  212.  
  213.  
  214. {CustomCSS}
  215.  
  216. </style></head>
  217.  
  218.  
  219. <body>
  220.  
  221. <div id="everything">
  222.  
  223. <div id="title"><h1>★Navigation★</h1></div>
  224.  
  225. <div id="links">
  226. <a href="/">HOME</a>
  227. <a href="/ask">ASK</a>
  228. <a href="http://lonodon.tumblr.com/">theme</a>
  229. </div>
  230.  
  231. <table id="all" border="0" cellpadding="0" cellspacing="0">
  232.  
  233.  
  234. <td><div id="grouptitle"><big><h2>Group #1</h2></div>
  235. <div id="grouplinks">
  236. <a href="/tagged/">link 1</a>
  237.  
  238. <a href="/tagged/">link 2</a>
  239.  
  240. <a href="/tagged/">link 3</a>
  241.  
  242. <a href="/tagged/">link 4</a>
  243.  
  244. </div></td>
  245.  
  246.  
  247. <td><div id="grouptitle"><big><h2>Group #2</h2></div>
  248. <div id="grouplinks">
  249. <a href="/tagged/">link 1</a>
  250.  
  251. <a href="/tagged/">link 2</a>
  252.  
  253. <a href="/tagged/">link 3</a>
  254.  
  255. <a href="/tagged/">link 4</a>
  256.  
  257. </div></td>
  258.  
  259. <td><div id="grouptitle"><big><h2>Group #3</h2></div>
  260. <div id="grouplinks">
  261. <a href="/tagged/">link 1</a>
  262.  
  263. <a href="/tagged/">link 2</a>
  264.  
  265. <a href="/tagged/">link 3</a>
  266.  
  267. <a href="/tagged/">link 4</a>
  268.  
  269. </div></td>
  270.  
  271. <tr>
  272.  
  273. <td><div id="grouptitle"><big><h2>Group #4</h2></div>
  274. <div id="grouplinks">
  275. <a href="/tagged/">link 1</a>
  276.  
  277. <a href="/tagged/">link 2</a>
  278.  
  279. <a href="/tagged/">link 3</a>
  280.  
  281. <a href="/tagged/">link 4</a>
  282. </div></td>
  283.  
  284. <td><div id="grouptitle"><big><h2>Group #5<h2></div>
  285. <div id="grouplinks">
  286. <a href="/tagged/">link 1</a>
  287.  
  288. <a href="/tagged/">link 2</a>
  289.  
  290. <a href="/tagged/">link 3</a>
  291.  
  292. <a href="/tagged/">link 4</a>
  293.  
  294. </div></td>
  295.  
  296. <td><div id="grouptitle"><big><h2>Group #6</h2></div>
  297. <div id="grouplinks">
  298. <a href="/tagged/">link 1</a>
  299.  
  300. <a href="/tagged/">link 2</a>
  301.  
  302. <a href="/tagged/">link 3</a>
  303.  
  304. <a href="/tagged/">link 4</a>
  305.  
  306. </div></td>
  307.  
  308. <tr>
  309.  
  310. <td><div id="grouptitle"><big><h2>Group #7</h2></div>
  311. <div id="grouplinks">
  312. <a href="/tagged/">link 1</a>
  313.  
  314. <a href="/tagged/">link 2</a>
  315.  
  316. <a href="/tagged/">link 3</a>
  317.  
  318. <a href="/tagged/">link 4</a>
  319. </div></td>
  320.  
  321. <td><div id="grouptitle"><big><h2>Group #8<h2></div>
  322. <div id="grouplinks">
  323. <a href="/tagged/">link 1</a>
  324.  
  325. <a href="/tagged/">link 2</a>
  326.  
  327. <a href="/tagged/">link 3</a>
  328.  
  329. <a href="/tagged/">link 4</a>
  330.  
  331. </div></td>
  332.  
  333. <td><div id="grouptitle"><big><h2>Group #9</h2></div>
  334. <div id="grouplinks">
  335. <a href="/tagged/">link 1</a>
  336.  
  337. <a href="/tagged/">link 2</a>
  338.  
  339. <a href="/tagged/">link 3</a>
  340.  
  341. <a href="/tagged/">link 4</a>
  342.  
  343. </div></td>
  344.  
  345. </table>
  346.  
  347. </div>
  348. </body>
  349. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement