2
respostas

[Dúvida] Espaçamento do texto

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. Insira aqui a descrição dessa imagem para ajudar na acessibilidade exemplo do resultado desejado Insira aqui a descrição dessa imagem para ajudar na acessibilidade 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;
}
2 respostas

Olá, Venancio! Boa tarde!

Tem um erro no seu CSS que eu corrigi e parece que o texto ficou alinhado com a imagem. No seu CSS você esqueceu de fechar as chaves da classe .apresentacao__conteudo__texto ai parece que a classe .membro está dentro dela. Corrigido não seria assim:

.apresentacao__conteudo__texto {
    font-size: 1.50rem;
    font-family: var(--fonte-secundaria);
}
    .membro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Está assim com fundo branco, porque você compartilhou só um pedaço do seu código, se isso não te ajudar, você pode compartilhar os seus códigos HTML e CSS completos sem ser print, que fica melhor para ajudar.

Espero ter ajudado e bons estudos!

Olá, Renan! Como vai?

Peço desculpas pelo erro de digitação. Mas verifiquei diretamente no VS Code e fechei a classe .apresentacao__conteudo__texto com chaves. Digitei incorretamente aqui no fórum. Mas mesmo assim o texto permanece do mesmo modo que o Print. Alguma ideia do que pode ser?