API tools faq
paste
Advertisement
themesbygeorgia

Navigation Page #2

themesbygeorgia
Nov 9th, 2014
592
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--Navi Page #2 by wonderfullythemes
  6.  
  7. please like/reblog if using-->
  8.  
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13.  
  14.  
  15. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  16. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  17.  
  18. <!--SCRIPT FOR TOOLTIPS-->
  19. <stsss>
  20. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  21. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("a[title]").style_my_tooltips({
  26. tip_follows_cursor:true,
  27. tip_delay_time:200,
  28. tip_fade_speed:300,
  29. attribute:"title"
  30. });
  31. });
  32. })(jQuery);
  33. </script>
  34.  
  35. <!--SCRIPT FOR SLIDING DROPDOWN MENU-->
  36. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  37. <script type="text/javascript">
  38. $(document).ready(function(){
  39. $(".links_body").hide();
  40. $(".links_head").click(function(){
  41. $(this).next(".links_body").slideToggle("slow");
  42. }); }); </script>
  43.  
  44. <style type="text/css">
  45.  
  46. ::-webkit-scrollbar-thumb {
  47. height:auto;
  48. background-color:black;
  49. }
  50.  
  51. ::-webkit-scrollbar {
  52. height:4px;
  53. width:8px;
  54. padding-right:2px;
  55. background-color:white;
  56. }
  57.  
  58. #s-m-t-tooltip {
  59. max-width:200px;
  60. font-size:11px;
  61. background-color:black;
  62. color:white;
  63. box-shadow:2px 3px 2px #ff7373;
  64. border:1px solid black;
  65. line-height:9px;
  66. display:none;
  67. position:absolute;
  68. letter-spacing:1px;
  69. text-transform:uppercase;
  70. padding:7px;
  71. margin:15px 0px 0px 15px;
  72. z-index:99999999999999;
  73. }
  74.  
  75. body {
  76. background:white;
  77. color:black;
  78. font-family:'calibri';
  79. font-size:12px;
  80. text-decoration:none;
  81. text-transform:none;
  82. margin:0px;
  83. cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;
  84. }
  85.  
  86. a {
  87. color:#45966e;
  88. text-decoration:none;
  89. -moz-transition-duration:0.7s;
  90. -webkit-transition-duration:0.7s;
  91. -o-transition-duration:0.7s;
  92. }
  93.  
  94. a:hover {
  95. cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), auto;
  96. color:black;
  97. -moz-transition-duration:0.7s;
  98. -webkit-transition-duration:0.7s;
  99. -o-transition-duration:0.7s;
  100. }
  101.  
  102. #container {
  103. width:400px;
  104. height:300px;
  105. border:1px solid transparent; /*--change transparent to a colour code if you want a border--*/
  106. position:fixed;
  107. text-align:center;
  108. top:50%;
  109. margin-top:-220px;
  110. left:50%;
  111. margin-left:-300px;
  112. float:center;
  113. padding:60px;
  114. overflow-y:scroll;
  115. }
  116.  
  117. #header {
  118. height:100px;
  119. overflow:hidden;
  120. -moz-transition-duration:0.7s;
  121. -webkit-transition-duration:0.7s;
  122. -o-transition-duration:0.7s;
  123. }
  124.  
  125. .sidebarpic img {
  126. border-radius:50%;
  127. width:100px;
  128. height:100px;
  129. text-align:left;
  130. float:left;
  131. }
  132.  
  133. #header:hover #title {
  134. border-bottom:1px solid #ff7373;
  135. -moz-transition-duration:0.7s;
  136. -webkit-transition-duration:0.7s;
  137. -o-transition-duration:0.7s;
  138. }
  139.  
  140. #title {
  141. font-family:'vladimir script';
  142. margin-top:30px;
  143. font-size:35px;
  144. position:absolute;
  145. margin-left:120px;
  146. border-bottom:1px solid transparent;
  147. -moz-transition-duration:0.7s;
  148. -webkit-transition-duration:0.7s;
  149. -o-transition-duration:0.7s;
  150. }
  151.  
  152. #header:hover #links {
  153. opacity:1;
  154. -moz-transition-duration:0.7s;
  155. -webkit-transition-duration:0.7s;
  156. -o-transition-duration:0.7s;
  157. }
  158.  
  159. #links {
  160. right:0;
  161. text-align:right;
  162. margin-top:20px;
  163. line-height:15px;
  164. opacity:0;
  165. -moz-transition-duration:0.7s;
  166. -webkit-transition-duration:0.7s;
  167. -o-transition-duration:0.7s;
  168. }
  169.  
  170. #links a {
  171. color:#45966e;
  172. font-size:10px;
  173. text-transform:uppercase;
  174. padding:0 3px 0 3px;
  175. }
  176.  
  177. #links a:hover {
  178. background-color:#ff7373;
  179. color:black;
  180. }
  181.  
  182. #tags {
  183. margin-top:30px;
  184. }
  185.  
  186. .links_list {
  187. position:relative;
  188. margin-top:10px;
  189. margin-bottom:10px;
  190. padding:0px;
  191. display:block;
  192. }
  193.  
  194. .links_head {
  195. letter-spacing:2px;
  196. text-transform:uppercase;
  197. padding-top:5px;
  198. padding-bottom:5px;
  199. cursor:help;
  200. text-align:center;
  201. -moz-transition-duration:0.7s;
  202. -webkit-transition-duration:0.7s;
  203. -o-transition-duration:0.7s;
  204. }
  205.  
  206. .links_head:hover {
  207. color:white;
  208. background-color:#45966e;
  209. -moz-transition-duration:0.7s;
  210. -webkit-transition-duration:0.7s;
  211. -o-transition-duration:0.7s;
  212. }
  213.  
  214. .links_body {
  215. padding:5px;
  216. line-height:15px;
  217. text-align:center;
  218. display:none;
  219. }
  220.  
  221. .links_body a {
  222. text-align:center;
  223. font-size:11px;
  224. text-transform:lowercase;
  225. letter-spacing:2px;
  226. line-height:13px;
  227. display:block;
  228. }
  229.  
  230. .links_body a:hover {
  231. letter-spacing:8px;
  232. cursor:crosshair;
  233. }
  234.  
  235. /*--CREDIT--*/
  236. #spectrum {
  237. bottom:9px;
  238. right:7px;
  239. font-size:8px;
  240. font-family:'calibri';
  241. letter-spacing:1px;
  242. text-transform:uppercase;
  243. position:fixed;
  244. }
  245.  
  246. </style></head><body>
  247. <div id="container">
  248.  
  249. <div id="header">
  250. <div class="sidebarpic"><img src="https://38.media.tumblr.com/avatar_25db433ccc57_128.png"/></div><!--image url here-->
  251. <div id="title">Navigation</div> <!--your title here-->
  252.  
  253. <div id="links">
  254. <a href="/">return</a><br>
  255. <a href="/ask">ask</a><br>
  256. <a href="http://tumblr.com/dashboard">dash</a><br>
  257. <a href="http://wonderfullythemes.tumblr.com" title="wonderfullythemes">credit</a>
  258. </div>
  259. </div>
  260.  
  261. <div id="tags">
  262.  
  263. <div class="links_list">
  264. <div class="links_head">tag title</div><!--tag/link title here-->
  265. <div class="links_body">
  266.  
  267. <a href="">tag</a>
  268. <a href="">tag</a>
  269. <a href="">tag</a>
  270. <a href="">tag</a>
  271. <a href="">tag</a>
  272. <a href="">tag</a>
  273. <a href="">tag</a>
  274. <a href="">tag</a>
  275. <a href="">tag</a>
  276.  
  277. </div></div>
  278.  
  279. <div class="links_list">
  280. <div class="links_head">tag title</div><!--tag/link title here-->
  281. <div class="links_body">
  282.  
  283. <a href="">tag</a>
  284. <a href="">tag</a>
  285. <a href="">tag</a>
  286. <a href="">tag</a>
  287. <a href="">tag</a>
  288. <a href="">tag</a>
  289. <a href="">tag</a>
  290. <a href="">tag</a>
  291. <a href="">tag</a>
  292.  
  293. </div></div>
  294.  
  295. <div class="links_list">
  296. <div class="links_head">tag title</div><!--tag/link title here-->
  297. <div class="links_body">
  298.  
  299. <a href="">tag</a>
  300. <a href="">tag</a>
  301. <a href="">tag</a>
  302. <a href="">tag</a>
  303. <a href="">tag</a>
  304. <a href="">tag</a>
  305. <a href="">tag</a>
  306. <a href="">tag</a>
  307. <a href="">tag</a>
  308.  
  309. </div></div>
  310.  
  311. <div class="links_list">
  312. <div class="links_head">tag title</div><!--tag/link title here-->
  313. <div class="links_body">
  314.  
  315. <a href="">tag</a>
  316. <a href="">tag</a>
  317. <a href="">tag</a>
  318. <a href="">tag</a>
  319. <a href="">tag</a>
  320. <a href="">tag</a>
  321. <a href="">tag</a>
  322. <a href="">tag</a>
  323. <a href="">tag</a>
  324.  
  325. </div></div>
  326.  
  327. <div class="links_list">
  328. <div class="links_head">tag title</div><!--tag/link title here-->
  329. <div class="links_body">
  330.  
  331. <a href="">tag</a>
  332. <a href="">tag</a>
  333. <a href="">tag</a>
  334. <a href="">tag</a>
  335. <a href="">tag</a>
  336. <a href="">tag</a>
  337. <a href="">tag</a>
  338. <a href="">tag</a>
  339. <a href="">tag</a>
  340.  
  341. </div></div>
  342.  
  343. </div><!--end #tags-->
  344.  
  345. </div><!--end #container-->
  346.  
  347. <div id="spectrum">
  348. <a href="http://wonderfullythemes.tumblr.com" title="wonderfullythemes">theme</a>
  349. </div>
  350.  
  351.  
  352. </body>
  353. </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!