Boa noite! Depois que inseri o input-padrão, minha label radio ficou uma ao lado de outra e não na vertical. A margin também não quer ser aplicada no checkbox. Não sei o que estou fazendo de errado.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa noite! Depois que inseri o input-padrão, minha label radio ficou uma ao lado de outra e não na vertical. A margin também não quer ser aplicada no checkbox. Não sei o que estou fazendo de errado.
Oi Tatiane!
Tem como postar seu código pra gente ver? (HTML e CSS)
/HTML/
Nome
/*CSS */ fieldset{ width: 30%; } div{ display: flex; align-items: center; justify-content: space-between; }
Você pode colocar os dois códigos completos, o HTML e CSS? (Basta inserir os códigos entre 3 crases `)
Nesse trecho que você enviou align-items está com a letra trocada, está como aling-items.
obrigada
header { background: #BBBBBB; padding: 20px 0; }
.caixa { position: relative; width: 940px; margin: 0 auto; }
nav { position: absolute; top: 110px; right: 0; }
nav li { display: inline; margin: 0 0 0 15px; }
nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }
nav a:hover { color: #C78C19; text-decoration: underline; }
.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }
.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }
.produtos li:hover { border-color: #C78C19; }
.produtos li:active { border-color: #088C19;}
.produtos li:hover h2 { font-size: 34px; }
.produtos h2 { font-size: 30px; font-weight: bold; }
.produto-descricao { font-size: 18px; }
.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }
footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }
.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; } main{ width: 940px; margin: 0 auto; }
form{ margin: 40px 0; }
form label. form p{ display: block; font-size: 20px; margin: 0 0 10px; }
.input-padrao{ display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }
.checkbox{ margin: 20px 0; }
insira <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contatos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<label for="nomesobrenome">Nome e sobrenome</label>
<input type="text" id="nomesobrenome" class="input-padrao">
<label for="email">Email</label>
<input type="text" id="email"class="input-padrao">
<label for="telefone">Telefone</label>
<input type="text" id="telefone"class="input-padrao">
<label for="mensagem">Mensagem</label>
<textarea cols="70" rows="10" id="mensagem" class="input-padrao"> </textarea>
<div>
<p>Como prefere nosso contato?</p>
<label for="radio-email"><input type="radio" name="contatos" value="email" id="radio-email">Email</label>
<label for="radio-telefone"><input type="radio" name="contatos" value="telefone" id="radio-telefone">Telefone</label>
<label for="radio-whatsapp"><input type="radio" name="contatos" value="whatsapp" id="radio-whatsapp">WhatsApp</label>
</div>
<div>
<p> Qual horário prefere ser atendido?</p>
<select>
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</div>
<label class="checkbox"><input type= "checkbox">Gostaria de receber nossas novidades por email?</label>
<input type="submit" value="Enviar formulário">
</form>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>
</html>
seu código aquiOi Tatiana! Obrigada por postar todo o seu código, então o que esta com problema é nessa linha aqui:
form label. form p{ display: block; font-size: 20px; margin: 0 0 10px; }Você colocou um ponto(.) ao invés de uma vírgula (,) acredito que tenha sido um erro de digitação. O correto seria:
form label,
form p {
display: block;
font-size: 20px;
margin: 0 0 10px;
}Se puder te dar um dica, é bom fazer seu código CSS igual eu coloquei acima, pulando linha entre as propriedades, deixa mais legível e ajuda a identificar possíveis erros.
Espero ter te ajudado e bons estudos!