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 |