css_practice_1.result.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Boxes</title>
  5. <style type="text/css">
  6. body {
  7. font-size: 80%;
  8. font-family: "Courier New", Courier, monospace;
  9. letter-spacing: 0.15em;
  10. background-color: #efefef;
  11. }
  12. #page {
  13. max-width: 940px;
  14. min-width: 720px;
  15. margin: 10px auto 10px auto;
  16. padding: 20px;
  17. border: 4px double #000;
  18. background-color: #ffffff;
  19. }
  20. #logo {
  21. width: 150px;
  22. margin: 10px auto 25px auto;
  23. }
  24. ul {
  25. width: 570px;
  26. padding: 15px;
  27. margin: 0px auto 0px auto;
  28. border-top: 2px solid #000;
  29. border-bottom: 1px solid #000;
  30. text-align: center;
  31. }
  32. li {
  33. display: inline;
  34. margin: 0px 3px;
  35. }
  36. p {
  37. text-align: center;
  38. width: 600px;
  39. margin: 20px auto 20px auto;
  40. font-weight: normal;
  41. }
  42. a {
  43. color: #000000;
  44. text-transform: uppercase;
  45. text-decoration: none;
  46. padding: 6px 18px 5px 18px;
  47. }
  48. a:hover, a.on {
  49. color: #cc3333;
  50. background-color: #ffffff;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div id="page">
  56. <div id="logo">
  57. <img src="images/logo.gif" alt="The Analog Specialists" />
  58. </div>
  59. <ul id="navigation">
  60. <li><a href="#" class="on">Home</a></li>
  61. <li><a href="#">For Sale</a></li>
  62. <li><a href="#">Repairs</a></li>
  63. <li><a href="#">About</a></li>
  64. <li><a href="#">Contact</a></li>
  65. </ul>
  66. <p>
  67. <img src="images/keys.jpg" alt="Fender Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
  68. </p>
  69. <p>
  70. We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
  71. </p>
  72. </div>
  73. </body>
  74. </html>