Estou seguindo a apostila de desenvolvimento web da Caelum e estava tudo indo bem, porém agora deu problema, pois não aparece a imagem do produto e descrição, vou postar o código aqui abaixo caso alguém possa me ajudar a entender essa coisa louca.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="assets/estilo/estilo.css" />
</head>
<body>
<header class="container">
<!--<h1><img src="assets/imagens/logo.png" alt="Logo da Mirror Fashion"/></h1>-->
<p class="sacola">
Nenhum item na sacola de compras
</p>
<nav class="menu-opcoes">
<ul>
<li><a href="../">Sua Conta</a></li>
<li><a href="../">Lista de Desejos</a></li>
<li><a href="../">Cartão Fidelidade</a></li>
<li><a href="sobre.html" target="_blank">Sobre</a></li>
<li><a href="../">Ajuda</a></li>
</ul>
</nav>
</header>
<div class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type+"search">
<button>Buscar</button>
</form>
</section>
<!--Fim Busca-->
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul style="list-style-type:none;">
<li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras<a/></li>
<li><a href="#">Acessórios</a></li>
</ul>
</nav>
</section>
<!--Fim menu departamento-->
<section class="banner-destaque">
<figure>
<img src="assets/imagens/destaque-home.png" alt="Promoção: Big City Night" />
</figure>
</section>
<!--Fim banner destaque-->
</div>
<!--Fim .container .destaque-->
<div class="container paineis">
<!--Os painéis de novidades e mais vendidos entrarão aqui dentro-->
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="assets/imagens/produtos/miniatura1.png" alt="Fuzz Cardigan por R$ 129,90" />
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div>
<!--Fim container painéis-->
</body>
</html>
CSS
body {
margin:0;
padding:0;
color:#333333;
font-family:Lucida Arial, Sans Unicode, Lucida Grande, Sans-Serif ;
}
h2 {
margin-top:60px;
margin:auto;
width:940px;
}
figure {
text-align:center;
padding:15px;
margin:30px;
}
figcaption {
font-style:italic;
margin-top:10px;
}
#centro-distribuicao {
position:relative;
margin-left:auto;
margin-right:auto;
width:550px;
}
#familia-pelho {
margin-left:auto;
margin-right:200px;
width:300px;
float:right;
}
.sacola {
background-image: url(../imagens/sacola.png);
background-repeat:no-repeat;
background-position:top right;
position:absolute;
top:0;
right:0;
padding-top:8px;
font-size:14px;
padding-right:35px;
text-align:right;
width:140px;
}
.menu-opcoes {
position:absolute;
bottom:0;
right:0;
}
.menu-opcoes ul {
font-size:15px;
}
.menu-opcoes a {
color:#003366;
text-decoration:none;
cursor:pointer;
}
.menu-opcoes ul li{
display:inline;
margin-left:20px;
}
.container {
margin:auto;
width:940px;
}
header {
position:relative;
}
p {
margin:auto;
width:940px;
margin-top:20px;
margin-bottom:20px;
}
a {
text-decoration:none;
cursor:pointer;
font-weight:bold;
}
.rodape {
position:relative;
margin-left:195px;
margin-top:50px;
}
#diferenciais {
margin-bottom:20px;
}
.busca,
.menu-departamentos {
background-color:#DCDCDC;
font-weight:bold;
text-transform:uppercase;
margin-right:10px;
width:230px;
float:left;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
margin:10px
}
.menu-departamentos li {
background-color:white;
margin-bottom:1px;
padding:5px 10px;
}
.menu-departamentos a {
color:#333;
text-decoration:none;
}
.menu-departamentos {
clear:left;
}
.busca input[type=search] {
width:170px;
position:relative;
}
.destaque {
margin-top:10px;
}
.menu-departamentos {
margin-top:10px;
padding-bottom:10px;
}
.banner-destaque {
position:absolute;
float:right;
margin-top:-45px;
margin-left:200px;
margin-bottom:400px;
}
.painel {
margin:10px;
padding:10px;
width:445px;
}
.novidades {
float:left;
}
.painel li {
display:inline-block;
vertical-align:top;
width:140px;
}