API tools faq
paste
Advertisement
Amanduhh7

Navigation Page

Amanduhh7
Sep 22nd, 2015
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5.  
  6. <!--do not remove credit-->
  7. <!--do not remove credit-->
  8. <!--do not remove credit-->
  9. <!--do not remove credit-->
  10.  
  11.  
  12. <style type="text/css">
  13.  
  14. a{text-decoration:none;}
  15. body{width:100%; overflow-x:hidden;}
  16.  
  17. #title{
  18. position:fixed;
  19. text-align:center;
  20. font-size:40px;
  21. font-style:italic;
  22. margin-top:5%;
  23. }
  24.  
  25. #navi{
  26. position:fixed;
  27. margin-top:120px;
  28. margin-left:2%;
  29. }
  30.  
  31. #navi ul{
  32. list-style-type:none;
  33. }
  34.  
  35. #navi ul li{
  36. display:inline-block;
  37. padding:2px;
  38. }
  39.  
  40. #navi ul li a{
  41. color:black;
  42. text-decoration:none;
  43. font-family:calibri;
  44. font-style:italic;
  45. }
  46.  
  47. #container{
  48. width:50%;
  49. height:auto;
  50. margin-left:25%;
  51. margin-top:10%;
  52. }
  53.  
  54. #container .navigation{
  55. width:200px;
  56. background-color:#eaeaea;
  57. height:380px;
  58. float:left;
  59. margin:10px;
  60. }
  61.  
  62. .navigation .navtitle{
  63. font-size:14px;
  64. text-transform:uppercase;
  65. text-align:center;
  66. padding:5px;
  67. background-color:black;
  68. color:white;
  69. }
  70.  
  71. .navigation .navlinks{
  72. margin-left:-40px;
  73. }
  74.  
  75. .navlinks ul{
  76. list-style-type:none;
  77. }
  78.  
  79. .navlinks ul li{
  80. background-color:#f1f1f1;
  81. width:195px;
  82. margin-top:5px;
  83. padding:2px;
  84. transition:.5s all ease-in-out;
  85. }
  86.  
  87. .navlinks ul li a{
  88. color:black;
  89. padding:2px;
  90. font-size:12px;
  91. }
  92.  
  93. .navlinks ul li:hover{
  94. background-color:#ffffff;
  95. }
  96.  
  97. #credit{
  98. position:fixed;
  99. bottom:1px;
  100. left:1px;
  101. }
  102.  
  103. #credit a{
  104. text-decoration:none;
  105. color:black;
  106. font-size:12px;
  107. }
  108. /* Custom CSS */
  109. {CustomCSS}
  110. </style>
  111. </head>
  112. <body>
  113.  
  114. <div id="title">NAVIGATION</div>
  115. <div id="navi">
  116. <ul><li><a href="/">INDEX</a></li> //
  117. <li><a href="/ask">MESSAGE</a></li> //
  118. <li><a href="/submit">SUBMIT</a></li> //
  119. <li><a href="/dashboard">DASHBOARD</a></li>
  120. </ul>
  121. </div>
  122.  
  123. <div id="container">
  124.  
  125. <!--COPY ALL TEXTS BELOW TO ADD ANOTHER COLUMN-->
  126. <div class="navigation"><div class="navtitle">NAVIGATION ONE</div>
  127. <div class="navlinks">
  128. <ul>
  129. <li><a href="">CUSTOM LINK</a></li>
  130. <li><a href="">CUSTOM LINK</a></li>
  131. <li><a href="">CUSTOM LINK</a></li>
  132. <li><a href="">CUSTOM LINK</a></li>
  133. <li><a href="">CUSTOM LINK</a></li>
  134. <li><a href="">CUSTOM LINK</a></li>
  135. <li><a href="">CUSTOM LINK</a></li>
  136. <li><a href="">CUSTOM LINK</a></li>
  137. <li><a href="">CUSTOM LINK</a></li>
  138. <li><a href="">CUSTOM LINK</a></li>
  139. <li><a href="">CUSTOM LINK</a></li>
  140. <li><a href="">CUSTOM LINK</a></li>
  141.  
  142. </ul>
  143. </div>
  144. </div>
  145. <!--COPY ALL TEXT ABOVE TO ADD ANOTHER COLUMN-->
  146.  
  147. <div class="navigation"><div class="navtitle">NAVIGATION TWO</div>
  148. <div class="navlinks">
  149. <ul>
  150. <li><a href="">CUSTOM LINK</a></li>
  151. <li><a href="">CUSTOM LINK</a></li>
  152. <li><a href="">CUSTOM LINK</a></li>
  153. <li><a href="">CUSTOM LINK</a></li>
  154. <li><a href="">CUSTOM LINK</a></li>
  155. <li><a href="">CUSTOM LINK</a></li>
  156. <li><a href="">CUSTOM LINK</a></li>
  157. <li><a href="">CUSTOM LINK</a></li>
  158. <li><a href="">CUSTOM LINK</a></li>
  159. <li><a href="">CUSTOM LINK</a></li>
  160. <li><a href="">CUSTOM LINK</a></li>
  161. <li><a href="">CUSTOM LINK</a></li>
  162.  
  163. </ul>
  164. </div>
  165. </div>
  166.  
  167. <div class="navigation"><div class="navtitle">NAVIGATION THREE</div>
  168. <div class="navlinks">
  169. <ul>
  170. <li><a href="">CUSTOM LINK</a></li>
  171. <li><a href="">CUSTOM LINK</a></li>
  172. <li><a href="">CUSTOM LINK</a></li>
  173. <li><a href="">CUSTOM LINK</a></li>
  174. <li><a href="">CUSTOM LINK</a></li>
  175. <li><a href="">CUSTOM LINK</a></li>
  176. <li><a href="">CUSTOM LINK</a></li>
  177. <li><a href="">CUSTOM LINK</a></li>
  178. <li><a href="">CUSTOM LINK</a></li>
  179. <li><a href="">CUSTOM LINK</a></li>
  180. <li><a href="">CUSTOM LINK</a></li>
  181. <li><a href="">CUSTOM LINK</a></li>
  182.  
  183. </ul>
  184. </div>
  185. </div>
  186.  
  187. <div class="navigation"><div class="navtitle">NAVIGATION FOUR</div>
  188. <div class="navlinks">
  189. <ul>
  190. <li><a href="">CUSTOM LINK</a></li>
  191. <li><a href="">CUSTOM LINK</a></li>
  192. <li><a href="">CUSTOM LINK</a></li>
  193. <li><a href="">CUSTOM LINK</a></li>
  194. <li><a href="">CUSTOM LINK</a></li>
  195. <li><a href="">CUSTOM LINK</a></li>
  196. <li><a href="">CUSTOM LINK</a></li>
  197. <li><a href="">CUSTOM LINK</a></li>
  198. <li><a href="">CUSTOM LINK</a></li>
  199. <li><a href="">CUSTOM LINK</a></li>
  200. <li><a href="">CUSTOM LINK</a></li>
  201. <li><a href="">CUSTOM LINK</a></li>
  202.  
  203. </ul>
  204. </div>
  205. </div>
  206.  
  207. <!--PLACE ALL NEW COLUMNS BELOW THIS TEXT-->
  208.  
  209. </div>
  210.  
  211. <!--DO NOT ADD ANY CODING ABOVE OR BELOW THIS COMMENT-->
  212.  
  213. <div id="credit"><a href="http://www.slapdashthemes.tumblr.com">THEME CREDIT</a></div>
  214.  
  215. </body>
  216. </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!