.game { height: 480px; width: 800px; } .menu { height: 120px; width: 800px; } .menu { height: 120px; width: 800px; } .menu { background-color: #333; ... } .opponent { height: 300px; } .player { height: 180px; } .opponent .pokemon { position: absolute; } .player .pokemon { position: absolute; } .opponent { position: relative; } .player { position: relative; } .player .pokemon { position: absolute; left: 100px; bottom: 10px; width: 160px; } .opponent .pokemon { position: absolute; bottom: 0; right: 140px; width: 100px; }
100
Charizard 86
...
.stats { background: #111; border: 2px solid black; border-radius: 8px; color: white; padding: 12px; } .opponent .stats { position: absolute; top: 96px; left: 40px; width: 320px; } .player .stats { position: absolute; top: 48px; right: 40px; width: 320px; } .stats .hp-count:before { content: 'HP: ' } .stats .level:before { content: 'LVL ' } .stats .pokeballs { display: inline-block; } .stats .pokeballs .pokeball { float: left; background-image: url('http://bit.ly/pokeballimg'); background-size: 100% 100%; width: 25px; height: 25px; }
...
.menu .message { float: left; font-size: 24px; width: 50%; } .menu .actions { float: left; width: 50%; } .menu .actions button { position: relative; float: left; background: #666; border: 3px solid #888; border-radius: 4px; color: #fff; font-family: monospace; font-size: 20px; line-height: 14px; margin: 4px; padding: 16px; width: calc(50% - 8px); height: calc(50% - 8px); } .menu .actions button, .menu .actions button:hover, .menu .actions button:active { outline: none; } .menu .actions button:hover { background: #777; border-color: #999; } .menu .actions button:active { background: #555; border-color: #666; }