669 lines
16 KiB
HTML
669 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<title>Tic Tac Toe CSS</title>
|
|
<link rel="stylesheet" type="text/css" href="tictactoe.css">
|
|
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic' rel='stylesheet'>
|
|
</head>
|
|
<body>
|
|
<div class="tic-tac-toe">
|
|
<div class="grid horizontal-bar-1"></div>
|
|
<div class="grid horizontal-bar-2"></div>
|
|
<div class="grid vertical-bar-1"></div>
|
|
<div class="grid vertical-bar-2"></div>
|
|
|
|
|
|
<!-- turn-0 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-0" id="block-0-0-0" type="radio">
|
|
<label class="turn-0" for="block-0-0-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-0" id="block-0-0-1" type="radio">
|
|
<label class="turn-0" for="block-0-0-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-0" id="block-0-0-2" type="radio">
|
|
<label class="turn-0" for="block-0-0-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-0" id="block-0-1-0" type="radio">
|
|
<label class="turn-0" for="block-0-1-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-0" id="block-0-1-1" type="radio">
|
|
<label class="turn-0" for="block-0-1-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-0" id="block-0-1-2" type="radio">
|
|
<label class="turn-0" for="block-0-1-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-0" id="block-0-2-0" type="radio">
|
|
<label class="turn-0" for="block-0-2-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-0" id="block-0-2-1" type="radio">
|
|
<label class="turn-0" for="block-0-2-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-0" id="block-0-2-2" type="radio">
|
|
<label class="turn-0" for="block-0-2-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-1 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-1" id="block-1-0-0" type="radio">
|
|
<label class="turn-1" for="block-1-0-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-1" id="block-1-0-1" type="radio">
|
|
<label class="turn-1" for="block-1-0-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-1" id="block-1-0-2" type="radio">
|
|
<label class="turn-1" for="block-1-0-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-1" id="block-1-1-0" type="radio">
|
|
<label class="turn-1" for="block-1-1-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-1" id="block-1-1-1" type="radio">
|
|
<label class="turn-1" for="block-1-1-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-1" id="block-1-1-2" type="radio">
|
|
<label class="turn-1" for="block-1-1-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-1" id="block-1-2-0" type="radio">
|
|
<label class="turn-1" for="block-1-2-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-1" id="block-1-2-1" type="radio">
|
|
<label class="turn-1" for="block-1-2-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-1" id="block-1-2-2" type="radio">
|
|
<label class="turn-1" for="block-1-2-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-2 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-2" id="block-2-0-0" type="radio">
|
|
<label class="turn-2" for="block-2-0-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-2" id="block-2-0-1" type="radio">
|
|
<label class="turn-2" for="block-2-0-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-2" id="block-2-0-2" type="radio">
|
|
<label class="turn-2" for="block-2-0-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-2" id="block-2-1-0" type="radio">
|
|
<label class="turn-2" for="block-2-1-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-2" id="block-2-1-1" type="radio">
|
|
<label class="turn-2" for="block-2-1-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-2" id="block-2-1-2" type="radio">
|
|
<label class="turn-2" for="block-2-1-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-2" id="block-2-2-0" type="radio">
|
|
<label class="turn-2" for="block-2-2-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-2" id="block-2-2-1" type="radio">
|
|
<label class="turn-2" for="block-2-2-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-2" id="block-2-2-2" type="radio">
|
|
<label class="turn-2" for="block-2-2-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-3 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-3" id="block-3-0-0" type="radio">
|
|
<label class="turn-3" for="block-3-0-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-3" id="block-3-0-1" type="radio">
|
|
<label class="turn-3" for="block-3-0-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-3" id="block-3-0-2" type="radio">
|
|
<label class="turn-3" for="block-3-0-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-3" id="block-3-1-0" type="radio">
|
|
<label class="turn-3" for="block-3-1-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-3" id="block-3-1-1" type="radio">
|
|
<label class="turn-3" for="block-3-1-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-3" id="block-3-1-2" type="radio">
|
|
<label class="turn-3" for="block-3-1-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-3" id="block-3-2-0" type="radio">
|
|
<label class="turn-3" for="block-3-2-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-3" id="block-3-2-1" type="radio">
|
|
<label class="turn-3" for="block-3-2-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-3" id="block-3-2-2" type="radio">
|
|
<label class="turn-3" for="block-3-2-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-4 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-4" id="block-4-0-0" type="radio">
|
|
<label class="turn-4" for="block-4-0-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-4" id="block-4-0-1" type="radio">
|
|
<label class="turn-4" for="block-4-0-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-4" id="block-4-0-2" type="radio">
|
|
<label class="turn-4" for="block-4-0-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-4" id="block-4-1-0" type="radio">
|
|
<label class="turn-4" for="block-4-1-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-4" id="block-4-1-1" type="radio">
|
|
<label class="turn-4" for="block-4-1-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-4" id="block-4-1-2" type="radio">
|
|
<label class="turn-4" for="block-4-1-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-4" id="block-4-2-0" type="radio">
|
|
<label class="turn-4" for="block-4-2-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-4" id="block-4-2-1" type="radio">
|
|
<label class="turn-4" for="block-4-2-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-4" id="block-4-2-2" type="radio">
|
|
<label class="turn-4" for="block-4-2-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-5 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-5" id="block-5-0-0" type="radio">
|
|
<label class="turn-5" for="block-5-0-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-5" id="block-5-0-1" type="radio">
|
|
<label class="turn-5" for="block-5-0-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-5" id="block-5-0-2" type="radio">
|
|
<label class="turn-5" for="block-5-0-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-5" id="block-5-1-0" type="radio">
|
|
<label class="turn-5" for="block-5-1-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-5" id="block-5-1-1" type="radio">
|
|
<label class="turn-5" for="block-5-1-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-5" id="block-5-1-2" type="radio">
|
|
<label class="turn-5" for="block-5-1-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-5" id="block-5-2-0" type="radio">
|
|
<label class="turn-5" for="block-5-2-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-5" id="block-5-2-1" type="radio">
|
|
<label class="turn-5" for="block-5-2-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-5" id="block-5-2-2" type="radio">
|
|
<label class="turn-5" for="block-5-2-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-6 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-6" id="block-6-0-0" type="radio">
|
|
<label class="turn-6" for="block-6-0-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-6" id="block-6-0-1" type="radio">
|
|
<label class="turn-6" for="block-6-0-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-6" id="block-6-0-2" type="radio">
|
|
<label class="turn-6" for="block-6-0-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-6" id="block-6-1-0" type="radio">
|
|
<label class="turn-6" for="block-6-1-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-6" id="block-6-1-1" type="radio">
|
|
<label class="turn-6" for="block-6-1-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-6" id="block-6-1-2" type="radio">
|
|
<label class="turn-6" for="block-6-1-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-6" id="block-6-2-0" type="radio">
|
|
<label class="turn-6" for="block-6-2-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-6" id="block-6-2-1" type="radio">
|
|
<label class="turn-6" for="block-6-2-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-6" id="block-6-2-2" type="radio">
|
|
<label class="turn-6" for="block-6-2-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-7 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-7" id="block-7-0-0" type="radio">
|
|
<label class="turn-7" for="block-7-0-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-7" id="block-7-0-1" type="radio">
|
|
<label class="turn-7" for="block-7-0-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-7" id="block-7-0-2" type="radio">
|
|
<label class="turn-7" for="block-7-0-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-7" id="block-7-1-0" type="radio">
|
|
<label class="turn-7" for="block-7-1-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-7" id="block-7-1-1" type="radio">
|
|
<label class="turn-7" for="block-7-1-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-7" id="block-7-1-2" type="radio">
|
|
<label class="turn-7" for="block-7-1-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-7" id="block-7-2-0" type="radio">
|
|
<label class="turn-7" for="block-7-2-0">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-7" id="block-7-2-1" type="radio">
|
|
<label class="turn-7" for="block-7-2-1">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-7" id="block-7-2-2" type="radio">
|
|
<label class="turn-7" for="block-7-2-2">
|
|
|
|
<div class="cross"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<!-- turn-8 -->
|
|
|
|
|
|
<input class="field-0 row-0 col-0 turn-8" id="block-8-0-0" type="radio">
|
|
<label class="turn-8" for="block-8-0-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-1 row-0 col-1 turn-8" id="block-8-0-1" type="radio">
|
|
<label class="turn-8" for="block-8-0-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-2 row-0 col-2 turn-8" id="block-8-0-2" type="radio">
|
|
<label class="turn-8" for="block-8-0-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-3 row-1 col-0 turn-8" id="block-8-1-0" type="radio">
|
|
<label class="turn-8" for="block-8-1-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-4 row-1 col-1 turn-8" id="block-8-1-1" type="radio">
|
|
<label class="turn-8" for="block-8-1-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-5 row-1 col-2 turn-8" id="block-8-1-2" type="radio">
|
|
<label class="turn-8" for="block-8-1-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<input class="field-6 row-2 col-0 turn-8" id="block-8-2-0" type="radio">
|
|
<label class="turn-8" for="block-8-2-0">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-7 row-2 col-1 turn-8" id="block-8-2-1" type="radio">
|
|
<label class="turn-8" for="block-8-2-1">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
<input class="field-8 row-2 col-2 turn-8" id="block-8-2-2" type="radio">
|
|
<label class="turn-8" for="block-8-2-2">
|
|
|
|
<div class="circle"></div>
|
|
|
|
</label>
|
|
|
|
|
|
|
|
<div class="end">
|
|
<h1></h1>
|
|
<a href="">Play again.</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |