API tools faq
paste
Advertisement
sunsburn

navi theme TC themes

sunsburn
May 28th, 2013
524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.80 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.  
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-- navi theme by sophie - ashirwin. follow the rules and plsplspls dont remove the credit or claim as your own!-->
  7.  
  8. <head>
  9.  
  10. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  11.  
  12. <style type="text/css">
  13.  
  14. div#qTip {
  15. width:200px;
  16. padding: 3px;
  17. display: none;
  18. text-align: center;
  19. position: absolute;
  20. font-size:8px;
  21. line-height:10px;
  22. text-transform:uppercase;
  23. font-family:cambria italic;
  24. z-index: 1000;
  25. background:#000;
  26. border:1px solid #e4e4e4;
  27. color: #fff;
  28. text-transform:normal;
  29. font-style: normal;
  30. letter-spacing: 1px;
  31. }
  32.  
  33. a {
  34. color:#000;
  35. text-decoration:none;
  36. -moz-transition-duration:0.8s;
  37. -webkit-transition-duration:0.8s;
  38. -o-transition-duration:0.8s;
  39. }
  40.  
  41. a:hover {
  42. color:#000;
  43. text-decoration:none;
  44. -moz-transition-duration:0.8s;
  45. -webkit-transition-duration:0.8s;
  46. -o-transition-duration:0.8s;
  47. }
  48.  
  49.  
  50. ::-webkit-scrollbar {background-color:{color:infobg}; height:8px; width :8px}
  51. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  52. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}
  53.  
  54. body {
  55. background-color:{color:bg};
  56. font-family:Calibri;
  57. font-weight:normal;
  58. }
  59.  
  60.  
  61. h1 {
  62. font-weight:normal;
  63. font-size:10px;
  64. text-align:center;
  65. font-style:normal;
  66. line-height:80%;
  67. letter-spacing:1px;
  68. text-transform:uppercase;
  69. color:{color:text};
  70. }
  71.  
  72. h2 {
  73. font-size:15px;
  74. text-align:center;
  75. line-height:100%;
  76. letter-spacing:-0.5px;
  77. color:{color:text};
  78. font-weight:normal;
  79. padding:5px;
  80. padding-bottom:2px;
  81. }
  82.  
  83.  
  84. blockquote {
  85. border-left:2px solid {color:text};
  86. padding-left:5px;
  87. margin:5px;
  88. }
  89.  
  90. #theme {
  91. background-color:{color:bg};
  92. width:700px;
  93. margin: 0 auto -12px auto;
  94. text-align: center;
  95. }
  96.  
  97. #container {
  98. width:600px;
  99. height:457px;
  100. margin-top:100px;
  101. margin-left:50px;
  102. border:1px solid #eee;
  103. }
  104.  
  105. #title {
  106. background:#000;
  107. color:#FFF;
  108. width:597px;
  109. height:50px;
  110. margin-top:0px;
  111. margin-left:-1px;
  112. font-family:'cambria italic';
  113. text-transform:uppercase;
  114. font-weight:italic;
  115. font-size:30px;
  116. text-align:center;
  117. padding:2px;
  118. padding-top:10px;
  119. border-bottom:4px double #fff;
  120. }
  121.  
  122. #image {
  123. width:100px;
  124. height:100px;
  125. margin-top:140px;
  126. margin-left:250px;
  127. border-radius:160px;
  128. }
  129.  
  130. #image img {
  131. width:100px;
  132. height:100px;
  133. border-radius:160px;
  134. -webkit-transition-duration: 0.8s;
  135. -moz-transition-duration: 0.8s;
  136. -o-transition-duration: 0.8s;
  137. transition-duration: 0.8s;
  138. }
  139.  
  140. #image img:hover {
  141. -webkit-transition-duration: 0.8s;
  142. -moz-transition-duration: 0.8s;
  143. -o-transition-duration: 0.8s;
  144. transition-duration: 0.8s;
  145. -webkit-transition-property: -webkit-transform;
  146. -moz-transition-property: -moz-transform;
  147. -o-transition-property: -o-transform;
  148. transition-property: transform;
  149. overflow:hidden;
  150. -webkit-transform: rotate(360deg);
  151. -moz-transform: rotate(360deg) ;
  152. -o-transform: rotate(360deg);
  153. -ms-transform: rotate(360deg);
  154. transform: rotate(360deg);
  155. }
  156.  
  157. #section1 {
  158. width:300px;
  159. height:195px;
  160. color:#aaa;
  161. background:#fff;
  162. margin-top:-241px;
  163. margin-left:-1px;
  164. border:1px solid #eee;
  165. }
  166.  
  167. #section2 {
  168. width:300px;
  169. height:195px;
  170. color:#aaa;
  171. background:#fff;
  172. margin-top:-197px;
  173. margin-left:299px;
  174. border:1px solid #eee;
  175. }
  176.  
  177. #section3 {
  178. width:300px;
  179. height:195px;
  180. color:#aaa;
  181. background:#fff;
  182. margin-top:-1px;
  183. margin-left:-1px;
  184. border:1px solid #eee;
  185. }
  186.  
  187. #section4 {
  188. width:299px;
  189. height:198px;
  190. color:#aaa;
  191. background:#fff;
  192. margin-top:-200px;
  193. margin-left:300px;
  194. border:1px solid #eee;
  195. }
  196.  
  197. #about {
  198. width:290px;
  199. height:180px;
  200. color:#000;
  201. background:#fff;
  202. margin-top:15px;
  203. margin-left:5px;
  204. font-family:'cambria italic';
  205. font-size:12px;
  206. text-align:left;
  207. padding:5px;
  208. }
  209.  
  210. .links{
  211. width:250px;
  212. height:200px;
  213. margin-top:50px;
  214. margin-left:28px;
  215. font-family:'cambria italic';
  216. letter-spacing:1px;
  217. font-size:9px;
  218. padding:5px;
  219. opacity:1;
  220. position: fixed;
  221. }
  222.  
  223. .links a {
  224. background:#000;
  225. color:#fff;
  226. width:56px;
  227. height:10px;
  228. margin-bottom:10px;
  229. margin-left:10px;
  230. font-size:12px;
  231. float:left;
  232. display:block;
  233. line-height:10px;
  234. padding:5px;
  235. text-align:center;
  236. }
  237.  
  238. .links a:hover {
  239. color:#000;
  240. background:#000000;
  241. }
  242.  
  243. #quote {
  244. width:230px;
  245. height:120px;
  246. color:#000;
  247. background:#fff;
  248. margin-top:40px;
  249. margin-left:30px;
  250. font-weight:normal;
  251. font-family:'cambria italic';
  252. font-size:40px;
  253. text-shadow:2px 0 0 rgba(244,0,0,0.2), -2px 0 0 rgba(0,244,0,0.2);
  254. padding:5px;
  255. }
  256.  
  257. {CustomCSS}
  258.  
  259. </style></head>
  260.  
  261. <body>
  262. <div id="theme">
  263. <div id="container">
  264. <div id="title">sophies navigation</div>
  265. <div id="image"><img src="http://media.tumblr.com/baecd4d9f643d464e3819fc69a521216/tumblr_inline_mn6c545b1J1qz4rgp.png"></div>
  266.  
  267. <div id="section1">
  268. <div style="width:100px; height:5px; color:#000; font-family:'cambria italic'; font-size:20px; margin-top:5px; margin-left:95px; text-decoration:underline; ">About Me</div>
  269. <div id="about">
  270. <ul>
  271. <li><b>Name:</b> Sophie</li>
  272. <li><b>Age:</b> fifteen</li>
  273. <li><b>Location:</b> England</li>
  274. </ul><p>
  275. I like to spend all day playing with html and I prefer sleeping to talking to people. My favourite tv shows are Skins, My Mad Fat Diary, How I Met Your Mother, Some Girls, Supernatural and The Vampire Diaries.
  276. </p>
  277. </div>
  278. </div>
  279.  
  280. <div id="section2">
  281. <div style="width:100px; height:5px; color:#000; font-family:'cambria italic'; font-size:20px; margin-top:5px; margin-left:95px; text-decoration:underline; ">Links</div>
  282. <div class="links">
  283. <a href="/tagged/music">music</a>
  284. <a href="/tagged/playlist">playlists</a>
  285. <a href="/urls">my urls</a>
  286. <a href="/blogroll">blogroll</a>
  287. <a href="/tagged/ff">loves</a>
  288. <a href="mythemes">themes</a>
  289. </div>
  290. </div>
  291.  
  292. <div id="section3">
  293. <div style="width:100px; height:5px; color:#000; font-family:'cambria italic'; font-size:20px; margin-top:5px; margin-left:95px; text-decoration:underline; padding:2px;">Networks</div>
  294. <div class="links">
  295. <a href="http://janoskianswhoresquad.tumblr.com" title="I love you all so much. We've been a group for a while now and have been through so much together. You're all perfect and so funny and unique, you make tumblr such a great place and I cant imagine being here without you. You always put up with me when im being annoying or in a bad mood and I cant thank you enough<33">jws</a>
  296. <a href="http://theexclusives.tumblr.com" title="We havent been a group for long but ily all. You're all perfect and have great blogs. Thank you all for being so nice and welcoming!">exclusives</a>
  297. <a href="http://thehypocritess.tumblr.com" title="You're all so talkative! You guys are all really funny and nice. I love being in this group, and you all make my day.">hypocrites</a>
  298. <a href="http://hoebins.tumblr.com" title="You guys are one of my favourite people on tumblr. You always make me laugh and you are some of my best friends on here. It makes me so happy coming home to loads of notifications from you guys<3>">hoebins</a>
  299. <a href="http://theinfernals.tumblr.com" title="Well, the infernals is basically a mixed group of jws and the hoebins for anybody that didn't know. Making this group was one of the best decisions we ever made. I remember we were worried about not getting on which eachother! I love you guys so much.">infernals</a>
  300. <a href="http://the-jokers.tumblr.com" title="You're all funny and really nice! I only just joined the group but I cant wait to get to know you all better">jokers</a>
  301. </div>
  302. </div>
  303.  
  304. <div id="section4">
  305. <div id="quote"><a href="http://ashirwin.tumblr.com" title="click here to go back to the index">DEPTH OVER DISTANCE</a></div>
  306. </div>
  307.  
  308.  
  309.  
  310.  
  311. <div style="position:fixed; bottom:-5px; right:5px;"><center>
  312. <a href="http://ashirwin.tumblr.com"><img src="http://media.tumblr.com/2b25e74d8fd5f598af79f2177c82083a/tumblr_inline_mngn98nIOF1qz4rgp.png" width="50px" height="50px"></a>
  313.  
  314.  
  315. </div>
  316. </div>
  317. </body>
  318. </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!