API tools faq
paste
Advertisement
tomkirk

Navigation #1

tomkirk
Jul 1st, 2014
5,910
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. [ T H E M E B Y ]
  3.  
  4. ○ ● ○
  5.  
  6. [ T O M K I R K ]
  7.  
  8. Navigation Page #1
  9.  
  10.  
  11. -->
  12. <html>
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml">
  15. <head>
  16.  
  17. <title>
  18. {block:PostSummary}
  19. {PostSummary} - {/block:PostSummary}
  20.  
  21. Page Title Here
  22.  
  23. </title>
  24. </style>
  25.  
  26. <style type="text/css">
  27.  
  28. iframe#tumblr_controls {-webkit-filter:invert(100%);right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  29. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: .9;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  30.  
  31. ::-webkit-scrollbar {width:3px; height:3px; background:#ffffff}
  32. ::-webkit-scrollbar-thumb { background-color: #e8e8e8;border:2px solid #ffffff;}
  33.  
  34. body{
  35. background-color:#ffffff; /*background hex color code*/
  36. background-image:url(); /*insert image url between parentheses*/
  37. background-attachment:fixed;
  38. background-repeat:repeat;
  39. background-position:center;
  40. /*
  41. background-size:100% 100%; -remove dashes, asterisks, and this text to make background picture fit entire screeen-
  42. */
  43. font-size:10px;
  44. line-height:14px; /*make this number slightly bigger than font-size*/
  45. font-family:consolas;
  46. color:#666666; /*font color*/
  47. }
  48.  
  49. a:link, a:active, a:visited{
  50. color:#FFC2D6; /*link color*/
  51. text-decoration:none; /*can put underline for underlined links*/
  52. }
  53.  
  54. a:hover{
  55. color:#C2FFEB; /*link hover color*/
  56. text-decoration:none;
  57. }
  58.  
  59. #cage{
  60. width:500px;
  61. margin:auto;
  62. }
  63.  
  64. #left{
  65. position:fixed;
  66. margin-left:50px;
  67. margin-top:200px;
  68. width:95px;
  69. }
  70.  
  71. #box1{
  72. margin-bottom:40px;
  73. padding:8px;
  74. width:95px;
  75. background:#ffffff; /*box color*/
  76. border:1px solid #ebebeb; /*change color code for different colored borders*/
  77. box-shadow:rgba(0,0,0,0.07)-7px 7px;
  78. z-index:1;
  79. /*delete the following for no rounded edges*/
  80. -webkit-border-bottom-right-radius: 4px;
  81. -webkit-border-bottom-left-radius: 4px;
  82. -moz-border-radius-bottomright: 4px;
  83. -moz-border-radius-bottomleft: 4px;
  84. border-bottom-right-radius: 4px;
  85. border-bottom-left-radius: 4px;
  86. }
  87.  
  88. #bar1{
  89. position:absolute;
  90. margin-top:-27px;
  91. margin-left:-9px;
  92. padding:3px;
  93. padding-right:5px;
  94. text-align:right;
  95. width:103px;
  96. height:11px;
  97. color:#000000;
  98. background:#f7f7f7; /*bar background*/
  99. border:1px solid #ebebeb; /*matching border color with #box border looks best*/
  100. /*delete the following for no rounded edges*/
  101. -webkit-border-top-left-radius: 4px;
  102. -webkit-border-top-right-radius: 4px;
  103. -moz-border-radius-topleft: 4px;
  104. -moz-border-radius-topright: 4px;
  105. border-top-left-radius: 4px;
  106. border-top-right-radius: 4px;
  107. }
  108.  
  109.  
  110. #right{
  111. position:fixed;
  112. margin-left:200px;
  113. margin-top:200px;
  114. }
  115.  
  116. #box2{
  117. margin-bottom:40px;
  118. padding:8px;
  119. width:195px;
  120. background:#ffffff; /*box color*/
  121. border:1px solid #ebebeb; /*change color code for different colored borders*/
  122. box-shadow:rgba(0,0,0,0.07)-7px 7px;
  123. z-index:1;
  124. /*delete the following for no rounded edges*/
  125. -webkit-border-bottom-right-radius: 4px;
  126. -webkit-border-bottom-left-radius: 4px;
  127. -moz-border-radius-bottomright: 4px;
  128. -moz-border-radius-bottomleft: 4px;
  129. border-bottom-right-radius: 4px;
  130. border-bottom-left-radius: 4px;
  131. }
  132.  
  133. #bar2{
  134. position:absolute;
  135. margin-top:-27px;
  136. margin-left:-9px;
  137. padding:3px;
  138. padding-right:5px;
  139. text-align:right;
  140. width:203px;
  141. height:11px;
  142. color:#000000;
  143. background:#f7f7f7; /*bar background*/
  144. border:1px solid #ebebeb; /*matching border color with #box border looks best*/
  145. /*delete the following for no rounded edges*/
  146. -webkit-border-top-left-radius: 4px;
  147. -webkit-border-top-right-radius: 4px;
  148. -moz-border-radius-topleft: 4px;
  149. -moz-border-radius-topright: 4px;
  150. border-top-left-radius: 4px;
  151. border-top-right-radius: 4px;
  152. }
  153.  
  154. .bartitle{
  155. float:left;
  156. font-weight:bold;
  157. color:#000000;
  158. }
  159.  
  160. .bartitle:first-letter{
  161. text-decoration:underline;
  162. }
  163.  
  164. blockquote{
  165. padding-left:5px;
  166. margin-left:15px;
  167. margin-right:0px;
  168. margin-top:5px;
  169. margin-bottom:0px;
  170. border-left:2px solid #e8e8e8;
  171. }
  172.  
  173. .p {padding-top:5px;}
  174. .ol, ul {margin-left:10px;padding:5px;}
  175. .ul {list-style-type:square;}
  176.  
  177. #navbar{
  178. position:absolute;
  179. margin-top:-24px;
  180. margin-left:-8px;
  181. padding:3px;
  182. padding-right:5px;
  183. text-align:right;
  184. width:106px;
  185. height:9px;
  186. color:#000000;
  187. background:#f7f7f7; /*bar background*/
  188. border:1px solid #ebebeb; /*matching border color with #box border looks best*/
  189. /*delete the following for no rounded edges*/
  190. -webkit-border-top-left-radius: 4px;
  191. -webkit-border-top-right-radius: 4px;
  192. -moz-border-radius-topleft: 4px;
  193. -moz-border-radius-topright: 4px;
  194. border-top-left-radius: 4px;
  195. border-top-right-radius: 4px;
  196. }
  197.  
  198. #nav{
  199. position:fixed;
  200. width:100px;
  201. margin-top:200px;
  202. margin-left:440px;
  203. padding-top:7px;
  204. padding-left:7px;
  205. padding-right:7px;
  206. padding-bottom:4px;
  207. font-family:consolas;
  208. font-size:10px;
  209. line-height:12px;
  210. background-color:#ffffff; /*background hex color code*/
  211. border:1px solid #ebebeb; /*change color code for different colored borders*/
  212. z-index:999;
  213. box-shadow:rgba(0,0,0,0.07)-7px 7px;
  214. /*delete the following for no rounded edges*/
  215. -webkit-border-bottom-right-radius: 4px;
  216. -webkit-border-bottom-left-radius: 4px;
  217. -moz-border-radius-bottomright: 4px;
  218. -moz-border-radius-bottomleft: 4px;
  219. border-bottom-right-radius: 4px;
  220. border-bottom-left-radius: 4px;
  221. }
  222.  
  223. #navlinks a{
  224. margin-bottom:4px;
  225. padding:1px;
  226. text-transform:uppercase;
  227. letter-spacing:1px;
  228. text-align:center;
  229. color:#000000; /*nav links text color*/
  230. background:#f7f7f7; /*nav links background color*/
  231. border:1px solid #f4f4f4;
  232. padding:1px;
  233. display:inline-block;
  234. width:90px;
  235. -webkit-transition: all 0.1s ease;
  236. -moz-transition: all 0.1s ease;
  237. transition: all 0.1s ease;
  238. /*delete the following for no rounded edges*/
  239. -webkit-border-radius: 4px;
  240. -moz-border-radius: 4px;
  241. border-radius: 4px;
  242. }
  243.  
  244. #navlinks a:last-child{
  245. margin-bottom:0px;
  246. }
  247.  
  248. #navlinks a:hover{
  249. color:#000000; /*nav links text color when hovered*/
  250. background:#ffffff; /*color of link when hovered*/
  251. }
  252.  
  253.  
  254. {CustomCSS}
  255. </style>
  256.  
  257. <link rel="shortcut icon" href="{Favicon}">
  258. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  259.  
  260. </head>
  261.  
  262. <body>
  263. <div id="cage">
  264.  
  265.  
  266.  
  267. <div id="left">
  268. <!-- start of links box 1 -->
  269. <div id="box1">
  270. <div id="bar1">
  271. <span class="bartitle"> Basics... </span>
  272. <img src="http://media.tumblr.com/691ba4289e39661cfb6559164f39f3c0/tumblr_inline_msy5o89F1X1qz4rgp.png">
  273. <img src="http://media.tumblr.com/36615af987980409c80cc67cae27013d/tumblr_inline_msy5o5RiHU1qz4rgp.png">
  274. <img src="http://media.tumblr.com/7cd16259d770a6d5f4a6350dc962a48e/tumblr_inline_msy5nqetZl1qz4rgp.png">
  275. </div>
  276.  
  277. <div id="navlinks">
  278. <a href="/">Back Home</a>
  279. <a href="/ask">Message</a>
  280. <a href="/submit">Submit</a>
  281. <a href="/archive">Archives</a>
  282. </div>
  283. </div>
  284. <!-- end of links box 1 -->
  285.  
  286. <!-- start of links box 2 -->
  287. <div id="box1">
  288. <div id="bar1">
  289. <span class="bartitle"> Etc... </span>
  290. <img src="http://media.tumblr.com/691ba4289e39661cfb6559164f39f3c0/tumblr_inline_msy5o89F1X1qz4rgp.png">
  291. <img src="http://media.tumblr.com/36615af987980409c80cc67cae27013d/tumblr_inline_msy5o5RiHU1qz4rgp.png">
  292. <img src="http://media.tumblr.com/7cd16259d770a6d5f4a6350dc962a48e/tumblr_inline_msy5nqetZl1qz4rgp.png">
  293. </div>
  294.  
  295.  
  296. You can put a music player here or a little description thing I guess.
  297.  
  298. <div id="navlinks">
  299.  
  300. </div>
  301.  
  302. </div>
  303. <!-- end of links box 2 -->
  304.  
  305. </div>
  306.  
  307.  
  308. <div id="right">
  309. <!-- start of links box 3 -->
  310. <div id="box2">
  311. <div id="bar2">
  312. <span class="bartitle"> Tags... </span>
  313. <img src="http://media.tumblr.com/691ba4289e39661cfb6559164f39f3c0/tumblr_inline_msy5o89F1X1qz4rgp.png">
  314. <img src="http://media.tumblr.com/36615af987980409c80cc67cae27013d/tumblr_inline_msy5o5RiHU1qz4rgp.png">
  315. <img src="http://media.tumblr.com/7cd16259d770a6d5f4a6350dc962a48e/tumblr_inline_msy5nqetZl1qz4rgp.png">
  316. </div>
  317.  
  318. <div id="navlinks">
  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. <a href="/">#tag</a>
  325. <a href="/">#tag</a>
  326. <a href="/">#tag</a>
  327. <a href="/">#tag</a>
  328. <a href="/">#tag</a>
  329. </div>
  330. </div>
  331. <!-- end of links box 3 -->
  332.  
  333. <!-- start of links box 4 -->
  334. <div id="box2">
  335. <div id="bar2">
  336. <span class="bartitle"> More Tags... </span>
  337. <img src="http://media.tumblr.com/691ba4289e39661cfb6559164f39f3c0/tumblr_inline_msy5o89F1X1qz4rgp.png">
  338. <img src="http://media.tumblr.com/36615af987980409c80cc67cae27013d/tumblr_inline_msy5o5RiHU1qz4rgp.png">
  339. <img src="http://media.tumblr.com/7cd16259d770a6d5f4a6350dc962a48e/tumblr_inline_msy5nqetZl1qz4rgp.png">
  340. </div>
  341.  
  342. <div id="navlinks">
  343. <a href="/">#tag</a>
  344. <a href="/">#tag</a>
  345. <a href="/">#tag</a>
  346. <a href="/">#tag</a>
  347. <a href="/">#tag</a>
  348. <a href="/">#tag</a>
  349. <a href="/">#tag</a>
  350. <a href="/">#tag</a>
  351. </div>
  352. </div>
  353. <!-- end of links box 4 -->
  354.  
  355.  
  356. </div>
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368. <div style="position:fixed;right:0;bottom:0;padding:0 20px 15px 0;">
  369. <a title="theme by tomkirk"href="http://tomkirk.tumblr.com/">▲</a>
  370. </div>
  371. </body>
  372. </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!