API tools faq
paste
Advertisement
ninpen

all in one page

ninpen
Jan 18th, 2013
12,826
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3.  
  4. <html lang="en"><head>
  5.  
  6. <title>{Title}</title>
  7.  
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}" />
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  14. <script type="text/javascript" src="http://static.tumblr.com/1f1tzta/G7Omn9may/scripted.js"></script>
  15. <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
  16.  
  17.  
  18.  
  19. <style type="text/css">
  20. ::-webkit-scrollbar {
  21. width: 7px;
  22. height: 4px;
  23. background-color: #ccc;
  24. border:3px solid #fff;
  25. }
  26.  
  27. ::-webkit-scrollbar-thumb {
  28. background-color: #f0f0f0;
  29. }
  30.  
  31. body{
  32. -webkit-font-smoothing: antialiased;
  33. font-family:Arial, Helvetica, sans-serif;
  34. font-size: 10px;
  35. background-attachment: fixed;
  36. background-repeat: repeat;
  37. color: #a0a0a0;
  38. background-color:#fff;
  39. background-image: url();
  40. }
  41.  
  42. a:link, a:active, a:visited{
  43. color: #a0a0a0;
  44. foont-style:tailic;
  45. letter-spacing:1px;
  46. text-decoration: none;
  47. -webkit-transition: all 0.7s ease-in-out;
  48. -moz-transition: all 0.7s ease-in-out;
  49. -o-transition: all 0.7s ease-in-out;
  50. -ms-transition: all 0.7s ease-in-out;
  51. transition: all 0.7s ease-in-out;
  52. }
  53.  
  54. h1{
  55. font-family: 'Nixie One', cursive;
  56. font-size:30px;
  57. line-height:33px;
  58. margin-left:495px;
  59. background:#fff;
  60. padding:8px 30px;
  61. color:#ccc;
  62. border-radius:5px 5px 0 0;
  63. font-weight:400;
  64. font-style:normal;
  65. margin-top:-10px;
  66. position:fixed;
  67. letter-spacing:-2px;
  68. text-transform:uppercase;
  69. -webkit-transform-origin: 0 0;
  70. -moz-transform-origin:0 0;
  71. -ms-transform-origin: 0 0;
  72. -o-transform-origin:0 0;
  73. -webkit-transform: rotate(90deg);
  74. -moz-transform:rotate(90deg);
  75. -ms-transform: rotate(90deg);
  76. -o-transform:rotate(90deg);
  77. }
  78.  
  79. h1:first-letter{
  80. color:#69dde3;
  81. }
  82.  
  83. .a{
  84. text-align:left;
  85. left:180px;
  86. top:0;
  87. overflow:auto;
  88. width:66%;
  89. height:375px;
  90. height:375px;
  91. position:absolute;
  92. background:#fff;
  93. clear:both;
  94. font:10px arial;
  95. line-height:16px;
  96. }
  97.  
  98. .a img{
  99. max-width:150px;
  100. padding:10px;
  101. background:#fff;
  102. margin:4px;
  103. border:3px double #f2f2f2;
  104. }
  105.  
  106. #name{
  107. background:#fff;
  108. color:#898;
  109. padding:2px 7px;
  110. margin-top:20px;
  111. position:absolute;
  112. opacity:0;
  113. text-align:center;
  114. font:7px trebuchet ms;
  115. text-transform:uppercase;
  116. letter-spacing:1px;
  117. }
  118.  
  119. #linked{
  120. height:160px;
  121. margin-top:25%;
  122. align:center;
  123. }
  124.  
  125. #linked td a:hover{
  126. background:#69dde3;
  127. color:#fff;
  128. }
  129.  
  130. #linked td a{
  131. display:block;
  132. padding:20px 30px;
  133. text-align:center;
  134. font:7px trebuchet ms;
  135. text-transform:uppercase;
  136. letter-spacing:2px;
  137. background:#fafafa;
  138. color:#a0a0a0;
  139. }
  140.  
  141. img{
  142. max-width:100%;
  143. }
  144.  
  145. #center{
  146. position:fixed;
  147. margin:-225px 0 0 -315px;
  148. left:50%;
  149. top:50%;
  150. width:630px;
  151. height:450px;
  152. }
  153.  
  154. #left{
  155. width:176px;
  156. height:100%;
  157. float:left;
  158. }
  159.  
  160. #portrait{
  161. width:150px;
  162. max-width:150px;
  163. height:410px;
  164. overflow:hidden;
  165. padding:10px;
  166. background:#fff;
  167. border:3px double #eee;
  168. }
  169.  
  170. .navi{
  171. position:absolute;
  172. left:25px;
  173. top:50%;
  174. border:10px solid rgba(0,0,0,.1);
  175. opacity:1;
  176. -webkit-transition: all 0.7s ease-in-out;
  177. -moz-transition: all 0.7s ease-in-out;
  178. -o-transition: all 0.7s ease-in-out;
  179. -ms-transition: all 0.7s ease-in-out;
  180. transition: all 0.7s ease-in-out;
  181. }
  182.  
  183. .link{
  184. padding:10px 0;
  185. background:#fff;
  186. }
  187.  
  188. .link a{
  189. display:block;
  190. text-align:center;
  191. width:105px;
  192. color:#a0a0a0;
  193. font:italic 7px trebuchet ms;
  194. text-transform:uppercase;
  195. letter-spacing:1px;
  196. -webkit-transition: all 0.7s ease-in-out;
  197. -moz-transition: all 0.7s ease-in-out;
  198. -o-transition: all 0.7s ease-in-out;
  199. -ms-transition: all 0.7s ease-in-out;
  200. transition: all 0.7s ease-in-out;
  201. }
  202.  
  203. .link a:hover,.link:hover{
  204. color:transparent;
  205. padding:15px 0;
  206. background:#fff;
  207. -webkit-transition: all 0.7s ease-in-out;
  208. -moz-transition: all 0.7s ease-in-out;
  209. -o-transition: all 0.7s ease-in-out;
  210. -ms-transition: all 0.7s ease-in-out;
  211. transition: all 0.7s ease-in-out;
  212. }
  213.  
  214. .b, .b a{
  215. width:12px;
  216. display:inline-block;
  217. font-size:22px;
  218. line-height:16px;
  219. color:#f5636e;
  220. }
  221.  
  222. .b2, .b2 a{
  223. width:12px;
  224. display:inline-block;
  225. font-size:22px;
  226. line-height:16px;
  227. color:#f1b776 ;
  228. }
  229.  
  230. .b3, .b3 a{
  231. width:12px;
  232. display:inline-block;
  233. font-size:22px;
  234. line-height:16px;
  235. color:#f8c5c4;
  236. }
  237.  
  238. .b4, .b4 a{
  239. width:12px;
  240. display:inline-block;
  241. font-size:22px;
  242. line-height:16px;
  243. color:#69dde3;
  244. }
  245.  
  246. .b:hover #name,.b2:hover #name,.b3:hover #name,.b4:hover #name{
  247. opacity:1;
  248. }
  249.  
  250. #right{
  251. width:445px;
  252. height:435px;
  253. float:right;
  254. }
  255.  
  256. #follow{
  257. margin-left:-27px;
  258. clear:both;
  259. display:block;
  260. }
  261.  
  262. #follow img{
  263. padding:3px;
  264. border:1px solid #f2f2f2;
  265. -webkit-transition: all 0.7s ease-in-out;
  266. -moz-transition: all 0.7s ease-in-out;
  267. -o-transition: all 0.7s ease-in-out;
  268. -ms-transition: all 0.7s ease-in-out;
  269. transition: all 0.7s ease-in-out;
  270. }
  271.  
  272. #follow img:hover{
  273. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  274. filter: gray;
  275. -webkit-filter: grayscale(100%);
  276. -webkit-transition: all 0.7s ease-in-out;
  277. -moz-transition: all 0.7s ease-in-out;
  278. -o-transition: all 0.7s ease-in-out;
  279. -ms-transition: all 0.7s ease-in-out;
  280. transition: all 0.7s ease-in-out;
  281. }
  282.  
  283. ul {
  284. list-style: none;
  285. margin:0 auto;
  286. }
  287.  
  288. li {
  289. float: left;
  290. margin:5px;
  291. }
  292.  
  293. #s-m-t-tooltip{
  294. max-width:200px;
  295. color:#fff;
  296. margin:7px 0px 0px 10px;
  297. z-index:10;
  298. background-color:#69dde3;
  299. font:7px trebuchet ms;
  300. letter-spacing:1px;
  301. text-transform:uppercase;
  302. padding:5px 10px;
  303. }
  304.  
  305. </style>
  306. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  307. <script src="http://static.tumblr.com/kcuzms7/CKCmgt9uc/jquery.style-my-tooltips.js"></script>
  308. <script>
  309. $("[title]").style_my_tooltips({
  310. tip_follows_cursor:false,
  311. tip_delay_time:50,
  312. tip_fade_speed:300,
  313. attribute:"title"
  314. });
  315. </script>
  316. </head>
  317. <body>
  318.  
  319.  
  320. <div id="center">
  321. <div id="left">
  322.  
  323.  
  324. <div class="navi">
  325. <div class="link"><a href="/">home</a></div>
  326. <div class="link"><a href="/ask">inbox</a></div>
  327. <div class="link"><a href="http://ninpen.tumblr.com/">Credit</a></div>
  328. </div>
  329.  
  330.  
  331.  
  332.  
  333.  
  334.  
  335. <!-------------------------------
  336. LEFT SIDE PORTRAIT STARTS
  337. --------------------------------->
  338. <div id="portrait"><img src="http://static.tumblr.com/1f1tzta/urvmgt213/untitled-1.png">
  339. </div>
  340. <!-------------------------------
  341. LEFT SIDE PORTRAIT ENDS
  342. --------------------------------->
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351. <center>
  352. <a href="#"><div class="b">&#9632;</a><span id="name">clear</span></div>
  353. <div class="a" style="background:transparent; display:none;">
  354. </div>
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362.  
  363.  
  364. <!-------------------------------
  365. ABOUT ME STARTS
  366. --------------------------------->
  367.  
  368. <a href="#"><div class="b"><span class="b2">&#9632;</span></a><span id="name">about</span></div>
  369. <div class="a" style="padding:30px;">
  370. <h1>about me</h1>
  371. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi. Vestibulum pulvinar nisi sit amet dui consectetur ultrices. Sed nec dapibus tellus. Aenean blandit tincidunt est at luctus.<br><br>
  372. <span style="float:right;"><img src="http://25.media.tumblr.com/tumblr_md4pu2jVsk1rwbmkho1_500.jpg"></span>
  373. Aliquam dignissim, nulla et consequat cursus, nulla velit pellentesque velit, id convallis augue lorem quis libero. In ac augue enim. Morbi tempus ante ut nulla venenatis non euismod ipsum semper. Ut in tortor libero. Mauris orci nisi, aliquam at blandit quis, mollis a orci. In sodales venenatis dolor eget aliquam. Vestibulum et magna enim. Praesent et mauris mi. Nam bibendum varius tincidunt.<br><br>
  374.  
  375. <div style="font:7px trebuchet ms; letter-spacing:1px; text-transform:uppercase">
  376. <span class="b4" style="font-size:10px;">&#9632;</span><span style="color:#f5636e;">Name:</span> Jenny<br>
  377. <span class="b3" style="font-size:10px;">&#9632;</span><span style="color:#f1b776;">Age:</span> 20<br>
  378. <span class="b2" style="font-size:10px;">&#9632;</span><span style="color:#f8c5c4;">Interest:</span> Eating, reading, watching movies<br>
  379. <span class="b" style="font-size:10px;">&#9632;</span><span style="color:#69dde3;">Fandoms:</span> None
  380. </div>
  381. </div>
  382.  
  383. <!-------------------------------
  384. ABOUT ME ENDS
  385. --------------------------------->
  386.  
  387.  
  388.  
  389.  
  390.  
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397.  
  398.  
  399. <!-------------------------------
  400. LINKS STARTS
  401. --------------------------------->
  402.  
  403. <a href="#"><div class="b"><span class="b3">&#9632;</span></a><span id="name">links</span></div>
  404. <div class="a" style="padding:30px;">
  405. <h1>Links</h1>
  406. <center>
  407. <table id="linked">
  408. <tr>
  409. <td><a href="LINK URL">LINK NAME</a></td>
  410. <td><a href="LINK URL">LINK NAME</a></td>
  411. <td><a href="LINK URL">LINK NAME</a></td>
  412. </tr>
  413.  
  414.  
  415. <tr>
  416. <td><a href="LINK URL">LINK NAME</a></td>
  417. <td><a href="LINK URL">LINK NAME</a></td>
  418. <td><a href="LINK URL">LINK NAME</a></td>
  419. </tr>
  420.  
  421.  
  422. <tr>
  423. <td><a href="LINK URL">LINK NAME</a></td>
  424. <td><a href="LINK URL">LINK NAME</a></td>
  425. <td><a href="LINK URL">LINK NAME</a></td>
  426. </tr>
  427.  
  428. </table>
  429. </center>
  430. </div>
  431.  
  432. <!-------------------------------
  433. LINKS END
  434. --------------------------------->
  435.  
  436.  
  437.  
  438.  
  439.  
  440.  
  441.  
  442.  
  443.  
  444.  
  445.  
  446.  
  447.  
  448. <!-------------------------------
  449. BLOGROLL STARTS
  450. --------------------------------->
  451. <a href="#"><div class="b"><span class="b4">&#9632;</span></a><span id="name">blogroll</span></div>
  452. <div class="a" style="padding:10px 10px 10px 0;width:69.2%;height:415px;">
  453. <h1>blogroll</h1>
  454. <div id="follow">
  455. <ul>
  456. <center>
  457. <li>
  458. {block:Following}
  459. {block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"/>{/block:Followed}
  460. {/block:Following}
  461.  
  462.  
  463. </center>
  464. </li>
  465. </ul>
  466.  
  467. </div>
  468. </div>
  469.  
  470. <!-------------------------------
  471. BLOGROLL END
  472. --------------------------------->
  473. </center>
  474. </div>
  475.  
  476.  
  477. <div id="right">
  478. </div>
  479. </div>
  480.  
  481.  
  482.  
  483.  
  484. <script>
  485. $('.a').hide();
  486. $('.b a').click(function() {
  487. console.log($(this).index('a'));
  488. var $div = $('.a').eq($(this).index('.b a'));
  489. $(".a").animate({
  490. opacity: 'toggle'
  491. }, 600, 'linear', function() {
  492. });
  493. $('.a').not($div).hide();
  494. });
  495.  
  496. </script>
  497.  
  498.  
  499. </body>
  500. </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!