View difference between Paste ID: qVnjR5NS and
SHOW:
|
|
- or go back to the newest paste.
| 1 | HTML code: | |
| 2 | ||
| 3 | <html> | |
| 4 | <head> | |
| 5 | <!-- | |
| 6 | New Perspectives on HTML and XHTML | |
| 7 | Tutorial 5 | |
| 8 | Case Problem 2 | |
| 9 | ||
| 10 | February at the Chamberlain Civic Center | |
| 11 | Author: jason summers | |
| 12 | Date: 10-13-11 | |
| 13 | ||
| 14 | ||
| 15 | Filename: feb.htm | |
| 16 | Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg, calendar.css, | |
| 17 | ccc.css, ccc.jpg, left.jpg, right.jpg, tab.jpg, top.jpg, | |
| 18 | topleft.jpg, topright.jpg | |
| 19 | ||
| 20 | ||
| 21 | Sorry for the bad spacing | |
| 22 | --> | |
| 23 | ||
| 24 | <link href="ccc.css" rel="stylesheet" type ="text/css" /> | |
| 25 | <link href="calender.css" rel="stylesheet" type ="text/css" /> | |
| 26 | ||
| 27 | <title>February at the Chamberlain Civic Center</title> | |
| 28 | ||
| 29 | </head> | |
| 30 | ||
| 31 | ||
| 32 | <body> | |
| 33 | <div id="heading"> | |
| 34 | <img src="ccc.jpg" alt="The Chamberlain Civic Center" /> | |
| 35 | <ul> | |
| 36 | <li><a href="#">Home</a></li> | |
| 37 | <li><a href="#">Events</a></li> | |
| 38 | <li><a href="#">Box Office</a></li> | |
| 39 | <li><a href="#">Facilities</a></li> | |
| 40 | <li><a href="#">Directions</a></li> | |
| 41 | <li><a href="#">Contact Us</a></li> | |
| 42 | </ul> | |
| 43 | </div> | |
| 44 | ||
| 45 | ||
| 46 | <div id="leftColumn"> | |
| 47 | <h2>Coming in February</h2> | |
| 48 | <p>February will be another banner month at the Chamberlain Civic | |
| 49 | Center with a two day performance of the Tony Award winning | |
| 50 | musical, <i>West Side Story</i> by the Broadway Touring Company. | |
| 51 | Tickets are going fast, so order yours today.</p> | |
| 52 | ||
| 53 | <p>Celebrate Valentine's Day with the Chamberlain Symphony and | |
| 54 | their special selection of classical music for lovers. The next | |
| 55 | day, exercise your mind by attending the Charles Dickens classic, | |
| 56 | <i>The Mystery of Edwin Drood</i>.</p> | |
| 57 | ||
| 58 | <p>Jazz lovers have a lot to celebrate in February with a visit | |
| 59 | from the <i>Jazz Masters</i> on February 10th, and then on February | |
| 60 | 21st, enjoy the music of The Duke with an <i>Ellington Tribute</i> | |
| 61 | performed by the Jazz Company of Kansas City.</p> | |
| 62 | ||
| 63 | <p>Pins, bottles, plates, and chairs are flying at the Chamberlain | |
| 64 | Civic Center in February. The <i>Taiwan Acrobats</i> return with | |
| 65 | another amazing performance. Then, on February 25th, the <i>Madtown | |
| 66 | Jugglers</i> get into the act with their unique blend of comedy, | |
| 67 | juggling, and madness.</p> | |
| 68 | ||
| 69 | <p>Enjoy a classical brunch every Sunday in February with music | |
| 70 | provided by the <i>Carson Quartet</i>. Seating is limited, so please order | |
| 71 | your table in advance.</p> | |
| 72 | </div> | |
| 73 | ||
| 74 | <div id="rightColumn"> | |
| 75 | ||
| 76 | <div class="bborder"> | |
| 77 | <div class="tborder"> | |
| 78 | ||
| 79 | <div class="lborder"> | |
| 80 | <div class="rborder"> | |
| 81 | ||
| 82 | <div class="tlcorner"> | |
| 83 | <div class="trcorner"> | |
| 84 | <div class="blcorner"> | |
| 85 | <div class="brcorner"> | |
| 86 | ||
| 87 | <div class="boxContent"> | |
| 88 | ||
| 89 | ||
| 90 | ||
| 91 | ||
| 92 | ||
| 93 | <table class="calender"> | |
| 94 | <caption>Events in Febuaray at the CCC</caption> | |
| 95 | ||
| 96 | ||
| 97 | ||
| 98 | ||
| 99 | ||
| 100 | <colgroup> | |
| 101 | ||
| 102 | <col class="weekdays" span="5" /> | |
| 103 | ||
| 104 | <col class="weekends" span="2" /> | |
| 105 | ||
| 106 | ||
| 107 | </colgroup> | |
| 108 | ||
| 109 | ||
| 110 | ||
| 111 | <thead> | |
| 112 | <tr> | |
| 113 | ||
| 114 | <th>Sun</th> | |
| 115 | ||
| 116 | <th>Mon</th> | |
| 117 | ||
| 118 | <th>Tue</th> | |
| 119 | ||
| 120 | <th>Wed</th> | |
| 121 | ||
| 122 | <th>Thu</th> | |
| 123 | ||
| 124 | <th>Fri</th> | |
| 125 | ||
| 126 | <th>Sat</th> | |
| 127 | ||
| 128 | </tr> | |
| 129 | ||
| 130 | </thead> | |
| 131 | <tbody> | |
| 132 | ||
| 133 | <tr> | |
| 134 | ||
| 135 | ||
| 136 | <td><h3>26</h3></td> | |
| 137 | ||
| 138 | <td><h3>27</h3></td> | |
| 139 | ||
| 140 | <td><h3>28</h3></td> | |
| 141 | ||
| 142 | <td><h3>29</h3></td> | |
| 143 | ||
| 144 | <td><h3>30</h3></td> | |
| 145 | ||
| 146 | <td><h3>31</h3></td> | |
| 147 | ||
| 148 | <td><h3>1</h3> | |
| 149 | ||
| 150 | ||
| 151 | <dl> | |
| 152 | ||
| 153 | <dt>Tawain Elements</dt> | |
| 154 | ||
| 155 | <dd>8pm</dd> | |
| 156 | ||
| 157 | <dd>$16,$24,$36</dd> | |
| 158 | ||
| 159 | </dl> | |
| 160 | ||
| 161 | ||
| 162 | </td> | |
| 163 | ||
| 164 | </tr> | |
| 165 | ||
| 166 | ||
| 167 | <tr> | |
| 168 | ||
| 169 | <td><h3>2</h3> | |
| 170 | ||
| 171 | <dl> | |
| 172 | ||
| 173 | ||
| 174 | <dt>Carson Quartet</dt> | |
| 175 | ||
| 176 | <dd>1pm</dd> | |
| 177 | ||
| 178 | <dd>$8</dd> | |
| 179 | ||
| 180 | </dl> | |
| 181 | ||
| 182 | </td> | |
| 183 | ||
| 184 | ||
| 185 | <td><h3>3</h3></td> | |
| 186 | ||
| 187 | <td><h3>4</h3></td> | |
| 188 | ||
| 189 | <td><h3>5</h3> | |
| 190 | ||
| 191 | ||
| 192 | <dl> | |
| 193 | ||
| 194 | <dt>Joey Gallway</dt> | |
| 195 | ||
| 196 | <dd>8pm</dd> | |
| 197 | ||
| 198 | <dd>$16,$24,$36</dd> | |
| 199 | ||
| 200 | </dl> | |
| 201 | ||
| 202 | </td> | |
| 203 | ||
| 204 | ||
| 205 | <td><h3>6</h3></td> | |
| 206 | ||
| 207 | ||
| 208 | <td><h3>7</h3> | |
| 209 | ||
| 210 | ||
| 211 | <dl> | |
| 212 | ||
| 213 | ||
| 214 | <dt>West Side Story</dt> | |
| 215 | ||
| 216 | <dd>7pm</dd> | |
| 217 | ||
| 218 | <dd>$24,$36,$64</dd> | |
| 219 | ||
| 220 | </dl> | |
| 221 | ||
| 222 | </td> | |
| 223 | ||
| 224 | ||
| 225 | <td> | |
| 226 | ||
| 227 | <h3>8</h3> | |
| 228 | ||
| 229 | ||
| 230 | <dl> | |
| 231 | ||
| 232 | <dt>West Side Story</dt> | |
| 233 | ||
| 234 | <dd>7pm</dd> | |
| 235 | ||
| 236 | <dd>$24,$36,$64</dd> | |
| 237 | ||
| 238 | </dl> | |
| 239 | ||
| 240 | </td> | |
| 241 | ||
| 242 | ||
| 243 | </tr> | |
| 244 | ||
| 245 | ||
| 246 | <tr> | |
| 247 | ||
| 248 | ||
| 249 | ||
| 250 | <td><h3>9</h3> | |
| 251 | <dl> | |
| 252 | ||
| 253 | <dt>Carson Quartet</dt> | |
| 254 | ||
| 255 | <dd>1pm</dd> | |
| 256 | ||
| 257 | <dd>$8</dd> | |
| 258 | ||
| 259 | </dl> | |
| 260 | </td> | |
| 261 | ||
| 262 | ||
| 263 | <td><h3>10</h3> | |
| 264 | <dl> | |
| 265 | ||
| 266 | <dt>Jazz Masters</dt> | |
| 267 | ||
| 268 | <dd>8pm</dd> | |
| 269 | ||
| 270 | <dd>$18,$24,$32</dd> | |
| 271 | ||
| 272 | </dl> | |
| 273 | ||
| 274 | </td> | |
| 275 | ||
| 276 | ||
| 277 | <td><h3>11</h3> | |
| 278 | </td> | |
| 279 | ||
| 280 | <td><h3>12</h3> | |
| 281 | </td> | |
| 282 | ||
| 283 | ||
| 284 | <td><h3>13</h3> | |
| 285 | ||
| 286 | <dl> | |
| 287 | ||
| 288 | <dt>Harlem Choir</dt> | |
| 289 | ||
| 290 | <dd>8pm</dd> | |
| 291 | ||
| 292 | <dd>$18,$24,$32</dd> | |
| 293 | ||
| 294 | </dl> | |
| 295 | ||
| 296 | </td> | |
| 297 | ||
| 298 | ||
| 299 | <td><h3>14</h3> | |
| 300 | <dl> | |
| 301 | ||
| 302 | <dt>Chamberlain Symphony</dt> | |
| 303 | ||
| 304 | <dd>8pm</dd> | |
| 305 | ||
| 306 | <dd>$18,$24,$32</dd> | |
| 307 | ||
| 308 | </dl> | |
| 309 | ||
| 310 | </td> | |
| 311 | ||
| 312 | ||
| 313 | <td><h3>15</h3> | |
| 314 | ||
| 315 | <dl> | |
| 316 | ||
| 317 | <dt>Edwin Drood</dt> | |
| 318 | ||
| 319 | <dd>8pm</dd> | |
| 320 | ||
| 321 | <dd>$24,$36,$44</dd> | |
| 322 | ||
| 323 | </dl> | |
| 324 | ||
| 325 | </td> | |
| 326 | ||
| 327 | </tr> | |
| 328 | ||
| 329 | ||
| 330 | <tr> | |
| 331 | ||
| 332 | ||
| 333 | ||
| 334 | <td><h3>16</h3> | |
| 335 | ||
| 336 | <dl> | |
| 337 | ||
| 338 | <dt>Carson Quartet</dt> | |
| 339 | ||
| 340 | <dd>1pm</dd> | |
| 341 | ||
| 342 | <dd>$8</dd> | |
| 343 | ||
| 344 | </dl> | |
| 345 | ||
| 346 | </td> | |
| 347 | ||
| 348 | ||
| 349 | <td><h3>17</h3></td> | |
| 350 | ||
| 351 | <td><h3>18</h3></td> | |
| 352 | ||
| 353 | ||
| 354 | <td><h3>19</h3> | |
| 355 | ||
| 356 | <dl> | |
| 357 | ||
| 358 | <dt>The Yearling</dt> | |
| 359 | ||
| 360 | <dd>7pm</dd> | |
| 361 | ||
| 362 | <dd>$8,$14,$18</dd> | |
| 363 | ||
| 364 | </dl> | |
| 365 | </td> | |
| 366 | ||
| 367 | <td><h3>20</h3> | |
| 368 | </td> | |
| 369 | ||
| 370 | ||
| 371 | <td><h3>21</h3> | |
| 372 | ||
| 373 | <dl> | |
| 374 | ||
| 375 | <dt>An Ellington Tribute</dt> | |
| 376 | ||
| 377 | <dd>8pm</dd> | |
| 378 | ||
| 379 | <dd>$24,$32,$48</dd> | |
| 380 | ||
| 381 | </dl> | |
| 382 | </td> | |
| 383 | ||
| 384 | <td><h3>22</h3> | |
| 385 | ||
| 386 | ||
| 387 | <dl> | |
| 388 | ||
| 389 | <dt>Othello</dt> | |
| 390 | ||
| 391 | <dd>8pm</dd> | |
| 392 | ||
| 393 | <dd>$18,$28,$42</dd> | |
| 394 | ||
| 395 | </dl> | |
| 396 | ||
| 397 | </td> | |
| 398 | ||
| 399 | </tr> | |
| 400 | ||
| 401 | ||
| 402 | <tr> | |
| 403 | ||
| 404 | ||
| 405 | <td><h3>23</h3> | |
| 406 | ||
| 407 | <dl> | |
| 408 | ||
| 409 | <dt>Carson Quartet</dt> | |
| 410 | ||
| 411 | <dd>1pm</dd> | |
| 412 | ||
| 413 | <dd>$8</dd> | |
| 414 | ||
| 415 | </dl> | |
| 416 | ||
| 417 | </td> | |
| 418 | ||
| 419 | ||
| 420 | <td><h3>24</h3></td> | |
| 421 | ||
| 422 | ||
| 423 | <td><h3>25</h3> | |
| 424 | ||
| 425 | <dl> | |
| 426 | ||
| 427 | <dt>Madtown Jugglers</dt> | |
| 428 | ||
| 429 | <dd>8pm</dd> | |
| 430 | ||
| 431 | <dd>$12,$16,$20</dd> | |
| 432 | ||
| 433 | </dl> | |
| 434 | </td> | |
| 435 | ||
| 436 | ||
| 437 | <td><h3>26</h3></td> | |
| 438 | ||
| 439 | <td><h3>27</h3></td> | |
| 440 | ||
| 441 | ||
| 442 | <td><h3>28</h3> | |
| 443 | ||
| 444 | <dl> | |
| 445 | ||
| 446 | <dt>Ralph Williams</dt> | |
| 447 | ||
| 448 | <dd>8pm</dd> | |
| 449 | ||
| 450 | <dd>$32,$48,$64</dd> | |
| 451 | ||
| 452 | </dl> | |
| 453 | ||
| 454 | </td> | |
| 455 | ||
| 456 | ||
| 457 | <td><h3>1</h3> | |
| 458 | </td> | |
| 459 | ||
| 460 | </tr> | |
| 461 | ||
| 462 | ||
| 463 | </tbody> | |
| 464 | ||
| 465 | </div> | |
| 466 | </table> | |
| 467 | ||
| 468 | ||
| 469 | ||
| 470 | ||
| 471 | </div> | |
| 472 | ||
| 473 | ||
| 474 | </div> | |
| 475 | </div> | |
| 476 | </div> | |
| 477 | </div> | |
| 478 | ||
| 479 | ||
| 480 | ||
| 481 | ||
| 482 | ||
| 483 | </div> | |
| 484 | </div> | |
| 485 | ||
| 486 | </div> | |
| 487 | </div> | |
| 488 | ||
| 489 | ||
| 490 | ||
| 491 | </div> | |
| 492 | ||
| 493 | </body> | |
| 494 | ||
| 495 | ||
| 496 | ||
| 497 | </html> | |
| 498 | ||
| 499 | CSS Code: | |
| 500 | ||
| 501 | /* | |
| 502 | New Perspectives on HTML and XHTML 5th Edition | |
| 503 | Tutorial 5 | |
| 504 | Case Problem 2 | |
| 505 | ||
| 506 | Chamberlain Civic Center Style Sheet | |
| 507 | Author: jason Summers | |
| 508 | Date: 10-13-11 | |
| 509 | ||
| 510 | Filename: ccc.css | |
| 511 | Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg | |
| 512 | tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg | |
| 513 | ||
| 514 | */ | |
| 515 | ||
| 516 | body {font-family: Verdana, Geneva, sans-serif}
| |
| 517 | #heading {position: absolute; top: 0px; left: 15px; width: 920px; border-bottom: 1px solid red; }
| |
| 518 | #leftColumn {position: absolute; top: 170px; left: 15px; width: 280px}
| |
| 519 | #rightColumn {position: absolute; top: 170px; left: 320px; width: 600px}
| |
| 520 | ||
| 521 | ||
| 522 | ||
| 523 | #heading ul {list-style-type: none; padding: 0px; margin: 0px; height: 20px}
| |
| 524 | #heading ul li {float: left; margin: 0px 3px; width: 100px; height: 20px; text-align: center; background: url(tab.jpg) no-repeat 100% 0%;}
| |
| 525 | #heading ul li a {display: block; width: 100px; font-size: 10px; text-decoration: none; color: black}
| |
| 526 | #heading ul li a:hover {color: red}
| |
| 527 | ||
| 528 | ||
| 529 | ||
| 530 | #leftColumn h2 {font-size: 24px; color: red; margin: 0px 0px 10px 0px}
| |
| 531 | #leftColumn p {font-size: 10px; padding: 0px; margin: 0px 0px 10px 0px}
| |
| 532 | #leftColumn p i {color: red; font-style: normal}
| |
| 533 | ||
| 534 | ||
| 535 | .tlcorner {background: url(topleft.jpg) no-repeat top left}
| |
| 536 | ||
| 537 | .trcorner {background: url(topright.jpg) no-repeat top right}
| |
| 538 | ||
| 539 | .blcorner {background: url(bottomleft.jpg) no-repeat bottom left}
| |
| 540 | ||
| 541 | .brcorner {background: url(bottomright.jpg) no-repeat bottom right}
| |
| 542 | ||
| 543 | ||
| 544 | ||
| 545 | .tborder {background: url(top.jpg) repeat-x top}
| |
| 546 | ||
| 547 | .bborder {background: url(bottom.jpg) repeat-x bottom}
| |
| 548 | ||
| 549 | ||
| 550 | ||
| 551 | .lborder {background: url(left.jpg) repeat-y left}
| |
| 552 | ||
| 553 | .rborder {background: url(right.jpg) repeat-y right}
| |
| 554 | ||
| 555 | div.boxcontent {padding: 50px}
| |
| 556 | ||
| 557 | css 2 code: | |
| 558 | /* | |
| 559 | New Perspectives on HTML and XHTML 5th Edition | |
| 560 | Tutorial 5 | |
| 561 | Case Problem 2 | |
| 562 | ||
| 563 | CCC Calendar Table style sheet | |
| 564 | Author: jason summers | |
| 565 | Date: 10-11-13 | |
| 566 | Filename: calender.css | |
| 567 | Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg | |
| 568 | tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg | |
| 569 | ||
| 570 | ||
| 571 | */ | |
| 572 | ||
| 573 | table.calender {border-collapse: separate; border-spacing: 5px; font-size: 8px}
| |
| 574 | table.calender caption {caption-side: top; text-align: left; font-size: 16px; letter-spacing: 3px}
| |
| 575 | ||
| 576 | table.calender col {width: 14%}
| |
| 577 | table.calender col.weekends {background-color: rgb( 255, 232, 232); width: 14%}
| |
| 578 | table.calender col.weekdays {background-color: white; width: 14%}
| |
| 579 | ||
| 580 | table.calender thead tr th {color:white; background-color: red; letter-spacing: 5px}
| |
| 581 | table.calender thead tr {height: 5%}
| |
| 582 | table.calender thead tr td {height: 19%}
| |
| 583 | ||
| 584 | table.calender tbody td {border: 1px solid gray; vertical-align: top; height: 19%}
| |
| 585 | table.calender tbody td h3 {font-size: 8px; margin: 0px; padding: 0px}
| |
| 586 | table.calender tbody td dl {margin: 0px; padding: 0px}
| |
| 587 | table.calender tbody td dd {margin: 0px; padding: 0px}
| |
| 588 | table.calender tbody td dt {margin: 0px; padding: 0px}
| |
| 589 | ||
| 590 | table.calender thead td {vertical-align: top}
| |
| 591 | ||
| 592 | ||
| 593 | ||
| 594 |
