API tools faq
paste
alokasenna

Thunderer (Navigation 01)

alokasenna
Mar 16th, 2014
3,198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.78 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>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-----PAGE 8 BY LAUNTS (http://launts.tumblr.com/). DON'T STEAL OR REDISTRIBUTE. THANK.
  7.  
  8. ICONS BY CITADEL_ICONS ON LIVEJOURNAL
  9.  
  10. ----->
  11.  
  12. <head>
  13. <title>navigation</title> <!-----CHANGE THE TITLE ON THE TAB HERE----->
  14. <link rel="shortcut icon" href="http://i178.photobucket.com/albums/w253/raeversman/icons/pb/chrishemsworth/ichto237.png"> <!-----CHANGE THE ICON ON THE TAB HERE----->
  15. <link rel="alternate" type="application/rss+xml" href="http://deceitfulgod.tumblr.com/rss">
  16.  
  17.  
  18. <style type="text/css">
  19.  
  20. ::-webkit-scrollbar-thumb {
  21. background-color: #c92118; /*CHANGE SCROLLBAR THUMB HERE*/
  22. height:auto;
  23. border-bottom:none;
  24. }
  25. ::-webkit-scrollbar {
  26. height:9px;
  27. width:3px;
  28. background-color: #c92118; /*CHANGE SCROLLBAR BG HERE*/
  29. border: 1px solid white;
  30.  
  31. }
  32.  
  33. ::selection {
  34. background-color: ;
  35. color: ;
  36. }
  37.  
  38.  
  39. @font-face {
  40. font-family: wolf;
  41. src: url('http://static.tumblr.com/6acw4l0/IyBn2jxqf/wolf_in_the_city_1_.ttf') format('truetype');
  42. font-weight: normal;
  43. font-style: normal;
  44.  
  45. }
  46.  
  47.  
  48.  
  49. body {
  50. font-family: Calibri;
  51. font-weight: normal;
  52. font-size: 11px;
  53. }
  54.  
  55.  
  56. a {
  57. text-decoration: none;
  58. -webkit-transition: 0.5s;
  59. -moz-transition: 0.5s;
  60. transition: 0.5s;
  61. color: #c92118;
  62. }
  63.  
  64. a:hover {
  65. text-decoration: none;
  66. -webkit-transition: 0.5s;
  67. -moz-transition: 0.5s;
  68. transition: 0.5s;
  69. color: black;
  70. }
  71.  
  72. #topbar {
  73. width: 100%;
  74. height: 50px;
  75. border-bottom: 50px solid #e3413b; /*CHANGE TOPBAR BOTTOM COLOR HERE*/
  76. background-color: #c92118; /*CHANGE TOPBAR TOP COLOR HERE*/
  77. }
  78.  
  79. #title {
  80. font-size: 100px;
  81. font-family: wolf;
  82. color: white; /*CHANGE TITLE COLOR HERE*/
  83. margin-left: 600px;
  84. position: fixed;
  85. }
  86.  
  87. #navi {
  88. width: 200px;
  89. height: 400px;
  90. margin-top: 150px;
  91. margin-left: 70px;
  92. }
  93.  
  94. #navii {
  95. width: 200px;
  96. height: 400px;
  97. margin-top: -400px;
  98. margin-left: 400px;
  99. }
  100.  
  101. #naviii {
  102. width: 200px;
  103. height: 400px;
  104. margin-top: -400px;
  105. margin-left: 730px;
  106. }
  107.  
  108. #naviv {
  109. width: 200px;
  110. height: 400px;
  111. margin-top: -400px;
  112. margin-left: 1060px;
  113. }
  114.  
  115. #icon {
  116. width: 100px;
  117. height: 100px;
  118. }
  119.  
  120. #icon img {
  121. width: 80px;
  122. height: 80px;
  123. border: 2px dotted #c92118; /*CHANGE ICON BORDER HERE*/
  124. border-radius: 50%;
  125. margin-top: -50px;
  126. margin-left: -50px;
  127. padding: 10px;
  128. }
  129.  
  130. .titles {
  131. font-family: ARIAL;
  132. font-size: 20px;
  133. color: black; /*CHANGE TITLE COLOR HERE*/
  134. text-transform: uppercase;
  135. letter-spacing: 2px;
  136. margin-top: -150px;
  137. margin-left: 52px;
  138. border-bottom: 2px dotted #c92118; /*CHANGE TITLE BORDER COLOR HERE*/
  139. padding-left: 30px;
  140.  
  141. }
  142.  
  143. .titles:first-letter {
  144. font-family: wolf;
  145. font-size: 80px;
  146. color: #c92118; /*CHANGE THE FIRST LETTER COLOR HERE*/
  147. text-transform: lowercase;
  148. }
  149.  
  150. #navbox {
  151. width: 180px;
  152. height: 180px;
  153. border-left: 2px dotted #c92118; /*CHANGE NAV BORDER HERE*/
  154. overflow-y: scroll;
  155. margin-top: 30px;
  156. padding: 10px;
  157. }
  158.  
  159. .links {
  160. background-color: #c92118; /*CHANGE LINK BG COLOR HERE*/
  161. padding: 5px;
  162. margin-top: 10px;
  163. -webkit-transition: 0.8;
  164. -moz-transition: 0.8;
  165. transition: 0.8;
  166. }
  167.  
  168. .links:hover {
  169. background-color: white; /*CHANGE HOVER LINK BG COLOR HERE*/
  170. -webkit-transition: 0.8;
  171. -moz-transition: 0.8;
  172. transition: 0.8;
  173.  
  174. }
  175.  
  176. .links a {
  177. color: white; /*CHANGE LINK COLOR HERE*/
  178. font-size: 12px;
  179. font-family: ARIAL;
  180. text-align: center;
  181. -webkit-transition: 0.8;
  182. -moz-transition: 0.8;
  183. transition: 0.8;
  184. }
  185.  
  186. .links a:hover {
  187. color: #c92118; /*CHANGE HOVER LINK COLOR HERE*/
  188. -webkit-transition: 0.8;
  189. -moz-transition: 0.8;
  190. transition: 0.8;
  191. }
  192.  
  193. </style>
  194. </head>
  195.  
  196.  
  197. <body>
  198.  
  199. <div id="topbar">
  200.  
  201. <div id="title">
  202. Navigation <!---CHANGE MAIN TITLE HERE--->
  203. </div>
  204.  
  205. </div>
  206.  
  207. <div id="navi">
  208.  
  209. <div id="icon">
  210. <img src="http://i178.photobucket.com/albums/w253/raeversman/icons/pb/chrishemsworth/ichto264.png"> <!---CHANGE FIRST ICON HERE--->
  211. </div>
  212.  
  213. <div class="titles">
  214. title 1 <!---CHANGE FIRST TITLE HERE--->
  215. </div>
  216.  
  217.  
  218. <!---PUT YOUR TITLE WHERE IT SAYS LINK X AND THE URL IN PLACE OF /--->
  219. <div id="navbox">
  220. <div class="links">
  221. <a href="/">link one</a>
  222. </div>
  223.  
  224. <div class="links">
  225. <a href="/">link two</a>
  226. </div>
  227.  
  228. <div class="links">
  229. <a href="/">link three</a>
  230. </div>
  231.  
  232. <div class="links">
  233. <a href="/">link four</a>
  234. </div>
  235.  
  236. <div class="links">
  237. <a href="/">link five</a>
  238. </div>
  239.  
  240. <div class="links">
  241. <a href="/">link six</a>
  242. </div>
  243. </div>
  244.  
  245. </div>
  246.  
  247. <div id="navii">
  248.  
  249. <!---FOLLOW SAME INSTRUCTIONS ABOVE FOR EVERY BOX BELOW--->
  250.  
  251. <div id="icon">
  252. <img src="http://i178.photobucket.com/albums/w253/raeversman/icons/pb/chrishemsworth/ichto373.png">
  253. </div>
  254.  
  255. <div class="titles">
  256. title 2
  257. </div>
  258.  
  259. <div id="navbox">
  260. <div class="links">
  261. <a href="/">link one</a>
  262. </div>
  263.  
  264. <div class="links">
  265. <a href="/">link two</a>
  266. </div>
  267.  
  268. <div class="links">
  269. <a href="/">link three</a>
  270. </div>
  271.  
  272. <div class="links">
  273. <a href="/">link four</a>
  274. </div>
  275.  
  276. <div class="links">
  277. <a href="/">link five</a>
  278. </div>
  279.  
  280. <div class="links">
  281. <a href="/">link six</a>
  282. </div>
  283. </div>
  284.  
  285. </div>
  286.  
  287. <div id="naviii">
  288.  
  289. <div id="icon">
  290. <img src="http://i178.photobucket.com/albums/w253/raeversman/icons/pb/chrishemsworth/ichto399.png">
  291. </div>
  292.  
  293. <div class="titles">
  294. title 3
  295. </div>
  296.  
  297. <div id="navbox">
  298. <div class="links">
  299. <a href="/">link one</a>
  300. </div>
  301.  
  302. <div class="links">
  303. <a href="/">link two</a>
  304. </div>
  305.  
  306. <div class="links">
  307. <a href="/">link three</a>
  308. </div>
  309.  
  310. <div class="links">
  311. <a href="/">link four</a>
  312. </div>
  313.  
  314. <div class="links">
  315. <a href="/">link five</a>
  316. </div>
  317.  
  318. <div class="links">
  319. <a href="/">link six</a>
  320. </div>
  321. </div>
  322.  
  323. </div>
  324.  
  325. <div id="naviv">
  326.  
  327. <div id="icon">
  328. <img src="http://i178.photobucket.com/albums/w253/raeversman/icons/pb/chrishemsworth/ichto419.png">
  329. </div>
  330.  
  331. <div class="titles">
  332. title 4
  333. </div>
  334.  
  335. <div id="navbox">
  336. <div class="links">
  337. <a href="/">link one</a>
  338. </div>
  339.  
  340. <div class="links">
  341. <a href="/">link two</a>
  342. </div>
  343.  
  344. <div class="links">
  345. <a href="/">link three</a>
  346. </div>
  347.  
  348. <div class="links">
  349. <a href="/">link four</a>
  350. </div>
  351.  
  352. <div class="links">
  353. <a href="/">link five</a>
  354. </div>
  355.  
  356. <div class="links">
  357. <a href="/">link six</a>
  358. </div>
  359. </div>
  360.  
  361. </div>
  362.  
  363.  
  364.  
  365. <!---IF YOU WANT TO ADD MORE LINKS, JUST COPY THIS AND ADD IT TO THE BOTTOM OF ONE OF THESE, RIGHT AFTER THE LINK SIX /DIV
  366.  
  367. <div class="links">
  368. <a href="/">link six</a>
  369. </div>
  370.  
  371. --->
  372.  
  373. <div style="position:fixed;bottom:2px; right:3px; font-size:9px; font-family:calibri;"><a href="http://launts.tumblr.com/">@LAUNTS</a></center></div>
  374.  
  375. <!---PLEASE DO NOT TOUCH MY CREDIT--->
  376. </body>
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!