Olá, Danton!
Vamos revisar cada parte do seu projeto para garantir que tudo esteja funcionando corretamente.
Estrutura inicial do HTML
A estrutura HTML está correta, mas é sempre bom verificar se todas as tags estão bem fechadas e se não há erros de digitação. Seu código está assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraBooks</title>
</head>
<body>
<h1>AluraBook</h1>
</body>
</html>
Integrando HTML e CSS
Notei que há um erro de digitação na tag <link>. A palavra "stylesheet" está escrita como "stylecheet". Corrija isso para garantir que o CSS seja corretamente vinculado ao HTML:
<link rel="stylesheet" href="style.css">
Definindo a cor de fundo no CSS
Seu código CSS para definir a cor de fundo está correto. Apenas certifique-se de que o arquivo style.css está na mesma pasta que o index.html ou ajuste o caminho conforme necessário.
:root {
--cor-de-fundo: #EBECEE;
}
body {
background-color: var(--cor-de-fundo);
}
Explorando DevTools no desenvolvimento responsivo
A classe .container está bem definida para responsividade. Apenas certifique-se de que este código está dentro do arquivo style.css.
.container {
max-width: 100%;
padding: 0 15px;
}
Implementando reset CSS
Para implementar um reset CSS, você pode adicionar um arquivo reset.css com o seguinte conteúdo e importá-lo antes do style.css no seu HTML:
/* reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
E no seu index.html:
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
Ajustando o projeto para diferentes navegadores
Para garantir a consistência entre navegadores, você pode adicionar um reset CSS como mencionado acima e também utilizar propriedades CSS que são amplamente suportadas. Seu código CSS para o body está correto:
body {
background-color: var(--cor-primaria);
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
Certifique-se de que a variável --cor-primaria esteja definida no :root:
:root {
--cor-primaria: #EBECEE; /* ou a cor que você preferir */
}
Espero ter ajudado e bons estudos!
