index.html

<html>

	<head>

		<title>Teste para estágio em FourItil</title>

		<style>
			.left{
				width: 20%;
				float: left;
			}
			.center{
				width: 60%;
				float: left;
			}
			.right{
				width: 20%;
				float: right;
			}

		</style>

	</head>

	<body>
		<div class="left">&nbsp;</div>
		
		<div class="center">
			
			<label>Digite seu nome no campo abaixo</label>
			<br />
			<input type="text" id="campo-nome">

			<br />
			<br />
			O nome informado é: <span id="nome-digitado"></span>
			<br />
			O nome informado possui <strong><span id="quantidade-caracteres">x<span></strong> caracteres
		</div>

		<div class="right">&nbsp;</div>
	</body>

</html>