Oi galera da Alura! Tudo bem? Não estou conseguindo criar margem nesse formulário, quando fui fazer o responsivo... Alguém poderia me ajudar?
Solucionado
Oi galera da Alura! Tudo bem? Não estou conseguindo criar margem nesse formulário, quando fui fazer o responsivo... Alguém poderia me ajudar?
hoje, com a Alura e o Google Gemini
Oi Ramiro,
O que você gostaria de fazer no formulário, centralizar?
Se possível, posta seu código pra gente dar uma olhada.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UFT-8">
<meta name="viewport" content="width=device-width">
<title>Contato - Barbearia Alura</title>
<link rel = "stylesheet" href = "reset.css">
<link rel = "stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class = "caixa">
<h1><img src = "logo.png" alt = "Logo Barbearia Alura"></h1>
<nav>
<ul>
<li><a href= "index.html">Home</a></li>
<li><a href="produtos.html">Produto</a></li>
<li><a href = "Contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<div class = "questionairio">
<label for = "NomeeSobrenome">Nome e Sobrenome</label>
<input type = "text" id = "NomeeSobrenome" class = "input-padrao" required>
</div>
<div class = "questionairio">
<label for = "Email">E-mail</label>
<input type = "email" id = "Email" class = "input-padrao" required
placeholder="seuemail@dominio.com">
</div>
<div class = "questionairio">
<label for = "Telefone">Telefone</label>
<input type = "tel" id = "Telefone" class = "input-padrao" required
placeholder="(XX) XXXXX-XXXX">
</div>
<div class = "questionairio">
<label for = "area-texto">Mensagem</label>
<textarea rows="10" id="area-texto" class = "input-padrao" required></textarea>
</div>
<fieldset clas = "radio-contato">
<legend>Como prefere nosso contato?</legend>
<label for = "radio-Email"><input type = "radio" name = "contato"
value = "Email" id = "radio-Email">Email</label>
<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>
</fieldset>
<fieldset>
<legend>Qual horário você prefere ser atendido?</legend>
<select>
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label class = "checkbox"><input type = "checkbox" checked>Você gostaria de receber E-mails com novidades?</label>
<input class = "enviar" type = "submit" value = "Enviar Formulário">
<table>
<thead>
<tr>
<th>Dia</th>
<th>Horário</th>
</tr>
</thead>
<tbody>
<tr>
<td>Segunda</td>
<td>08h - 20h</td>
</tr>
<tr>
<td>Quarta</td>
<td>08h - 20h</td>
</tr>
<tr>
<td>Sexta</td>
<td>08h - 20h</td>
</tr>
</tbody>
</table>
</form>
</main>
<footer>
<img src ="logo-branco.png" alt = "Logo Barbearia Alura">
<p class = "copyright">© Copyright Barbearia Alura – 2019</p>
</footer>
</body>
</html>@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, form {
width: auto;
}
h1{
text-align: center;
}
nav{
position: static;
display: block;
margin: 0 auto;
}
.lista-beneficios, .imgbeneficios{
width: 100%;
}
.produtos li{
width: 90%;
margin: 10% auto;
display: block;
}
.questionario{
width: 80%;
display: block;
margin: 40px;
}
.questionario label{
margin: 10px;
}
}
Aparentemente o único erro que percebi foi as letras trocadas, questionario e questionairio.
No HTML está assim:
<div class = "questionairio">
<label for = "Telefone">Telefone</label>
<input type = "tel" id = "Telefone" class = "input-padrao" required
placeholder="(XX) XXXXX-XXXX">
</div>E no CSS está assim:
.questionario label{
margin: 10px;
}