Estou fazendo tudo conforme as aulas, porem cheguei nesta aula que o professor ensina a usar o image replacement mas não estou conseguindo fazer isso.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<html lang="pt-BR" />
<title>Avengers Infinity War - Fan Site</title>
<meta name="description" content="Um site craido por fans para fan">
<link rel="icon" href="perfil.png">
<link rel="stylesheet" href="Eric%20Meyer.css">
<link rel="stylesheet" href="Avengers.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
</head>
<body>
<main>
<!--indicar que é o conteudo principal-->
<h1>Marvel</h1>
<p>O <strong>Thanos</strong> pegas as <em>joias do infinito.</em> <br/> Ele quer fazer besteira dominando todo o universo mas os vingadores não vão deixar.</p>
<blockquote>
<!-- indicar citação-->
<p>Com grandes poderes vem grandes responsabilidades.</p>
<cite>Tio Ben</cite>
<!--indicar autor da citação-->
</blockquote>
<h2>Heróis</h2>
<article>
<p><a href="iron%20man.html"> Iron Man</a></p>
<p>Capitão America</p>
<p>Thor deus trovão</p>
<p>Hulk esmagador</p>
<p>Viuva Negra espi</p>
</article>
<img src="https://vignette.wikia.nocookie.net/marveldatabase/images/e/e1/The_Marvel_Universe.png/revision/latest?cb=20110513164401" alt="Vários heróis">
<a href=http://marvel.com/characters>Aqui você pode encontrar mais sobre esses personagens</a>
</main>
<div>
<!--criar divisão-->
<ul>
<h2>Vilões</h2>
<li>Ultron</li>
<li>Os vilões do primeiro Avengers</li>
<li>Loky</li>
</ul>
</div>
<aside>
<!--infromar que é um conteudo auxiliar, extra-->
<nav>
<!--apenas para indicar que e uma forma de navegação-->
<ul>
<li><a href="#">Heróis</a></li>
<li><a href="#">Vilões</a></li>
<li><a href="#">Universos</a></li>
<li><a href="#">Shop</a></li>
</ul>
</nav>
<div>
<ul class="social">
<!-- class cria uma categoria de elementos e pode ser repetida inumeras vezes-->
<li><a class="Twitter" href="https://twitter.com/"><p>Twitter</p></a></li>
<li><a class="Facebook" href="https://facebook.com/"><p>Facebook</p></a></li>
<li><a class="Instagram" href="https://instagram.com/"><p>Instagram</p></a></li>
</ul>
<!--id naõ pode conter o nome repetido, deve ser exclusiva de um elemento-->
</div>
</aside>
<footer>
© Avengers Infinity War 2018
</footer>
</body>
</html>h1 {
font-size: 50px;
font-family: 'Anton', sans-serif;
background-color: #9b0e0e;
color: #f2f1f1;
text-align: center;
text-transform: uppercase;
padding: 30px;
/* serve para adicionar distancia das bordas superiores */
margin: 0;
border-bottom: 13px solid #dd9800;
}
main p {
line-height: 25px;
}
cite {
font-size: 14;
font-family: "roboto";
}
p {
font-size: 18px;
font-family: 'Josefin Sans', sans-serif;
text-align: justify;
margin: 10px 0;
}
blockquote {
background-color: #b2b2b2;
padding: 15px;
border: 10px solid/* ou dashed ou dotted ou outros */
#585858;
border-bottom-color: #0f0f0f;
border-right-color: #2e2e2e;
margin-left: auto;
/* controle de margem */
margin-right: 130px;
width: 230px;
height: 180px;
box-sizing: border-box;
}
main article p {
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: 1px solid #ffffff;
}
main h2 {
font-size: 30px;
}
div h2 {
font-size: 28px;
}
a {
font-size: 18px;
color: #9400d3;
}
li {
font-size: 18px;
}
aside {
background-color: #9b0e0e;
border: 13px solid #dd9800;
text-align: center;
}
aside div li {
display: inline-block; /* serve para altera o inline com tamanhos*/
}
.Facebook {
width: 30px;
height: 40px;
}
.Twitter {
height: 30px;
width: 30px;
}
.Instagram {
height: 30px;
width: 30px;
}
ul li a {
color: #ffffff;
}
h2 {
font-family: "roboto";
}
div h2, a, li {
font-family: "roboto";
padding: 6px;
}
footer {
color: #ffffff;
font-size: 15px;
font-family: monospace;
background-color: #5d5d5d;
padding: 10px;
margin: 0;
}