Obs: O site está hospedado no meu perfil do Git Hub: site de treinamento.
Bom, não está ficando do jeito que eu queria, mas já é um começo: Aplicando os ensinamentos do professor Pedro Marins. Aceito dicas e correções dos erros. Obrigado!
HTML
<!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>League of Legends - BR</title>
<link rel="stylesheet" href="../Projeto Alura/reset.css">
<link rel="stylesheet" href="./CSS/estilo.css">
</head>
<body>
<header>
<div class="box-header">
<h1>
<a href="https://www.leagueoflegends.com/pt-br/" target="_blank"><img src="./IMG/banner-lol.png" alt="League of Legends - BR"></a>
</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">História</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="categorias-herois">
<li class="magos">
<a href="#" title="Campeões que usam Magia"><img src="./IMG/mago.png" alt=""></a>
<h2><a href="#">Mago</a></h2>
<p></p>
</li>
<li>
<a href="#" title="Campeões Assassinos, possuem dano letal"><img src="./IMG/assassino.png" alt=""></a>
<h2><a href="#">Assassino</a></h2>
<p></p>
</li>
<li>
<a href="#" title="Campeões da Selva"><img src="./IMG/jg.png" alt=""></a>
<h2><a href="#">Jungle</a></h2>
<p></p>
</li>
<li>
<a href="#" title="Lutadores Corpo a Corpo"><img src="./IMG/lutador.png" alt=""></a>
<h2><a href="#">Lutador</a></h2>
<p></p>
</li>
<li>
<a href="#" title="Campeões que atiram a longa distância"><img src="./IMG/Atirador.png" alt=""></a>
<h2><a href="#">Atirador</a></h2>
<p></p>
</li>
<li>
<a href="#" title="Campeões que Protegem o atirador na fase de rotas e os demais membros do time após a fase de rotas"><img src="./IMG/suporte.png" alt=""></a>
<h2><a href="#">Suporte</a></h2>
<p></p>
</li>
</ul>
</main>
<footer>
<ul>
<li><a href="#">Contato</a></li>
<li><a href="#">Download</a></li>
</ul>
<p class="copy-footer">©LoL Project Alura - 2022.</p>
</footer>
</body>
</html>CSS
header {
background-color: #483D8B;
padding-bottom: 85px;
border-bottom: 8px solid #8B008B;
}
li img:hover {
background-color: #6959CD;
border-radius: 100px;
}
li img:active {
background-color: #00BFFF;
border-radius: 100px;
}
h2 a:hover {
color: #00BFFF;
}
h2 a:active {
color: #00008B;
}
h1 {
width: 64%;
margin: 0 auto;
}
img {
text-align: center;
}
.box-header {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
width: 100%;
text-align: center;
margin-top: 15px;
display: block;
border-bottom: 3px solid #ffffff;
}
nav li {
display: inline;
margin: 20px;
}
nav a {
text-transform: uppercase;
font-size: 25px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
font-family: sans-serif;
}
nav a:hover {
color: #00BFFF;
border-bottom: 5px solid #00BFFF;
}
nav a:active {
color: #00008B;
border-bottom: 5px solid #00008B;
}
/* Aqui começa a formatação do miolo do site */
main {
background-color: #D8BFD8;
}
main a {
text-decoration: none;
}
h2 {
font-size: 20px;
font-weight: bold;
color: #8B0000;
text-align: center;
padding-top: 15px;
text-transform: uppercase;
font-family: sans-serif;
}
.categorias-herois {
width: 940px;
margin: 0 auto;
}
.categorias-herois li {
display: inline-block;
margin: 30px;
}
footer {
background-color: #1C1C1C;
text-align: center;
height: 100px;
text-decoration: none;
font-family: sans-serif;
}
footer li {
color: #FFFFFF;
display: inline-block;
font-size: 18px;
text-transform: uppercase;
margin: 30px 15px;
}
footer a {
color: #87CEFA;
text-decoration: none;
font-family: sans-serif;
}
.copy-footer {
color: #FFFFFF;
font-family: sans-serif;
}
Concordo sobre a questão no VSCODE, não faço ideia do motivo de não terem tirado. Foi dessa forma, inclusive que descobri sobre esse meta, ele apareceu lindo e contente no meu código e eu não sabia o que era. Ai, dei uma olhada na documentação e descobri a verdade. Que eu estava sendo iludibriada (dramática? Quem? Eu?)
A boa prática informa que não é bom ter um código sem função. Logo, eu queria te ajudar.