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

12 Desafios finais

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 Juan Paixao
| 101.7k xp | 48 posts
<!DOCTYPE html>
<html>
    <head>
        <title>Portfolio - Wellington Barros</title>
      <meta charset="utf-8">
      <link rel="icon" href="favicon.png">
      <link rel="stylesheet" href="normalize.css">
      <link rel="stylesheet" href="bio.css">
      <link rel="stylesheet" href="portfolio.css">


        <div class="tri"></div>
      <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
      <!--
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
-->

<!-- carrega a fonte Open Sans Condensed na versão negrito, -->
<!-- que é a única necessária para os cabeçalhos            -->
<!--
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
-->
        </head>
    <body>


    <main class="cabecalho-main">

            <h1>PORTFOLIO</h1>

<div>

   <p>Veja abaixo a lista dos meus projetos mais relevantes</p>

                  <ul class="portfolio">
                      <li>
                          <a href="http://bmw.com">
                          <figure>
                             <img src="bmw.png" alt ="Site bmw">
                            <figcaption>BMW.com: reformulação e design de HTML, CSS e Javascript</figcaption>
                            </figure>
                          </a>
                      </li>

                           <li>
                          <a href="http://uol.com.br">
                          <figure>
                             <img src="uol.png" alt ="Site uol">
                            <figcaption>uol.com.br: reformulação e design de HTML, CSS e Javascript</figcaption>
                            </figure>
                          </a>
                      </li>

                           <li>
                          <a href="http://g1.com.br">
                          <figure>
                             <img src="g1.png" alt ="Site g1">
                            <figcaption>g1.com: reformulação e design de HTML, CSS e Javascript</figcaption>
                            </figure>
                          </a>
                      </li>

                           <li>
                          <a href="http://ibm.com.br">
                          <figure>
                             <img src="ibm.png" alt ="Site IBM">
                            <figcaption>IBM.com.br:formulação e design de HTML, CSS e Javascript</figcaption>
                            </figure>
                          </a>
                      </li>

                  </ul>


          </div>
        </main>


                    <img class="minha-foto" src="eu.jpg" img align="right" img width="200px" alt ="Foto de João da Silva">
                <nav>
<br><br><br>

            <aside>
                <nav>
                <h1> Wellington Barros Moraes </h1>
                    <ul class="menu-inferior">
                        <li><a href="#"> Home </a>
                        <li><a href="#"> Portfolio </a>
                        <li><a href="#"> Sobre mim </a>
                        <li><a href="#"> Blog </a>
                        <li><a href="#"> Contato </a>
                        <li><a href="https://www.facebook.com/wellington.barrosmoraes?fref=ts"> Facebook </a>
                    </ul>
<ul class="icones-sociais">
               </nav>
           </aside>


                <footer>


                    &copy; Wellington Barros 2017 

                             <ul class="icones-sociais ">
    <li> <a class="github" href="https://github.com/joaodasilva"> Github </a> </li>

    <li> <a class="twitter" href="https://twitter.com/joaodasilva"> Twitter </a></li>

    <li> <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"> LinkedIn  </a></li>
                    </ul>

                </footer>
        </body>
    </html>

Olá, fiz todo o código e está funcionando tudo menos a parte da descrição da imagem, o "figcaption" não está sendo exibido, aparece a imagem e um espaço branco embaixo aonde deveria ser a legenda

3 respostas
por Estudante
| 719.4k xp | 745 posts

Bom dia, Juan! Tudo bem com você, cara? =)

Eu copiei o seu código aqui e funcionou certinho. Você chegou a ver se não era cache do browser? =)

Fábio

por Juan Paixao
| 101.7k xp | 48 posts

Sim, até abri em outro navegador, o CSS que estou utilizando é esse:


      main {
        float: left;
        width: 85%;
        padding-bottom: 125px;
        box-sizing: border-box;
      }

      body{
                  font-family: "Crimson Text", serif;
                  background-color :#F2FFFC;
                  line-height: 1.5;

              }

              div{
                  width: 800px;
                  margin: auto;

              }
              main {

        }



        main h1 {
                font-size : 60px; 
                 background-color : rgb(205, 130, 150);
                 color: #ffffff;
                 text-align: center;
                 padding: 20px;
                 margin: 0px;
                 border-bottom: 7.5px solid black;
                 }

        nav h1 {
                font-size : 20px;
                font-family: "Crimson Text", serif;
              }

               h2 {
                clear:both;
                    font-family: "Open Sans Condensed", sans-serif;
                    font-size: 30px;

               }

               nav {

                   color: #F2FFFC;
              }

    .portfolio img {
    width: 100%;
}


  .fiat {
    float: right;
  }

  .petrobras {
    float : left;

  }
      .cabecalho-main h1 {
        text-transform: uppercase;
        font-size: 50px;
      }


             p{
                 text-align: justify; 
                 margin: 20px 0px;
             }

             blockquote{
        float : right;
                 background-color: #D9E5E3;
                 padding: 15px;
                 border: 5px ridge #C2CCCA;
                 width : 350px;
                 margin: 20px 40px;
                 box-sizing: border-box;
                 border-bottom-color: #333;
                 border-right-color: #FFF;
             }

         footer{
      clear : both;
             background-color : rgb(0,0,0);
             color : #F2FFFC;
             font-family: serif;
             font-size: 20px;
             padding: 10px 15px 10px;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 10.5%;
      box-sizing: border-box;       
         }

          aside {
        box-sizing: border-box;
             background-color: #3C1D3D;
            color: #F2FFFC;
            font-family: "Open Sans Condensed", sans-serif;
            padding: 10px;
            text-align: center;
          }
              aside h1 {
                  font-size : 30px;
                  margin-bottom: 25px;
              }

                     ul {
                color: white;
           list-style-type:none
            }

                ul li a{
                color: inherit ;
                text-decoration: none;
            }

        aside,img{
            float:right;
            width : 15%;
        }

        aside {
          position: relative;
          top: 285px;

        }


     .menu-inferior  {
     list-style-type:none
     }


      .leia-mais {
        font-size: 20px;
        padding: 8px;
        font-family: sans-serif;
        text-align: center;
        display: block;
        background-color: #E6E7E8;
      }

      .icones-sociais li a{ 
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999px;
    float:left;
    margin-right: 5px;
      }

.portfolio li {
    display: inline-block;
    border: 8px solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
}
.github {

    background-image: url(github.png);
}

.twitter {
     background-image: url(twitter.png);
}

.linkedin {
    background-image: url(linkedin.png);
}
.g1 {
  background-image: url(g1.png);
}
            main div {
            padding: 30px 0;
            }
                  strong {
            font-weight: bold;
        }

        em {
            font-style: italic;
        }
      img{

  size: 50%;
      }


      cite {
    font-style: italic;

}
.minha-foto {

  position: absolute;
  top: 0;
  right: 0;
float:right;
box-sizing: border-box;
border-left: 3px solid black;
border-bottom: 5px solid black;

}
solução!
por Estudante
| 719.4k xp | 745 posts

Juan,

O problema está no seu CSS...

Muitos dos elementos você não definiu a propriedade color, mas definiu color: white para a <ul>. Quando fez isso, todos os filhos ficaram com inherit e estão brancos, também. Se você remover essa linha, o texto aparecerá! =)

Espero ter ajudado! Abraço e bons estudos,

Fábio