Olá sou novo no mundo do desenvolvimento. Estou seguindo os passos do projeto, fiz conforme informado, mas está dando erro.
Projeto da Caelum -> Mirror Fashion
HTML
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto1.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura1.png" alt="miniatura1">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto2.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura2.png" alt="miniatura2">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto3.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura3.png" alt="miniatura3">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto4.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura4.png" alt="miniatura4">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto5.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura5.png" alt="miniatura5">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto6.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura6.png" alt="miniatura6">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<li>
<a href="produto1.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura7.png" alt="miniatura7">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto2.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura8.png" alt="miniatura8">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto3.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura9.png" alt="miniatura9">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto4.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura10.png" alt="miniatura10">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto5.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura11.png" alt="miniatura11">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto6.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura12.png" alt="miniatura12">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div>
CSS
CSS
.painel li {
display: inline-block;
vertical-align: top;
width: 120px;
margin: -2px;
padding-bottom: 10px;
}
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;
}
.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.novidades {
float: left;
background-color: #F5DCDC;
}
.mais-vendidos {
float: right;
background-color: #DCDCF5;
}
figure {
margin: 10px;
padding-right: 30px;
}
figcaption {
font-style: italic;
font-size: 10px;
}
Como está:
Como deveria ficar:
Podem me dar um help?
Olá sou novo no mundo do desenvolvimento. Estou seguindo os passos do projeto, fiz conforme informado, mas está dando erro. Projeto da Caelum -> Mirror Fashion HTML <div class="container paineis"> <section class="painel novidades"> <h2>Novidades</h2> <ol> <li> <a href="produto1.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura1.png" alt="miniatura1"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto2.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura2.png" alt="miniatura2"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto3.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura3.png" alt="miniatura3"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto4.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura4.png" alt="miniatura4"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto5.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura5.png" alt="miniatura5"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto6.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura6.png" alt="miniatura6"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> </ol> </section> <section class="painel mais-vendidos"> <h2>Mais Vendidos</h2> <ol> <li> <a href="produto1.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura7.png" alt="miniatura7"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto2.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura8.png" alt="miniatura8"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto3.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura9.png" alt="miniatura9"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto4.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura10.png" alt="miniatura10"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto5.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura11.png" alt="miniatura11"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> <li> <a href="produto6.html"> <figure> <img src="mirrorfashion/img/produtos/miniatura12.png" alt="miniatura12"> <figcaption>Fuzz Cardigan por R$ 129,90</figcaption> </figure> </a> </li> </ol> </section> </div> CSS CSS .painel li { display: inline-block; vertical-align: top; width: 120px; margin: -2px; padding-bottom: 10px; } .painel { margin: 10px 0; padding: 10px; width: 445px; } .painel h2 { font-size: 24px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; } .painel a { color: #333; font-size: 14px; text-align: center; text-decoration: none; } .novidades { float: left; background-color: #F5DCDC; } .mais-vendidos { float: right; background-color: #DCDCF5; } figure { margin: 10px; padding-right: 30px; } figcaption { font-style: italic; font-size: 10px; } Como está: Como deveria ficar: Podem me dar um help?
