Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Parágrafos posicionados totalmente à esquerda

Olá, pessoal! Boa tarde!

Estou quase finalizando um projeto de Website, mas estou com problemas em uma página do projeto. Os parágrafos estão posicionados totalmente à esquerda. Fiz um pequeno exemplo no photoshop de como gostaria do resultado final e vou anexar também um print de como está o aspecto da página. Também vou deixar os códigos HTML e CSS do projeto anexados! 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 Print de como está a página no momento Código HTML

<main class="apresentacao">
        <section class="apresentacao__conteudo">
            <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="350px" height="353px">
            </div>

Código CSS

.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}

.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);
    text-align: justify;
    line-height: 30px;
    text-indent: 35px;
}

.membro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.membro__img {
    margin-left: 25rem;
}
1 resposta
solução!

Olá, Venancio! Como vai?

Isso está acontecendo porque a sua imagem está ocupando um espaço muito grande. Atualmente, ela está ocupando 25 rem, o que é muito e acaba comprimindo o texto, criando esse espaço vazio. Para resolver isso, recomendo diminuir para somente 2 rem, o que vai ficar bem melhor.

A fim de criar uma aparência mais próxima da sua referência, sugiro remover o atributo "width" na classe "apresentacao__conteudo". Dessa forma, o seu código ficará mais semelhante ao da imagem. Fiz isso aqui e obtive esse resultado. OBS: Como não tenho acesso à sua imagem e às suas variáveis, pode haver algumas diferenças.

Página do portifólio, desmontrado uma maior organização das informações

Seu código:

.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}


.apresentacao__conteudo {
   
    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);
    text-align: justify;
    line-height: 30px;
    text-indent: 35px;
}

.membro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.membro__img {
    margin-left: 2rem;
}

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!