-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcssGame.html
133 lines (108 loc) · 5.47 KB
/
cssGame.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jif-works.de CREW</title>
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&family=Bellefair&family=Barlow:wght@400;700&display=swap"
rel="stylesheet">
<!-- Our custom shit -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="second.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="cssGame.css">
<script src="jjs-nav_menu.js" defer></script>
<script src="tabs.js" defer></script>
<script src="dataJS.js" defer></script>
</head>
<body class="">
<!--<div class="container flex background">-->
<!-- <div class="foreground"></div>-->
<!-- <div class="midground"></div>-->
<!--</div>-->
<!--<a class="skip-to-content" href="#main">Skip to content</a>-->
<!--<header class="primary-header flex">-->
<!-- <div>-->
<!-- <a href="index.html"><img src="./assets/jif-LOGO.PNG" alt="jif logo" class="logo"></a>-->
<!-- </div>-->
<!-- <button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>-->
<!-- <nav>-->
<!-- <ul id="primary-navigation" data-visible="false" class="primary-navigation underline-indicators flex">-->
<!-- <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span aria-hidden="true">00</span>Home</a>-->
<!-- <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span aria-hidden="true">01</span>Destination</a>-->
<!-- <li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span aria-hidden="true">02</span>Crew</a>-->
<!-- <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span aria-hidden="true">03</span>Technology</a>-->
<!-- <li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="data.html"><span aria-hidden="true">03</span>Data</a>-->
<!-- </ul>-->
<!-- </nav>-->
<!--</header>-->
<!--<main id="main" class="grid-container grid-container--crew flow">-->
<main style="max-height: 100vh;">
<h1>Pure CSS - Tower of Hanoi</h1>
<p style="text-align: center; color: #2b1055">Dieses Spiel wurde mit relativ simpler HTML/CSS Webseiten Technik erstellt.</p>
<p style="text-align: center; color: #2b1055"><span style="color: black; font-size: 1.5rem">Zwei Regeln;</span> Man muss den Turm auf die rechte Seite bewegen und darf <br>
1. immer nur eine Scheibe bewegen <br>
2. keine größere auf eine kleinere Scheibe legen. Tu es!</p>
<form>
<div class="discs" onClick="click()">
<input id="one" type="text" tabindex="-1" readonly>
<input name="one" type="radio" tabindex="-1" checked>
<input name="one" type="radio" tabindex="-1">
<input name="one" type="radio" tabindex="-1">
<label for="one"></label>
<div class="disc one"></div>
<input id="two" type="text" tabindex="-1" readonly>
<input name="two" type="radio" tabindex="-1" checked>
<input name="two" type="radio" tabindex="-1">
<input name="two" type="radio" tabindex="-1">
<label for="two"></label>
<div class="disc two"></div>
<input id="three" type="text" tabindex="-1" readonly>
<input name="three" type="radio" tabindex="-1" checked>
<input name="three" type="radio" tabindex="-1">
<input name="three" type="radio" tabindex="-1">
<label for="three"></label>
<div class="disc three"></div>
<input id="four" type="text" tabindex="-1" readonly>
<input name="four" type="radio" tabindex="-1" checked>
<input name="four" type="radio" tabindex="-1">
<input name="four" type="radio" tabindex="-1">
<label for="four"></label>
<div class="disc four"></div>
<input id="five" type="text" tabindex="-1" readonly>
<input name="five" type="radio" tabindex="-1" checked>
<input name="five" type="radio" tabindex="-1">
<input name="five" type="radio" tabindex="-1">
<label for="five"></label>
<div class="disc five"></div>
<input id="six" type="text" tabindex="-1" readonly>
<input name="six" type="radio" tabindex="-1" checked>
<input name="six" type="radio" tabindex="-1">
<input name="six" type="radio" tabindex="-1">
<label for="six"></label>
<div class="disc six"></div>
<input id="zero" type="text" tabindex="-1" readonly>
<div class="spacer a"></div>
<div class="separator ab"></div>
<div class="spacer b"></div>
<div class="separator bc"></div>
<div class="spacer c"></div>
<div class="tower a"></div>
<div class="tower b"></div>
<div class="tower c"></div>
<div class="win">You win! :)</div>
</div>
<div class="bottom"></div>
<button type="reset">New Game</button>
</form>
<p style="color: #8e14ff; padding-left: 40%;">
Moves: <span
id="display" style="color: #2b1055; ">0</span> Times
</p>
</main>
</body>
</html>