Spiel mit Worten

Hinweis:

Verbleibende Züge:

Falscher Buchstabe:

Quellcode

<html>
<head>

<style type="text/css">
.wrapper{width: 430px; background: #fff; border-radius: 10px;}
.wrapper h1{font-size: 25px; font-weight: 500; padding: 20px 25px; border-bottom: 1px solid #ccc;}
.wrapper .content{margin: 25px 25px 35px;}
.content .inputs{display: flex; flex-wrap: wrap; justify-content: center;}
.inputs input{height: 57px; width: 56px; margin: 4px; font-size: 24px; font-weight: 500; color: #1ba98c; text-align: center; border-radius: 5px; background: none;
pointer-events: none; text-transform: uppercase; border: 1px solid #B5B5B5;}
.typing-input {opacity: 0; z-index: -999; position: absolute; pointer-events: none;}
.inputs input:first-child{margin-left: 0px;}
.content .details{margin: 20px 0 25px;}
.details p{font-size: 19px; margin-bottom: 10px;}
.content .reset-btn{width: 100%; border: none; cursor: pointer; color: #fff; outline: none; padding: 15px 0; font-size: 17px; border-radius: 5px; background: #1BB295; transition: all 0.3s ease;}
.content .reset-btn:hover{background: #18a589;}
@media screen and (max-width: 460px) {
.wrapper {width: 100%;}
.wrapper h1{font-size: 22px; padding: 16px 20px;}
.wrapper .content{margin: 25px 20px 35px;}
.inputs input{height: 51px; width: 50px; margin: 3px; font-size: 22px;}
.details p{font-size: 17px;}
.content .reset-btn{padding: 14px 0; font-size: 16px;} }
</style>

<body >
<center>
<div class="wrapper">
<div class="content">
<input type="text" class="typing-input" maxlength="1">
<div class="inputs"></div>
<div class="details">
<p class="hint">Hinweis: <span></span></p>
<p class="guess-left">Verbleibende Züge: <span></span></p>
<p class="wrong-letter">Falscher Buchstabe: <span></span></p>
</div>
<button class="reset-btn">Reset Game</button>
</div>
</div>
<script src="../Extra/spielwords.js"></script>
<script src="../Extra/spielscript.js"></script>
</center>
</body>

</html>