Olá!
Quero destacar um detalhe que talvez possa servir para outros alunos, sobre a utilização de seletores no arquivo CSS.
Bom, acredito que grande parte do pessoal teve problemas ao adicionar classes dentro de tags criadas pelo bootstrap, pois a própria instrutora Juliana teve o mesmo problema. Então, inseri os seletore/classes, de forma mais hierárquica, para que assim, as classes geradas do bootstrap, respeitassem as nossas classes criadas:
Aqui é um exemplo da cor do nome da lading page, e, do título principal da seção receitas
a.navbar-brand.cor-especial, h2.cor-especial
{
color: darkred;
}
/*Junto o seletor pai com o filho, para especificar quem pertence a quem;*/
E aqui temos outros exemplos diferentes utilizados:
img.card-img-top
{
object-position: 0 80%;
object-fit: cover;
height: 13em;
}
.btn.botao-cor-principal
{
background-color: darkred;
color: #fff;
}
O objetivo foi fazer com que se tornasse um código mais prático, por exemplo, não foi preciso adicionar uma id
para eles. Como uma boa prática, uso a id
em últimos casos, ou, em casos muito específicos.
Porque? O bootstrap nos fornece muitas classes, e o uso da reutilização delas, é uma ótima idéia de aproveitamento.