O Código das respostas não funciona conforme o esperado
Antes de ver o código das respostas, fui codando por conta própria. Mas, mesmo depois de colar o css das respostas em meu arquivo, o resultado ficou diferente do esperado (como mostrado na imagem do exercício em questão).
Imagem do exercício:
Resultado:
Código: https://github.com/Roger-Melo/curso_html5_e_css3_2_turbinando_as_suas_paginas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contato - João da Silva</title>
<link rel="icon" href="imagens/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/contato.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<!-- start main -->
<main>
<h1 class="titulo-principal">Contato</h1>
<div class="container">
<!-- start Form -->
<form>
<!-- start Inputs -->
<fieldset>
<legend>Dados pessoais</legend>
<label for="nome">Nome</label>
<input autofocus id="nome" name="nome" type="text" placeholder="Seu nome aqui" pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres, e também pode conter espaço e apóstrofe.">
<label for="email">E-mail</label>
<input required type="email" id="email" name="e-mail" placeholder="exemplo@email.com">
</fieldset>
<!-- end Inputs -->
<!-- start Radio Inputs -->
<fieldset id="radio-inputs">
<fieldset>
<legend id="legend-assunto">Assunto</legend>
<label for="consultoria">
<input checked value="consult" name="assunto" type="radio" id="consultoria">
Consultoria
</label>
<label for="blog">
<input value="blog" name="assunto" type="radio" id="blog">
Blog
</label>
<label for="outro">
<input value="outro" name="assunto" type="radio" id="outro">
Outro
</label>
<input type="text" name="outro-assunto">
</fieldset>
</fieldset>
<!-- end Radio Inputs -->
<!-- start Mensagem -->
<label for="mensagem">Mensagem</label>
<textarea required name="mensagem" placeholder="Digite aqui sua mensagem" id="mensagem" cols="30" rows="10"></textarea>
<!-- end Mensagem -->
<!-- start Botão -->
<button type="submit">Enviar <strong>para mim</strong></button>
<!-- end Botão -->
</form>
<!-- end Form -->
</div>
</main>
<!-- end main -->
<img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
<aside class="navegacao-site">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li>
<a data-legenda="Clique em mim =)" href="https://github.com/joaodasilva" class="github">
Github
</a>
</li>
<li>
<a data-legenda="Clique em mim =)" href="https://twitter.com/joaodasilva" class="twitter">
Twitter
</a>
</li>
<li>
<a data-legenda="Clique em mim =)" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
LinkedIn
</a>
</li>
</ul>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>/* As legendas dos grupos de campo e do campo "Mensagem" devem estar em negrito e espaçadas do grupo de campos anterior. */
/*Usando um seletor de atributo para selecionar apenas a legenda desse campo e não dos outros */
legend,
label[for="mensagem"] {
font-weight: bold;
margin-top: 1em;
}
/* Deixar os rótulos dos campos sempre em cima deles, exceto para os assuntos.
As tags <label> que têm o atributo "for" são os rótulos dos campos que não são os assuntos */
label[for] {
display: block;
}
/* Os campos de texto devem ocupar a largura inteira da tela (exceto o campo para o assunto "Outro"), ter uma borda cinza clara, espaçamento interno e usar a mesma fonte do resto da página. */
/* Selecionando apenas os campos de texto */
input[type="text"],
input[type="email"],
textarea {
/* Força o navegador a usar a mesma fonte da página */
font-family: inherit;
/* Inclusive o tamanho dela */
font-size: 100%;
padding: .25em .5em;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
}
/* alguns ajustes para o campo "Outro": deixar ele na mesma linha dos outros assuntos */
fieldset > fieldset {
display: inline;
}
/* deixar o rótulo dele inline de novo */
label[for="outro"] {
display: inline;
}
/* deixar só esse campo sem ocupar a tela toda */
input[name="outro-assunto"] {
width: auto;
}
/* O campo de texto que tiver o foco do teclado deve ficar com o fundo levemente amarelo */
input:focus,
textarea:focus {
background-color: #FFD;
}
/* Os campos que estiverem inválidos devem ter uma sombra vermelha. */
input:invalid {
-webkit-box-shadow: 0 0 3px red;
box-shadow: 0 0 3px red;
}
/* O botão para enviar o formulário deve ficar na parte inferior direita da página, após o formulário, e ter o mesmo esquema de cores da barra lateral com a fonte usada nos títulos e levemente maior do que o texto normal. Além disso, o botão não deve ter borda. */
button {
/* Tirando a borda que o navegador coloca por padrão */
border: 0;
padding: .5em 1em;
font-family: "Open Sans Condensed", sans-serif;
background-color: #3C1D3D;
color: white;
font-size: 1.2em;
/* Faz com que o botão apareça na direita */
margin-left: auto;
margin-top: 1em;
cursor: pointer;
}
/* Quando o botão for selecionado pelo teclado ou quando o mouse estiver sobre ele, o fundo deve mudar para a cor #8C1D3D. */
button:hover,
button:focus {
background-color: #8C1D3D;
}
