Advertisement
bangyixing

Page #08 - Navigation Page

Sep 5th, 2013
427
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.75 KB | None | 0 0
  1. <html>
  2. <head>
  3.  
  4. <!--
  5. THEME MADE BY ANDREA @ MILIKBOY
  6. PLEASE DON'T REMOVE THE CREDITS. THANK YOU.
  7. -->
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  11. <head><title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14.  
  15. <style type="text/css">
  16.  
  17. ::-webkit-scrollbar-thumb:vertical {
  18. background: #f892a3;
  19. height: 80px;
  20. }
  21.  
  22. ::-webkit-scrollbar {
  23. height: 10px;
  24. width: 10px;
  25. background: #fbfbfb;
  26. }
  27.  
  28. body {
  29. background-image: url("{image:background}");
  30. background-attachment: fixed;
  31. font-family:Arial;
  32. font-size:9px;
  33. text-align:justify;
  34. letter-spacing:0px;
  35. line-height:140%;
  36. background:#ffffff;
  37. color:#000000;
  38. }
  39.  
  40. a {
  41. text-decoration:none;
  42. -moz-outline-style:none;
  43. -webkit-transition: all 0.5s ease;
  44. -moz-transition: all 0.5s ease;
  45. -o-transition: all 0.5s ease;
  46. }
  47.  
  48. a:hover {
  49. text-decoration:none;
  50. }
  51.  
  52. small{
  53. font-size:9px;
  54. line-height:140%;
  55. }
  56.  
  57. big {
  58. font-size:12px;
  59. line-height:140%;
  60. }
  61.  
  62. b, strong{
  63. color:#000000;
  64. }
  65. i, em {
  66. color:#000000;
  67. }
  68. p{
  69. margin-top:5px;
  70. margin-bottom:5px;
  71. }
  72.  
  73. #icon img {
  74. width:80px;
  75. height:75px;
  76. position:absolute;
  77. margin-top:-3px;
  78. margin-left:330px;
  79. border: 10px solid #f892a3;
  80. }
  81.  
  82. #links {
  83. font-size:9px;
  84. position:absolute;
  85. margin-left:330px;
  86. margin-top:97px;
  87. font-family:Trebuchet MS;
  88. font-style:none;
  89. text-align:center;
  90. padding:5px;
  91. width:490px;
  92. opacity:1;
  93. letter-spacing:-1px;
  94. text-transform:uppercase;
  95. background:#f892a3;
  96. -moz-transition-duration:0.5s;
  97. -webkit-transition-duration:0.5s;
  98. -o-transition-duration:0.5s;
  99. }
  100.  
  101. #links a {
  102. display:inline-block;
  103. width:40px;
  104. padding:5px;
  105. margin-right:1px;
  106. color:#000000;
  107. background:#f892a3;
  108. }
  109.  
  110. #links a:hover {
  111. color:#ffffff;
  112. background:#000000;
  113. -moz-transition-duration:0.7s;
  114. -webkit-transition-duration:0.7s;
  115. -o-transition-duration:0.7s;
  116. }
  117.  
  118. #description {
  119. font-size:9px;
  120. width:380px;
  121. height:75px;
  122. font-family:Arial;
  123. text-transform:none;
  124. position:absolute;
  125. text-align:justify;
  126. font-style:none;
  127. line-height:100%;
  128. margin-left:430px;
  129. margin-top:-3px;
  130. letter-spacing:1px;
  131. padding:10px;
  132. opacity:1;
  133. color:#ffffff;
  134. background:#f892a3;
  135. -moz-transition-duration:1s;
  136. -webkit-transition-duration:1s;
  137. -o-transition-duration:1s;
  138. }
  139.  
  140. #description a {
  141. color:#ffffff;
  142. }
  143.  
  144. #description a:hover {
  145. text-align:center;
  146. color:#fafafa;
  147. }
  148.  
  149. #container {
  150. position:absolute;
  151. height:auto;
  152. margin-top:139px;
  153. margin-left:315px;
  154. width:703px;
  155. }
  156.  
  157. #category {
  158. color:#f892a3;
  159. background:#fafafa;
  160. width:104px;
  161. font-size:10px;
  162. text-transform:uppercase;
  163. padding:5px;
  164. letter-spacing:0px;
  165. margin-bottom:5px;
  166. text-align:left;
  167. }
  168.  
  169. #tags a {
  170. display:block;
  171. text-transform:uppercase;
  172. width:70px;
  173. font-size:7px;
  174. letter-spacing:0px;
  175. padding:2px;
  176. text-align:left;
  177. line-height:19px;
  178. margin-top:2px;
  179. margin-bottom:2px;
  180. color:#111111;
  181. -webkit-transition: all 0.5s linear;
  182. -moz-transition: all 0.5s linear;
  183. -o-transition: all 0.5s linear;
  184. }
  185.  
  186. #tags a:hover {
  187. text-align:right;
  188. border-left: 15px solid #f892a3;
  189. font-style:italic;
  190. }
  191.  
  192. #transparent {
  193. font-family:Calibri;
  194. font-size:9px;
  195. letter-spacing:1px;
  196. float:right;
  197. position:fixed;
  198. bottom:-2px;
  199. right:55px;
  200. }
  201.  
  202. #credit {
  203. font-family:Calibri;
  204. font-size:9px;
  205. letter-spacing:1px;
  206. float:right;
  207. position:fixed;
  208. bottom:15px;
  209. right:10px;
  210. }
  211.  
  212. #credit a {
  213. color:#ffffff;
  214. padding:5px;
  215. text-transform:uppercase;
  216. background:#000000;
  217. }
  218.  
  219. #credit a:hover {
  220. color:#000000;
  221. font-style:none;
  222. background:#ffffff;
  223. }
  224.  
  225. {CustomCSS}</style></head><body>
  226.  
  227. <div id="border"></div>
  228.  
  229. <div id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare magna et libero dapibus sagittis. Duis eget felis id turpis tempor sagittis. Donec a nulla quam. In hac habitasse platea dictumst. Quisque pulvinar justo quis nisi fringilla eget dapibus dui pharetra. Ut ornare leo et odio cursus euismod. </div>
  230.  
  231. <div id="icon"><img src="{Favicon}"></div>
  232.  
  233. <div id="links">
  234. <a href="/">home</a>
  235. <a href="/ask">ask</a>
  236. <a href="/archive">archive</a>
  237. <a href="/">link</a>
  238. <a href="/">link</a>
  239. <a href="/">link</a>
  240. </div>
  241.  
  242. <div id="container">
  243. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  244. <!-- Change the group title here. --><div id="category">» group title</a></div>
  245. <div id="tags">
  246. <!-- Your links. -->
  247. <a href="/">tag one</a>
  248. <a href="/">tag two</a>
  249. <a href="/">tag three</a>
  250. <a href="/">tag four</a>
  251. <a href="/">tag five</a>
  252. </div></div>
  253.  
  254. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  255. <div id="category">» group title</a></div>
  256. <div id="tags">
  257. <a href="/">tag one</a>
  258. <a href="/">tag two</a>
  259. <a href="/">tag three</a>
  260. <a href="/">tag four</a>
  261. <a href="/">tag five</a>
  262. </div></div>
  263.  
  264. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  265. <div id="category">» group title</a></div>
  266. <div id="tags">
  267. <a href="/">tag one</a>
  268. <a href="/">tag two</a>
  269. <a href="/">tag three</a>
  270. <a href="/">tag four</a>
  271. <a href="/">tag five</a>
  272. </div></div>
  273.  
  274. <br>
  275.  
  276. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  277. <div id="category">» group title</a></div>
  278. <div id="tags">
  279. <a href="/">tag one</a>
  280. <a href="/">tag two</a>
  281. <a href="/">tag three</a>
  282. <a href="/">tag four</a>
  283. <a href="/">tag five</a>
  284. </div></div>
  285.  
  286.  
  287. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  288. <div id="category">» group title</a></div>
  289. <div id="tags">
  290. <a href="/">tag one</a>
  291. <a href="/">tag two</a>
  292. <a href="/">tag three</a>
  293. <a href="/">tag four</a>
  294. <a href="/">tag five</a>
  295. </div></div>
  296.  
  297. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  298. <div id="category">» group title</a></div>
  299. <div id="tags">
  300. <a href="/">tag one</a>
  301. <a href="/">tag two</a>
  302. <a href="/">tag three</a>
  303. <a href="/">tag four</a>
  304. <a href="/">tag five</a>
  305. </div></div>
  306.  
  307. <br>
  308.  
  309. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  310. <div id="category">» group title</a></div>
  311. <div id="tags">
  312. <a href="/">tag one</a>
  313. <a href="/">tag two</a>
  314. <a href="/">tag three</a>
  315. <a href="/">tag four</a>
  316. <a href="/">tag five</a>
  317. </div></div>
  318.  
  319. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  320. <div id="category">» group title</a></div>
  321. <div id="tags">
  322. <a href="/">tag one</a>
  323. <a href="/">tag two</a>
  324. <a href="/">tag three</a>
  325. <a href="/">tag four</a>
  326. <a href="/">tag five</a>
  327. </div></div>
  328.  
  329. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  330. <div id="category">» group title</a></div>
  331. <div id="tags">
  332. <a href="/">tag one</a>
  333. <a href="/">tag two</a>
  334. <a href="/">tag three</a>
  335. <a href="/">tag four</a>
  336. <a href="/">tag five</a>
  337. </div></div>
  338.  
  339. <br>
  340. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  341. <div id="category">» group title</a></div>
  342. <div id="tags">
  343. <a href="/">tag one</a>
  344. <a href="/">tag two</a>
  345. <a href="/">tag three</a>
  346. <a href="/">tag four</a>
  347. <a href="/">tag five</a>
  348. </div></div>
  349.  
  350. <div style="width:160px; padding:10px; text-align:center; display:inline-block; margin-left:5px; margin-right:5px; background:#ffffff;">
  351. <div id="category">» group title</a></div>
  352. <div id="tags">
  353. <a href="/">tag one</a>
  354. <a href="/">tag two</a>
  355. <a href="/">tag three</a>
  356. <a href="/">tag four</a>
  357. <a href="/">tag five</a>
  358. </div></div>
  359.  
  360. </div>
  361.  
  362. <div id="transparent"><img src="http://static.tumblr.com/a381823c7692aed65741c6b607faf916/czllhpn/tldmsjxak/tumblr_static_tumblr_inline_mpbnz865af1qz4rgp.jpg"></div>
  363.  
  364. <div id="credit"><a href="http://mlikboy.tumblr.com/">mlikboy</a></div>
  365.  
  366. </body>
  367. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement