API tools faq
paste
Advertisement
usbshota

he

usbshota
May 29th, 2016
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.15 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3.  
  4.         <title>let the right one in</title>
  5.  
  6.        
  7.         <link href='https://fonts.googleapis.com/css?family=Overlock:400,900italic' rel='stylesheet' type='text/css'>
  8.         <link href='https://fonts.googleapis.com/css?family=Ruthie' rel='stylesheet' type='text/css'>
  9.        
  10.  
  11.        
  12. <!--tooltips by tutorial-baby-->
  13. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  14.  
  15. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  16. <script>
  17. (function($){
  18. $(document).ready(function(){
  19. $("a[title]").style_my_tooltips({
  20. tip_follows_cursor:true,
  21. tip_delay_time:10,
  22. tip_fade_speed:600,
  23. attribute:"title"
  24. });
  25. });
  26. })(jQuery);
  27. </script>
  28. <style>
  29. .tooltip{
  30.     display: inline;
  31.     position: relative;
  32. }
  33. #s-m-t-tooltip {
  34. max-width:300px; /*how big the tooltip can be at most*/
  35. border-radius: 2px; /*change your border radius*/
  36. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  37. margin:20px 7px -2px 20px; /*distance from word*/
  38. background-color:#ccad00; /*background color*/
  39. font-size:9px;
  40. color:#fff;
  41. font-weight:bold;
  42. -webkit-transition: all 0.3s ease-out;
  43. -moz-transition: all 0.3s ease-out;
  44. transition: all 0.3s ease-out;
  45. z-index:999999999999999999999999999999999999;
  46. }
  47.  
  48.  
  49. .navigation {
  50.     z-index:99999999999999;
  51.         border-bottom:1px solid #ccad00;
  52.         padding:0;
  53.         width:430px;
  54.     text-align: center;
  55.     text-transform: uppercase;
  56.     margin-bottom: 5px;
  57.     -moz-transition-duration: 0.4s;
  58.     -webkit-transition-duration: 0.4s;
  59.     -o-transition-duration: 0.4s;
  60.     font-weight: normal;
  61.     font-family: georgia;
  62.     font-size: 19px;
  63.     line-height: 120%;
  64.     letter-spacing: 15px;
  65.     top: 150px;
  66.     left: 320px;
  67.     display: inline-table;
  68.     position: fixed;
  69.     }
  70.  
  71. .mx{
  72.     opacity:.7;
  73.     position:fixed;
  74.     bottom:-180px;
  75.     left:230px;
  76.     height:600px;
  77.     width:600px;
  78.     overflow-y:hidden;
  79.     overflow-x:hidden;
  80.     border-radius:900px;
  81. }
  82.  
  83. h1{
  84.     width:350px;
  85.     text-align:center;
  86.     font-size:20px;
  87.     margin:20px;
  88.     border-bottom:1px solid #ccad00;
  89.     padding:10px;
  90. }
  91.  
  92. .imalazyass{
  93.     z-index:98;
  94.     width:100%;
  95.     height:173px;
  96.     position:fixed;
  97.     top:0;
  98.     right:0;
  99.     background-color:#fff;
  100. }
  101.  
  102.        
  103.             /*basic*/
  104.                  
  105.             ::-webkit-scrollbar {height:auto;width:1px;background-color:#transp!;}
  106.             ::-webkit-scrollbar-thumb {;width:4px; background-color:#transp!;}
  107.             ::-webkit-scrollbar-track{
  108.                 background-color:#transp!;
  109.                 width:0px;
  110.             }
  111.            
  112.             body {
  113.                 background-color:#fff;
  114.                 /*background-image:url('http://chengis.me/fruity/wp-content/uploads/2009/07/square-grid-small.png');*/
  115.                 font-size:11px;
  116.                 color:#915c1c;
  117.                 overflow-y:hidden;
  118.                 font-family:arial;
  119.             }
  120.             a {
  121.                 text-decoration:none;
  122.                 color:#ccad00;
  123.             }
  124.             a:hover {
  125.                 text-decoration:none;
  126.                 text-shadow:1px 1px 3px #915c1c;
  127.                 color:#ae4b33;
  128.             }
  129.            
  130.             .po img a:hover {
  131.                 background-color:transparent;
  132.             }
  133.             .po img:hover{
  134.                 background-color:transparent;
  135.             }
  136.            
  137.             table {
  138.                 font-size:10px;
  139.             }
  140.            
  141.             #credit{
  142.                 bottom:5px;
  143.                 right:5px;
  144.                 position:fixed;
  145.                 background-color:rgba(255,255,255,0.6);
  146.             }
  147.            
  148.             #si {
  149.                 position:fixed;
  150.                 margin:50px;
  151.                 text-align:right;
  152.                 width:100px;
  153.             }
  154.  
  155.             #ti {
  156.                 font-family: 'Ruthie', cursive;
  157.                
  158.                 opacity:.8;
  159.                 text-shadow: 0px 0px 4px #ccad00;
  160.                 font-style:italic;
  161.                 position:fixed;
  162.                 font-size:95px;
  163.                 font-weight:bold;
  164.                 line-height:50px;
  165.                 width:410px;
  166.                 text-align:right;
  167.                 -webkit-transition: all 0.3s ease;
  168.                 -moz-transition: all 0.3s ease;
  169.                 -o-transition: all 0.3s ease;
  170.             }
  171.             #tti {
  172.                 position:fixed;
  173.                 top:55px;
  174.                 left:340px;
  175.                 color:#fff;
  176.  
  177.             }
  178.             #des {
  179.                 width:200px;
  180.                 height:65px;
  181.                 overflow-y:hidden;
  182.                 text-align:center;
  183.             }
  184.            
  185.             /*posts*/
  186.            
  187.             #ens {
  188.                 position:fixed;
  189.                 left:430px;
  190.                 top:120px;
  191.                 height:420px;
  192.                 width:510px;
  193.                 overflow-y:scroll;
  194.                 background-color:transparent;
  195.                 padding:20px;
  196.                 padding-top:50px;
  197.             }
  198.             .po {
  199.                 margin-bottom:80px;
  200.                 padding:10px;
  201.                 background-color:transparent;
  202.                 -webkit-transition: all 0.3s ease;
  203.                 -moz-transition: all 0.3s ease;
  204.                 -o-transition: all 0.3s ease;
  205.             }
  206.            
  207.             #lis {
  208.                 margin-left:370px;
  209.                 margin-top:40px;
  210.             }
  211.            
  212.            
  213.             /*text post*/
  214.             #title {
  215.                 text-align:center;
  216.                 border-bottom:1px solid #f5f5f5;
  217.                 padding-bottom:3px;
  218.                 font-weight:bold;
  219.             }
  220.            
  221.            
  222.            
  223.            
  224.            
  225.             blockquote {
  226.                 border-left: 1px solid #000;
  227.                 margin-left: 6px;
  228.                 padding-left: 10px;
  229.             }
  230.            
  231.             /*post width*/
  232.             iframe, img, embed, object, video {
  233.                 max-width: 100%;
  234.                  border: none;
  235.             }
  236.            
  237.  
  238.            
  239.             #audio {
  240.  
  241. position:fixed; /** so that when you scroll the page, the music player will stay fixed in position, ie: will NOT scroll along with the page, other possible values: absolute **/
  242.  left:10px; /** position in pixels from left of page, can replaced with "right" so it is xxx pixels from the bottom **/
  243.  top:10px; /** position in pixels from top of page, can replaced with "bottom" so it is xxx pixels from the bottom **/
  244.  border:1px dashed #ccad00;
  245.  padding:10px;
  246.  width:14px; /** width of the icon **/
  247.  height:14px; /** height of the icon **/
  248. background:#fff;
  249.  
  250. }
  251.  
  252. #audio:hover {
  253.  
  254. width:200px; /** width of the music player **/
  255.  border:0px;
  256.  border-left:15px solid #ccad00;
  257. background:none!important;
  258. -moz-transition-duration: 0.6s;
  259.     -webkit-transition-duration: 0.6s;
  260.     -o-transition-duration: 0.6s;
  261.  
  262. }
  263.  
  264. #audio img{
  265.  
  266.  
  267. visibility:visible;
  268.  
  269. }
  270.  
  271. #audio:hover img {
  272.  
  273. visibility:hidden!important;
  274. position:absolute;
  275.  
  276. }
  277.  
  278. #player {
  279.  
  280. visibility:hidden;
  281.  position:absolute;
  282.  height:0px;
  283. width:0px;
  284.  
  285. }
  286.  
  287. #audio:hover #player {
  288.  
  289. visibility:visible!important;
  290. -moz-transition-duration: 0.4s;
  291.     -webkit-transition-duration: 0.4s;
  292.     -o-transition-duration: 0.4s;
  293.  
  294. }
  295.            
  296.             .ltr{
  297.                 width:1px;
  298.                 position:fixed;
  299.                 height:491px;
  300.                 left:400px;
  301.                 bottom:23px;
  302.                 background-color:#ccad00;
  303.                 z-index:99;
  304.             }
  305.            
  306.         </style>
  307.  
  308. </head>
  309.     <body>
  310.     <div class="ltr">
  311.        
  312.     </div>
  313.     <div class="imalazyass">
  314.     <div id="audio">
  315. <img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif">
  316. <div id="player">player</div>
  317. </div>
  318.     <div id="tti"><div id="ti">title here</div><br><br><br>
  319.     <!--<div id="des">I'm like a rubber band until you pull too hard / Yeah, I may snap and I move fast / But you won't see me fall apart / 'Cause I've got an elastic heart</div>--></div>
  320.     <div id="si">
  321.    
  322.    
  323.     <div id="lis">
  324.     <div id="des">description here</div>
  325.        
  326.            
  327.            
  328.            
  329.            
  330.            
  331.            
  332.     </div>
  333.     </div>
  334.    
  335.     <div class="navigation">
  336. <a href="/" title="home page">•</a>
  337. <a href="/ask" title="message">•</a>
  338. <a href="" title="">•</a>
  339.  
  340. <a href="" title="">•</a>
  341.  
  342. <a href="" title="">•</a>  
  343.    
  344. </div>
  345. </div>
  346.     <div class="mx">
  347.     <img src="http://static.tumblr.com/9d68d08481a9a9fdf98f394ae6f202cb/b6o5w4u/JzMo7w2gv/tumblr_static_ykb3zj0bw9c84c4w48wkgoc.png" />
  348.     </div>
  349.    
  350.     <div id="credit"><a title="theme by gasoln" href="http://gasoln.tumblr.com">.thm</a></div>
  351.  
  352.  
  353.        
  354.         <div id="ens">
  355.  
  356. <div class="po">
  357.  
  358.  
  359.    
  360.  <h1>Cy</h1>
  361.  <p>about
  362.  <p>about
  363.  <p>about
  364.  <h1>Personality</h1>
  365.  <p>trait
  366.  <p>trait
  367.  <p>trait
  368.  <h1>Biography</h1>
  369.  <p>history
  370.  <p>history
  371.  <p>history
  372.    
  373.  
  374.    
  375.  
  376.     </div>
  377.  </div>
  378.    
  379.  
  380.    
  381. </body>
  382. </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!