API tools faq
paste
Advertisement
oflothlorien

Navigation Theme #2

oflothlorien
Mar 4th, 2014
1,256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.98 KB | None | 0 0
raw download clone embed print report
  1. <!-- This is Oflothlorien's NAVIGATION THEME #2
  2. RULES:
  3. - Do not remove the credit
  4. - Do not use as a base
  5. - Do not claim as your own
  6.  
  7. If you have any queries, go to oflothlorien.tumblr.com/asksubmit -->
  8.  
  9. <html>
  10.  
  11.  
  12. <head>
  13. <title>Navigation</title> <!-- This is the title that appears on the tab -->
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <style>
  16.  
  17. a:link {color:#f7a793;} /* unvisited link */
  18. a:visited {color:#f7a793;} /* visited link */
  19. a:hover {color:#938989;} /* mouse over link */
  20. a:active {color:#938989;} /* selected link */
  21. a:link {text-decoration:none;}
  22. a:visited {text-decoration:none;}
  23. a:hover {text-decoration:none;}
  24. a:active {text-decoration:none;}
  25.  
  26. body {
  27. background-color: #fff; /* change the background colour here*/
  28. background-image: url('url here'); /* insert a background image, just put the url where the green text is, but I suggest that no image is used */
  29. background-repeat: no-repeat;
  30. background-position: center;
  31. position: fixed;
  32. }
  33.  
  34. #header {
  35. margin-top: 30px;
  36. margin-left: 445px;
  37. position: fixed;
  38. }
  39.  
  40. #title {
  41. margin-top: 130px;
  42. margin-left: 445px;
  43. width: 400px;
  44. height: 20px;
  45. padding-top: 6px;
  46. padding-bottom: 6px;
  47. background-color: #f8edd3; /* change the colour of the background of the title box, I suggest something similar to the image that you choose */
  48. text-transform: uppercase;
  49. font-family: cambria;
  50. font-size: 18px;
  51. color: #7d766e; /* change the colour of the title text */
  52. text-align:center;
  53. }
  54.  
  55. #mainlinkone {
  56. margin-top: 0px;
  57. margin-left: 445px;
  58. width: 133.33px;
  59. height: auto;
  60. padding-top: 2px;
  61. padding-bottom: 2px;
  62. background-color: #f8edd3; /* change the colour of the background of the main links here, perhaps the same colour as the title box */
  63. text-align: center;
  64. text-transform: lowercase;
  65. font-family:cambria;
  66. font-size: 12px;
  67. -o-transition: all 0.5s ease-in;
  68. -webkit-transition: all 0.5s ease-in;
  69. -moz-transition: all 0.5s ease-in;
  70. }
  71.  
  72. #mainlinkone:hover {
  73. background-color: #fff; /* Change the hover colour of main link box */
  74. -o-transition: all 0.5s ease-out;
  75. -webkit-transition: all 0.5s ease-out;
  76. -moz-transition: all 0.5s ease-out;
  77. }
  78.  
  79. #mainlinktwo {
  80. margin-top: -18px;
  81. margin-left: 578.33px;
  82. width: 133.33px;
  83. height: auto;
  84. padding-top: 2px;
  85. padding-bottom: 2px;
  86. background-color: #f8edd3; /* change the colour of the background of the main links here, perhaps the same colour as the title box */
  87. text-align: center;
  88. text-transform: lowercase;
  89. font-family:cambria;
  90. font-size: 12px;
  91. -o-transition: all 0.5s ease-in;
  92. -webkit-transition: all 0.5s ease-in;
  93. -moz-transition: all 0.5s ease-in;
  94. }
  95.  
  96. #mainlinktwo:hover {
  97. background-color: #fff; /* Change the hover colour of main link box */
  98. -o-transition: all 0.5s ease-out;
  99. -webkit-transition: all 0.5s ease-out;
  100. -moz-transition: all 0.5s ease-out;
  101. }
  102.  
  103. #mainlinkthree {
  104. margin-top: -18px;
  105. margin-left: 711.66px;
  106. width: 133.33px;
  107. height: auto;
  108. padding-top: 2px;
  109. padding-bottom: 2px;
  110. background-color: #f8edd3; /* change the colour of the background of the main links here, perhaps the same colour as the title box */
  111. text-align: center;
  112. text-transform: lowercase;
  113. font-family:cambria;
  114. font-size: 12px;
  115. -o-transition: all 0.5s ease-in;
  116. -webkit-transition: all 0.5s ease-in;
  117. -moz-transition: all 0.5s ease-in;
  118. }
  119.  
  120. #mainlinkthree:hover {
  121. background-color: #fff; /* Change the hover colour of main link box */
  122. -o-transition: all 0.5s ease-out;
  123. -webkit-transition: all 0.5s ease-out;
  124. -moz-transition: all 0.5s ease-out;
  125. }
  126.  
  127. #boxone {
  128. margin-top: 10px;
  129. margin-left: 445px;
  130. width: 400px;
  131. height: auto;
  132. background-color: #f8edd3; /* Change the background colour of link box */
  133. text-align: center;
  134. text-transform: lowercase;
  135. font-family: cambria;
  136. font-size: 14px;
  137. padding-top: 2px;
  138. padding-bottom: 2px;
  139. -o-transition: all 0.5s ease-in;
  140. -webkit-transition: all 0.5s ease-in;
  141. -moz-transition: all 0.5s ease-in;
  142. }
  143.  
  144. #boxone:hover{
  145. background-color: #fff; /* Change the hover colour of link box */
  146. -o-transition: all 0.3s ease-out;
  147. -webkit-transition: all 0.3s ease-out;
  148. -moz-transition: all 0.3s ease-out;
  149. }
  150.  
  151. #boxtwo {
  152. margin-top: 10px;
  153. margin-left: 445px;
  154. width: 400px;
  155. height: auto;
  156. background-color: #f8edd3; /* Change the background colour of link box */
  157. text-align: center;
  158. text-transform: lowercase;
  159. font-family: cambria;
  160. font-size: 14px;
  161. padding-top: 2px;
  162. padding-bottom: 2px;
  163. -o-transition: all 0.5s ease-in;
  164. -webkit-transition: all 0.5s ease-in;
  165. -moz-transition: all 0.5s ease-in;
  166. }
  167.  
  168. #boxtwo:hover{
  169. background-color: #fff; /* Change the hover colour of link box */
  170. -o-transition: all 0.3s ease-out;
  171. -webkit-transition: all 0.3s ease-out;
  172. -moz-transition: all 0.3s ease-out;
  173. }
  174.  
  175. #boxthree {
  176. margin-top: 10px;
  177. margin-left: 445px;
  178. width: 400px;
  179. height: auto;
  180. background-color: #f8edd3; /* Change the background colour of link box */
  181. text-align: center;
  182. text-transform: lowercase;
  183. font-family: cambria;
  184. font-size: 14px;
  185. padding-top: 2px;
  186. padding-bottom: 2px;
  187. -o-transition: all 0.5s ease-in;
  188. -webkit-transition: all 0.5s ease-in;
  189. -moz-transition: all 0.5s ease-in;
  190. }
  191.  
  192. #boxthree:hover{
  193. background-color: #fff; /* Change the hover colour of link box */
  194. -o-transition: all 0.3s ease-out;
  195. -webkit-transition: all 0.3s ease-out;
  196. -moz-transition: all 0.3s ease-out;
  197. }
  198.  
  199. #boxfour {
  200. margin-top: 10px;
  201. margin-left: 445px;
  202. width: 400px;
  203. height: auto;
  204. background-color: #f8edd3; /* Change the background colour of link box */
  205. text-align: center;
  206. text-transform: lowercase;
  207. font-family: cambria;
  208. font-size: 14px;
  209. padding-top: 2px;
  210. padding-bottom: 2px;
  211. -o-transition: all 0.5s ease-in;
  212. -webkit-transition: all 0.5s ease-in;
  213. -moz-transition: all 0.5s ease-in;
  214. }
  215.  
  216. #boxfour:hover{
  217. background-color: #fff; /* Change the hover colour of link box */
  218. -o-transition: all 0.3s ease-out;
  219. -webkit-transition: all 0.3s ease-out;
  220. -moz-transition: all 0.3s ease-out;
  221. }
  222.  
  223. #boxfive {
  224. margin-top: 10px;
  225. margin-left: 445px;
  226. width: 400px;
  227. height: auto;
  228. background-color: #f8edd3; /* Change the background colour of link box */
  229. text-align: center;
  230. text-transform: lowercase;
  231. font-family: cambria;
  232. font-size: 14px;
  233. padding-top: 2px;
  234. padding-bottom: 2px;
  235. -o-transition: all 0.5s ease-in;
  236. -webkit-transition: all 0.5s ease-in;
  237. -moz-transition: all 0.5s ease-in;
  238. }
  239.  
  240. #boxfive:hover{
  241. background-color: #fff; /* Change the hover colour of link box */
  242. -o-transition: all 0.3s ease-out;
  243. -webkit-transition: all 0.3s ease-out;
  244. -moz-transition: all 0.3s ease-out;
  245. }
  246.  
  247. #boxsix {
  248. margin-top: 10px;
  249. margin-left: 445px;
  250. width: 400px;
  251. height: auto;
  252. background-color: #f8edd3; /* Change the background colour of link box */
  253. text-align: center;
  254. text-transform: lowercase;
  255. font-family: cambria;
  256. font-size: 14px;
  257. padding-top: 2px;
  258. padding-bottom: 2px;
  259. -o-transition: all 0.5s ease-in;
  260. -webkit-transition: all 0.5s ease-in;
  261. -moz-transition: all 0.5s ease-in;
  262. }
  263.  
  264. #boxsix:hover{
  265. background-color: #fff; /* Change the hover colour of link box */
  266. -o-transition: all 0.3s ease-out;
  267. -webkit-transition: all 0.3s ease-out;
  268. -moz-transition: all 0.3s ease-out;
  269. }
  270.  
  271. #credit {
  272. margin-top: -360px;
  273. margin-left: 2px;
  274. position: fixed;
  275. font-family: cambria;
  276. font-size: 9px;
  277. width: 60px;
  278. height:auto;
  279. padding: 2px;
  280. text-align: center;
  281. border: 1px dotted #656363;
  282. }
  283.  
  284. </style>
  285. </head>
  286.  
  287. <body>
  288. <div id="header"><img src="http://careerconnectionsltd.com/wp-content/uploads/2013/04/header-butterfly21.jpg"height="100px" width="400px"></div> <!-- this is the image above the title, any image will do -->
  289. <div id="title">• navigation •</div>
  290. <div id="mainlinkone"><a href="/">home</a></div>
  291. <div id="mainlinktwo"><a href="/ask">ask</a></div>
  292. <div id="mainlinkthree"><a href="/about">about</a></div>
  293.  
  294.  
  295. <div id="boxone"><a href="/link">link one</a></div> <!-- change the links and their titles here -->
  296. <div id="boxtwo"><a href="/link">link two</a></div>
  297. <div id="boxthree"><a href="/link">link three</a></div>
  298. <div id="boxfour"><a href="/link">link four</a></div>
  299. <div id="boxfive"><a href="/link">link five</a></div>
  300. <div id="boxsix"><a href="/link">link six</a></div>
  301.  
  302. <div id="credit"><a href="http://oflothlorien.tumblr.com">- oflothlorien -</a>
  303.  
  304. </body>
  305. </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!