Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

index.css

A solução proposta deste exercício não funcionou para mim. Talvez exista alguma diferença entre o meu site.css e o do curso.

De qualquer forma, alguém pode testar o meu index.css deste exercício e me dar retorno?

Segue o código:


.foto-home {
    height: 200px;
}
/*adic*/
.saudacao {
    margin-left: 6rem;
    margin-right: 6rem;

}
.saudacao p {
    color: #99A;
    line-height: 1;

}
.saudacao-inicio {
    color: #889;
    /* adic */
    font-size: 4rem;
}
.saudacao-ultima-linha {
    text-align: right;
    display:  block;
}
.saudacao strong {
    color: #000;
    /* adic */
    font-size: 2rem;
}
.saudacao em {
    color: #851944;
    font-size: 4rem;
}
.botao-index {
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 400px;
    display: block;
    text-align: center;
    /*adic*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.secao-inicio h2 {
    text-transform: uppercase;
    /*adic*/
    font-size: 2rem;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    /*adic*/
    margin-left: 6rem;
    margin-right: 6rem;

}
.trabalhos h2 {
    color: #FFF;

}
.trabalhos ul {
    overflow: hidden;
    border: 10px solid black;
}
.trabalhos li {
    float: left;
    width: 33.333%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999;
    color: #FFF;
    border-bottom: 10px solid #851944;
    /*adic*/
    margin-left: 6rem;
    margin-right: 6rem;

}
.blog li a {
    color: #FCF;
}
footer {
    background-color: #000;
    color: #FFF;
}
footer a {
    color: #F99;
}
footer h2{
        /*adic*/
    font-size: 2rem;
}
main {
    width: 84%;
    padding-bottom: 0;
    float: none;
}
5 respostas

Testei o código e vi que as section onde há blog e trabalhos precisam ser ajustadas.

eu usei o seguinte código, não está exatamente como a resposta do alura, mas pra mim está bom:

.foto-home { height: 200px; } .saudacao p { color: #99A; line-height: 1; font-size:1.8em; padding: 2.8em 3.8em; } .saudacao-inicio { color: #889; font-size: 2.5em; font-size: 2.5em; } .saudacao-ultima-linha { text-align: right; display: block; } .saudacao strong { color: #000; font-size:1.5em; } .saudacao em { color: #851944; font-size: 2.9em; } .botao-index { background-color: #851944; color: #FFF; border: .2em solid black; width: 400px; display: block; text-align: center; font-size: 1.5em; padding: .5em; margin: 2em auto 3.5em auto; }

.secao-inicio h2 { text-transform: uppercase; font-size: 3em; padding: .75em .5em 0 .5em;

}

.trabalhos { background-color: #3C1D3D; border-top: .5em solid #000; border-bottom: .5em solid #000; } .trabalhos h2 { color: #FFF; }

.blog small{ margin-left: 1.5em; font-size: 1em; margin-bottom: 40em; }

.trabalhos ul { overflow: hidden; border: .5em solid black; margin: 1.25em; } .trabalhos li { float: left; width: 33.333%; } .trabalhos img { width: 100%; display: block; } .blog { background-color: #999; color: #FFF; border-bottom: .5em solid #851944; } .blog ol { margin-top:2em; } .blog li { padding-bottom: 1em; } .blog li a { color: #FCF; font-size:1.25em; margin-left: 1.75em; } footer { background-color: #000; color: #FFF; } footer a { color: #F99; }

footer h2{ font-size: 3em; padding: .75em .5em 0 .5em }

footer p{ font-size:1.25em; padding: 0em .5em 1em 1.25em; } main { width: 100%; padding-bottom: 0; float: none; }

O código fornecido pelo Alura realmente não funciona 100%. Principalmente porque o estilo da página site.css interfere. Então dependendo de como você definiu sua página site.css, pode ser que não funcione o código do alura.

Comigo também não funcionou, porém, consegui o mesmo resultado.

Alberto, eu segui exatamente o que se convencionou nas aulas. Por isto, esperava que funcionasse.

Entendo bem o que você diz, apenas fiz o registro, para deixar claro que esperava uma continuidade nas aulas e que, quem seguisse o proposto, iria obter o resultado.

Nestas situações, eu acho importante a intervenção dos professores...

Fernando, obrigado por sua contribuição.

solução

Apenas para complementar, eu solicitei à alura o código completo do projeto. Eles atenderam ao meu pedido.

Por isto, vou encerrar a discussão.

Me desculpem Fernando e Alberto, não vou sinalizar a resposta de vocês como solucionadora, pois a resposta, como já falei, eu esperava do pessoal da Alura.