API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 4th, 2016
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.45 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!-------------------------------
  5. Theme by HTMLNerd @ Chatango.
  6. 1. Please do not remove credits.
  7. 2. Feel free to alter as much as you want as long as credits remain.
  8. 3. Have fun with the theme.
  9. --------------------------------->
  10.  
  11. <SCRIPT TYPE="text/javascript">
  12. <!--
  13. function clickIE() {if (document.all) {(message);return false;}}
  14. function clickNS(e) {if
  15. (document.layers||(document.getElementById&&!document.all)) {
  16. if (e.which==2||e.which==3) {(message);return false;}}}
  17. if (document.layers)
  18. {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
  19. else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
  20. document.oncontextmenu=new Function("return false")
  21. // -->
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  23. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  24. <script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  25. </SCRIPT>
  26. <script language=javascript>document.title=("tab title here.")</script>
  27. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic' rel='stylesheet' type='text/css'>
  28.  
  29. <style type="text/css">
  30.  
  31. .logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text,
  32. .nc_profile, #left_container, #profilephoto, #flash_close_butt,
  33. #start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .yellow_but,
  34. .bottombar, .byline, .top-links { visibility: hidden !important; display: none !important;}
  35.  
  36. .tabs[title]:hover:after {
  37. content: attr(title);
  38. font-family: calibri;
  39. text-transform: uppercase;
  40. background: #990000;
  41. width: 70px;
  42. line-height: 15px;
  43. font-size: 8px;
  44. color: #fff;
  45. border: 1px solid #fff;
  46. letter-spacing: 2px;
  47. position: absolute;
  48. top: 0px;
  49. left: 66px;
  50. z-index: 20;
  51. }
  52.  
  53. a:link {color: #c0c0c0;
  54. text-transform: uppercase;font-size:8px;}
  55. a:visited {color:#c0c0c0;}
  56. a:hover {color: #505050;
  57. background: #f0f0f0;}
  58. a:active {color:#c0c0c0;}
  59.  
  60.  
  61. ::selection {
  62. background:#000000;
  63. }
  64.  
  65. ::-moz-selection {
  66. background:#000000;
  67. }
  68.  
  69. ::-webkit-scrollbar {background-color: #990000; height:8px; width:5px; border:3px solid #707070}
  70. ::-webkit-scrollbar-thumb:vertical {background-color:#990000; border:1px solid #c0c0c0; height:50px}
  71. ::-webkit-scrollbar-thumb:horizontal {background-color:#990000; border:1px solid #c0c0c0; height:8px}
  72.  
  73. body, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol31.cur), auto;}
  74.  
  75. body{
  76. background-image: url('https://31.media.tumblr.com/8057ace31b5e85bad3051eddb2b22166/tumblr_inline_nixyfva3Hh1ssyvzw.png') !important; background-repeat:repeat !important; background-position:top-center!important;
  77. font:10px calibri;
  78. color:#808080;
  79. margin:0px;
  80. height:0px;
  81. width:0px;
  82. }
  83.  
  84. h1 {
  85. background: #990000;
  86. color: #fff;
  87. font-family: ms ui gothic;
  88. text-transform: uppercase;
  89. font-size: 10px;
  90. }
  91.  
  92. pre {
  93. background: #990000;
  94. color: #fff;
  95. text-align: center;
  96. font-family: consolas;
  97. font-size: 10px;
  98. letter-spacing: 2px;
  99. text-transform: uppercase;
  100. }
  101.  
  102. b, strong {
  103. color: #990000;
  104. text-transform: uppercase;
  105. letter-spacing: 1px;
  106. font-size: 8px;
  107. }
  108.  
  109. i, em {
  110. color: #c0c0c0;
  111. }
  112.  
  113. #mtitle {
  114. text-align: center;
  115. background: #990000;
  116. text-transform: uppercase;
  117. font-family: courier new;
  118. font-size: 10px;
  119. padding: 3px;
  120. color: #fff;
  121. border-bottom: 1px solid #990000;
  122. }
  123.  
  124. #side{
  125. position: fixed;
  126. top: 0px;
  127. left: 0px;
  128. width: 490px;
  129. height: 100%;
  130. background-image: url('https://31.media.tumblr.com/8057ace31b5e85bad3051eddb2b22166/tumblr_inline_nixyfva3Hh1ssyvzw.png');
  131. border-right: 1px solid #fff;
  132. padding: 4px;
  133. }
  134.  
  135. #container {
  136. position: fixed;
  137. top: 0px;
  138. left: 650px;
  139. width: 400px;
  140. height: 100%;
  141. background-image: url('http://i.imgur.com/NUZV5RB.jpg');
  142. background-position: center;
  143. border-left: 1px solid #000000;
  144. border-right: 1px solid #000000;
  145. }
  146.  
  147. #box {
  148. background-image: url('http://img3.wikia.nocookie.net/__cb20140901164940/creepypasta/es/images/9/9a/Mancha-mano-sangre.jpg');
  149. background-position: top-left;
  150. position:fixed;
  151. left: 665px;
  152. top: 100px;
  153. width: 350px;
  154. height: 200px;
  155. font-family: calibri;
  156. font-size: 10px;
  157. color: #505050;
  158. border: 1px solid #990000;
  159. overflow: auto;
  160. z-index:99;
  161. padding:10px;
  162. }
  163.  
  164. .box img {
  165. margin-left: 0px;
  166. margin-bottom: 10px;
  167. }
  168.  
  169. .box::first-letter {
  170. padding: 2px 7px 2px 7px;
  171. margin-right: 5px;
  172. font-family: times;
  173. font-size: 20px;
  174. background: #990000;
  175. color: #000;
  176. }
  177.  
  178. #smallbox {
  179. position: absolute;
  180. text-align: justified;
  181. margin: 325px 0 0 94px;
  182. padding: 2px;
  183. width: 300px;
  184. height: 110px;
  185. background: #fff;
  186. border: 1px solid #990000;
  187. padding: 2px;
  188. font-family: calibri;
  189. color: #000;
  190. font-size: 10px;
  191. overflow: auto;
  192. }
  193.  
  194. #sideimg {position:absolute;
  195. width: 295px;
  196. height: 200px;
  197. padding: 2px;
  198. border: 5px solid #fff;
  199. padding: 2px;
  200. margin: 100px 0 0 92px;
  201. }
  202.  
  203. #sideimg img {
  204. width: 295px;
  205. height: 200px;
  206. opacity: .8;
  207. }
  208.  
  209. #sideimg img:hover{
  210. opacity: 1;
  211. -webkit-transition: all 0.7s ease-in-out;
  212. -moz-transition: all 0.7s ease-in-out;
  213. -o-transition: all 0.7s ease-in-out;
  214. -ms-transition: all 0.7s ease-in-out;
  215. transition: all 0.7s ease-in-out;
  216. }
  217.  
  218. #icon {
  219. position: absolute;
  220. margin: 455px 0px 0px 95px;
  221. overflow: hidden;
  222. width: 100px
  223. height: 100px;
  224. border: 10px solid #fff;
  225. background-color: #990000;
  226. }
  227.  
  228. #icon img {
  229. margin-top: 10px;
  230. margin-left: -30px;
  231. position: fixed;
  232. -webkit-transition: all 0.7s ease-in-out;
  233. -moz-transition: all 0.7s ease-in-out;
  234. -o-transition: all 0.7s ease-in-out;
  235. -ms-transition: all 0.7s ease-in-out;
  236. transition: all 0.7s ease-in-out;
  237. }
  238.  
  239. #icon:hover img {
  240. opacity: 0;
  241. margin-top: 10px;
  242. -webkit-transition: all 0.7s ease-in-out;
  243. -moz-transition: all 0.7s ease-in-out;
  244. -o-transition: all 0.7s ease-in-out;
  245. -ms-transition: all 0.7s ease-in-out;
  246. transition: all 0.7s ease-in-out;
  247. }
  248.  
  249. #player {
  250. margin-top: 10px;
  251. margin-left: -2px;
  252. overflow: hidden;
  253. opacity: 0;
  254. width: 100px;
  255. -webkit-transition: all 0.7s ease-in-out;
  256. -moz-transition: all 0.7s ease-in-out;
  257. -o-transition: all 0.7s ease-in-out;
  258. -ms-transition: all 0.7s ease-in-out;
  259. transition: all 0.7s ease-in-out;
  260. }
  261.  
  262. #icon:hover #player {
  263. opacity: 0.5;
  264. -webkit-transition: all 0.7s ease-in-out;
  265. -moz-transition: all 0.7s ease-in-out;
  266. -o-transition: all 0.7s ease-in-out;
  267. -ms-transition: all 0.7s ease-in-out;
  268. transition: all 0.7s ease-in-out;
  269. }
  270.  
  271. #navi {position:fixed;left: 500px;
  272. top: 0px;background: #770000; width: 53px;
  273. height: 100%; border-right: 1px solid #fff; padding: 3px;
  274. }
  275.  
  276. .tabs{
  277. margin-top: 5px;
  278. height: 50px;
  279. width: 50px;
  280. line-height: 50px;
  281. font-family: calibri;
  282. font-size: 8px;
  283. color: #505050;
  284. background: #fff;
  285. border: 1px solid #505050;
  286. display: block;
  287. text-align: center;
  288. z-index:99;
  289. }
  290.  
  291. .tabs:hover {
  292. background: #505050;
  293. text-decoration: none;
  294. color: #fff;
  295. -webkit-transform: rotate(360deg);
  296. -moz-transform: rotate(360deg);
  297. -o-transform: rotate(360deg) ;
  298. -ms-transform: rotate(360deg);
  299. transform: rotate(360deg) ;
  300. -webkit-transition: 1s ease-in-out;
  301. -moz-transition: 1s ease-in-out;
  302. -o-transition: 1s ease-in-out;
  303. z-index: 9999999999999999999;
  304. }
  305.  
  306. #friendb {
  307. position:fixed;left: 665px;top: 350px;background-image: url('http://billsmovieemporium.files.wordpress.com/2012/06/blood.jpg');background-position: top-right;width: 365px;
  308. height: 80px; border: 1px solid #990000; padding: 3px;overflow:auto;
  309. }
  310.  
  311. .tab4 img {
  312. height: 29px;
  313. width: 29px;
  314. margin: 4px 0 0 5px;
  315. border: 3px solid #990000;
  316. -webkit-transition: all 0.8s ease-out;
  317. -moz-transition: all 0.8s ease-out;
  318. transition: all 0.8s ease-out;
  319. }
  320.  
  321. .tab4 img:hover {
  322. border-radius: 30px;
  323. -webkit-transition: all 0.8s ease-out;
  324. -moz-transition: all 0.8s ease-out;
  325. transition: all 0.8s ease-out;
  326. }
  327.  
  328. .tab4 a {
  329. color: none;
  330. text-decoration: none;
  331. background: none;
  332. }
  333.  
  334. .tab4 a:hover {
  335. color: none;
  336. background: none;
  337. }
  338.  
  339. .tab5 a {
  340. margin-top: 5px;
  341. height: 50px;
  342. width: 50px;
  343. line-height: 50px;
  344. font-family: calibri;
  345. font-size: 8px;
  346. color: #505050;
  347. background: #fff;
  348. border: 1px solid #505050;
  349. display: block;
  350. text-align: center;
  351. z-index:99;
  352. }
  353.  
  354. .tab5 a:hover {
  355. background: #505050;
  356. text-decoration: none;
  357. color: #fff;
  358. -webkit-transform: rotate(360deg);
  359. -moz-transform: rotate(360deg);
  360. -o-transform: rotate(360deg) ;
  361. -ms-transform: rotate(360deg);
  362. transform: rotate(360deg) ;
  363. -webkit-transition: 1s ease-in-out;
  364. -moz-transition: 1s ease-in-out;
  365. -o-transition: 1s ease-in-out;
  366. z-index: 9999999999999999999;
  367. }
  368.  
  369. #tab1, #tab2, #tab3 {
  370. display:none;
  371. }
  372.  
  373. #credit {
  374. position: absolute;
  375. margin: 461px 0px 0px 240px;
  376. width: 100px
  377. height: 100px;
  378. border: 15px solid #fff;
  379. background-color: #fff;
  380. font-family: calibri;
  381. font-size: 8px;
  382. text-transform: uppercase;
  383. color: #fff;
  384. background: #990000;
  385. }
  386.  
  387. #credit a {
  388. background: #ffffff;
  389. text-transform: uppercase;
  390. font-size: 8px;
  391. color: #202020;
  392. }
  393.  
  394. </style>
  395. </head>
  396. <body>
  397. <div id="side">
  398. <div id="sideimg"><img src="https://img.ifcdn.com/images/98694aa9d4a275031cb932069448cebcae81095f08eb5f938a534b2c71794ba0_1.gif"/></div>
  399. <div id="smallbox"><div id="mtitle">title here</div>Little description here.</div>
  400. <div id="icon">
  401. <center><img src="http://media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"></center>
  402. <div id="player"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="105" height="25">
  403. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
  404. <param name="bgcolor" value="#ffffff" />
  405. <param name="FlashVars" value="mp3=https://dl.dropboxusercontent.com/u/94114797/Detritus%20-%20Fractured%20-%20Desolate.mp3&amp;width=105&amp;height=25&amp;autoplay=1&amp;loop=1&amp;showvolume=1&amp;showslider=0&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttoncolor=202020" />
  406. </object></div>
  407. </div>
  408. <div id="credit">Code @ <a href="http://htmlnerd.chatango.com">HtmlNerd</a></div>
  409. </div>
  410. <div id="navi">
  411. <span class="tabs" style="cursor:url('http://cur.cursors-4u.net/holidays/hol-1/hol31.cur'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation ('tab1')" title="about">01.</span>
  412. <span class="tabs" style="cursor:url('http://cur.cursors-4u.net/holidays/hol-1/hol31.cur'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation ('tab2')" title="likes & dislikes">02.</span>
  413. <span class="tabs" style="cursor:url('http://cur.cursors-4u.net/holidays/hol-1/hol31.cur'), auto }; onmouseover="cursor:pointer';" onclick="changeNavigation ('tab3')" title="contact">03.</span>
  414. <div class="tab5"><a href="http://">Wake me up</a><a href="http://">Wake me up inside</a><a href="http://">cant wake up </a><a href="http://">save me</a>
  415. </div>
  416.  
  417.  
  418. <div id="box">
  419. <h1>Introduction</h1>
  420. <div class="box">Navigate through the links to the left.</div>
  421. </div>
  422.  
  423. <script>function changeNavigation(id) {document.getElementById('box').innerHTML=document.getElementById(id).innerHTML}</script>
  424.  
  425. <div id="tab1">
  426. <h1>About</h1>
  427. <div class="box">Put stuff about yourself here.</div>
  428.  
  429. </div>
  430.  
  431. <div id="tab2">
  432. <h1>Title here</h1>
  433. <div class="box">Likes & Dislikes?</div>
  434. <h1>Likes</h1>
  435. <li>Food.</li>
  436. <li>Writing.</li>
  437. <li>Stuff..</li>
  438. <h1>Dislikes</h1>
  439. <li>Poop.</li>
  440. <li>Even more poop.</li>
  441. <li>Pooper.</li>
  442. </div>
  443.  
  444. <div id="tab3">
  445. <h1>Title here</h1>
  446. <b>Skype:</b> Skype information here.<br>
  447. <b>Tumblr:</b> Tumblr here.<br>
  448. <b>Ask.Fm:</b>Ask here.<br>
  449. <b>Youtube:</b> Videos here.<br>
  450. <b>Twitter:</b> Tweets here.<br>
  451. </div>
  452. </div>
  453. </div>
  454. </div>
  455.  
  456. <script type="text/javascript">
  457. <!--
  458. function toggle_visibility(id) {
  459. var e = document.getElementById(id);
  460. if(e.style.display == 'block')
  461. e.style.display = 'none';
  462. else
  463. e.style.display = 'block';
  464. }
  465. //-->
  466. </script>
  467.  
  468. <script type="text/javascript">
  469. var divs = ["tab1", "tab2", "tab3"];
  470. var visibleDivId = null;
  471.  
  472. function toggleVisibility(divId) {
  473. if(visibleDivId === divId) {
  474. visibleDivId = null;
  475. } else {
  476. visibleDivId = divId;
  477. }
  478.  
  479. hideNonVisibleDivs();
  480. }
  481.  
  482. function hideNonVisibleDivs() {
  483. var i, divId, div;
  484.  
  485. for(i = 0; i < divs.length; i++) {
  486. divId = divs[i];
  487. div = document.getElementById(divId);
  488.  
  489. if(visibleDivId === divId) {
  490. div.style.display = "block";
  491. } else {
  492. div.style.display = "none";
  493. }
  494. }
  495. }
  496. </script>
  497. </body>
  498. </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!