API tools faq
paste
Advertisement
paigeh987

Navigation Page 1 with text help- neonbike themes

paigeh987
Nov 16th, 2013
1,452
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. page #02 by Paige @ neonbikethemes.tumblr.com
  6. Please DO NOT COPY ANY PARTS OF THIS CODE and claim them as your own
  7. Do not remove the credit. thanks!
  8.  
  9. I will put messages next to things to make this easily customisable. but it will still be confusing if you don't know html/css sorry.
  10. If you need any help go to my ask box: neonbikethemes.tumblr.com/ask
  11. I will be happy to help.
  12. -->
  13.  
  14. <style type=text/css>
  15.  
  16. a:link {color:#838383;} /* unvisited link */
  17. a:visited {color:#838383;} /* visited link */
  18. a:hover {color:#838383;} /* mouse over link */
  19. a:active {color:#838383;} /* selected link */
  20. a:link {text-decoration:none;}
  21. a:visited {text-decoration:none;}
  22. a:hover {text-decoration:none;}
  23. a:active {text-decoration:none;}
  24.  
  25. #icon{
  26. position:absolute;
  27. display: inline-block;
  28. background:transparent;
  29. margin-left:40%;
  30. top:130px;
  31. height:100px;
  32. width:270px;
  33. text-align:center;
  34. font-size:10px;
  35. word-spacing:10px;
  36. }
  37.  
  38. #titlebox {
  39. position:absolute;
  40. display: inline-block;
  41. background:#91d8dd; /* THIS IS THE BACHGROUND COLOR OF THE BOX WITH THE TITLE. PICK A COLOR USING THE HEX SYSTEM AND MAKE SURE TO USE THE # SIGN IN FRONT*/
  42. margin:0px auto;
  43. margin-left:40%;
  44. top:240px;
  45. height:20px;
  46. width:250px;
  47. font-size:18px;
  48. text-transform:none;
  49. font-family:times, italic;
  50. text-align:center;
  51. padding:10px;
  52. border-radius:0px;
  53. color:#838383;
  54. }
  55.  
  56. #box {
  57. position:fixed;
  58. display: inline-block;
  59. margin:0px auto;
  60. background:#f0f0f0; /* THIS IS THE BACHGROUND COLOR OF THE BACKGROUND BOX THAN CONTAINS THE LINKS. PICK A COLOR USING THE HEX SYSTEM AND MAKE SURE TO USE THE # SIGN IN FRONT*/
  61. opacity:1.0;
  62. margin-left:40%;
  63. top:280px;
  64. height:170px;
  65. width:240px;
  66. border-radius:0px;
  67. padding:15px;
  68. font-size:10px;
  69. font-family:times italic;
  70. color:#eff4f6;
  71. }
  72.  
  73.  
  74. /* LINKS
  75. IN THIS SECTION YOU CAN EDIT THE COLOR AND HOVER COLOR OF EACH LINK BOX. THE PROCESS IS TEH SAME FOR EACH BOX SO I ONLY LABELLED IT ON THE FIRST BOX*/
  76.  
  77. /* LINK A */
  78. #linka {
  79. position:relative;
  80. display: inline-block;
  81. margin:0px auto;
  82. background:#e1e1e1; /* THIS IS THE LINKS BEFORE YOU HOVER OVER THEM. PICK A COLOR USING THE HEX SYSTEM AND MAKE SURE TO USE THE # SIGN IN FRONT*/
  83. opacity:1.0;
  84. top:0px;
  85. height:15px;
  86. width:230px;
  87. border-radius:1px;
  88. padding:5px;
  89. font-size:11px;
  90. font-family:times italic;
  91. text-align:center;
  92. text color:#eff4f6;
  93. }
  94.  
  95. #linka:hover{
  96. background:#b2e4e8; /* THIS IS THE LINKS WHEN YOU ARE HOVERING OVER THEM. PICK A COLOR USING THE HEX SYSTEM AND MAKE SURE TO USE THE # SIGN IN FRONT*/
  97. }
  98.  
  99.  
  100. /* LINK B */
  101.  
  102. #linkb{
  103. position:relative;
  104. display: inline-block;
  105. margin:0px auto;
  106. background:#e1e1e1;
  107. opacity:1.0;
  108. top:10px;
  109. height:15px;
  110. width:230px;
  111. border-radius:1px;
  112. padding:5px;
  113. font-size:11px;
  114. font-family:times italic;
  115. text-align:center;
  116. text color:#eff4f6;
  117. }
  118.  
  119. #linkb:hover{
  120. background:#b2e4e8;
  121. }
  122.  
  123.  
  124. /* LINK C */
  125.  
  126. #linkc {
  127. position:relative;
  128. display: inline-block;
  129. margin:0px auto;
  130. background:#e1e1e1;
  131. opacity:1.0;
  132. top:20px;
  133. height:15px;
  134. width:230px;
  135. border-radius:1px;
  136. padding:5px;
  137. font-size:11px;
  138. font-family:times italic;
  139. text-align:center;
  140. text color:#eff4f6;
  141. }
  142.  
  143. #linkc:hover{
  144. background:#b2e4e8;
  145. }
  146.  
  147.  
  148. /* LINK D */
  149.  
  150. #linkd {
  151. position:relative;
  152. display: inline-block;
  153. margin:0px auto;
  154. background:#e1e1e1;
  155. opacity:1.0;
  156. top:30px;
  157. height:15px;
  158. width:230px;
  159. border-radius:1px;
  160. padding:5px;
  161. font-size:11px;
  162. font-family:times italic;
  163. text-align:center;
  164. text color:#eff4f6;
  165. }
  166.  
  167. #linkd:hover{
  168. background:#b2e4e8;
  169. }
  170.  
  171.  
  172. /* ASK LINK */
  173.  
  174. #linke {
  175. position:relative;
  176. display: inline-block;
  177. margin:0px auto;
  178. background:#e1e1e1;
  179. opacity:1.0;
  180. top:40px;
  181. height:15px;
  182. width:103px;
  183. border-radius:1px;
  184. padding:5px;
  185. font-size:11px;
  186. font-family:times italic;
  187. text-align:center;
  188. text color:#eff4f6;
  189. }
  190.  
  191. #linke:hover{
  192. background:#b2e4e8;
  193. }
  194.  
  195. /* SUBMIT LINK */
  196.  
  197. #linkf {
  198. position:relative;
  199. display: inline-block;
  200. margin:0px auto;
  201. background:#e1e1e1;
  202. opacity:1.0;
  203. left:11px;
  204. top:40px;
  205. height:15px;
  206. width:103px;
  207. border-radius:1px;
  208. padding:5px;
  209. font-size:11px;
  210. font-family:times italic;
  211. text-align:center;
  212. text color:#eff4f6;
  213. }
  214.  
  215. #linkf:hover{
  216. background:#b2e4e8;
  217. }
  218.  
  219. </style>
  220.  
  221. <!-- IMAGE AT THE TOP. USE IMAGE URL TO CHANGE IMAGE SOURCE (SRC). -->
  222. <div id="icon"><img src="http://25.media.tumblr.com/034ec49e8e02396bfff842eee9c32b77/tumblr_mw025pDSOX1sj8ev1o7_500.png" align="center" height="80px" width="80px" alt="I Lost My Shoe"> <br>
  223.  
  224.  
  225. <!-- HOME, ASK, NAVI, AND ABOUT LINKS AT HTE TOP -->
  226. <!-- HOME LINK --><a href="http://winterhunting.tumblr.com">HOME</a>
  227. <!-- ASK LINK --><a href="http://winterhunting.tumblr.com/ask">ASK</a>
  228. <!-- NAVI LINK --><a href="http://winterhunting.tumblr.com/navi">NAVI</a>
  229. <!-- ABOUT LINK --><a href="http://winterhunting.tumblr.com/about">ABOUT</a>
  230. </div>
  231.  
  232. <div id="titlebox"><i>navigation</i></div> <!-- PAGE TITLE HERE -->
  233.  
  234. <div id="box">
  235. <!-- NOW COME THE LINKS. YOU CAN HAVE UP TO 6 INCLUDING THE ASK AND SUBMIT BUT ONLY FOUR WITHOUT THE ASK AND SUBMIT -->
  236.  
  237. <div id="linka">
  238.  
  239. <!-- FIRST LINK: CHANGE THE URL TO CHANGE THE DESTINATIN OF THE LINK. CHANGE THE TEXT TO CHANGE WHAT THE LINK LOOKS LIKE ON THE PAGE (SAME FOR OTHER LINKS AS WELL) -->
  240. <a href="http://winterhunting.tumblr.com/links">Links and Stuff</a>
  241. </div>
  242.  
  243. <!-- SECOND LINK -->
  244. <div id="linkb">
  245. <a href="http://winterhunting.tumblr.com/tags">Tags</a>
  246. </div>
  247.  
  248. <!-- THIRD LINK -->
  249. <div id="linkc">
  250. <a href="http://winterhunting.tumblr.com/pals">Follow Forever</a>
  251. </div>
  252.  
  253. <!-- FOURTH LINK -->
  254. <div id="linkd">
  255. <a href="http://winterhunting.tumblr.com/about">About</a>
  256. </div>
  257.  
  258. <!-- ASK PAGE LINK (DELETE IS YOU DON"T HAVE AN ASK OR YO DON"T WANT IT ON THIS PAGE. IT WILL NOT GET WIDER IF SUBMIT ID DELETED BUT YOU CAN AMKE IT WIDER OR CENTER IT BY EDITING THE linke DIV IN THE CSS SECTION. -->
  259. <div id="linke">
  260. <a href="http://winterhunting.tumblr.com/ask">Ask</a>
  261. </div>
  262.  
  263. <!-- SUBMIT LINK (DELETE IF YOU DON"T HAVE A SUBMIT PAGE) -->
  264. <div id="linkf">
  265. <a href="http://winterhunting.tumblr.com/submit">Submit</a>
  266. </div>
  267.  
  268. </div>
  269.  
  270.  
  271. <!-- CREDIT: DO NOT REMOVE -->
  272. <div style="position:fixed;bottom:3px; left:7px; font-size:9px; letter-spacing:1px; font-family:calibri;border:1px solid;padding:4px;"><a href="http://neonbikethemes.tumblr.com/">P</a></center></div>
  273.  
  274. </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!