commit 080d857d99ada03419ed7a0da9e82722b99d7891 parent d1dc58bc5a34bc701c1efb40a61099ab1e9c1013 Author: Georges Dupéron <jahvascriptmaniac+github@free.fr> Date: Wed, 30 Mar 2011 10:18:14 +0200 Un peu de couleur... Diffstat:
| M | code/html5/index.html | | | 58 | +++++++++++++++++++++++++++++++++++++++++++++------------- |
1 file changed, 45 insertions(+), 13 deletions(-)
diff --git a/code/html5/index.html b/code/html5/index.html @@ -4,31 +4,63 @@ <title>PtiClic pre-alpha 0.2</title> <meta charset="utf-8" /> <style> +body { + background-color: black; + padding: 0; + margin: 0; + text-align: center; +} + #screen { - border: thin solid blue; - width: 320px; - position: absolute; - height: 400px; + background-color: white; + display: inline-block; + text-align: left; + width: 480px; + height: 800px; + background-color : #FFFFE0; } -.mn.caption { - border-bottom: thin solid blue; +.mc.caption { + border-bottom: medium solid #44AA44; text-align: center; + color: #8b4; + font-size: 50px; + padding: 10px 0; } -.mc.caption { - border-bottom: thin solid blue; +.mn.caption { + border-bottom: medium solid #44AA44; text-align: center; + color: #4a4; + background-color: #F0F8D0; + font-size: 30px; + padding: 10px 0; +} + +.relations { + width: 100%; } .relations div { - padding-left: 76px; - background-color: #dfe; + background-color: #F0F8D0; + border: thin solid #44AA44; -moz-border-radius: 10px; margin: 10px; - min-height: 72px; + height: 72px; background-repeat: no-repeat; - background-position: 0 center; + padding: 10px; +} + +.relations div:nth-child(odd) { + text-align: right; + padding-left: 76px; + background-position: 2% center; +} + +.relations div:nth-child(even) { + text-align: left; + padding-right: 76px; + background-position: 98% center; } .relations .rid-1 { background-image: url("img/rel/-1.png"); } @@ -44,8 +76,8 @@ </head> <body> <div id="screen"> - <div class="mn caption"></div> <div class="mc caption"></div> + <div class="mn caption"></div> <div class="relations"></div> </div> </body>