css_practice_2.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lists, Tables and Forms</title>
  5. <style>
  6. .books>li {
  7. list-style-image: url(images/icon-plus.png);
  8. }
  9. .schedule {
  10. border-spacing: 0;
  11. }
  12. .header {
  13. background-color: rgb(126, 164, 204);
  14. }
  15. .header>th:first-child {
  16. border-top-left-radius: 5px;
  17. }
  18. .header>th:last-child {
  19. border-top-right-radius: 5px;
  20. }
  21. .schedule td, .schedule th {
  22. border: 1px solid lightgray;
  23. }
  24. .header th {
  25. border-bottom: 2px solid rgb(68, 104, 142);
  26. }
  27. label {
  28. display: inline-block;
  29. width: 160px;
  30. text-align: right;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <h1>Poetry Workshops</h1>
  36. <p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p>
  37. <p>Please note that the following events are free to members:</p>
  38. <ul class="books">
  39. <li>A Poetic Perspective</li>
  40. <li>Walt Whitman at War</li>
  41. <li>Found Poems and Outsider Poetry</li>
  42. </ul>
  43. <table class="schedule">
  44. <tr class="header">
  45. <th></th>
  46. <th>New York</th>
  47. <th>Chicago</th>
  48. <th>San Francisco</th>
  49. </tr>
  50. <tr class="odd">
  51. <th>A Poetic Perspective</th>
  52. <td>Sat, 4 Feb 2012<br />11am - 2pm</td>
  53. <td>Sat, 3 Mar 2012<br />11am - 2pm</td>
  54. <td>Sat, 17 Mar 2012<br />11am - 2pm</td>
  55. </tr>
  56. <tr class="even">
  57. <th>Walt Whitman at War</th>
  58. <td>Sat, 7 Apr 2012<br />11am - 1pm</td>
  59. <td>Sat, 5 May 2012<br />11am - 1pm</td>
  60. <td>Sat, 19 May 2012<br />11am - 1pm</td>
  61. </tr>
  62. <tr class="odd">
  63. <th>Found Poems &amp; Outsider Poetry</th>
  64. <td>Sat, 9 Jun 2012<br />11am - 2pm</td>
  65. <td>Sat, 7 Jul 2012<br />11am - 2pm</td>
  66. <td>Sat, 21 Jul 2012<br />11am - 2pm</td>
  67. </tr>
  68. <tr class="even">
  69. <th>Natural Death: An Exploration</th>
  70. <td>Sat, 4 Aug 2012<br />11am - 4pm</td>
  71. <td>Sat, 8 Sep 2012<br />11am - 4pm</td>
  72. <td>Sat, 15 Sep 2012<br />11am - 4pm</td>
  73. </tr>
  74. </table>
  75. <form action="" method="post">
  76. <fieldset>
  77. <legend>Register your interest</legend>
  78. <p>
  79. <label for="name">Your name:</label>
  80. <input type="text" name="name" id="name"><br>
  81. <label for="email">Your email:</label>
  82. <input type="text" name="email" id="email">
  83. </p>
  84. <p>
  85. <label for="location">Your closest center:</label>
  86. <select name="location" id="location">
  87. <option value="ny">New York</option>
  88. <option value="il">Chicago</option>
  89. <option value="ca">San Francisco</option>
  90. </select>
  91. </p>
  92. <label>Are you a member?</label>
  93. <input type="radio" name="member" value="yes"> Yes
  94. <input type="radio" name="member" value="no"> No
  95. </fieldset>
  96. <div>
  97. <input type="submit" value="Register" />
  98. </div>
  99. </form>
  100. </body>
  101. </html>