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

17
template.tictactoe.html
View File

@@ -2,18 +2,33 @@
<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>
{% for turn in range(9) %}
<!-- turn-{{turn}} -->
{% for row in range(3) %}
{% for col in range(3) %}
<input class="field-{{row * 3 + col}} row-{{row}} col-{{col}} turn-{{turn}}" id="block-{{turn}}-{{row}}-{{col}}" type="radio">
<label class="turn-{{turn}}" for="block-{{turn}}-{{row}}-{{col}}"></label>
<label class="turn-{{turn}}" for="block-{{turn}}-{{row}}-{{col}}">
{% if (turn % 2 == 0) %}
<div class="circle"></div>
{% else %}
<div class="cross"></div>
{% endif %}
</label>
{% endfor %}
{% endfor %}
{% endfor %}
<div class="end">
<h1></h1>
<a href="">Play again.</a>
</div>
</body>
</html>