Olá, Eduardo!
Como eu não tenho acesso ao seu código, fica um pouco mais complicado ser totalmente assertivo, mas o que você pode tentar é:
Para alinhar o logo à esquerda, centralizar o título na mesma linha do logo e ajustar o fundo da imagem na section principal, você pode usar CSS. Vou te dar um exemplo de como fazer isso:
Suponhamos que a sua estrutura HTML está organizada dessa forma ou algo assim:
<section class="main-section">
<div class="container">
<img src="logo.png" alt="Logo" class="logo">
<h1 class="title">Dom Cabron</h1>
</div>
<div class="background"></div>
</section>
Podemos agora aplicar o CSS para alinhar e ajustar os elementos conforme você deseja:
.main-section {
position: relative;
text-align: center; /* Centraliza o conteúdo dentro da section */
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
margin-right: auto; /* Move o logo para a esquerda */
}
.title {
flex-grow: 1;
}
.background {
position: absolute;
top: -50px; /* Ajuste este valor conforme necessário */
left: 0;
width: 100%;
height: auto;
z-index: -1; /* Coloca a imagem de fundo atrás do conteúdo */
}
No CSS acima:
.main-section é a section principal que contém o logo, o título e a imagem de fundo..container usa flexbox para alinhar o logo à esquerda e o título ao centro..logo tem margin-right: auto para empurrá-lo para a esquerda..background é a imagem de fundo que foi ajustada para subir um pouco (você pode ajustar o valor de top conforme necessário).
Caso não seja esse o resultado esperado, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.
Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.
Espero ter ajudado! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
