SHARE
TWEET

1 ties and rails

lenaaa Oct 13th, 2012 (edited) 19 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <head>
  2. <title>Ties and Rails</title>
  3. <link rel="shortcut icon" href="ICON LINK">
  4. </head>
  5.  
  6. <style type="text/css">
  7. body {
  8. margin: 0px
  9. padding: 0;
  10. background: #000;}
  11.  
  12. #content {
  13. width: 800px;}
  14.  
  15. #main {
  16. font:  12px/15px arial ;
  17. color: #000000;
  18. background-color: #fff;
  19. width: 790px;
  20. height: 400px;
  21. overflow: scroll;
  22. position: absolute;
  23. padding:5px;
  24. margin-left: 111px;}
  25.  
  26. h1 {
  27. font:  italic normal 11px/15px trebuchet ms;   
  28. color: #000000;
  29. text-decoration: none;
  30. text-transform: uppercase;
  31. text-align: center;
  32. border-bottom: 5px solid #eaeaea;
  33. border-top:1px solid#eaeaea;
  34. margin: 7px ;
  35. letter-spacing: 3px;
  36. background-color: #efefef;}
  37.  
  38. h2 {
  39. font-family:palatino linotype;
  40. font-size: 9.5px;
  41. color: #85583C;
  42. border-left: 15px solid #85583C;
  43. border-right: 5px solid #85583C;
  44. text-transform: uppercase;
  45. padding: 1px;
  46. margin-bottom: 5px;
  47. text-align: right;
  48. background: #;
  49. letter-spacing: 2px;}
  50.  
  51. #header {
  52. background: url(http://i891.photobucket.com/albums/ac116/Poplar_13/domain%20layouts/Untitled-1.png) no-repeat;
  53. padding:0;
  54. margin-top: 0px;
  55. margin-left: 111px;
  56. height : 200px;
  57. width : 800px;}
  58.  
  59. #background {
  60. background:#fff;
  61. margin-top:-300px;
  62. margin-left:-300px;
  63. position:fixed;
  64. z-index: -1;
  65. height : 300px;
  66. width : 10000px;}
  67.  
  68. #main a, a:link, a:visited {
  69. font: 12px arial;
  70. color: #000;
  71. text-decoration: none;
  72. text-transform: lowercase;
  73. background: none;
  74. letter-spacing: 0px;}
  75.  
  76. #main a:hover {
  77. font:10px trebuchet ms;
  78. color: #C0B458;
  79. text-decoration: none;
  80. text-transform: lowercase;
  81. letter-spacing: 0px;}
  82.  
  83. b {
  84. color: #B85744;
  85. letter-spacing: 0px;
  86. font-weight: bold;
  87. font-family: georgia;}
  88.  
  89. i
  90. {font-style: italic;
  91. font-family: georgia;
  92. color: #AFDBD2;
  93. letter-spacing: 2px;}
  94.  
  95. u {
  96. color:#B88954;
  97. letter-spacing: 1px;}
  98.  
  99. s {
  100. color: #573F2E;
  101. text-decoration: line-through;}
  102.  
  103. blockquote{
  104. font: italic 10px/15px arial ;
  105. padding: 5px;
  106. width:500px;
  107. color: fff;
  108. background-color: #5d5d5d;
  109. letter-spacing:2px;
  110. font-weight:normal;}
  111.  
  112. a img, a:active img, menulink a:visited img { opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); }
  113. a:hover img { opacity: 1.0; -moz-opacity: 1.0; filter: alpha(opacity=100); }
  114.  
  115. .change_position {
  116. text-decoration: none;
  117. padding: 5px 0px  2px  5px ;
  118. font-family: 'Helvetica';
  119. font-size: 15px;
  120. font-weight: italic;
  121. text-align:center;
  122. text-transform: uppercase;
  123. margin-left:-112px;
  124. margin-bottom: 5px;
  125. letter-spacing: 1px;
  126. width:200px;
  127. height:20px;
  128. weight:italic;
  129. background: #fff;
  130. -webkit-transition: all 0.3s ease-in-out;
  131. -moz-transition:all 0.3s ease-in-out;
  132. -o-transition: all 0.3s ease-in-out;
  133. -ms-transition: all 0.3s ease-in-out;
  134. transition:all 0.3s ease-in-out;}
  135.  
  136. .change_position:hover {
  137. margin-left: -25px;
  138. color:#fff;
  139. background: #000;
  140.  -webkit-transform: translate(20px,0px);
  141.  -moz-transform: translate(20px,0px);
  142.  -o-transform: translate(20px,0px);
  143.  -ms-transform: translate(20px,0px);
  144. }
  145.  
  146.  
  147.  
  148. </style>
  149. </head>
  150. <body>
  151.  
  152.  
  153.  
  154. <div id="header">
  155. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">link</div> </a>
  156. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">link</div> </a>
  157. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">link</div> </a>
  158. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">link</div> </a>
  159. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">link</div> </a>
  160. <a  href="http://onyxhotel.three-words.net/" ><div class="change_position">Credit</div> </a>
  161.  </div>
  162. <div id="background"></div>
  163.  
  164.  
  165. <div id="content">
  166. <div id="main">
  167. <h1>ties and rails, ties and rails.</h1>
  168. This is your text! This layout that <i>floats</I> and <b>scrolls</b>. The height is 400px, but it can be changed.
  169. <h2> Header 2</h2>
  170. <b>bold </b><i>italic </i><u>underline</u> <s>strikethrough</s> <a href="http:///url">link</a><br>
  171. You can edit and tweak the code, or change the header. You may also change the size of header and change the size of everything else.
  172.  
  173. <blockquote>
  174. This is what the blockquote looks like
  175. <li>Please keep credit on.</li>
  176. <li>Do no steal code/header</li>
  177. </blockquote>
  178.  
  179. </div>
  180. </body>
  181. </html>
RAW Paste Data
Top