API tools faq
paste
Belgrravia

Navi Page

Belgrravia
Jun 25th, 2014
489
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.95 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. navi page by kalopsiathemes
  3. Please do not
  4. -remove the credit
  5. -steal parts of code
  6. -use as a base
  7.  
  8. Feel free to
  9. -edit parts of the page
  10. -ask me any questions
  11. -->
  12.  
  13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  14. "http://www.w3.org/TR/html4/loose.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml">
  16. <head>
  17. <link href='http://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22.  
  23. <style type="text/css">
  24.  
  25.  
  26. body {
  27. background-color:#ffffff;<!--here you can change the page's background color-->
  28. font-family:'Raleway',sans-serif;
  29. }
  30. table {
  31. width:400px;
  32. height:250px;
  33. border-spacing:2px;
  34. margin:auto;
  35. margin-top:150px;
  36. }
  37.  
  38. td {
  39. width:140px;
  40. height:140px;
  41. }
  42.  
  43.  
  44. .image img {
  45. width:140px;
  46. height:140px;
  47. margin-top:0px;
  48.  
  49. }
  50.  
  51. .links {
  52. font-size:12px;
  53. position:absolute;
  54. width:140px;
  55. margin-top:10px;
  56. text-transform:lowercase;
  57. text-align:center;
  58. font-family:Helvetica, sans-serif;
  59. line-height:120%;
  60. z-index:100;
  61. opacity:0;
  62. }
  63.  
  64. .title {
  65. font-size:14px;
  66. text-transform:uppercase;
  67. text-align:center;
  68. margin-top:0px;
  69. width:140px;
  70. background-color:#c4c4c4;<!-- here you can change the background color for titles 1-3-->
  71. color:#090909;<!-- here you can change the font color for titles 1-3-->
  72. padding:0px;
  73. position:absolute;
  74. font-family:'Raleway',sans-serif;
  75. z-index:98;
  76. -moz-transition-duration:all .5s ease-in-out;
  77. -webkit-transition-duration:all .5s ease-in-out;
  78. -o-transition-duration:all .5s ease-in-out;
  79. }
  80.  
  81. .title2 {
  82. font-size:14px;
  83. text-transform:uppercase;
  84. text-align:center;
  85. margin-top:-16px;
  86. width:140px;
  87. position:absolute;
  88. background-color:#c4c4c4;<!-- here you can change the background color for titles 4 and 5-->
  89. color:#090909;<!-- here you can change the font color for titles 4 and 5 -->
  90. padding:0px;
  91. z-index:99;
  92. -moz-transition-duration:all .5s ease-in-out;
  93. -webkit-transition-duration:all .5s ease-in-out;
  94. -o-transition-duration:all .5s ease-in-out;
  95. }
  96.  
  97. .cell:hover .title {
  98. opacity:0;
  99. }
  100.  
  101. .cell:hover .title2 {
  102. opacity:0;
  103. }
  104.  
  105. .cell:hover .image img {
  106. opacity:0;
  107. }
  108.  
  109. .cell:hover .links {
  110. opacity:1;
  111. }
  112.  
  113. a:link, a:visited {
  114. text-decoration:none;
  115. color:#737373;
  116. }
  117.  
  118. a:hover {
  119. text-decoration:none;
  120. color:#c4c4c4;
  121. letter-spacing:.5px;
  122. }
  123.  
  124. #credit {
  125. position:fixed;
  126. color:#c4c4c4;
  127. bottom:5px;
  128. right:10px;
  129. padding:4px;
  130. font-size:12px;
  131. }
  132.  
  133. #credit a {
  134. text-decoration:none;
  135. }
  136.  
  137. </style>
  138. </head>
  139. <body>
  140. <table>
  141. <tr>
  142. <td>
  143. <div class="cell">
  144. <div class="title">Title 1</div>
  145. <div class="links">
  146. <a href="/">Link</a><br><!-- put your link in here. an external link needs to be put in its entirety (with http://....etc) but for tags just type tagged/yourtag after the backslash. i.e. "<a href="/tagged/hp">Harry Potter</a> -->
  147. <a href="/">Link</a><br>
  148. <a href="/">Link</a><br>
  149. <a href="/">Link</a><br>
  150. <a href="/">Link</a><br>
  151. <a href="/">Link</a> </div>
  152. <div class="image"><img src=""></div><!--Here is where you upload your picture for the title 1 box. If you need somewhere to upload the picture to the internet first go here:http://www.tumblr.com/themes/upload_static_file -->
  153. </div> </td>
  154. <td>
  155. <div class="cell">
  156. <div class="title">Title 2</div>
  157. <div class="links">
  158. <a href="">Link</a><br>
  159. <a href="">Link</a><br>
  160. <a href="">Link</a><br>
  161. <a href="">Link</a><br>
  162. <a href="">Link</a><br>
  163. <a href="">Link</a> </div>
  164. <div class="image"><img src=""></div>
  165. </div> </td>
  166. <td>
  167. <div class="cell">
  168. <div class="title">Title 3</div>
  169. <div class="links">
  170. <a href="">Link</a><br>
  171. <a href="">Link</a><br>
  172. <a href="">Link</a><br>
  173. <a href="">Link</a><br>
  174. <a href="">Link</a><br>
  175. <a href="">Link</a> </div>
  176. <div class="image"><img src=""></div>
  177. </div> </td></tr>
  178. <tr><td>
  179. <div class="cell">
  180. <div class="links">
  181. <a href="">Link</a><br>
  182. <a href="">Link</a><br>
  183. <a href="">Link</a><br>
  184. <a href="">Link</a><br>
  185. <a href="">Link</a><br>
  186. <a href="">Link</a> </div>
  187. <div class="image"><img src=""></div>
  188. <div class="title2">Title 4</div>
  189. </div></td>
  190. <td>
  191. <div class="cell">
  192. <div class="links">
  193. <a href="/">Home</a><br>
  194. <a href="/ask">Ask</a><br>
  195. <a href="/archive">Archive</a> </div>
  196. <div class="image"><img src=""></div>
  197. </div></td>
  198. <td>
  199. <div class="cell">
  200. <div class="links">
  201. <a href="">Link</a><br>
  202. <a href="">Link</a><br>
  203. <a href="">Link</a><br>
  204. <a href="">Link</a><br>
  205. <a href="">Link</a><br>
  206. <a href="">Link</a> </div>
  207. <div class="image"><img src=""></div>
  208. <div class="title2">Title 5</div>
  209. </div></td></tr>
  210. </div>
  211. </table>
  212. {block:ContentSource}
  213. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  214. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  215. {/block:SourceLogo}
  216. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  217. {/block:ContentSource}
  218.  
  219. <div id="credit">
  220. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  221.  
  222. </body>
  223. </html>
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!