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

Estou tentanto fazer a página do 0

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 Lucas Leal de Paula Ricardo Albuquerque
| 205.4k xp | 108 posts

Olá boa tarde!

Estou tentando fazer a página do 0 linha por linha pra fixar mais o aprendizado e rever alguns conceitos.

Estou tendo alguns problemas com o aside e o nav. Não estou conseguindo deixar as letras do menu (texto) em branco, nem estou conseguindo deixar os icones lado a lado.

Pra isso estou utilizando a propriedade 'color: #FFF;" e 'display: inline-block;'.

O código está da seguinte forma:

aside{

    color: #ffffff;
    background-color: #3C1D3D;
    text-align: center;
    box-sizing: border-box;
    width: 20%;
    border-left: 10px solid #000;
    border-bottom: 10px solid #000;
}

.icones-sociais{
    display: inline-block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}

Dessa forma o menú está com as bordas em preto na esquerda e em baixo para posteriormente ser posicionado em baixo da foto, que já está no lugar certo e com as dimensões corretas. O menú está aparecendo então logo acima do footer no canto inferior esquerdo. Porém, como eu falei as letras não estão em branco e os links não consigo deixar um do lado do outro.

Antes eu tinha até colocado as imagens de cada rede social, mas tirei pra corrigir esse problema primeiro porque estava aparecendo aquele problema de imagem cortada.

Em comentário abaixo vou postar o código CSS completo como está.

Alguém saberia ajudar?

Obrigado.

3 respostas
por Lucas Leal de Paula Ricardo Albuquerque
| 205.4k xp | 108 posts

Segue o código completo:

h1{
    font-family: 'Open Sans Condensed', 'Arial', sans-serif;
    text-transform: uppercase;
}
.main-title{ 

    font-size: 40px;
    background-color: #851944;
    color: #ffffff;
    padding: 35px;
    text-align: center;
    border-bottom: 10px solid #000;
}


body{

    font-family:'Crimson Text', 'Times New Roman', serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

.main-content {
    padding-top: 80px;
    padding-bottom: 80px;
    margin: 25px;
}



aside{

    color: #ffffff;
    background-color: #3C1D3D;
    text-align: center;
    box-sizing: border-box;
    width: 20%;
    border-left: 10px solid #000;
    border-bottom: 10px solid #000;
}

footer{
    color: #ffffff;
    background-color: #000;
    padding: 20px;
}

#uol{
    position: absolute;
    top: 400px;
}

#foto-joao{
    position: absolute;
    top: 0;
    right: 0;
    border-left: 10px solid #000;
    border-bottom: 10px solid #000;
    width: 20%;
    height: 41%;

}

.icones-sociais{
    display: inline-block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}

/*
#github{
    background-image: url(github.png)
}

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

#linkedin{
    background-image: url(linkedin.png)
}
*/
solução!
por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

Lucas, boa tarde!

Se o texto que você deseja mudar a cor estiver dentro de uma outra tag selecione essa tag com css, por ser um link você teria que mudar na tag <a>, ficando assim:

a {
color: "#FFF"
}

Compartilhe com a gente seu html! Assim eu podemos testar e dar uma ajuda bem melhor!

Aguardo sua resposta e bons estudos

por Lucas Leal de Paula Ricardo Albuquerque
| 205.4k xp | 108 posts

Muito obrigado!

É que na minha lógica, como o estava subordinado ao , então se eu colocasse a propriedade color em aside, então todas as letras deveriam ser transformadas em branco. Mas aparentemente tem que ser direto no mesmo.

Isso me ajudou inclusive a solucionar outros problemas relacionados a essa mesma lógica minha. Obrigado mesmo.