Olá, pessoal! Boa tarde
Estou trabalhando em um projeto onde tentei alinhar algumas imagens com os parágrafos, mas o texto está bem bagunçado. Deixarei abaixo um exemplo de como gostaria o resultado final e outra de como está o projeto no momento. Também vou deixar as linhas de códico do HTML e do CSS referentes. exemplo do resultado desejado Como o projeto está no momento. HTML do projeto
<h1 class="apresentacao__conteudo__titulo">Conheça os membros da banda</h1>
<div>
<h2 class="apresentacao__conteudo__subtitulo">Richard Carrasco</h2>
</div>
<p class="apresentacao__conteudo__texto">Vocal</p>
<div class="membro">
<p class="apresentacao__conteudo__texto">"Sempre gostei de cantar. Aos 12 ou 13 anos, comecei a imitar a voz do Liam Gallagher em 'Wonderwall'. Meu primo Gabriel, que já foi guitarrista da Samsara, deu a ideia de gravarmos um cover da música para o YouTube, o que acabou não acontecendo, mas sempre que eu ia à casa dele, ele tocava essa música e eu acompanhava com a voz. Na escola, cantava todos os dias na sala de aula com meu amigo Rafael. Eu e Rafael temos um amigo em comum chamado Juan, que também já foi guitarrista da Samsara (o primeiro, inclusive). Juan dizia que eu tinha uma voz legal e que deveríamos montar uma banda. Anos depois acabei levando essa ideia a sério e assim nasceu a banda. Minha maior inspiração para levar esse projeto pra frente foi o show do Paul McCartney, que fui no meu aniversário de 18 anos. Foi naquele dia que tive certeza do que queria fazer da vida."</p>
<img class="membro__img" src="Assets/Richard.png" alt="Richard cantando ao vivo" width="409px" height="412px">
CSS do Projeto
.apresentacao__conteudo {
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo {
font-size: 2.25rem;
font-family: var(--fonte-primaria);
}
.titulo-destaque {
color: var(--cor-terciaria);
}
.apresentacao__conteudo__subtitulo {
font-size: 1.75rem;
font-family: var(--fonte-primaria);
color: var(--cor-terciaria);
margin-top: 3rem;
}
.apresentacao__conteudo__texto {
font-size: 1.50rem;
font-family: var(--fonte-secundaria);
.membro {
display: flex;
align-items: center;
justify-content: space-between;
}
.membro img {
margin-left: 40rem;
}