Advertisement
syncode

Condense

Jun 10th, 2014
1,815
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.55 KB | None | 0 0
  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. <!--
  4.  
  5. ┌─┐┬┬─┐┬ ┬┌┬┐┬┌┬┐┌─┐
  6. ├─┤│├┬┘│ │ │││ │ ├┤
  7. ┴ ┴┴┴└─└─┘─┴┘┴ ┴ └─┘
  8.  
  9. Condense by airudite.tumblr.com.
  10.  
  11.  
  12. By using this page, you agree to the terms of use. (This includes no redistributing, removing credit, or claiming this code as your own. If you violate any of the terms, you will be pushed and strongly disliked throughout many parallel universes. Plus that's just plain disrespectful)
  13. -->
  14. <head>
  15.  
  16. <title>{Title}</title>
  17.  
  18.  
  19. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  20.  
  21. <link rel="shortcut icon" href="{Favicon}" />
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  23. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  24. <link href='http://fonts.googleapis.com/css?family=Cousine' rel='stylesheet' type='text/css'>
  25.  
  26.  
  27. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  28. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29. <script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:20,tip_fade_speed:400,attribute:"title"});});})(jQuery);</script>
  30.  
  31. <script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>
  32. <script>
  33. $(document).ready(function(){
  34. $("a#description").click(function () {
  35. $("p#description").slideToggle("1000");
  36. });
  37. });
  38. </script>
  39.  
  40. <style type="text/css">
  41. #s-m-t-tooltip {
  42. display: block;
  43. max-width: 100px;
  44. margin: 15px;
  45. word-wrap: break-word;
  46. padding:2px 7px 2px 7px;
  47. border-radius:3px;
  48. z-index: 9999;
  49. background: #dccbe7;
  50. text-transform: uppercase;
  51. font-size: 10px;
  52. color: #fff;
  53. border:1px solid #fff;
  54. text-align: center;
  55. letter-spacing:1px;
  56. }
  57.  
  58. a {
  59. text-decoration:none;
  60. color:#dccbe7;
  61. -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;
  62. }
  63. body {
  64. background:#fff;
  65. font-family: 'Open Sans Condensed', sans-serif;
  66. font-size:12px;
  67. color:#fff;
  68. }
  69.  
  70. body, a, a:hover {
  71. cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur),
  72. progress;}
  73.  
  74.  
  75. ::selection {
  76. background:#fff;
  77. color: #dccbe7}
  78.  
  79. ::-webkit-scrollbar-thumb{
  80. background-color: #ddd;
  81. border: 3px solid #fdfdfd;
  82. height:auto;
  83. -moz-border-radius: 10px;
  84. border-radius: 10px;
  85. }
  86.  
  87. ::-webkit-scrollbar {
  88. height:auto;
  89. width:9px;
  90. background-color: #eee;
  91. border: 4px solid #fdfdfd;
  92. }
  93.  
  94.  
  95. #topbar {
  96. padding:5px;
  97. text-align:left;
  98. width:100%;
  99. top:0px;
  100. left:0px;
  101. font-family:calibri;
  102. font-size:8px;
  103. letter-spacing:1px;
  104. text-transform:uppercase;
  105. text-align:left;
  106. margin-top:-30px;
  107. border-top:1px solid #eee;
  108. }
  109.  
  110.  
  111. #topbar a:nth-of-type(odd) {
  112. background:#fff;
  113. color:#ccc;
  114. padding:5px 10px 4px 10px;
  115. display:inline-block;
  116. }
  117.  
  118. #topbar a:nth-of-type(even) {
  119. background:#fff;
  120. color:#ccc;
  121. padding:5px 10px 4px 10px;
  122. display:inline-block;
  123. }
  124.  
  125. #topbar a:hover:nth-of-type(even) {
  126. color:#000;
  127. box-shadow:50px 0px 0px 0px #eee inset;
  128. -webkit-transition: all .7s linear;
  129. -moz-transition: all .3s linear;
  130. -o-transition: all .7s linear;
  131. -ms-transition: all .7s linear;
  132. transition: all .7s linear;
  133. }
  134.  
  135. #topbar a:hover:nth-of-type(odd) {
  136. color:#000;
  137. box-shadow:-50px 0px 0px 0px #eee inset;
  138. -webkit-transition: all .7s linear;
  139. -moz-transition: all .3s linear;
  140. -o-transition: all .7s linear;
  141. -ms-transition: all .7s linear;
  142. transition: all .7s linear;
  143. }
  144.  
  145. #container {
  146. margin-top:20%;
  147. margin-left:30%;
  148. width:450px;
  149. padding:30px;
  150. color:#aaa;
  151. border-left:1px solid #eee;
  152. background:#fff;
  153. overflow:auto;
  154. max-height:350px;
  155. -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out; -webkit-transition: all .7s ease-out; transition: all .7s ease-out;
  156. }
  157.  
  158. #container a {
  159. padding:3px;
  160. color:#ccc;
  161. }
  162.  
  163. #container img {
  164. width:150px;
  165. border:1px solid #eee;
  166. padding:10px;
  167. margin:10px;
  168. margin-top:-20px;
  169. }
  170.  
  171. #sidebar {
  172. font-family:cousine;
  173. position:absolute;
  174. margin-left:-150px;
  175. font-size:9px;
  176. width:100px;
  177. text-align:right;
  178. }
  179.  
  180. #sidebar a {
  181. display:block;
  182. }
  183. #sidebar a:hover {
  184. margin-right:5px;
  185. }
  186. #about a {
  187. color: #dccbe7;
  188. }
  189.  
  190. #nav a{
  191. display:inline-block;
  192. width:125px;
  193. padding:5px;
  194. background:#f8f6f6;
  195. margin:4px;
  196. color:#ccc;
  197. text-align:center;
  198. }
  199.  
  200. #nav a:hover:nth-of-type(odd) {
  201. color:#000;
  202. box-shadow:-150px 0px 10px 0px #eef8fb inset;
  203. -webkit-transition: all .7s linear;
  204. -moz-transition: all .3s linear;
  205. -o-transition: all .7s linear;
  206. -ms-transition: all .7s linear;
  207. transition: all .7s linear;
  208. }
  209.  
  210. #nav a:hover:nth-of-type(even) {
  211. color:#000;
  212. box-shadow:150px 0px 10px 0px #eef8fb inset;
  213. -webkit-transition: all .7s linear;
  214. -moz-transition: all .3s linear;
  215. -o-transition: all .7s linear;
  216. -ms-transition: all .7s linear;
  217. transition: all .7s linear;
  218. }
  219.  
  220. #about {
  221. position:absolute;
  222. width:450px;
  223. }
  224.  
  225. #faq {
  226. position:absolute;
  227. width:450px;
  228. }
  229.  
  230. #links {
  231. position:absolute;
  232. width:450px;
  233. }
  234.  
  235. #blogroll {
  236. position:absolute;
  237. width:450px;
  238. }
  239.  
  240. #blogroll a {
  241. display:inline-block;
  242. }
  243.  
  244. #blogroll img {
  245. width:48px;
  246. margin:5px;
  247. -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out; -webkit-transition: all .7s ease-out; transition: all .7s ease-out;
  248. }
  249.  
  250. #blogroll img:hover {
  251. background:#eee;
  252. opacity:1;
  253. }
  254.  
  255. #blogroll:hover img:hover {
  256. opacity:1;
  257. }
  258.  
  259. #blogroll:hover img {
  260. opacity:.4;
  261. }
  262. header {
  263. font-size:20px;
  264. padding:10px;
  265. }
  266. #airudite a{
  267. position:fixed;
  268. color:#bbb;
  269. text-decoration:none;
  270. right:5px;
  271. bottom:5px;
  272. border-radius:30px;
  273. border:1px solid #ddd;
  274. padding:5px 10px 4px 10px;
  275. width:5px;
  276. overflow:hidden;
  277. font-size:12px;
  278. letter-spacing:10px;
  279. font-family:calibri;
  280. -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out;
  281. }
  282.  
  283. #airudite a:hover {
  284. width:50px;
  285. letter-spacing:1px;
  286. }
  287. {CustomCSS}</style>
  288.  
  289. <script src="http://code.jquery.com/jquery-1.10.0.min.js">
  290. </script>
  291. <script>
  292. $(document).ready(function(){
  293.  
  294. $(".faq").click(function(){
  295. $("#faq").fadeToggle();
  296. $(" #about, #navigation, #blogroll, #tags ").fadeOut();
  297.  
  298. });
  299.  
  300. $(".about").click(function(){
  301. $("#about").fadeToggle();
  302. $("#faq, #navigation, #blogroll, #tags").fadeOut();
  303. });
  304.  
  305. $(".navigation").click(function(){
  306. $("#navigation").fadeToggle();
  307. $("#faq, #about, #blogroll, #tags").fadeOut();
  308. });
  309.  
  310. $(".blogroll").click(function(){
  311. $("#blogroll").fadeToggle();
  312. $("#faq, #about, #links, #navigation").fadeOut();
  313. });
  314.  
  315.  
  316. });
  317. </script>
  318.  
  319. </head>
  320. <body>
  321.  
  322. <div id="airudite"><a href="http://airudite.tumblr.com">THEMATA</a></div>
  323.  
  324.  
  325. <div id="container">
  326.  
  327. <div id="sidebar">
  328. <!-- put your name here or something-->
  329. title
  330. <!-- here are the links don't mess w/ them -->
  331. <a class="faq" href="#">contact</a>
  332. <a class="about" href="#">portrait</a>
  333. <a class="navigation" href="#">explore</a>
  334. <a class="blogroll" href="#">blogroll</a>
  335. <a href="http://airudite.tumblr.com">credit</a>
  336. </div>
  337. <!-- here are the navigation stuff-->
  338. <div id="topbar">
  339. <a href="/" title="home">i.</a>
  340. <a class="faq" href="#" title="contact">ii.</a>
  341. <a href="/archive" title="history">iii.</a>
  342. <a href="/example" title="example">iv.</a>
  343. </div>
  344.  
  345. <div id="faq" style="display:none;">
  346. <!--askbox stuff here put your username where it says YOURURL. example: if your url was coolkittens.tumblr.com then put 'coolkittens' where it says YOURURL. ok i hope that makes sense-->
  347.  
  348. <p><iframe frameborder="0" height="250" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" width="100%"></iframe></p>
  349.  
  350.  
  351. </div>
  352.  
  353. <div id="about">
  354. <header>about</header>
  355.  
  356. <!-- image here change it by putting your image url where the http://...jpg is. (replace the one already there-->
  357. <div style="float:right"><img src="http://24.media.tumblr.com/tumblr_lwvpmzSGlO1r8859io1_500.jpg"> </div>
  358.  
  359. <!-- put your about here-->
  360. lorem ipsum hollah swag
  361.  
  362.  
  363.  
  364. </div>
  365.  
  366. <div id="navigation" style="display:none;">
  367. <center><header>navigation</header></center>
  368.  
  369. <!-- add your navigation links here works best in multiples of three -->
  370. <div id="nav">
  371. <a href="/">link</a>
  372. <a href="/">link</a>
  373. <a href="/">link</a>
  374. <a href="/">link</a>
  375. <a href="/">link</a>
  376. <a href="/">link</a>
  377. <a href="/">link</a>
  378. <a href="/">link</a>
  379. <a href="/">link</a>
  380.  
  381. </div>
  382.  
  383. </div>
  384.  
  385.  
  386. <div id="blogroll" style="display:none;">
  387. <center><header>blogroll</header></center>
  388.  
  389.  
  390. <!-- this is the blogroll nothing matters-->
  391. {block:Following}{block:Followed}
  392. <a href="{FollowedURL}" title="{FollowedName}">
  393. <img src="{FollowedPortraitURL-48}"></a>
  394. {/block:Following}{/block:Followed}
  395.  
  396.  
  397. </div>
  398.  
  399.  
  400. </div></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement