stylesheet

Pale

Jun 1st, 2016
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.99 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <!--
  5.  
  6. ==============================================
  7.  
  8. Coded by Monica T.
  9. http://monicagalaxy.info/
  10. Theme: "Pale"
  11. Updated: June 1, 2016
  12. DO NOT REMOVE CREDITS
  13.  
  14. ==============================================
  15.  
  16. -->
  17. <meta charset="UFT-8">
  18. <title>pale layout | by monica t '16</title>
  19. </head>
  20.  
  21. <style type="text/css">
  22.  
  23. body {
  24. background-color: #f1f2f2;
  25. font-size: 10px;
  26. color: #1C140D;
  27. line-height: 17px;
  28. font-family: verdana;
  29. text-align: left;
  30. letter-spacing: -0.5px;
  31. }
  32.  
  33.  
  34. .content {
  35. width: 600px;
  36. overflow: auto;
  37. height: 440px;
  38. background-color: #fff;
  39. padding: 20px;
  40. text-align: left;
  41. }
  42.  
  43. .box1 {
  44.  
  45. width: 600px;
  46. height: auto;
  47. padding-top: 5px;
  48. padding-left: 20px;
  49. padding-right: 20px;
  50. background-color: #fff;
  51. text-align: left;
  52. z-index: 10;
  53. }
  54.  
  55. .title {
  56. text-align: left;
  57. top: 60px;
  58. width: 600px;
  59. font: 45px helvetica;
  60. letter-spacing: 1px;
  61. background-color: #d1d2d4;
  62. color: #636563;
  63. padding: 20px;
  64. margin-top: 45px;
  65.  
  66. }
  67.  
  68. #footer {
  69. text-align: right;
  70. width: 600px;
  71. }
  72.  
  73. h1 {
  74. font-family: helvetica;
  75. background-color: #D6E3B5;
  76. color: #636563;
  77. letter-spacing: 0px;
  78. font-size: 11px;
  79. text-align: left;
  80. border-bottom: 5px solid #fff;
  81. border-right: none;
  82. border-left: 5px solid #D6E3B5;
  83. letter-spacing: 2px;
  84. padding: 2px;
  85. }
  86. h2 {
  87. font-family: helvetica;
  88. background-color: #FAE5D7;
  89. color: #636563;
  90. letter-spacing: 0px;
  91. font-size: 11px;
  92. text-align: left;
  93. border-bottom: 5px solid #fff;
  94. border-right: none;
  95. border-left: 5px solid #FAE5D7;
  96. letter-spacing: 2px;
  97. padding: 2px;
  98. }
  99.  
  100. table{
  101. font-size:100%;
  102. color: #666;
  103. }
  104.  
  105. td.menu{
  106. background-color:#f1f2f2;
  107. width: 30%;
  108. }
  109.  
  110. table.menu
  111. {
  112. font-size:100%;
  113. position:absolute;
  114. visibility:hidden;
  115. color: #777;
  116. }
  117.  
  118.  
  119. a:link, a:visited {
  120. color: #777;
  121. text-decoration: none;
  122. }
  123. a:hover {
  124. color: #636563;
  125. text-decoration: none;
  126. }
  127.  
  128. a.nav, a.nav:active, a.nav:link, a.nav:visited {
  129. color: #666;
  130. border-bottom: 1px dotted #666;
  131. text-transform: none;
  132. }
  133. a.nav:hover {
  134. text-decoration: none;
  135. text-transform: none;
  136. }
  137.  
  138. </style>
  139.  
  140. <script>
  141.  
  142. function showmenu(elmnt)
  143. {
  144. document.getElementById(elmnt).style.visibility="visible";
  145. }
  146. function hidemenu(elmnt)
  147. {
  148. document.getElementById(elmnt).style.visibility="hidden";
  149. }
  150. </script>
  151. <center>
  152.  
  153. <div class="title"><b>pale</b> layout</div>
  154.  
  155. <div class="box1">
  156. <table width="100%">
  157. <tr bgcolor="#fff">
  158. <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
  159. <a href="/">link one</a><br>
  160. <table class="menu" id="tutorials" width="120">
  161. <tr><td class="menu"><a href="#">link</a></td></tr>
  162. <tr><td class="menu"><a href="#">link</a></td></tr>
  163. <tr><td class="menu"><a href="#">link</a></td></tr>
  164. </table>
  165. </td>
  166. <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
  167. <a href="/">link two</a><br>
  168. <table class="menu" id="scripting" width="120">
  169. <tr><td class="menu"><a href="#">link</a></td></tr>
  170. <tr><td class="menu"><a href="#">link</a></td></tr>
  171. <tr><td class="menu"><a href="#">link</a></td></tr>
  172. </table>
  173. </td>
  174. <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
  175. <a href="/">link three</a><br>
  176. <table class="menu" id="validation" width="120">
  177. <tr><td class="menu"><a href="#">link</a></td></tr>
  178. <tr><td class="menu"><a href="#">link</a></td></tr>
  179. <tr><td class="menu"><a href="#">link</a></td></tr>
  180.  
  181. </table>
  182. </td>
  183. </tr>
  184. </table>
  185. </div>
  186.  
  187.  
  188. <div class="content">
  189. <h1>header one</h1>
  190. <b>bold</b> <i>italics</i> <a href="/" class="nav">link</a><br> This is a premade template by <a href="http://monicagalaxy.info" class="nav">monica</a> (merging on IG) that can be altered in terms of the css, colours, etc. Do not remove footer credit. The drop-down menu works only for Chrome or similar browsers. For IE users, you may need to edit the "box1" div.<br><br>
  191.  
  192. <p>Lorem ipsum dolor sit amet, ferri singulis molestiae mel te. Ne pro semper prompta. Aperiam alterum molestiae pro in, congue nusquam posidonium vis at. Vim id periculis definitionem, vim ne equidem interpretaris. At vel malorum consulatu referrentur, hinc maiorum intellegebat eu has, eum purto adolescens vituperata in. Ius cu aeque quando efficiendi, ne est odio liber ridens, pericula explicari duo ei. Appetere theophrastus no vis, an conceptam expetendis has, id mei quem mundi mnesarchum. Vel cu iusto essent vocent, at causae dignissim mei.</p>
  193.  
  194. <h2>header two</h2>
  195. <p>Cu duo libris iuvaret posidonium, purto justo vivendum per ex. Illum vivendum an pro, eos at nullam quodsi animal. Modo ignota denique no est, sed ea unum populo. At fugit vivendo qui, eum dicta feugait philosophia no, at sea quaerendum intellegebat. Detracto moderatius mediocritatem his an, ad has vidit eripuit sanctus. Ad nam lobortis oportere, principes elaboraret eos et, aliquid efficiantur ad usu. Eam admodum epicuri ex. Nam agam viderer ei, fugit percipitur at qui. Et est feugait omittam consectetuer. Velit error mandamus at nam, nam ex animal repudiare. Cum at graeci denique. Modus munere tractatos te quo, per diam volumus no, an dicunt facilisi mea. Ea eum dico vivendum suscipiantur, vivendum hendrerit disputationi eu duo, pri te ubique disputando. Vel libris verear adipiscing ea. Per ex petentium sadipscing.</p>
  196.  
  197. <p> Ad nam lobortis oportere, principes elaboraret eos et, aliquid efficiantur ad usu. Eam admodum epicuri ex. Nam agam viderer ei, fugit percipitur at qui. Et est feugait omittam consectetuer. Velit error mandamus at nam, nam ex animal repudiare. Cum at graeci denique. Modus munere tractatos te quo, per diam volumus no, an dicunt facilisi mea. </p>
  198. </div>
  199.  
  200. <div id="footer"><a href="http://monicagalaxy.info" class="nav">css by monica</a></div>
  201. </body>
  202. </center>
  203. </html>
Add Comment
Please, Sign In to add comment