
previous

page 10
next
my index.html body
<body>
<div id='game'>
<div id='top'>
<div id='pane1'>
<div><img src='images/computer.png'></div>
<div id='computer'>0</div>
</div>
<div id='pane2'>
<div id='grid'>
<script>squares(); setup();</script>
</div>
</div>
<div id='pane3'>
<div><img src='images/player.png'></div>
<div id='player'>0</div>
</div>
</div>
<div id='bottom'>
<div id='message'>the first to make XXX loses</div>
</div>
</div>
</body>
<div id='game'>
<div id='top'>
<div id='pane1'>
<div><img src='images/computer.png'></div>
<div id='computer'>0</div>
</div>
<div id='pane2'>
<div id='grid'>
<script>squares(); setup();</script>
</div>
</div>
<div id='pane3'>
<div><img src='images/player.png'></div>
<div id='player'>0</div>
</div>
</div>
<div id='bottom'>
<div id='message'>the first to make XXX loses</div>
</div>
</div>
</body>
additions to my styles.css
#top, #pane1, #pane2, #pane3, #bottom {
display:flex;
justify-content:center;
align-items:center;
}
#pane1, #pane3 {
flex-direction:column;
}
#pane1 img, #pane3 img {
height:20vmin;
}
#game {
font-size:4vmin;
}
#pane2 {
padding:2vmin;
}
display:flex;
justify-content:center;
align-items:center;
}
#pane1, #pane3 {
flex-direction:column;
}
#pane1 img, #pane3 img {
height:20vmin;
}
#game {
font-size:4vmin;
}
#pane2 {
padding:2vmin;
}
previous
next