Guest User

web sight

a guest
Dec 16th, 2015
150
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.63 KB | None | 0 0
  1. /* Universal selector. Giving all elements an initial 5 pixel padding and no margin */
  2. * {
  3. padding: 5px;
  4. margin: 0;
  5. }
  6. /* body selector. Setting the font family to Arial (hopefully), in the normal style and
  7. at the default size. Also setting the background colour of the whole page to white */
  8. body {
  9. font-family: Arial, Verdana, sans-serif;
  10. font-style: normal;
  11. font-size: 100%;
  12. background-color: white;
  13. }
  14. /* Selecting the 'container' division. Setting a centralised fixed-width layout for all
  15. elements within the 'container' */
  16. #container {
  17. margin: 0 auto;
  18. width: 100%
  19. }
  20. /* Selecting the 'container' and setting a solid black border */
  21.  
  22. /* Selecting the header, 'main_body' and the footer. Giving each of these elements a
  23. light blue background colour */
  24. header, #main_body, footer {
  25. background-color: black;
  26. }
  27. /* header selector. Setting it to have a minimum height of 40 pixels and a bottom margin
  28. of 5 pixels in order to put some space between it and the 'main_body' */
  29. header {
  30. min-height: 40px;
  31. position: middle;
  32. margin-bottom: 5px;
  33. width:100%;
  34. }
  35. /* Selecting 'main_body' division. Setting it to have a minimum height of 200 pixels and
  36. a bottom margin of 5 pixels in order to put some space between it and the 'main_body' */
  37. #main_body {
  38. min-height: 200px;
  39. margin-bottom: 5px;
  40. background-image: url('power_on_-_texture.jpg');
  41. }
  42. /* footer selector. Setting it to have a minimum height of 20 pixels */
  43. footer {
  44. min-height: 20px;
  45. }
  46. header h1 {
  47. color: white;
  48. font-size: 24pt;
  49. display: inline-block;
  50. vertical-align: middle;
  51. opacity: 0.5;
  52. }
  53. header img {
  54. height: 40px;
  55. vertical-align: middle;
  56. }
  57. #main_body h2 {
  58. color: white;
  59. font-size: 18pt;
  60. }
  61. #main_body p {
  62. color: white;
  63. font-size: 12pt;
  64. }
  65. footer ul {
  66. text-align: center;
  67. }
  68. footer ul li {
  69. list-style-type: none;
  70. display: inline;
  71. font-size: 10pt;
  72. color: white;
  73. }
  74. #left_col, #right_col {
  75. width: 475px;
  76. padding: 0;
  77. float: left;
  78. }
  79. .keep_clear {
  80. clear: both;
  81. }
  82. .headerRight {
  83. padding: 0;
  84. float: right;
  85. }
  86. .headerFloatRight {
  87. float: right;
  88. }
  89. .headerFloatLeft {
  90. float: left;
  91. }
  92. /* Following from w3schools: http://www.w3schools.com/css/css_image_transparency.asp */
  93. div.background {
  94. width: 500px;
  95. height: 250px;
  96. background: url('Circuit.png') repeat;
  97. border: 2px solid black;
  98. }
  99. div.transbox {
  100. width: 400px;
  101. height: 180px;
  102. margin: 30px 50px;
  103. background-color: #000000;
  104. border: 1px solid black;
  105. opacity: 0.6;
  106. filter: alpha(opacity=60); /* For IE8 and earlier */
  107. }
  108. div.transbox p {
  109. margin: 30px 40px;
  110. font-weight: bold;
  111. color: #000000;
  112. }
  113. /* Above from w3schools: http://www.w3schools.com/css/css_image_transparency.asp */
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132.  
  133.  
  134.  
  135.  
  136.  
  137. //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  138.  
  139.  
  140. <!DOCTYPE html>
  141. <html>
  142. <head>
  143. <!-- This is a comment tag -->
  144. <meta charset="UTF-8" />
  145. <title>Lecture 4</title>
  146. <link rel="stylesheet" href="ok.css" type="text/css" media="screen,projection" />
  147. </head>
  148. <body>
  149. <div id="container">
  150. <header>
  151. <img src="logo.jpg" alt="company logo" /><h1>Mega Computers</h1><img src="twitter.png" alt="company logo" float = right/><img src="facebook.png" alt="company logo" float = right/><img src="flickr.png" alt="company logo" float = right />
  152. </header>
  153. <div id="main_body">
  154.  
  155.  
  156. </div>
  157. <footer>
  158. <ul>
  159. <li>&copy; Alec Brice-Bateman 2015</li>
  160. <li>Contact Me</li>
  161. <li>Legal Information</li>
  162. </ul>
  163. </footer>
  164. </div>
  165. </body>
  166. </html>
Advertisement
Add Comment
Please, Sign In to add comment