API tools faq
paste
Advertisement
Guest User

navigation theme (2)

a guest
Jul 29th, 2014
3,607
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.93 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7.  
  8. <title>{Title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  11. <meta name="description" content="" />
  12. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  13.  
  14.  
  15.  
  16. <style type="text/css">
  17.  
  18. ::-webkit-scrollbar {background-color: transparent; height:3px; width:7px}
  19. ::-webkit-scrollbar-thumb:vertical {background-color:#000000; height:50px}
  20. ::-webkit-scrollbar-thumb:horizontal {background-color:#FFFFFF; height:8px!important}
  21.  
  22. body {
  23. color: {color:Text};
  24. background-color:#FFFFFF;
  25. }
  26.  
  27. a {
  28. color: #fff;
  29. text-decoration: none;
  30. -moz-transition-duration: 0.5s;
  31. -o-transition-duration: 0.5s;
  32. -webkit-transition-duration: 0.5s;
  33. transition-duration: 0.5s;
  34. }
  35.  
  36. a:hover {
  37. color: #000;
  38. -moz-transition-duration: 0.5s;
  39. -o-transition-duration: 0.5s;
  40. -webkit-transition-duration: 0.5s;
  41. transition-duration: 0.5s;
  42. }
  43.  
  44. .sidebar {
  45. width: 390px;
  46. position: relative;
  47. margin-left: 80px;
  48. top: 40px;
  49. }
  50.  
  51. .title {
  52. width:600px;
  53. font-size:29px;
  54. margin-bottom:-89px;
  55. font-family:arial;
  56. letter-spacing:-3px;
  57. font-weight:bold;
  58. line-height:90%;
  59. text-transform:lowercase;
  60. color:#000;
  61. }
  62.  
  63. .sidebarlinks {
  64. width:300px;
  65. margin-left:180px;
  66. margin-bottom:0px;
  67. margin-top:40px;
  68. letter-spacing:-1px;
  69. padding-bottom:0px;
  70. text-transform:lowercase;
  71. font-family:arial;
  72. font-size:17px;
  73. text-align:left;
  74. font-weight:bold;
  75. -moz-transition-duration: 0.5s;
  76. -o-transition-duration: 0.5s;
  77. -webkit-transition-duration: 0.5s;
  78. transition-duration: 0.5s;
  79. }
  80.  
  81. .sidebarlinks a {
  82. color:#000;
  83. padding:3px;
  84. -moz-transition-duration: 0.5s;
  85. -o-transition-duration: 0.5s;
  86. -webkit-transition-duration: 0.5s;
  87. transition-duration: 0.5s;
  88. }
  89.  
  90. .sidebarlinks a:hover {
  91. color:#aaa;
  92. -moz-transition-duration: 0.5s;
  93. -o-transition-duration: 0.5s;
  94. -webkit-transition-duration: 0.5s;
  95. transition-duration: 0.5s;
  96. }
  97.  
  98. .container {
  99. width:200px;
  100. height:500px;
  101. background-color:transparent;
  102. margin: -415px 430px 200px;
  103. }
  104.  
  105. .containertwo {
  106. width:200px;
  107. height:500px;
  108. margin: -304px 250px 200px;}
  109.  
  110. .containerthree {
  111. width:200px;
  112. height:500px;
  113. margin: -304px 250px 200px;}
  114.  
  115. .table {
  116. width:260px;
  117. height:300px;
  118. position:relative;
  119. margin-left:0px;
  120. background-color:transparent;
  121. display:inline-block;
  122.  
  123. }
  124.  
  125.  
  126. .image {
  127. width:300px;
  128. height:390px;
  129. margin-top:100px;
  130. }
  131.  
  132.  
  133.  
  134. .name {
  135. margin-top:0px;
  136. width:194px;
  137. margin-left:-49px;
  138. padding:8px;
  139. font-size:15px;
  140. font-family:arial;
  141. letter-spacing:-1px;
  142. font-weight:bold;
  143. text-align:center;
  144. text-transform:uppercase;
  145. background-color: #1b1b1b;
  146. color:#fff;
  147. }
  148.  
  149.  
  150.  
  151. .links{width:200px;background:trans;text-align:center;margin-top:2px; margin-bottom:10px;
  152. }
  153.  
  154. .links a{background:#ddd;
  155. display:inline-block;
  156. width:200px;
  157. margin-top:2px;
  158. font-weight:bold;
  159. font-family:arial;
  160. font-size:14px;
  161. color:#000;
  162. text-transform: lowercase;
  163. letter-spacing: -1px;
  164. padding:5px;}
  165.  
  166. .links a:hover
  167. {color:#fff;
  168. background-color:#000;
  169.  
  170.  
  171.  
  172.  
  173. </style>
  174. </head>
  175. <body>
  176. <!--start of sidebar-->
  177.  
  178. <div class="sidebar">
  179. <div class="title">
  180. Navigation
  181. </div>
  182. <img src="https://31.media.tumblr.com/e53fee8703018a9bd0d7bdb787cb47f9/tumblr_inline_n1funjvAGR1qaumrc.png" class="image">
  183.  
  184. </div>
  185. <div class="sidebarlinks">
  186. <a href="/">go back</a>
  187. <a href="http://www.tumblr.com/dashboard">dashboard</a>
  188. <a href="http://sylvesterpatrone.tumblr.com/">credit</a>
  189. </div>
  190. <!--end of sidebar-->
  191.  
  192.  
  193. <!--start of CONTAINER 1 -->
  194.  
  195. <div class="container">
  196. <div class="table">
  197.  
  198. <center>
  199. <div class="name">teen wolf</div>
  200. </center>
  201.  
  202. <div class="links">
  203. <a href="/">scott mccall</a>
  204. <a href="/">isaac lahey</a>
  205. <a href="/">stiles stilinksi</a>
  206. <a href="/">derek hale</a>
  207. <a href="/">lydia martin</a>
  208. </div>
  209.  
  210. <center>
  211. <div class="name">supernatural</div>
  212. </center>
  213.  
  214. <div class="links">
  215. <a href="/">dean</a>
  216. <a href="/">sam</a>
  217. <a href="/">crowley</a>
  218. <a href="/">bobby</a>
  219. <a href="/">castiel</a>
  220. <a href="/">demons</a>
  221. </div>
  222.  
  223.  
  224. <center>
  225. <div class="name">doctor who</div>
  226. </center>
  227.  
  228. <div class="links">
  229. <a href="/">nine</a>
  230. <a href="/">ten</a>
  231. <a href="/">eleven</a>
  232. <a href="/">rose</a>
  233. <a href="/">martha</a>
  234. <a href="/">jack</a>
  235. <a href="/">the ponds</a>
  236. </div>
  237. </div>
  238. <!--end of CONTAINER 1-->
  239.  
  240.  
  241. <!--start of CONTAINER 2 -->
  242.  
  243. <div class="containertwo">
  244. <div class="table">
  245.  
  246. <center>
  247. <div class="name">landscape</div>
  248. </center>
  249.  
  250. <div class="links">
  251. <a href="/">ocean</a>
  252. <a href="/">mountains</a>
  253. <a href="/">clouds</a>
  254. </div>
  255.  
  256. <center>
  257. <div class="name">bands</div>
  258. </center>
  259.  
  260. <div class="links">
  261. <a href="/">twenty one pilots</a>
  262. <a href="/">we the kings</a>
  263. <a href="/">of mice and men</a>
  264. <a href="/">breathe carolina</a>
  265. <a href="/">ghost town</a>
  266. </div>
  267.  
  268.  
  269. <center>
  270. <div class="name">ships</div>
  271. </center>
  272.  
  273. <div class="links">
  274. <a href="/">destiel</a>
  275. <a href="/">johnlock</a>
  276. <a href="/">ten/rose</a>
  277. <a href="/">nine/rose</a>
  278. <a href="/">martha/mickey</a>
  279. </div>
  280.  
  281.  
  282. <center>
  283. <div class="name">sherlock</div>
  284. </center>
  285.  
  286. <div class="links">
  287. <a href="/">john</a>
  288. <a href="/">sherlock</a>
  289. <a href="/">mycroft</a>
  290. </div>
  291. </div>
  292. <!--end of CONTAINER 2-->
  293.  
  294. <!--start of CONTAINER 3-->
  295.  
  296. <div class="containerthree">
  297. <div class="table">
  298.  
  299. <center>
  300. <div class="name">tags for friends</div>
  301. </center>
  302.  
  303. <div class="links">
  304. <a href="/">lizbeth</a>
  305. <a href="/">claire</a>
  306. <a href="/">taylor</a>
  307. </div>
  308.  
  309. <center>
  310. <div class="name">networks</div>
  311. </center>
  312.  
  313. <div class="links">
  314. <a href="/">main blog</a>
  315. <a href="/">myspace</a>
  316. <a href="/">youtube</a>
  317. <a href="/">facebook</a>
  318. <a href="/">twitter</a>
  319. <a href="/">ask.fm</a>
  320.  
  321. </div>
  322.  
  323.  
  324. <center>
  325. <div class="name">favorite people</div>
  326. </center>
  327.  
  328. <div class="links">
  329. <a href="/">charles trippy</a>
  330. <a href="/">tyler hoechlin</a>
  331. <a href="/">matt smith</a>
  332. <a href="/">travis clark</a>
  333. <a href="/">danny duncan</a>
  334. <a href="/">thomas fiss</a>
  335. <a href="/">holland roden</a>
  336. <a href="/">ryan sofie</a>
  337. <a href="/">dunc johnson</a>
  338. </div>
  339.  
  340.  
  341. <!--end of CONTAINER 3-->
  342. </div>
  343.  
  344.  
  345. <!-- TO ADD MORE SECTIONS JUST COPY AND PASTE THE CODE BELOW
  346. *** JUST COPY FROM < center > to < /div> -->
  347.  
  348. <!--
  349.  
  350. <center>
  351. <div class="name">title</div>
  352. </center>
  353. <div class="links">
  354. <a href="/">linkname</a>
  355. <a href="/">linkname</a>
  356. <a href="/">linkname</a>
  357. <a href="/">linkname</a>
  358. <a href="/">linkname</a>
  359. <a href="/">linkname</a>
  360. </div>
  361.  
  362. -->
  363.  
  364.  
  365.  
  366. </body>
  367. </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!