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

Change CSS template so that Tic Tac Toe looks nice.

Browse Source
This commit is contained in:
Felix Martin
2019-07-28 13:39:54 -04:00
parent 9f75af0f47
commit e846259282
8 changed files with 11192 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

495
tictactoe.html
View File

@@ -2,43 +2,85 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-0" for="block-0-2-2">
<div class="circle"></div>
</label>
@@ -46,35 +88,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-1" for="block-1-2-2">
<div class="cross"></div>
</label>
@@ -82,35 +160,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-2" for="block-2-2-2">
<div class="circle"></div>
</label>
@@ -118,35 +232,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-3" for="block-3-2-2">
<div class="cross"></div>
</label>
@@ -154,35 +304,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-4" for="block-4-2-2">
<div class="circle"></div>
</label>
@@ -190,35 +376,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-5" for="block-5-2-2">
<div class="cross"></div>
</label>
@@ -226,35 +448,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-6" for="block-6-2-2">
<div class="circle"></div>
</label>
@@ -262,35 +520,71 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<label class="turn-7" for="block-7-2-2">
<div class="cross"></div>
</label>
@@ -298,38 +592,77 @@
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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"></label>
<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>
</body>
</html>