Olá pessoal, estou desenvolvendo o meu projeto junto à aula e acabei travando em um erro. A largura da minha página não "fecha" pois de acordo com a ferramenta de inspecionar, a lista de itens do header é maior do que a largura da página. Alguém poderia me dar uma força?
xxxxx
xxxxx
Wallace manda o arquivo index completo, pois falta partes importantes no seu código INDEX.
Olá Felipe, como faço o upload do meu arquivo Index aqui? Sou novo na plataforma e não estou conseguindo colar o arquivo Zipado aqui.
Não precisa colocar o arquivo zipado só copiar todo código HTML em um parte e todo o CSS e outra e pronto
xxxxx
xxxxx
Oi.
No seu código não encontrei a tag meta informando para utilizar a largura do device. Também não encontrei a media query no CSS para aplicar estilos diferentes para uma largura diferente. Você chegou nessa parte da aula? Nela, o professor explica como informar ao navegador qual tamanho de viewport utilizar (com as propriedades na tag meta) e qual CSS aplicar (com a media query no CSS).
Olá Mateus, obrigado por avisar!! Acabei de notar que coloquei o código errado, Amanhã pela parte da manhã quando estiver com meu computador, coloco o código correto ( que possui a tag meta com o viewport e a media query)
segue código HTML correto:
<body>
<header>
<div class="caixa">
<h1><img src="https://i.pinimg.com/736x/09/77/c1/0977c10d4a5431ae9b0979747bc6fa9a.jpg"><h2>Minha Barbearia</h2></h1>
<nav class="lista">
<ul>
<li><a href="Minha Barbearia - home.html">Home</li></a>
<li><a href="Minha Barbearia.html">Serviços</a></li>
<li><a href="Minha Barbearia - contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="conteudo-0">
<section class="conteudo-1">
<h2>Sobre a minha barbearia:</h2>
<p id="">Se você está cansado de ir em uma barbearia, pedir um corte super estiloso e sair decepcionado e com vontade de passar a máquina n° 0 em toda a cabeça, seus problemas acabaram.<br>
<br>
Venha para a minha barbearia, aqui contamos com a melhor infraestrura e equipamentos de última geração.<br>
<br> Com os melhores profissionais do mercado, fazemos com que cada cliente saia da Barbearia totalmente satisfeito, essa é nossa missão, fazer com que cada corte seja único ao estilo do cliente e com o maior cuidado possível para o tornar perfeito!</p>
</section>
</div>
<div class="engloba">
<section class="beneficios">
<h3>Benefícios</h3>
<p>Confira abaixo alguns dos incríveis benefícios que apenas a Minha Barbearia te oferece:</p>
<ul>
<li class="itens">Atendimento aos Clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
</section>
</div>
</main>
<footer>
<p>©Copyright Minha Barbearia -2022</p>
<img src="caveirão.png">
</footer>
</body>segue código CSS correto:
/CSS PÁGINA HOME/
.caixa {
position:relative;
width: cover;
margin: 0 auto;
background-color: rgb(32, 32, 32);
color:orangered;
max-height:300px;
}
.caixa img{
max-height:250px;
}
.caixa h2{
font-family: 'My Soul', cursive;
font-size: 3em;
font-style: oblique;
position:absolute;
top:100px;
margin-left: 200px;
}
.caixa a{
color:inherit;
text-decoration: none;
}
.caixa h2:hover{
Color:red;
font-size: 3.3em;
}
.lista{
position:absolute;
top:50px;
text-decoration: none;
}
nav li {
display: inline;
margin: 0 0 0 10px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
body{
background-color: orangered;
font-family: 'Libre Bodoni', serif;
}
.conteudo-0{
background-image: url("https://c.tenor.com/hRslrH6H2joAAAAM/cabelin-monkey.gif");
background-repeat:repeat-x;
background-size: 700px;
margin:40px auto 40px auto;
padding:10px;
}
.conteudo-1{
display:absolute;
margin:40px auto 40px auto;
box-sizing: border-box;
background:radial-gradient(orangered 30%,rgb(32,32,32) );
padding: 50px;
font-size:20px;
text-align: center;
width:600px;
line-height: 1.2;
box-shadow: 10px 10px 10px black;
}
.conteudo-1 h2{
font-size:32px;
font-weight: bold;
margin-bottom: 40px;
color:rgb(32, 32, 32);
}
.conteudo-1:hover h2{
font-size: 40px ;
text-decoration: underline ;
}
.conteudo-1:hover p{
font-size: 22px ;
font-weight: bold;
}
.beneficios h3{
padding:30px;
background-color:rgb(32, 32, 32);
color: orangered;
font-size:26px;
font-weight:bold;
text-align:center;
}
.beneficios{
padding:20px;
display: absolute;
margin: 20px auto 20px auto;
box-sizing: border-box;
width:800px;
height:400px;
border: 3px solid orangered;
border-radius: 5px;
background-color:rgb(32, 32, 32);
color: white;
font-size:20px;
box-shadow: 20px 20px 10px black;
}
.beneficios li:before{
content: "emoji";
}
.beneficios p{
font-size:18px;
text-align:inherit;
margin-bottom: 40px;
}
.beneficios:hover{
transform: scale(1.2);
border-color: green;
}
.beneficios:hover h3{
color: green;
text-decoration: underline;
}
.itens{
display:absolute;
text-align:center;
padding-top:10px;
padding-bottom: 20px;
}
.itens:hover{
color:green;
font-size:22px;
}
.engloba{
background-color: rgb(32, 32, 32);
padding:50px;
}
footer{
background: radial-gradient(orangered, rgb(32,32,32));
text-align:center;
padding-top: 20px;
text-decoration: underline;
font-weight: bold;
}
footer img{
margin-top:20px;
height:150px;
box-shadow: 10px 10px 20px 20px black;
}
@media screen and (max-width:480px){
.caixa{
width:auto;
text-align: center;
padding-bottom: 120px;
}
.conteudo-1, .beneficios{
width:auto;
height: auto;
}
.caixa h2{
position:absolute;
margin:120px auto 30px 20px;
}
.conteudo-0{
background-image: none;
}
.caixa img{
width:60%;
}
h1 {
text-align: center;
}
.caixa nav ul{
position:relative;
top:210px;
right:270px;
}
nav a{
font-size: 18px;
margin: 10px 10px 10px 10px;
}Oi Wallace.
Seu HTML veio incompleto de novo, sem o conteúdo da sua head.
Criei uma só para poder testar e aqui aparece o conteúdo com a largura total da tela do celular:
Algumas coisas estão quebradas porque não tenho o conteúdo completo do seu HTML, mas já dá para você ver que está diferente do seu print. Tenta dar uma olhada na sua tag head se você declarou corretamente. Segue a que eu fiz para poder testar seu código:
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>Você também precisaria ainda estilizar algumas coisas no seu CSS para tratar seu menu de navegação para aparecer direito. Mesmo assim, está de parabéns, sua página está ficando bem legal. Esse vermelho com preto deu um ótimo contraste.
Valeu Matheus, acabei de perceber que a parte do head do meu código é deletada ao postar aqui, vou colocar apenas a parte do head de minha página para ver se dá certo. Enfim, muito obrigado por testar, caso você possa dar uma olhada com o meu código head, agradeço demais...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Minha Barbearia - Home</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style-completo.css">
<link href="https://fonts.googleapis.com/css2?family=Libre+Bodoni&family=My+Soul&display=swap" rel="stylesheet">
</head>Oi Wallace, não sei o que pode estar acontecendo... :(
Testei aqui com seua head e foi. Testei no Opera e no Chrome, ambos no Windows 10.
A única coisa que eu consegui perceber no CSS é que faltou fechar a chave da sua media query, mas aí não sei se é problema aqui do fórum de cortar o código.
Segue print da minha tela:
Ok Matheus, muito obrigado por dedicar seu tempo para me ajudar!!
Na minha tela aqui, consegui centralizar na tela os itens do menu de navegação, porém o
1-Para o [index.html] temos...
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</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><!--tag especial para o cabeçario-->
</header>
<img class="banner" src="banner.jpg">
<main>
<section class="principal">
<h2 class="titulo-principal">Sobre a Barbearia Alura</h2>
<img class="utensilios" src="utensilios.jpg" alt="Utensilios de um barbeiro"><!--alt= caso a imagem nao apareça-->
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</section >
<section class="mapa">
<h3 class="titulo-principal">Nosso estabelecimento</h3>
<p>Nosso estabelecimento está localizado no coração da cidade.</p>
<div class="mapa-conteudo">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58503.19744076339!2d-46.69824986874998!3d-23.5881948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1651841392048!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<section class="beneficios">
<h3 class="titulo-principal">Benefícios</h3>
<div class="conteudo-beneficios">
<ul class="lista-beneficios">
<li class="itens">Atendimento aos cliente</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
<li class="itens">Pontualidade</li>
<li class="itens">Limpeza</li>
</ul><img src="beneficios.jpg" class="imagem-beneficios">
</div>
<div class="video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>2- Para o [produtos.html], temos...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" 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><!--tag especial para o cabeçario-->
</header>
<main><!--tag especial para o miolo (é uma tag semântica)-->
<ul class="produtos">
<li >
<h2>Cabelo</h2>
<img src="cabelo.jpg"><!--imagem-->
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p><!--descrição-->
<p class="produto-preco">R$ 25,00</p><!--preço-->
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg"><!--imagem-->
<p class="produto-descricao">Corte e desenho profissional de barba.</p><!--conteudo-->
<p class="produto-preco">R$ 18,00</p><!--preço-->
</li>
<li>
<h2>Cabelo+Barba</h2>
<img src="cabelo+barba.jpg">
<p class="produto-descricao">Pacote completo de cabelo e barba.</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</ul>
</main>
<footer>
<img src="logo-branco.png">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>3 - Para o [contato.html] , temos....
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Contato - Barbearia Alura</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png" alt="Logo da Barbearia Alura"></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><!--tag especial para o cabeçario-->
</header>
<main>
<form>
<label for="nomesobrenome">Nome e Sobrenome</label>
<input type="text" id="nomesobrenome" class="input-padrao" required >
<label for="email">Email</label>
<input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">
<label for="telefone">Telefone</label>
<input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX - XXXX">
<label for="mensagem">Mensagem</label>
<textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea >
<fieldset>
<legend>Como prefere o 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 prefere ser atendido?</legend>
<select>
<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>
<input type="submit" value="Enviar Formulário" class="enviar">
</form>
<table>
<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>
<img src="logo-branco.png" alt="Logo da Barbearia Alura">
<p class="copyright">© Copyright Barbearia Alura - 2019</p>
</footer>
</body>4 - Para o [style.css] , temos......
body { font-family: 'Montserrat', sans-serif; }
header { background: #BBBBBB; padding: 20px 0; } .caixa { position: relative; width: 940px; margin: 0 auto; } nav { position: absolute; top: 110px;/tenha uma distancia do topo de 110px/ right: 0;/* tenha uma distância da direita de 0px, ou seja esteje colado na direita*/ }
nav li { display: inline;/pra ficar todos na mesma linha/ margin: 0 0 0 15px /posicionar a direita ....(cima, esquerda,baixo,direita)/ }
nav a { text-transform: uppercase;/alterando o texto pra ficar todo em maiúsculo/ color: #000000; /adicionando uma cor preta/ font-weight: bold;/fonte em negrito/ font-size: 22px; /alterando o tamanho da fonte para um tamanho de 22px/ text-decoration: none; /alterando a propriedade decorativa do texto de modo que não fique sublinhado/ } nav a:hover { /pseudo-elementos/ color: #C78C19; text-decoration: underline; }
.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 {
}
form { margin: 40px 0; }
form label, form legend { 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; }
.enviar { width: 40%; padding: 15px 0; background: orange; color: white; font-weight: bold; font-size: 18px; border: none; border-radius: 5px; transition: 1s all; cursor: pointer; } .enviar:hover { background: darkorange;
transform: scale(1.2) ;}
table { margin: 20px 40px;
}
thead { background: #555555; color: white; font-weight: bold; }
td, th { border: 1px solid #000000; padding: 8px 15px; }
.banner { width: 100%; }
.titulo-principal { text-align: center; font-size: 2em; margin: 0 0 1em; clear: left;
}
.principal { padding: 3em 0; background: #FEFEFE; width: 940px; margin: 0 auto;
}
.principal p { margin: 0 0 1em;
}
.principal strong { font-weight: bold; }
.principal em { font-style: italic; }
.utensilios { width: 120px; float: left; margin:0 20px 20px 0; }
.mapa { padding: 3em 0; background: linear-gradient(#FEFEFE, #888888); }
.mapa-conteudo { width: 940px; margin: 0 auto; }
.mapa p { margin: 0 0 2em; text-align: center; } .beneficios { padding: 3em 0; background: #888888; }
.conteudo-beneficios { width: 640px; margin: 0 auto;
}
.lista-beneficios { width: 40%; display: inline-block; vertical-align: top;
}
.itens { line-height: 1.5; }
.itens:first-child{ font-weight: bold; }
.itens:before { content: "★"; } .imagem-beneficios { width: 60%; opacity: 1; transition: 400ms; box-shadow: 10px 10px 10px 0 #000000; }
.imagem-beneficios:hover {
}
.video { width: 560px; margin: 2em auto; }
@media screen and (max-width: 480px){ .caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video { width: auto; position: static; }
h1{ /*centralisando a imagem*/
text-align: center;
}
nav {
position: static; /* trocando a posição absoluto para statico*/
}
.lista-beneficios, .imagem-beneficios {
width: 100%
}
.produtos li {
display: block;/*colocando os itens em baixo do outro*/
width: auto; /* colocando o largura para se adaptar automaticamente as laterais*/
margin: 10% 10%;/*afinando mais os produtos e tambem distanciando um do outro*/
}
main form {
padding: 0 2%;
}
.input-padrao {
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 80%/*alterando o tamanho do empty*/
}
.enviar {
width: 60%;/*alterando o tamanho de 40% para 60%*/
margin: 0 70px; /*centralisando o botão*/
}
table {
margin: 20px auto;/*alinhando a tabela no centro da tela*/
}
.principal {
padding: 3em 1em;
text-align: justify;
}
.mapa-conteudo {
margin: 0 10px;
}
.imagem-beneficios{
margin: 20% 10%;
width: 80%;
}
.video {
padding: 10px 0 0 0;
width: 80%;
}
.itens {
line-height: 1.5;
margin: 0 20%;
}}