felixm/tictactoecss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create Tic-Tac-Toe in HTML/CSS. Understand layers (z-index).

Browse Source
This commit is contained in:
Felix Martin
2019-07-21 21:39:18 -04:00
parent d18487c306
commit 60ee0dd172
4 changed files with 129 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
tictactoe.html Normal file
View File

@@ -0,0 +1,39 @@
<html>
<head>
<title>Tic Tac Toe CSS</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
</head>
<body>
<div class="tic-tac-toe">
<input class="player-1 field-1 left top turn-1" id="block1-1-1" type="radio">
<label class="turn-1" for="block1-1-1"></label>
<input class="player-1 middle top turn-1" id="block1-1-2" type="radio">
<label class="turn-1" for="block1-1-2"></label>
<input class="player-1 right top turn-1" id="block1-1-3" type="radio">
<label class="turn-1" for="block1-1-3"></label>
<input class="player-1 left center turn-1" id="block1-2-1" type="radio">
<label class="turn-1" for="block1-2-1"></label>
<input class="player-1 middle center turn-1" id="block1-2-2" type="radio">
<label class="turn-1" for="block1-2-2"></label>
<input class="player-1 right center turn-1" id="block1-2-3" type="radio">
<label class="turn-1" for="block1-2-3"></label>
<input class="player-1 left bottom turn-1" id="block1-3-1" type="radio">
<label class="turn-1" for="block1-3-1"></label>
<input class="player-1 middle bottom turn-1" id="block1-3-2" type="radio">
<label class="turn-1" for="block1-3-2"></label>
<input class="player-1 right field-9 bottom turn-1" id="block1-3-3" type="radio">
<label class="turn-1" for="block1-3-3"></label>
<input class="player-1 field-1 left top turn-2" id="block2-1-1" type="radio">
<label class="turn-2" for="block2-1-1"></label>
<input class="player-1 field-2 middle top turn-2" id="block2-1-2" type="radio">
<label class="turn-2" for="block2-1-2"></label>
<input class="player-1 field-3 right top turn-2" id="block2-1-3" type="radio">
<label class="turn-2" for="block2-1-3"></label>
</div>
</body>
</html>