diff options
| -rw-r--r-- | images/beaver.jpg | bin | 0 -> 8740 bytes | |||
| -rw-r--r-- | index.html | 48 | ||||
| -rw-r--r-- | rules.html | 46 | ||||
| -rw-r--r-- | schedule.html | 11 | ||||
| -rw-r--r-- | style.css | 116 | ||||
| -rw-r--r-- | teams.html | 45 |
6 files changed, 179 insertions, 87 deletions
diff --git a/images/beaver.jpg b/images/beaver.jpg Binary files differnew file mode 100644 index 0000000..0558ece --- /dev/null +++ b/images/beaver.jpg @@ -23,108 +23,108 @@ <!-- list of games --> <article id="bracket"> + <h1>Bracket</h1> + <!-- group stage --> <div id="listGroups"> - <div id="groupA" class="group"> + <div id="groupA" class="group shadow"> <h2>GROUP A</h2> <p>Gaijin vs Olympic Croquet</p> <p>{Pedro, ?} vs Gaijin</p> <p>Olympic Croquet vs {Pedro, ?}</p> </div> - <div id="groupB" class="group"> + <div id="groupB" class="group shadow"> <h2>GROUP B</h2> <p>Nighthawks vs Cake and Death</p> </div> - <div id="groupC" class="group"> + <div id="groupC" class="group shadow"> <h2>GROUP C</h2> <p>Red and Ruskie vs {Sandy, ?}</p> <p>{Vijay, Zhen} vs Red and Ruskie</p> <p>{Sandy, ?} vs {Vijay, Zhen}</p> </div> - <div id="groupD" class="group"> + <div id="groupD" class="group shadow"> <h2>GROUP D</h2> <p>{Nadia, Salman} vs {Nina, Smriti}</p> </div> </div> - <br style='clear:both'/> + <br class="spacer"/> - <div id="rankingA" class="ranking"> + <div id="rankingA" class="ranking shadow"> <h2>Ranking group A</h2> <p>1 ...</p> <p>2 ...</p> <p>3 ...</p> </div> - <div id="rankingB" class="ranking"> + <div id="rankingB" class="ranking shadow"> <h2>Ranking group B</h2> <p>1 ...</p> <p>2 ...</p> </div> - <div id="rankingC" class="ranking"> + <div id="rankingC" class="ranking shadow"> <h2>Ranking group C</h2> <p>1 ...</p> <p>2 ...</p> <p>3 ...</p> </div> - <div id="rankingD" class="ranking"> + <div id="rankingD" class="ranking shadow"> <h2>Ranking group D</h2> <p>1 ...</p> <p>2 ...</p> </div> - <br style="clear:both"/> + <div class="spacer hline"></div> <!-- elimiatory games --> - <div id="Q1" class="quarter"> + <div id="Q1" class="quarter shadow"> <h2>Quarter-final 1</h2> <p>First team group A vs Second team group B</p> </div> - <div id="Q2" class="quarter"> + <div id="Q2" class="quarter shadow"> <h2>Quarter-final 2</h2> <p>First team group B vs Second team group A</p> </div> - <div id="Q3" class="quarter"> + <div id="Q3" class="quarter shadow"> <h2>Quarter-final 3</h2> <p>First team group C vs Second team group D</p> </div> - <div id="Q4" class="quarter"> + <div id="Q4" class="quarter shadow"> <h2>Quarter-final 4</h2> <p>First team group D vs Second team group C</p> </div> - <br style="clear:both"/> + <br class="spacer"/> - <div id="S1" class="semi"> + <div id="S1" class="semi shadow"> <h2>Semi-final 1</h2> <p>Winner Q1 vs Winner Q3</p> </div> - <div id="S2" class="semi"> + <div id="S2" class="semi shadow"> <h2>Semi-final 2</h2> <p>Winner Q2 vs Winner Q4</p> </div> - <br style='clear:both'/> + <br class="spacer"/> - <div id="F"> + <div id="F" class="shadow"> <h2>FINAL</h2> <p>? vs ?</p> </div> - - - - - + <div id="beaver" class="center"> + <img src="images/beaver.jpg" alt="kroOon" /> + </div> </article> @@ -27,8 +27,8 @@ <h2>Definitions</h2> - <p>We will use the following table to refer to refer to the different rods of - the table:</p> + <p>We will use the following table to refer to the different rods of + the foosball table:</p> <table> <tr><td>Row 1</td><td>Goalkeeper (1 foosman)</td></tr> @@ -43,42 +43,42 @@ <h2>Tournament structure</h2> - <p>The tournament is divided in two phases: + <p>The tournament is divided in two phases:</p> <ul> <li><em>Groupe phase:</em> the teams are divided in groups of two or three teams. Each team meets all the other teams in its group. The - worst team from each group of three teams leaves the tournament at the end + worse team from each group of three teams leaves the tournament at the end of this phase.</li> <li><em>Knockout phase:</em> this phase is organized as a single elimination bracket; 4 quarter-finals, 2 semi-finals, 1 final (and - 1 final to decide the third place).</li> - </ul></p> + 1 additional final to decide the third place).</li> + </ul> <h2>Organization of games</h2> - <p>The first team to score ten points wins the game</p> + <p>The first team to score 10 points wins the game.</p> - <p>There is a half-time when the first team reaches five points: the teams - switch sides, and the players inside a team can decide to swap positions - (the attacker becomes the defender and vice-versa). Swapping positions - during the half-time is <b>not</b> mandatory.</p> + <p>There is a half-time when the first team reaches five points: the two + teams switch sides, and the players inside a team can decide to swap positions + (the attacker becoming the defender and vice-versa). Swapping positions + during the half-time is <strong>not</strong> mandatory.</p> <p>The ball is served by the attacker on the side of the serving hole.</p> <h2>In-game rules</h2> - <p>When the ball stops and cannot be reached by any foosmen, the action to + <p>When the ball stops and cannot be reached by any foosman, the action to be taken depends on the position where the ball stopped:</p> <ul> <li>Before the third rod: the ball is put in the closest - corner</li> + corner;</li> <li>Between the third and sixth rods: the ball is served from the - middle</li> + middle;</li> <li>After the sixth rod: the ball is put in the closest - corner</li> + corner.</li> </ul> - <p>Things you cannot do: + <p>Things you cannot do:</p> <ul> <li><em>Spinning:</em> swiftly spinning the rods all around without holding them. @@ -86,13 +86,17 @@ touched by two foosmen from the scoring team on two different rods before a goal. If this requirement is not met, the goal does not count and the ball is simply served again from the middle.</li> - </ul></p> + </ul> - <p>Apart from that, everything is allowed, in particular: + <p>Apart from that, everything is allowed, in particular:</p> <ul> - <li>Scoring from the midfield during the game</li> - <li>Scoring from the attack rod without stopping the ball first</li> - </ul></p> + <li>Scoring from the midfield during the game;</li> + <li>Scoring from the attack rod without stopping the ball first.</li> + </ul> + + <div id="beaver" class="center"> + <img src="images/beaver.jpg" alt="kroOon" /> + </div> </div> <!-- readable --> </article> <footer> diff --git a/schedule.html b/schedule.html index e03f71a..e693f3d 100644 --- a/schedule.html +++ b/schedule.html @@ -21,13 +21,13 @@ </menu> <!-- list of games --> - <article id="bracket"> - <h1>Games schedule</h1> + <article> + <h1>Games Schedule</h1> <div id="calendar"> + <h2>Wednesday, August 8th (Group phase)</h2> - <h3>Wednesday, August 8th (Group phase)</h3> <table> <tr><td><strong>3:30pm</strong></td><td>Group A - Gaijin vs Olympic Croquets</td></tr> <tr><td><strong>3:45pm</strong></td><td>Group B - Nighthawks vs Cake and Death</td></tr> @@ -39,7 +39,10 @@ <tr><td><strong>5:30pm</strong></td><td>Group C - {Sandy, ?} vs {Vijay, Zhen}</td></tr> </table> </div> <!-- calendar --> - + + <div id="beaver" class="center"> + <img src="images/beaver.jpg" alt="kroOon" /> + </div> </article> @@ -26,6 +26,16 @@ header { margin: 0; } +header h1 { + font-size: 350%; + margin-bottom: 0 +} + +header p { + font-size: 110%; + margin-top: .5ex; +} + footer { color: #333; font-size: 80%; @@ -92,15 +102,10 @@ menu a { text-decoration: none; } -header h1 { - margin-bottom: 0 -} - article h1 { text-align: center; font-size: 300%; - margin-top: 0; - margin-bottom: .5ex; + margin: 1ex auto; } table { @@ -111,25 +116,30 @@ table { td { border: thin solid; - padding: 0.3em + padding: 0.3em; } -tr:nth-child(even) td { +tr:nth-child(even) { background-color: #9d9 } #bracket h2 { margin-top: 0; - text-align: center + text-align: center; } #calendar h2 { - text-align: left; - margin-top: 10px + text-align: center; } -#calendar h3 { - text-align: center +#calendar table { + margin-bottom: 2ex; +} + +.shadow { + -moz-box-shadow: .1em .1em .1em .1em #aaa; + -webkit-box-shadow: .1em .1em .1em .1em #aaa; + box-shadow: .1em .1em .1em .1em #aaa; } .group { @@ -168,6 +178,7 @@ tr:nth-child(even) td { float: left; padding: 1em; margin: 35px; + margin-bottom: 7ex; border: thin solid; width: 180px; height: 130px; @@ -192,8 +203,7 @@ tr:nth-child(even) td { .quarter { float: left; padding: 1em; - margin: 15px; - margin-top: 2em; + margin: 7ex 15px .75em; border: thin solid; border-radius: .75em; width: 220px; @@ -203,12 +213,14 @@ tr:nth-child(even) td { .semi { float: left; + margin-top: 2em; + margin-bottom: .75em; padding: 1em; border: thin solid; border-radius: .75em; width: 220px; height: 80px; - background-color: #FFB042 + background-color: #FFC0C0 } #S1 { @@ -220,11 +232,12 @@ tr:nth-child(even) td { padding: 1em; margin-left: 430px; margin-top: 2em; + margin-bottom: 3em; border: thin solid; border-radius: .75em; width: 220px; height: 80px; - background-color: #ADFF09 + background-color: #FF58F7 } .readable { @@ -232,3 +245,72 @@ tr:nth-child(even) td { margin-right: auto; width: 50em; } + +table#teams { + width: 80%; +} + +#teams td { + text-align: center; +} + +td.team-name { + font-weight: bold; + font-size: 200%; + text-shadow: .1em .1em .2em #424242; +} + +#teams tr:hover { + background-color: #d0f0ff; +} + +#teams td.members { + font-size: 150%; + line-height: 5ex; + font-variant: small-caps; + text-shadow: .1em .1em .3em #666; +} + +#teams img { + border: thick solid #666; + border-radius: 1em; + opacity: 0.6; +} + +#teams tr:hover img { + border-color: #444; + opacity: 1.0; +} + +.cred { color: #900; } +.cgreen { color: #090; } +.cblue { color: #009; } +.cpink { color: #909; } +.cyellow { color: #a60; } + +.center { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +#beaver { + opacity: 0.25; + margin-top: 5ex; +} + +#beaver:hover { + opacity: 1.0; +} + +.spacer { + clear: both; +} + +.hline { + border-top: thin solid #aaa; + margin: 0; + height: 0; + padding: 0; + width: 100%; +} @@ -24,28 +24,31 @@ <article> <h1>Teams</h1> - <table> - <tr><td>Cake and Death</td><td>Alicia<br/>Stratis</td><td><img - src="imagesResized/stratis-alicia.jpg" width="288" height="283" /></td></tr> - <tr><td>Gaijin</td><td>Stéphane<br/>Yuko</td><td><img - src="imagesResized/yuko-stephane.jpg" width="288" height="354"/></td></tr> - <tr><td>Red and Ruskie</td><td>Robert<br/>Valeria</td><td><img - src="imagesResized/robert-valeria.jpg" width="368" height="276"/></td></tr> - <tr><td>Olympic Croquet</td><td>Mathilde<br/>Nima</td><td><img - src="imagesResized/nima-mathilde.jpg" width="288" height="335"/></td></tr> - <tr><td>Nighthawks</td><td>Fernando<br/>Thibaut</td><td><img - src="imagesResized/fernando-thibaut.jpg" width="368" height="252"/></td></tr> - <tr><td></td><td>Nina<br/>Smriti</td><td><img - src="imagesResized/nina-smriti.jpg" width="288" height="374"/></td></tr> - <tr><td></td><td>Vijay<br/>Zhen</td><td><img - src="imagesResized/tom-jerry.jpg" width="288" height="388"/></td></tr> - <tr><td></td><td>Nadia<br/>Salman</td><td><img - src="imagesResized/baloo-bagheera.jpg" width="368" height="209"/></td></tr> - <tr><td></td><td>Pedro<br/>?</td><td><img - src="imagesResized/dupont-dupond.jpg" width="368" height="294"/></td></tr> - <tr><td></td><td>Sandy<br/>?</td><td><img - src="imagesResized/batman-robin.jpg" width="288" height="266"/></td></tr> + <table id="teams"> + <tr><td class="team-name">Cake and Death</td><td class="members">Alicia<br/>Stratis</td><td><img + src="imagesResized/stratis-alicia.jpg" alt="" width="288" height="283" /></td></tr> + <tr><td class="team-name cblue">Gaijin</td><td class="members">Stéphane<br/>Yuko</td><td><img + src="imagesResized/yuko-stephane.jpg" alt="" width="288" height="354"/></td></tr> + <tr><td class="team-name cred">Red and Ruskie</td><td class="members">Robert<br/>Valeria</td><td><img + src="imagesResized/robert-valeria.jpg" alt="" width="368" height="276"/></td></tr> + <tr><td class="team-name cpink">Olympic Croquet</td><td class="members">Mathilde<br/>Nima</td><td><img + src="imagesResized/nima-mathilde.jpg" alt="" width="288" height="335"/></td></tr> + <tr><td class="team-name cyellow">Nighthawks</td><td class="members">Fernando<br/>Thibaut</td><td><img + src="imagesResized/fernando-thibaut.jpg" alt="" width="368" height="252"/></td></tr> + <tr><td class="team-name"></td><td class="members">Nina<br/>Smriti</td><td><img + src="imagesResized/nina-smriti.jpg" alt="" width="288" height="374"/></td></tr> + <tr><td class="team-name"></td><td class="members">Vijay<br/>Zhen</td><td><img + src="imagesResized/tom-jerry.jpg" alt="" width="288" height="388"/></td></tr> + <tr><td class="team-name"></td><td class="members">Nadia<br/>Salman</td><td><img + src="imagesResized/baloo-bagheera.jpg" alt="" width="368" height="209"/></td></tr> + <tr><td class="team-name"></td><td class="members">Pedro<br/>?</td><td><img + src="imagesResized/dupont-dupond.jpg" alt="" width="368" height="294"/></td></tr> + <tr><td class="team-name"></td><td class="members">Sandy<br/>?</td><td><img + src="imagesResized/batman-robin.jpg" alt="" width="288" height="266"/></td></tr> </table> + <div id="beaver" class="center"> + <img src="images/beaver.jpg" alt="kroOon" /> + </div> </article> <footer> |
