Solucionado
Não entendi o que houve, mas o resultado do jumbotron foi um fundo cinza sem destaque (negrito) para o título e o código usado é igual ao fornecido na aula:
<div class="jumbotron">
<div class="container">
<h3>Mais de 300 prêmios em design e em conforto.</h3>
<p>Mais de 5 milhões de clientes satisfeitos em todo o mundo.</p>
</div>
</div>O que pode estar errado?
hoje, com a Alura e o Google Gemini
Yuri você importou o css do boostrap?
Sim, sim!
Código:
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<script src="bootstrap/js/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h2>Sobre Nós</h2>
<img class="img-responsive" src="img/empresa.jpg" />
<div id="paineis-sobre" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-toggle="collapse" data-target="#primeiro-paragrafo" data-parent="#paineis-sobre">Parágrafo I</h3>
</div>
<div id="primeiro-paragrafo" class="collapse">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia quam sed fermentum iaculis. Praesent convallis, neque sit amet laoreet venenatis, odio sem porta lacus, id faucibus urna enim at nulla. Nunc aliquet ex id lorem luctus, eget congue augue luctus.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-toggle="collapse" data-target="#segundo-paragrafo" data-parent="#paineis-sobre">Parágrafo II</h3>
</div>
<div id="segundo-paragrafo" class="collapse">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia quam sed fermentum iaculis. Praesent convallis, neque sit amet laoreet venenatis, odio sem porta lacus, id faucibus urna enim at nulla. Nunc aliquet ex id lorem luctus, eget congue augue luctus.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-toggle="collapse" data-target="#terceiro-paragrafo" data-parent="#paineis-sobre">Parágrafo III</h3>
</div>
<div id="terceiro-paragrafo" class="collapse">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia quam sed fermentum iaculis. Praesent convallis, neque sit amet laoreet venenatis, odio sem porta lacus, id faucibus urna enim at nulla. Nunc aliquet ex id lorem luctus, eget congue augue luctus.
</p>
</div>
</div>
</div>
</div>
</section>
<div class="jumbotron">
<div class="container">
<h3>Mais de 300 prêmios em design e em conforto.</h3>
<p>Mais de 5 milhões de clientes satisfeitos em todo o mundo.</p>
</div>
</div>
<section class="container">
<h2>Nossos Projetos</h2>
<figure class="thumbnail">
<img class="img-fluid" src="img/projetos/casa-castelo.png" alt="Foto da Casa Castelo">
<figcaption class="caption">
<h3>Casa Castelo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor lacus et nunc luctus tincidunt. Nulla posuere purus a enim finibus ultricies. Mauris a tellus vel nisl convallis blandit.</p>
</figcaption>
</figure>
<figure class="thumbnail">
<img class="img-fluid" src="img/projetos/casa-lago.png" alt="Foto da Casa Castelo">
<figcaption class="caption">
<h3>Casa Lago</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor lacus et nunc luctus tincidunt. Nulla posuere purus a enim finibus ultricies. Mauris a tellus vel nisl convallis blandit.</p>
</figcaption>
</figure>
<figure class="thumbnail">
<img class="img-fluid" src="img/projetos/mercado-marapira.png" alt="Foto da Casa Castelo">
<figcaption class="caption">
<h3>Mercado Marapira</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor lacus et nunc luctus tincidunt. Nulla posuere purus a enim finibus ultricies. Mauris a tellus vel nisl convallis blandit.</p>
</figcaption>
</figure>
<figure class="thumbnail">
<img class="img-fluid" src="img/projetos/palacio-dionisio.png" alt="Foto da Casa Castelo">
<figcaption class="caption">
<h3>Palácio Dionisio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor lacus et nunc luctus tincidunt. Nulla posuere purus a enim finibus ultricies. Mauris a tellus vel nisl convallis blandit.</p>
</figcaption>
</figure>
<figure class="thumbnail">
<img class="img-fluid" src="img/projetos/residencia-ludi.png" alt="Foto da Casa Castelo">
<figcaption class="caption">
<h3>Residencial Ludi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor lacus et nunc luctus tincidunt. Nulla posuere purus a enim finibus ultricies. Mauris a tellus vel nisl convallis blandit.</p>
</figcaption>
</figure>
</section>
</body>
</html>cara testei seu código(parte do body) aqui e está normal o jumbotron, tenta atualizar a pagina, verifica os arquivos css se o caminho está certo, tenta baixar de novo, ou copia esse código e cria uma nova pagina para usar ele.
Então, rapaz.. isso que eu estou achando estranho. Não vejo erros no código.
Eu baixei os arquivos da aula 03, fiz o teste e o resultado foi o mesmo. Não sei como isso pode estar acontecendo somente no meu computador.
Vou testar em casa pra ter certeza. Mas, agradeço muito a ajuda.
Também não encontrei erros... qualquer coisa se eu puder ajudar só postar ai, abraço:)
Pode ser que algum plugin do seu navegador esteja alterando o seu código css por cima do bootstrap. Se tiver alguma extensão habilitada, tente desabilitar uma por uma e testar novamente. Se ao final nenhuma mudança ocorrer, a gente tenta descobrir outra possibilidade!
Pow, fiquei otimista com o seu comentário Marco, mas.. nada feito. Continua da mesma forma.
Muito estranho isso. O box fica com o fundo cinza e tal, porém o título não pega aquele negrito e os textos parecem do mesmo tamanho. Não entendi nada.
Mas, valeu pela ajuda!
Deixa eu te fazer uma pergunta: o que você vê ao acessar essa página do Jumbotron? Fica do mesmo jeito que no seu projeto, ou fica certinho?
Então, não.. sabe o título em destaque na página que mandou? Então, aqui não fica assim. Tá normal. Os textos estão iguais como em H3. Sacou?
Testei em outra máquina aqui e dá o mesmo problema.
Parece que tem algo errado com o seu código, talvez com o bootstrap que baixou? Realmente não sei. Faça um teste:
Baixe o projeto do final da aula (https://github.com/alura-cursos/bootstrap-boas-praticas-no-front-end/archive/8e3667a7229897c11f5cb11c41e87ba8d8a58837.zip) e me diga se ele está com o mesmo problema.
Eu já fiz isso. Também achei que o problema era meu código e/ou poderia estar me escapando algo. Aí baixei os arquivos da aula e dá o mesmo problema.
Acabei de publicar o projeto para testar o funcionamento num servidor de hospedagem e o problema permanece. Acessa só: http://enavi.com.br/alura-bootstrap/topcasafina-arquitetura/
Para baixar os arquivos que fiz: http://enavi.com.br/alura-bootstrap/topcasafina-arquitetura.zip
Consegue tirar um print do seu Jumbotron e mostrar pra gente? Aqui seu projeto está perfeito. O código pra inserir imagens é (sendo que nome da imagem pode ser vazio).
Entendi. À esquerda, é a imagem que eu fiz e, à direita, a do Yuri:
Viu a diferença? Por que o dele o h3 parece em negrito?
Não sei. Que browser você está usando?
Enquanto isso, vou summonar o mestre do HTML/CSS aqui no tópico.
Haha, beleza!
Google Chrome e IE11.
Descobri!
Você está usando Windows, e o curso é dado em um Mac. Qual a diferença? A fonte padrão do Bootstrap é a Helvetica Neue, que não é inclusa no Windows. O fallback é a fonte Arial, cujo negrito é bem mais fraco do que na Helvetica, e portanto o texto parece bem menos diferenciado.
Tente sobrescrever a fonte do título do seu Jumbotron e veja o resultado:
<div class="jumbotron">
<div class="container">
<h3 style="font-family: 'arial black';">Mais de 300 prêmios em design e em conforto.</h3>
<p>Mais de 5 milhões de clientes satisfeitos em todo o mundo.</p>
</div>
</div>Pultz! Engraçado que eu comentei isso com meu colega de trabalho! "Eu preciso saber se é por conta da plataforma, se é por ser MAC ou qualquer outro motivo.."
Obrigado pela insistência em me ajudar com isso. Valeu mesmo!
Imagina, estamos aqui pra isso!
Se você puder marcar que o tópico foi solucionado, eu e tantos outros alunos agradecerão imensamente! :wink:
Engraçado que eu instalei a família toda da fonte, mas mesmo assim não adianta. Rs
Enfim, tá tranquilo. Identifiquei o que falou no inline do bootstrap e realmente é a fonte.
O mesmo comportamento ocorre no Linux.
Provavelmente a fonte também não está inclusa na sua distribuição de Linux, Otto, ou o seu navegador não reconheceu a existência dela. Confira!