API tools faq
paste
darianella

"Make Me King" about me tumblr page HTML code

darianella
Sep 17th, 2012
695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  5.  
  6. <!--
  7.  
  8. THIS PAGE WAS MADE BY DARIAN OF REDFOX-THEMES. PLEASE DON'T STEAL, REMOVE THIS CREDIT, OR USE AS A BASE FOR OTHER PAGES.
  9.  
  10. HIT UP MY ASK IF YOU GUYS HAVE ANY QUESTIONS! I'M ALWAYS HAPPY TO HELP!
  11.  
  12. ~Darian
  13.  
  14. -->
  15.  
  16. <head>
  17. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  18. <title>ABOUT ME</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <style type="text/css">
  22.  
  23.  
  24. /*basic things*/
  25.  
  26. body{
  27.     margin:0px;
  28.     font-family:verdana;
  29.     color:gray;
  30.     font-size:9px;
  31.     line-height:100%;
  32.     background-image:url('https://lh3.googleusercontent.com/-EVJs3FjazAU/UEgH3rzI_pI/AAAAAAAAA8M/CtocObsJY9g/s500/tex2res4.png');
  33.     background-attachment: fixed;
  34.     background-repeat: repeat;
  35.     background-color: white;
  36. }
  37.  
  38. a{
  39.     text-decoration:none;
  40.     outline:none;
  41.     -moz-outline-style:none;
  42.     color:#b23f06;
  43.     -webkit-transition: all 0.5s linear;
  44.     -moz-transition: all 0.5s linear;
  45.     -o-transition: all 0.5s linear;
  46. }
  47.  
  48. a:hover{
  49.     font-weight:bold;
  50.     color:black;
  51.     text-shadow:2px 0 0 rgba(255,0,0,0.3), -2px 0 0 rgba(0,255,0,0.3);
  52. }
  53.  
  54. em{
  55.     color:green;
  56. }
  57.  
  58. strong{
  59.     color:blue;
  60. }
  61.  
  62. img{
  63.     border:none;
  64. }
  65.  
  66. blockquote{
  67.     padding-left:5px;
  68.     border-left:1px dashed #C7C7C7;
  69. }
  70.  
  71. blockquote blockquote{
  72.     padding-left:5px;
  73.     border-left:1px dashed #C7C7C7;
  74. }
  75.  
  76. /*sidebar*/
  77.  
  78. #mainbar{
  79.     position:fixed;
  80.     margin-top:300px;
  81.     width:400px;
  82.     height:150px;
  83.     background-color:white;
  84.     opacity:0.8;
  85.     -webkit-transition: all 0.5s linear;
  86.     -moz-transition: all 0.5s linear;
  87.     -o-transition: all 0.5s linear;
  88.    
  89. }
  90.  
  91. #mainbar:hover{
  92.     width:900px;
  93. }
  94.  
  95. #triangle {
  96.     margin-top:-78px;
  97.     position:fixed;
  98.     margin-left:400px;
  99.     width: 0;
  100.     height: 0;
  101.     border-top: 150px solid transparent;
  102.     border-left: 200px solid white;
  103.     border-bottom: 150px solid transparent;
  104.     -webkit-transition: all 0.5s linear;
  105.     -moz-transition: all 0.5s linear;
  106.     -o-transition: all 0.5s linear;
  107.     z-index:-1;
  108. }
  109.  
  110. #mainbar:hover #triangle{
  111.     margin-left:900px;
  112. }
  113.  
  114. /*information*/
  115.  
  116. #main{
  117.     margin-left:250px;
  118.     margin-top:65px;
  119.     width:200px;
  120.     height:50px;
  121.     text-align:center;
  122.     font-size:45px;
  123.     font-family: 'Amatic SC', cursive;
  124.     color:black;
  125.     z-index:1;
  126.     -webkit-transition: all 0.5s linear;
  127.     -moz-transition: all 0.5s linear;
  128.     -o-transition: all 0.5s linear;
  129. }
  130.  
  131. #desc{
  132.     position:fixed;
  133.     margin-top:-95px;
  134.     margin-left:525px;
  135.     width:200px;
  136.     height:110px;
  137.     font-family:Lucida Console, Monaco, monospace;
  138.     color:gray;
  139.     text-align:justify;
  140.     font-size:9px;
  141.     line-height:10px;
  142.     overflow:auto;
  143.     opacity:0;
  144.     padding-right:2px;
  145.      -webkit-transition: all 0.2s linear;
  146.     -moz-transition: all 0.2s linear;
  147.     -o-transition: all 0.2s linear;
  148.     -ms-transition: all 0.2s linear;
  149.      
  150.     z-index:1;
  151. }
  152.  
  153. #desc::-webkit-scrollbar {
  154.     width: 2px;
  155.     border-radius:4px;
  156. }
  157.  
  158.  
  159. #desc::-webkit-scrollbar-thumb:vertical {
  160.     background-color: black;
  161. }
  162.  
  163. #mainbar:hover #desc{
  164.     opacity:1;
  165.     -webkit-transition-delay:0.5s;
  166.     -moz-transition-delay:0.5s;
  167.     -o-transition-delay:0.5s;
  168. }
  169.  
  170. /*link 1*/
  171.  
  172. #link1{
  173.     position:fixed;
  174.     margin-top:-60px;
  175.     margin-left:770px;
  176.     height:50px;
  177.     width:7px;
  178.     background-color:#ffc223;
  179.     opacity:0;
  180.     -webkit-transition: all 0.2s linear;
  181.     -moz-transition: all 0.2s linear;
  182.     -o-transition: all 0.2s linear;
  183.     -ms-transition: all 0.2s linear;
  184. }
  185.  
  186. #link1triangle {
  187.     position:fixed;
  188.     margin-top:-10px;
  189.     margin-left:-6px;
  190.     width: 0;
  191.     height: 0;
  192.     border-left: 10px solid transparent;
  193.     border-right: 9px solid transparent;
  194.     border-bottom: 15px solid #ffc223;
  195.     -webkit-transition: all 0.2s linear;
  196.     -moz-transition: all 0.2s linear;
  197.     -o-transition: all 0.2s linear;
  198.     -ms-transition: all 0.2s linear;
  199. }
  200.  
  201. #mainbar:hover #link1{
  202.     opacity:1;
  203.     -webkit-transition-delay:0.5s;
  204.     -moz-transition-delay:0.5s;
  205.     -o-transition-delay:0.5s;
  206. }
  207.  
  208. #link1:hover{
  209.     margin-top:-70px;
  210.     height:60px;
  211. }
  212.  
  213. /*link 2*/
  214.  
  215. #link2{
  216.     position:fixed;
  217.     margin-top:-60px;
  218.     margin-left:790px;
  219.     height:50px;
  220.     width:7px;
  221.     background-color:#c9281b;
  222.     opacity:0;
  223.     -webkit-transition: all 0.2s linear;
  224.     -moz-transition: all 0.2s linear;
  225.     -o-transition: all 0.2s linear;
  226.     -ms-transition: all 0.2s linear;
  227. }
  228.  
  229. #link2triangle {
  230.     position:fixed;
  231.     margin-top:50px;
  232.     margin-left:-6px;
  233.     width: 0;
  234.     height: 0;
  235.     border-left: 10px solid transparent;
  236.     border-right: 9px solid transparent;
  237.     border-top: 15px solid #c9281b;
  238.     -webkit-transition: all 0.2s linear;
  239.     -moz-transition: all 0.2s linear;
  240.     -o-transition: all 0.2s linear;
  241.     -ms-transition: all 0.2s linear;
  242. }
  243.  
  244. #mainbar:hover #link2{
  245.     opacity:1;
  246.     -webkit-transition-delay:0.5s;
  247.     -moz-transition-delay:0.5s;
  248.     -o-transition-delay:0.5s;
  249. }
  250.  
  251. #link2:hover{
  252.     height:60px;
  253. }
  254.  
  255. #link2:hover #link2triangle{
  256.     margin-top:60px;
  257.     -webkit-transition-delay:0.5s;
  258.     -moz-transition-delay:0.5s;
  259.     -o-transition-delay:0.5s;
  260. }
  261.  
  262. /*link 3*/
  263.  
  264. #link3{
  265.     position:fixed;
  266.     margin-top:-60px;
  267.     margin-left:810px;
  268.     height:50px;
  269.     width:7px;
  270.     background-color:black;
  271.     opacity:0;
  272.     -webkit-transition: all 0.2s linear;
  273.     -moz-transition: all 0.2s linear;
  274.     -o-transition: all 0.2s linear;
  275.     -ms-transition: all 0.2s linear;
  276. }
  277.  
  278. #link3triangle {
  279.     position:fixed;
  280.     margin-top:-10px;
  281.     margin-left:-6px;
  282.     width: 0;
  283.     height: 0;
  284.     border-left: 10px solid transparent;
  285.     border-right: 9px solid transparent;
  286.     border-bottom: 15px solid black;
  287.     -webkit-transition: all 0.2s linear;
  288.     -moz-transition: all 0.2s linear;
  289.     -o-transition: all 0.2s linear;
  290.     -ms-transition: all 0.2s linear;
  291. }
  292.  
  293. #mainbar:hover #link3{
  294.     opacity:1;
  295.     -webkit-transition-delay:0.5s;
  296.     -moz-transition-delay:0.5s;
  297.     -o-transition-delay:0.5s;
  298. }
  299.  
  300. #link3:hover{
  301.     margin-top:-70px;
  302.     height:60px;
  303. }
  304.  
  305. /*link 4*/
  306.  
  307. #link4{
  308.     position:fixed;
  309.     margin-top:-60px;
  310.     margin-left:830px;
  311.     height:50px;
  312.     width:7px;
  313.     background-color:#c9281b;
  314.     opacity:0;
  315.     -webkit-transition: all 0.2s linear;
  316.     -moz-transition: all 0.2s linear;
  317.     -o-transition: all 0.2s linear;
  318.     -ms-transition: all 0.2s linear;
  319. }
  320.  
  321. #link4triangle {
  322.     position:fixed;
  323.     margin-top:50px;
  324.     margin-left:-6px;
  325.     width: 0;
  326.     height: 0;
  327.     border-left: 10px solid transparent;
  328.     border-right: 9px solid transparent;
  329.     border-top: 15px solid #c9281b;
  330.     -webkit-transition: all 0.2s linear;
  331.     -moz-transition: all 0.2s linear;
  332.     -o-transition: all 0.2s linear;
  333.     -ms-transition: all 0.2s linear;
  334. }
  335.  
  336. #mainbar:hover #link4{
  337.     opacity:1;
  338.     -webkit-transition-delay:0.5s;
  339.     -moz-transition-delay:0.5s;
  340.     -o-transition-delay:0.5s;
  341. }
  342.  
  343. #link4:hover{
  344.     height:60px;
  345. }
  346.  
  347. #link4:hover #link4triangle{
  348.     margin-top:60px;
  349.     -webkit-transition-delay:0.5s;
  350.     -moz-transition-delay:0.5s;
  351.     -o-transition-delay:0.5s;
  352. }
  353.  
  354. /*link 5*/
  355.  
  356. #link5{
  357.     position:fixed;
  358.     margin-top:-60px;
  359.     margin-left:850px;
  360.     height:50px;
  361.     width:7px;
  362.     background-color:#ffc223;
  363.     opacity:0;
  364.     -webkit-transition: all 0.2s linear;
  365.     -moz-transition: all 0.2s linear;
  366.     -o-transition: all 0.2s linear;
  367.     -ms-transition: all 0.2s linear;
  368. }
  369.  
  370. #link5triangle {
  371.     position:fixed;
  372.     margin-top:-10px;
  373.     margin-left:-6px;
  374.     width: 0;
  375.     height: 0;
  376.     border-left: 10px solid transparent;
  377.     border-right: 9px solid transparent;
  378.     border-bottom: 15px solid #ffc223;
  379.     -webkit-transition: all 0.2s linear;
  380.     -moz-transition: all 0.2s linear;
  381.     -o-transition: all 0.2s linear;
  382.     -ms-transition: all 0.2s linear;
  383. }
  384.  
  385. #mainbar:hover #link5{
  386.     opacity:1;
  387.     -webkit-transition-delay:0.5s;
  388.     -moz-transition-delay:0.5s;
  389.     -o-transition-delay:0.5s;
  390. }
  391.  
  392. #link5:hover{
  393.     margin-top:-70px;
  394.     height:60px;
  395. }
  396.  
  397. /*side image*/
  398.  
  399. #sideimage{
  400.     position:fixed;
  401.     margin-left:20px;
  402.     max-height:700px;
  403.     max-width:500px;
  404.     bottom:0;
  405.     z-index:1;
  406. }
  407.  
  408. </style>
  409. </head>
  410. <body>
  411.  
  412. <!--PASTE THE URL OF YOUR SIDE IMAGE BETWEEN THE QUOTES-->
  413. <img src="https://lh4.googleusercontent.com/-Q69iO4asrMA/UFe8AvH26-I/AAAAAAAAB5s/tv8NI8UCl38/s512/5809_render_render_mello_1%2520copy.png" id="sideimage">
  414.  
  415. <div id="mainbar">
  416.     <div id="triangle"></div>
  417.     <div id="main">
  418.    
  419. <!--WRITE YOUR TITLE HERE-->
  420.     About Me
  421.    
  422.     </div>
  423.    
  424.     <div id="desc">
  425.    
  426. <!--WRITE YOUR DESCRIPTION TEXT HERE-->    
  427.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  428.    
  429.     </div>
  430.  
  431. <!--DELETE THIS IF YOU DON'T WANT A LINK 1-->
  432.     <a href="http://redfox-themes.tumblr.com" title="back">
  433.     <div id="link1">
  434.         <div id="link1triangle"></div>
  435.     </div>
  436.     </a>
  437.    
  438. <!--DELETE THIS IF YOU DON'T WANT A LINK 2-->    
  439.     <a href="http://logastellus-verbivore.tumblr.com" title="main blog">
  440.     <div id="link2">
  441.         <div id="link2triangle"></div>
  442.     </div>
  443.     </a>
  444.  
  445. <!--DELETE THIS IF YOU DON'T WANT A LINK 3-->
  446.     <a href="/" title="link 3">
  447.     <div id="link3">
  448.         <div id="link3triangle"></div>
  449.     </div>
  450.     </a>
  451.    
  452. <!--DELETE THIS IF YOU DON'T WANT A LINK 4-->    
  453.     <a href="/" title="link 4">
  454.     <div id="link4">
  455.         <div id="link4triangle"></div>
  456.     </div>
  457.     </a>
  458.    
  459. <!--DELETE THIS IF YOU DON'T WANT A LINK 5-->    
  460.     <a href="/" title="link 5">
  461.     <div id="link5">
  462.         <div id="link5triangle"></div>
  463.     </div>
  464.     </a>
  465. </div>
  466.  
  467.  
  468. </body>
  469. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!