API tools faq
paste
Advertisement
MAThemes

Navigation Theme #2 / Blue /

MAThemes
Sep 4th, 2013
13,085
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.23 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. NAVIGATION/TAGS PAGE #2
  3. by: myackles.tumblr.com / ma-themes.tumblr.com
  4.  
  5. Editing is okay as long as you:
  6. DO NOT CLAIM AS YOUR OWN OR REMOVE/MOVE THE CREDIT!!
  7. -->
  8.  
  9.  
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}"/>
  12. <title>Navi</title> <!-- PAGE TITLE -->
  13. <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
  14.  
  15.  
  16. <style type="text/css">
  17.  
  18. /* SCROLL AND HOVER */
  19.  
  20. ::selection {background-color:white;color:gray;} /* HOVER COLORS */
  21. ::-moz-selection {background-color:white;color:gray;} /* HOVER COLORS */
  22.  
  23. ::-webkit-scrollbar-thumb {
  24. height:auto;
  25. background-color: #8b8a8b;} /* SCROLLBAR COLOR */
  26. ::-webkit-scrollbar {
  27. height:9px;
  28. width:2px;
  29. background-color: #fff;}
  30.  
  31. body { background-color:#fbfbfb;}
  32.  
  33. .container {overflow:auto;width:900px;margin:10px auto 0 auto;}
  34.  
  35. a {text-decoration:none;color:#777777;font-size:10px;text-transform:uppercase;text-align:center;}
  36.  
  37. .head {
  38.  
  39.  
  40. /* HEADER BACKGROUND IMAGE DOWN HERE */
  41. background-image: url('http://25.media.tumblr.com/cd5001bfb8de89a41337dce9a77a7d85/tumblr_mj77t2OgYd1r9c5eeo2_250.png');
  42. border-bottom:2px solid #46b1e6;} /* BLUE COLOUR */
  43.  
  44. .header {
  45. color:#8b8a8b;
  46. width:100%;
  47. letter-spacing:2px;
  48. text-shadow: 2px 2px 2px white;/* TEXT SHADOW */
  49. font-family:'Quicksand';
  50. font-size:30px;
  51. text-transform:uppercase;
  52. padding-bottom:20px;}
  53.  
  54. .u {margin-top:-70px; border-bottom:2px solid gray;padding-bottom:70px;}
  55. .u:first-letter {color:#46b1e6;} /* BLUE COLOUR */
  56.  
  57. .links {font-family:calibri;margin-top:-50px;letter-spacing:2px;}
  58.  
  59. .a {
  60. display:inline-block;
  61. width:100px;
  62. background-image:none;
  63. transition: all 0.3s ease-out;
  64. -o-transition: all 0.3s ease-out;
  65. -webkit-transition: all 0.3s ease-out;
  66. -moz-transition: all 0.3s ease-out;}
  67. .a:hover {
  68. letter-spacing:3px;
  69. transition: all 0.3s ease-out;
  70. -o-transition: all 0.3s ease-out;
  71. -webkit-transition: all 0.3s ease-out;
  72. -moz-transition: all 0.3s ease-out;}
  73.  
  74. .birds{ opacity:0.3;}
  75.  
  76.  
  77. .column1 {
  78. width:205px;
  79. float:left;
  80. margin:10px;}
  81.  
  82. .column1header h4{
  83. font-family: calibri;
  84. font-size:10px;
  85. letter-spacing:2px;
  86. border-bottom:1px solid #46b1e6; /* BLUE COLOUR */
  87. display:block;
  88. text-transform:uppercase;
  89. color:gray;
  90. text-align:center;
  91. padding:5px;padding-top:10px;
  92. width:180px;padding-bottom:10px;}
  93.  
  94. .column1 a {
  95. display:block;
  96. padding:5px; border:1px solid #f0f0f0;
  97. font-family: calibri;
  98. font-size:10px;
  99. width:180px;letter-spacing:2px;
  100. background-color:white;
  101. margin:2px 0;
  102. transition: all 0.3s ease-out;
  103. -o-transition: all 0.3s ease-out;
  104. -webkit-transition: all 0.3s ease-out;
  105. -moz-transition: all 0.3s ease-out;}
  106.  
  107. .column1 a:hover {
  108. letter-spacing:4px;
  109. transition: all 0.3s ease-out;
  110. -o-transition: all 0.3s ease-out;
  111. -webkit-transition: all 0.3s ease-out;
  112. -moz-transition: all 0.3s ease-out;}
  113.  
  114. .column2 {
  115. width:205px;
  116. float:left;
  117. margin:10px;}
  118.  
  119. .column2header h4{
  120. font-family: calibri;
  121. font-size:10px;
  122. letter-spacing:2px;
  123. border-bottom:1px solid gray;
  124. display:block;
  125. text-transform:uppercase;
  126. color: #46b1e6; /* BLUE COLOUR */
  127. text-align:center;
  128. padding:5px;padding-top:10px;
  129. width:180px;padding-bottom:10px;}
  130.  
  131. .column2 a {
  132. display:block;
  133. padding:5px; border:1px solid #f0f0f0;
  134. font-family: calibri;
  135. font-size:10px;
  136. width:180px;letter-spacing:2px;
  137. background-color:white;
  138. margin:2px 0;
  139. transition: all 0.3s ease-out;
  140. -o-transition: all 0.3s ease-out;
  141. -webkit-transition: all 0.3s ease-out;
  142. -moz-transition: all 0.3s ease-out;}
  143.  
  144. .column2 a:hover {
  145. letter-spacing:4px;
  146. transition: all 0.3s ease-out;
  147. -o-transition: all 0.3s ease-out;
  148. -webkit-transition: all 0.3s ease-out;
  149. -moz-transition: all 0.3s ease-out;}
  150.  
  151.  
  152.  
  153. </style>
  154. </head>
  155.  
  156. <body>
  157. <center>
  158. <div class="header"><div class="head"><div class="birds"> <!-- BIRDS IMAGE DOWN HERE --><img src="http://media.tumblr.com/5756dcf0f8e9d68dc5296646cc5177a6/tumblr_inline_mpa74rDTQT1qz4rgp.png" width="520" height="200"></div>
  159.  
  160.  
  161. <div class="u">navigation</div>
  162. </div>
  163.  
  164. <div class="links"> <!-- LINKS ARE DOWN HERE -->
  165.  
  166. <div class="a"><a href="/">HOME</a></div>
  167. <div class="a"> <a href="/ask">ASKBOX</a></div>
  168. <div class="a"><a href="/archive">HISTORY</a></div>
  169. <div class="a"><a href="http://www.ma-themes.tumblr.com">CREDIT</a></div>
  170.  
  171. </div> </div> </center>
  172.  
  173.  
  174.  
  175. <div class="container">
  176. <div class="column1"><div class="column1header">
  177.  
  178. <h4>COLUMN 1 HEADER</h4>
  179.  
  180. </div>
  181. <div class="column1links">
  182.  
  183. <a href="link">link name</a>
  184. <a href="link">link name</a>
  185. <a href="link">link name</a>
  186. <a href="link">link name</a>
  187. <a href="link">link name</a>
  188. <a href="link">link name</a>
  189. <a href="link">link name</a>
  190.  
  191. </div></div>
  192.  
  193.  
  194.  
  195. <div class="column2"><div class="column2header">
  196.  
  197. <h4>COLUMN 2 HEADER</h4>
  198.  
  199. </div>
  200. <div class="column2links">
  201.  
  202. <a href="link">link name</a>
  203. <a href="link">link name</a>
  204. <a href="link">link name</a>
  205. <a href="link">link name</a>
  206. <a href="link">link name</a>
  207. <a href="link">link name</a>
  208. <a href="link">link name</a>
  209.  
  210. </div></div>
  211.  
  212.  
  213.  
  214.  
  215. <div class="column1"><div class="column1header">
  216.  
  217. <h4>COLUMN 3 HEADER</h4>
  218.  
  219. </div>
  220. <div class="column1links">
  221.  
  222. <a href="link">link name</a>
  223. <a href="link">link name</a>
  224. <a href="link">link name</a>
  225. <a href="link">link name</a>
  226. <a href="link">link name</a>
  227. <a href="link">link name</a>
  228. <a href="link">link name</a>
  229.  
  230. </div></div>
  231.  
  232.  
  233.  
  234. <div class="column2"><div class="column2header">
  235.  
  236. <h4>COLUMN 4 HEADER</h4>
  237.  
  238. </div>
  239. <div class="column2links">
  240.  
  241. <a href="link">link name</a>
  242. <a href="link">link name</a>
  243. <a href="link">link name</a>
  244. <a href="link">link name</a>
  245. <a href="link">link name</a>
  246. <a href="link">link name</a>
  247. <a href="link">link name</a>
  248.  
  249. </div></div>
  250.  
  251. <!-- IF YOU WANT TO HAVE ANOTHER LINE OF COLUMNS JUST COPY THOSE ABOVE (1-4) AND PASTE THEM HERE -->
  252.  
  253. </body></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!