diff options
| author | Alicia <alicia@ubuntu.ubuntu-domain> | 2012-08-06 00:08:21 -0700 |
|---|---|---|
| committer | Alicia <alicia@ubuntu.ubuntu-domain> | 2012-08-06 00:08:21 -0700 |
| commit | 67b42361491ec3293afcd425e76ff16a51783d19 (patch) | |
| tree | bc3da814f1c3f709c05ed80f094e32761ec72d9e | |
| parent | dca0d8a0092234ccfa2513f71d2941c5ecd9fb38 (diff) | |
| download | foosball-67b42361491ec3293afcd425e76ff16a51783d19.tar.gz | |
tableau html + debut style CSS
| -rw-r--r-- | style.css | 117 | ||||
| -rw-r--r-- | tableau.html | 120 |
2 files changed, 237 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..f3338ad --- /dev/null +++ b/style.css @@ -0,0 +1,117 @@ +* { + margin: 0; + padding: 0; +} + +/* page structure */ +body { + font-family: "Helvetica Neue", Helvetica, sans-serif; + background-color: #abe; +} + +#content { + width: 1200px; + margin-left: auto; + margin-right: auto; + margin-top: .5em; + border: thin solid #333; + background-color: white; + border-top-left-radius: .75em; + border-top-right-radius: .75em; +} + +header { + background: -moz-linear-gradient(top, #ffa, #9d9); + padding: 1em 3em 1em; + color: #333; + border-bottom: thin solid #d6d6d6; + border-top-left-radius: .75em; + border-top-right-radius: .75em; +} + +article { + padding: 1em 3em 1em; + font-size: 85%; +} + +.group{ + float: left; + padding: 1em; + margin: 1em; + border: thin solid; + border-radius: .75em; + width: 220px; + height: 100px; +} + +#groupA { + background-color: blue; +} + +#groupB { + background-color: pink; +} + +#groupC { + background-color: yellow; +} + +#groupD { + background-color: green; +} + +#listGroups { + margin-left: auto; + margin-right: auto; + display: table-cell; +} + +.ranking{ + float: left; + padding: 1em; + margin: 2.5em; + border: thin solid; + width: 180px; + height: 100px; +} + +.quarter{ + float: left; + padding: 1em; + margin: 1em; + margin-top: 5em; + border: thin solid; + border-radius: .75em; + width: 220px; + height: 80px; + +} + +.semi{ + float: left; + padding: 1em; + margin: 1em; + border: thin solid; + border-radius: .75em; + width: 220px; + height: 80px; +} + +#S1{ + margin-left: 15em; +} + +#S2{ + margin-left: 14em; +} + +#F{ + padding: 1em; + margin: 1em; + margin-left: auto; + margin-right: auto; + border: thin solid; + border-radius: .75em; + width: 220px; + height: 80px; +} diff --git a/tableau.html b/tableau.html new file mode 100644 index 0000000..73d362f --- /dev/null +++ b/tableau.html @@ -0,0 +1,120 @@ +<!doctype html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Technicolor's Foosball Tournament</title> + <link rel="stylesheet" type="text/css" href="style.css"> +</head> +<body> + <div id="content"> + <header> + <h1>** A COMPLETER</h1> + <p>Be ready for the biggest Bay Area event :</p> + </header> + + <!-- list of games --> + <article> + + <!-- group stage --> + <div id="listGroups"> + <div id="groupA" class="group"> + <h2>GROUP A</h2> + <p>Gaijin vs Olympic Croquet</p> + <p>{Pedro, ?} vs Gaijin</p> + <p>Olympics Croquet vs {Pedro, ?}</p> + </div> + + <div id="groupB" class="group"> + <h2>GROUP B</h2> + <p>Night Hawks vs Cake and Death</p> + </div> + + <div id="groupC" class="group"> + <h2>GROUP C</h2> + <p>Red and Ruskie vs {Sandy, ?}</p> + <p>{Nina, Smriti} vs Red and Ruskie</p> + <p>{Sandy, ?} vs {Nina, Smriti}</p> + </div> + + <div id="groupD" class="group"> + <h2>GROUP D</h2> + <p>{Nadia, Salman} vs {Vijay, Zhen}</p> + </div> + + <br style='clear:both'/> + </div> + + <div id="rankingA" class="ranking"> + <h2>Ranking group A</h2> + <p>1 ...</p> + <p>2 ...</p> + <p>3 ...</p> + </div> + + <div id="rankingB" class="ranking"> + <h2>Ranking group B</h2> + <p>1 ...</p> + <p>2 ...</p> + </div> + + <div id="rankingC" class="ranking"> + <h2>Ranking group C</h2> + <p>1 ...</p> + <p>2 ...</p> + <p>3 ...</p> + </div> + + <div id="rankingD" class="ranking"> + <h2>Ranking group D</h2> + <p>1 ...</p> + <p>2 ...</p> + </div> + + <!-- elimiatory games --> + <div id="Q1" class="quarter"> + <h2>Quarter-final 1</h2> + <p>First team group A vs Second team group B</p> + </div> + + <div id="Q2" class="quarter"> + <h2>Quarter-final 2</h2> + <p>First team group B vs Second team group A</p> + </div> + + <div id="Q3" class="quarter"> + <h2>Quarter-final 3</h2> + <p>First team group C vs Second team group D</p> + </div> + + <div id="Q4" class="quarter"> + <h2>Quarter-final 4</h2> + <p>First team group D vs Second team group C</p> + </div> + + <div id="S1" class="semi"> + <h2>Semi-final 1</h2> + <p>Winner Q1 vs Winner Q3</p> + </div> + + <div id="S2" class="semi"> + <h2>Semi-final 2</h2> + <p>Winner Q2 vs Winner Q4</p> + </div> + + <br style='clear:both'/> + + <div id="F"> + <h2>FINAL</h2> + <p>? vs ?</p> + </div> + + + </article> + + + <footer> + © Copyright 2012, Entité TriCastor + </footer> + </div> +</body> +</html> |