Olá pessoal, boa tarde!
Estou finalizando um projeto para uma banda de um amigo e gostaria de ajustar alguns detalhes antes de finalizar o projeto. Na aba "Membros" gostaria de alinhar as imagens a direita de cada parágrafo dos respectivos membros. Também gostaria de deixar o Header fixado na parte superior quando o usuário desse scroll na página. Segue link para o repositório do projeto no GitHub. Agradeço desde já a ajuda! :)
Oi, Venancio, como vai?
Para que as fotos dos membros fique ao lado das informações de cada um, você pode usar o Flexbox, mas para isso, você deve criar duas <div> uma que vai englobar as informações e fotos de todos os membros e vai conter a classe informacoes__membros e outra que vai envolver as informações separada da imagem. Ficaria assim:
<div class="informacoes__membros">
<div>
<h2 class="apresentacao__conteudo__subtitulo">Nome do membro</h2>
<h3 class="apresentacao__conteudo__texto">Vocal</h3>
<p class="apresentacao__conteudo__texto">informação do membro</p>
</div>
<a href="https://www.instagram.com/ricodificil" target="_blank"><img class="membro__img" src="./Assets/Richard.png" alt="Richard cantando ao vivo" width="250px" height="235px"></a>
</div>
Em seguida, você deve adicionar ao seu arquivo CSS o seguinte código:
.informacoes__membros{
display: flex;
align-items: center;
}
Isso vai fazer com que as informações e a foto fiquem em uma mesma linha e alinhadas ao centro.
Para que o seu cabeçalho fique fixado a medida que as pessoas usuárias forem descendo na página, você pode usar o position:fixed na classe cabecalho. Ficaria assim:
.cabecalho{
padding: 2% 0% 0% 15%;
position:fixed;
background-color: #000;
width: 100vw;
}
Também adicionei um tamanho de 100vw para ocupar toda a extensão superior da tela e adicionei uma cor de fundo preta.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!