Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como ter noção da % da largura da imagem ?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Desenvolvendo a página de portfolio

por Diego Dias Marques
| 214.7k xp | 168 posts

Além dessa dúvida da largura da imagem, também não estou conseguindo colocar a legenda figcaption, fazer com que ela fique dentro da imagem.

3 respostas
solução!
por Natan Souza
| 2117.1k xp | 3725 posts
Instrutor Product Design Lead

Oi Vinicius, tudo certo?

O instrutor colocou 45% de width pois ele quis que ficasse QUASE com a metade do elemento pai (.portfolio). Os 10% restantes é para dar uma margem entre eles.

Com relação a sua outra dúvida, confira se os elementos estão sendo abertos e fechados corretamente. A estrutura de cada <li> deve ser feita desta maneira:

<li>
  <a href="http://g1.com.br">
    <figure>
      <img src="img/g1.png" alt="Front-page do portal G1">
      <figcaption>
        G1.com.br: reformulação de design e
        implementação de HTML, CSS e JavaScript
      </figcaption>
    </figure>
  </a>
</li>

Abcs!

por Diego Dias Marques
| 214.7k xp | 168 posts

Meu código html está assim: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/reset.css"/>
        <link rel="stylesheet" href="css/site.css"/>
        <link rel="stylesheet" href="portfolio.css"/>

    </head>

    <body>
        <main>
            <div>
                  <h1>Portfolio</h1>
                  <p>Veja abaixo a lista dos meus projetos mais relevantes</p>

                  <ul class="portfolio">
                    <li>
                        <figure>
                            <img src="../portfolio/bmw.png" alt="Foto BMW"/>
                            <figcaption>
                                <a href="http://www.bmw.com.br">BMW.com: reformação de design e implementação de HTML, CSS e JavaScript</a>
                            </figcaption>
                        </figure>
                    </li>

                    <li>
                        <figure>
                            <img src="../portfolio/g1.png" alt="Foto G1"/>
                        </figure>
                        <figcaption>
                            <a href="http://www.uol.com.br">UOL.com.br: reformação de design e implementação de HTML, CSS e JavaScript</a>
                        </figcaption>
                      </li>

                    <li>
                        <figure>
                        <img src="../portfolio/ibm.png" alt="Foto IBM"/>
                        </figure>
                        <figcaption>
                            <a href="http://www.ibm.com.br">IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</a>
                        </figcaption>
                      </li>

                    <li>
                        <figure>
                            <img src="../portfolio/uol.png" alt="Foto Uol"/>
                        </figure>
                        <figcaption>
                            <a href="htto://www.g1.com.br">G1.com.br: reformulação do design e implementação de HTML, CSS e JavaScript</a>
                        </figcaption>
                      </li>
                  </ul>
             </div>
        </main>
    </body>   
</html>
por Natan Souza
| 2117.1k xp | 3725 posts
Instrutor Product Design Lead

Vinicius,

Repare onde você está colocando o link (a href).

O usuário precisa clicar só no texto ou na figure toda? Na figure toda! Então você precisa envolvê-la toda no link, não só o texto, como no código que coloquei no post anterior.

Qualquer dúvida só postar, ok?

Abcs e bons estudos!