API tools faq
paste
Advertisement
elisewhite

Navigation Page 02 - Without Popups

elisewhite
Feb 7th, 2014
4,021
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.28 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <link rel="shortcut icon" href="{Favicon}"/>
  4. <title>Navigation</title>
  5. <link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
  6.  
  7. <!---------------------------------------------------------------------
  8. ----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
  9. -------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
  10. ------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
  11. ---------------------------------------------------------------------->
  12.  
  13. <style type="text/css">
  14.  
  15. ::-webkit-scrollbar-thumb {
  16. height:auto;
  17. background-color:gray;
  18. }
  19.  
  20. ::-webkit-scrollbar {
  21. height:9px;
  22. width:1px;
  23. background-color:#FFFFFF;
  24. }
  25.  
  26. #container {
  27. position:absolute;
  28. width:600px;
  29. height:500px;
  30. margin:auto;
  31. top:0;
  32. bottom:0;
  33. left:0;
  34. right:0;
  35. }
  36.  
  37. #sidebar {
  38. width:200px;
  39. height:500px;
  40. }
  41.  
  42. #image {
  43. width:200px;
  44. height:400px;
  45. }
  46.  
  47. #image img {
  48. width:200px;
  49. height:400px;
  50. }
  51.  
  52. #title {
  53. width:15px;
  54. margin-top:-240px;
  55. margin-left:170px;
  56. font-size:18px;
  57. font-family: 'Raleway', sans-serif;
  58. text-transform:uppercase;
  59. word-wrap:break-word;
  60. line-height:125%;
  61. text-align:center;
  62. color:#333333; /*---------TITLE COLOR---------*/
  63. }
  64.  
  65. #links a {
  66. display:inline-block;
  67. width:98px;
  68. margin-top:5px;
  69. background-color:#777777; /*--------LINK BG COLOR--------*/
  70. color:white; /*-------LINK TEXT COLOR-------*/
  71. line-height:255%;
  72. text-decoration:none;
  73. text-align:center;
  74. text-transform:uppercase;
  75. font-family:calibri;
  76. font-size:11px;
  77. letter-spacing:1px;
  78. -moz-transition-duration:0.5s;
  79. -webkit-transition-duration:0.5s;
  80. -o-transition-duration:0.5s;
  81. }
  82.  
  83. #links a:hover {
  84. background-color:#444444; /*-----LINK HOVER BG COLOR-----*/
  85. -moz-transition-duration:0.5s;
  86. -webkit-transition-duration:0.5s;
  87. -o-transition-duration:0.5s;
  88. }
  89.  
  90. #content {
  91. float:right;
  92. width:380px;
  93. height:500px;
  94. padding-right:10px;
  95. margin-top:-500px;
  96. overflow-y: scroll;
  97. overflow-x: hidden;
  98. border-right:1px solid gray;
  99. }
  100.  
  101. #content h1 {
  102. display:block;
  103. width:380px;
  104. margin-top:20px;
  105. text-decoration:none;
  106. font-family:calibri;
  107. color:#444444; /*-------TAG TITLE COLOR-------*/
  108. text-transform:uppercase;
  109. font-size:13px;
  110. font-weight:normal;
  111. letter-spacing:2px;
  112. line-height:150%;
  113. text-align:center;
  114. border-bottom:1px solid gray;
  115. }
  116.  
  117. #content h1 a {
  118. display:block;
  119. width:380px;
  120. margin-top:20px;
  121. background-color:white;
  122. text-decoration:none;
  123. font-family:calibri;
  124. color:#444444;
  125. text-transform:uppercase;
  126. font-size:13px;
  127. font-weight:normal;
  128. letter-spacing:2px;
  129. line-height:150%;
  130. text-align:center;
  131. }
  132.  
  133. #content h1 a:hover {
  134. background-color:white;
  135. letter-spacing:4px;
  136. color:#444444;
  137. }
  138.  
  139. #content a {
  140. display:inline-block;
  141. width:187px;
  142. margin-top:5px;
  143. background-color:#eaeae8; /*---------TAG BG COLOR--------*/
  144. color:#666666; /*--------TAG TEXT COLOR-------*/
  145. line-height:150%;
  146. text-decoration:none;
  147. text-align:center;
  148. text-transform:none;
  149. font-family:calibri;
  150. font-size:11px;
  151. letter-spacing:1px;
  152. -moz-transition-duration:0.7s;
  153. -webkit-transition-duration:0.7s;
  154. -o-transition-duration:0.7s;
  155. }
  156.  
  157. #content a:hover {
  158. background-color:#777777; /*------TAG HOVER BG COLOR-----*/
  159. color:white; /*-----TAG HOVER TEXT COLOR----*/
  160. -moz-transition-duration:0.7s;
  161. -webkit-transition-duration:0.7s;
  162. -o-transition-duration:0.7s;
  163. }
  164.  
  165. #credit {
  166. font-size:9px;
  167. font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  168. font-style:italic;
  169. letter-spacing:1px;
  170. }
  171.  
  172. #credit a {
  173. background-color:#fff;
  174. padding:5px;
  175. border-top:1px solid #e9e9e9;
  176. border-bottom:1px solid #e9e9e9;
  177. position:fixed;
  178. right:15px;
  179. bottom:10px;
  180. text-decoration:none;
  181. color:gray;
  182. -moz-transition-duration:1s;
  183. -webkit-transition-duration:1s;
  184. -o-transition-duration:1s;
  185. }
  186.  
  187. #credit a:hover {
  188. color:#fff;
  189. background-color:#747474;
  190. -moz-transition-duration:1s;
  191. -webkit-transition-duration:1s;
  192. -o-transition-duration:1s;
  193. }
  194.  
  195. </style>
  196.  
  197. <body>
  198.  
  199. <!--------------------------------------------
  200. CONTENT
  201. --------------------------------------------->
  202.  
  203. <div id="container">
  204.  
  205. <!------------- SIDEBAR -------------->
  206.  
  207. <div id="sidebar">
  208. <div id="image">
  209. <img src="https://31.media.tumblr.com/4978d8cc5ca2c065b0c7355ad378ae7a/tumblr_n0pkfkKyUs1rv5n8go1_400.png"> <!---URL OF SIDEBAR PICTURE--->
  210. <div id="title">Navigation</div>
  211. </div>
  212. <div id="links">
  213. <a href="/">Home</a>
  214. <a href="/about">About</a>
  215. <a href="/ask">Message</a>
  216. <a href="/submit">Submit</a>
  217. <a href="/tagged/answered">Answered</a>
  218. <a href="http://tumblr.com/dashboard">Dash</a>
  219. </div>
  220. </div>
  221.  
  222. <!-------------- TAGS --------------->
  223.  
  224. <!-----------------------------------
  225. TO ADD MORE LINKS, JUST COPY
  226. AND PASTE THE <h1> and <a>
  227. CODES BELOW. YOU CAN HAVE AS
  228. MANY OR AS LITTLE AS YOU'D LIKE
  229. WITHOUT SCREWING UP THE CODE!
  230. JUST MAKE SURE YOU DON'T DELETE
  231. OR ALTER THE CONTENT <DIV> :)
  232. ------------------------------------>
  233.  
  234. <div id="content">
  235. <h1>Tag Title Here</h1>
  236. <a href="/">Link Here</a>
  237. <a href="/">Link Here</a>
  238. <a href="/">Link Here</a>
  239. <a href="/">Link Here</a>
  240. <a href="/">Link Here</a>
  241. <a href="/">Link Here</a>
  242. <h1>Tag Title Here</h1>
  243. <a href="/">Link Here</a>
  244. <a href="/">Link Here</a>
  245. <a href="/">Link Here</a>
  246. <a href="/">Link Here</a>
  247. <a href="/">Link Here</a>
  248. <a href="/">Link Here</a>
  249. <h1>Tag Title Here</h1>
  250. <a href="/">Link Here</a>
  251. <a href="/">Link Here</a>
  252. <a href="/">Link Here</a>
  253. <a href="/">Link Here</a>
  254. <a href="/">Link Here</a>
  255. <a href="/">Link Here</a>
  256. <h1>Tag Title Here</h1>
  257. <a href="/">Link Here</a>
  258. <a href="/">Link Here</a>
  259. <a href="/">Link Here</a>
  260. <a href="/">Link Here</a>
  261. <a href="/">Link Here</a>
  262. <a href="/">Link Here</a>
  263. <h1>Tag Title Here</h1>
  264. <a href="/">Link Here</a>
  265. <a href="/">Link Here</a>
  266. <a href="/">Link Here</a>
  267. <a href="/">Link Here</a>
  268. <a href="/">Link Here</a>
  269. <a href="/">Link Here</a>
  270. </div>
  271.  
  272. </div>
  273.  
  274. <!--------------------------------------------
  275. CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
  276. --------------------------------------------->
  277.  
  278. <div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>
  279.  
  280. </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!