<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/libs/selectize.default.css">
</head>
<body>
<div class="container">
<h1 class="center">Alura typer</h1>
<p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="center">
<img src="img/spinner.gif" alt="Spinner" id="spinner">
<p id="erro">Ocorreu um Erro, Por favor tente novamente.</p>
</div>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id ="tamanho-frase">30</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id ="tempo-digitacao">4</span>segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<div class="botoes">
<a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar"><i class="material-icons">restore</i></a>
<a class="btn-floating btn-large waves-effect waves-light green" id="botao-placar"><i class="material-icons">assignment</i></a>
<a class="btn-floating btn-large waves-effect waves-light blue" id="botao-frase"><i class="material-icons">shuffle</i></a>
<a class="btn-floating btn-large waves-effect waves-light cyan" id="botao-frase-id"><i class="material-icons">repeat_one</i></a>
<input type="number" id="frase-id" min="0">
<div class="select-usuarios">
<select id="usuarios">
<option value="Kadu">Kadu</option>
<option value="Xaublerson">Xaublerson</option>
<option value="Grauberson">Grauberson</option>
</select>
</div>
<a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync"><i class="material-icons">swap_vert</i></a>
</div>
<ul class="center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>Nº de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
<td> Xaublerson</td>
<td>6</td>
<td>
<a href="#"class="botao-remover">
<i class=" small material-icons">delete</i>
</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
<script src="js/selectize.js"></script>
</body>
</html>.campo-digitacao{
font: 20px;
height: 150px;
border: 3px solid black;
}
.frase{
font-size: 20px;
text-align: left;
}
.campo-desativado{
background-color: lightgray;
}
.icones{
vertical-align: middle;
}
.borda-verde{
border: 3px solid green;
}
.borda-vermelha{
border: 3px solid red;
}
.placar{
display: none;
}
body {
overflow: scroll;
}
#erro {
color: red;
display: none;
}
#spinner{
display: none;
}
#frase-id{
width: 50px;
}
#botao-sync{
float: right;
}
.select-usuarios{
display: inline-block;
}
.selectize-input{
width: 150px;
vertical-align: middle;
}
#usuarios{
display: block;
}
seguem os códigos do html e do css
