|
|
<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.<title>Table V01</title>
5.<meta charset="UTF-8">
6.<meta name="viewport" content="width=device-width, initial-scale=1">
7.
8.<style type="text/css">
9.
10.* {
11.margin: 0px;
12.padding: 0px;
13.box-sizing: border-box;
14.}
15.
16.body, html {
17.height: 100%;
18.font-family: sans-serif;
19.padding-top:30px;
20.}
21.
22.* {font-family: Helvetica Neue, Arial, sans-serif; }
23.
24.body { background-image: linear-gradient(#aaa 25%, #000); }
25.
26.h1, table { text-align: center; }
27.
28.table {border-collapse: collapse;width: 70%; margin: 0 auto 5rem;}
29.
30.th, td { padding: 1.5rem; font-size: 1.3rem; }
31.
32.tr {background: hsl(50, 50%, 80%); }
33.
34.tr, td { transition: .4s ease-in; }
35.
36.tr:first-child {background: hsla(12, 100%, 40%, 0.5); }
37.
38.tr:nth-child(even) { background: hsla(50, 50%, 80%, 0.7); }
39.
40.td:empty {background: hsla(50, 25%, 60%, 0.7); }
41.
42.tr:hover:not(#firstrow), tr:hover td:empty {background: #ff0; pointer-events: visible;}
43.tr:hover:not(#firstrow) { transform: scale(1.2); font-weight: 700; box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);}
44.
45.
46.</style>
47.</head>
48.<body>
49.
50.<h1>Race Times</h1>
51.
52.<table id="racetimes">
53.<tr id="firstrow"><th>Race</th><th>Location</th><th>Distance (in kilometres)</th><th>Time</th></tr>
54.<tr><td>SAIT Open</td><td>Calgary</td><td>5</td><td></td></tr>
55.<tr><td>CALTAF Classic</td><td>Calgary</td><td>1.5</td><td>5.00</td></tr>
56.<tr><td>Calgary Marathon</td><td>Calgary</td><td>21.1</td><td>2:00.00</td></tr>
57.<tr><td>Zombie Survivor</td><td>Cochrane</td><td>5</td><td>25.00</td></tr>
58.<tr><td>Run for Women</td><td>Calgary</td><td>5</td><td>20.00</td></tr>
59.</table>
60.
61.</body>
62.</html> |
|
