o meu código esta executando diferente do que o instrutor ensina ,mais eu fiz igual o dele, o que em de errado?
https://drive.google.com/file/d/1Xc6KF-IWgtGLrC9yyiPEP1-o5mAb660a/view?usp=sharing
Solucionado
o meu código esta executando diferente do que o instrutor ensina ,mais eu fiz igual o dele, o que em de errado?
https://drive.google.com/file/d/1Xc6KF-IWgtGLrC9yyiPEP1-o5mAb660a/view?usp=sharing
Oi, Geovane, tudo bem?
A classe .caixa no arquivo .css a caixa precisa ter uma largura fixa de:
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}Em .produtos não é necessário o uso do display:flex;:
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
display: flex;
}Assim, a caixa vai ficar centralizada. Espero ter te ajudado!
A sim obrigado
mais Laís o meu radio e o meu label no navegador está escrito whatsapp, e o do meu telefone está escrito só o label, tem alguma coisa errada!
Segue o meu código com alguns comentários, talvez lhe ajude no entendimento. Verifiquei diversos erros de digitação e algumas formatações em lugares errados. Dica: Baixe o do professor e faça as devidas comparações com o seu código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Contato - Barbearia Alura</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<!-- Primeiro limpa os estilos impostos pelo navegador -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<!-- Cabeçalho -->
<div class="caixa">
<h1><img src="img2/logo.png" alt="Logo da Barbearia Alura"></h1>
<nav><!-- Estrutura de navegação -->
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contatos</a></li>
</ul>
</nav>
</div><!-- Cabeçalho e Estrutura de navegação principal. -->
</header>
<main><!--Estrutura principal -->
<form>
<!-- Inicio Formulário -->
<label for="nomesobrenome">Nome e Sobrenome</label>
<input type="text" id="nomesobrenome" class="input-padrao" required>
<!-- o "for" deve indicar a "id". type "text" se o usuário for inserir um texto. "required" para que o preenchimento seja obrigatório.-->
<label for="E-mail">E-mail</label>
<input type="email" id="E-mail" class="input-padrao" required placeholder="seuemail@dominio.com">
<!-- "placeholder" serve como um modelo. -->
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">
<label for="mensagem">Mensagem</label required>
<textarea cols="70" rows="10" id="mensagem" class="input-padrao" required=""></textarea>
<!-- "textarea" é a caixa na qual será possivel escrever a mensagem. cols e rows são colunas e linhas, respectivamente. -->
<fieldset><!-- Contato-->
<legend>Como prefere o nosso contato?</legend>
<label for="radio-email">
<input type="radio" name="contato" value="E-mail" id="radio-email">E-mail</label>
<!-- o type "radio" faz a opção de marcar surgir. a identificação deve seguir o padrão: "radio-XXXX". -->
<!-- tipos de "type": text | email | tel | number | password | date | datetime | month | search -->
<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 prefere ser atendido?</legend>
<select> <!-- "select" pode ser usada quando deve-se marcar APENAS uma opção. -->
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label class="checkbox"> <!-- uma label simples, se for marcada é um sim, caso contrário, não. -->
<input type="checkbox" checked>Gostaria de receber nossas novidades por E-mail?</label>
<input type="submit" value="Enviar formulário" class="enviar">
</form>
<!-- Fim Formulário -->
<table><!-- tr = linha | td = coluna -->
<thead>
<tr>
<th>Dia</th>
<th>Horário</th>
</tr>
</thead>
<tbody>
<tr>
<td>Segunda</td>
<td>8h ~ 20h</td>
</tr>
<tr>
<td>Quarta</td>
<td>8h ~ 20h</td>
</tr>
<tr>
<td>Sexta</td>
<td>8h ~ 20h</td>
</tr>
</tbody>
</table>
</main>
<footer>
<!--TAG do rodapé -->
<img src="img2/logo-branco.png" alt="Logo da Barbearia Alura">
<p class="copyright">© Copyright Barbearia Alura - 2020</p>
</footer>Segue o meu "style.css" contendo os estilos e comentários para lhe ajudar no entendimento.
header {
background: #BBBBBB;
padding: 20px 0;
}
.caixa {
position: relative;
/* O position relative posiciona o elemento em relação a si mesmo. Começando do canto superior esquerdo. */
width: 940px;
/* 940px de largura */
margin: 0 auto;
/* margin cima/baixo 0px e laterais automáticas */
}
nav {
position: absolute;
/* utiliza do ponto superior esquerdo de outros elementos. */
top: 110px;
right: 0;
}
nav li {
display: inline;
/* inline permite definir uma largura e altura no elemento. */
margin: 0 0 0 15px;
/* esquerda. cima | direita | baixo | esquerda, respectivamente. */
}
nav a {
text-transform: uppercase;
/* Transforma em maísculo */
color: #000000;
font-weight: bold;
/* Peso da fonte: em negrito */
font-size: 22px;
text-decoration: none;
/* Nenhuma decoração no text. (Tira o sublinhado) */
}
nav a:hover {
color: #C78C19;
text-decoration: underline;
/* Quando passar o cursor em cima dos itens da navegação, são aplicados os estilos. */
}
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li {
display: inline-block;
/*Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.*/
text-align: center;
width: 30%;
/* Cada produto ocupa 30% dos 940px */
vertical-align: top;
margin: 0 1.5%;
/* margem nas laterais (esquerda e direita) de todos os produtos, somando com os 90% dos 940px, chegando em 100%. */
padding: 30px 20px;
/* espaçamento (cima e baixo) de 30px e <direita e esquerda) de 20px. */
box-sizing: border-box;
/*Os 30% são definitivos e os pixels do padding estão dentro dele */
border: 2px solid #000000;
/* Tamanho | Tipo | Tamanho */
border-radius: 10px;
/*Arredonda as bordas*/
}
.produtos li:hover {
/* Aplica uma mudança na cor da borda quando o usuário passa o cursor sobre o elemento. */
border-color: #C78C19;
}
.produtos li:active {
/* Aplica uma mudança na cor da borda quando o usuário está ativando um elemento. */
border-color: #088C19;
}
.produtos li:hover h2 {
/*O h2 quando o mouse estiver por cima dos li dos produtos */
font-size: 34px;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
/* Define o peso de importância. */
}
.produto-descricao {
font-size: 18px;
}
.produto-preco {
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
footer {
text-align: center;
background: url(img2/bg.jpg);
/*No background, referenciamos uma imagemc com "url()" */
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 legend {
display: block; /*Faz com que ocupe a linha inteira */
font-size: 20px;
margin: 0 0 10px;
}
.input-padrao {
display: block; /*Faz com que ocupe a linha inteira */
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox {
margin: 20px 0;
}
.enviar {
width: 40%;
padding: 15px 0;
background: orange;
color: white;
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 5px;
transition: 1s all; /* transição do meu background que levará 1 segundo (de "orange" para "darkorange") */
cursor: pointer; /* quando o cursor estiver em cima do input de enviar, virará a "mãozinha" */
}
.enviar:hover {
background: darkorange;
transform: scale(1.2); /* Aumenta o tamanho do botão de enviar proporcionalmente em 20%, onde o "1" representa 100%, logo
o "0.2" representa 20%. */
}
table {
margin: 20px 0 40px;
}
thead {
background: #555555;
color: white;
font-weight: bold;
}
td, th {
border: 1px solid #000000;
padding: 8px 15px;
}Oi, Lucas.
Ele já foi auxiliado aqui: https://cursos.alura.com.br/forum/topico-codigo-nao-esta-do-jeito-do-instrutor-106206
Obrigada.
na verdade não tinha pensado no que o Lucas falou de baixar o código do instrutor e comparar, boa dica mais agradeço você tambem Laís !