Código completo e comentado, para quem tiver dúvidas. (nem tudo está tão claro kk)
contato.html
<!DOCTYPE html>
<html lang="pt-br">
<head> <!-- Cabeça -->
<title> Contato - Barbearia Alura </title> <!-- Título do site -->
<meta charset="utf-8"> <!-- Pacote de linguagem HTML -->
<link rel="stylesheet" href="reset.css"> <!-- Para limpar todas as configurações padrões do html -->
<link rel="stylesheet" href="style.css"> <!-- Referenciando outro arquivo (no caso, é o arquivo CSS) -->
</head>
<body> <!-- Corpo -->
<header> <!-- Cabeçalho -->
<div class="caixa"> <!-- Divisão/ Para facilitar na hora da leitura dos comandos -->
<h1> <img src="logo.png" alt="Logo da Barbearia Alura"> </h1>
<nav> <!-- Menu de navegação, comando que receberá links -->
<ul> <!-- UL - Lista desordenada -->
<li> <a href="index.html"> Home </a> </li> <!-- LI= topico / A= link -->
<li> <a href="produtos.html"> Produtos </a> </li>
<li> <a href="contato.html"> Contato </a> </li>
</ul>
</nav>
</div>
</header>
<main> <!-- Função principal -->
<form> <!-- Formulário -->
<label for="nomesobrenome"> Nome e sobrenome: </label> <!-- Label/ Etiqueta para o input --> <!-- Texto que exibirá o que é pedido no campo -->
<input type="text" id="nomesobrenome" class="input-padrao" required> <!-- Entrada dos dados -->
<!-- Label pertence ao input. Para se conectarem, devem possuir o mesmo nome. ID e FOR -->
<label for="email"> Email </label>
<input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">
<!-- Required/ torna o preenchimento do campo, obrigatório -->
<!-- placeholder/ para exibir exemplo de preenchimento -->
<!-- type="email"/ o formato do campo será de email, para que o usuário digite email num formato válido -->
<label for="telefone"> Telefone </label>
<input type="tel" id="telefone" class="input-padrao" required placeholder="(xx) xxxxx-xxxx">
<label for="mensagem"> Mensagem </label> <!-- Campo de mensagem -->
<textarea cols="50" rows="5" id="mensagem" class="input-padrao" > </textarea> <!-- Para, visualmente, aumentar o tamanho da caixa -->
<fieldset> <!-- Fieldset/ Conjunto de campo -->
<!-- É usada quando queremos agrupar melhor os formulários -->
<!-- Para preenchimento de campos -->
<legend> Como prefere o nosso contato? </legend>
<!-- Opção de escolha -->
<label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email"> Email </label>
<!-- name=contato/ Recebem o mesmo nome para que a seleção seja permitida em apenas uma opção -->
<!-- Para que o input pertença ao label, deverão ter o mesmo nome de referência: FOR e ID -->
<label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone"> Telefone </label>
<label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked> Whatsapp </label>
<!-- checked/ marcará a opção automaticamente, até que o usuário mude -->
</fieldset>
<fieldset>
<legend> Qual horário prefere ser atendido? </legend>
<select> <!-- Campo de seleção --> <!-- Irá conter as opções -->
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label class="checkbox"> <input type="checkbox" checked> Gostaria de receber nossas novidades por email? </label> <!-- Caixa de seleção para SIM ou NÃO -->
<!-- checkbox/ Caixa de seleção -->
<input type="submit" value="Enviar Formulário"> <!-- Caixa de envio do formulário -->
<!-- submit/ Enviar -->
</form>
</main>
<footer> <!-- Rodapé -->
<img src="logo-branco.png">
<!-- SÍMBOLO COPYRIGHT + TEXTO -->
<p class="copyright"> © Copyright Barbearia Alura - 2022 </p>
</footer>
</body>
</html>
