Entrar Ainda não tem acesso?
3
respostas

[Dúvida] dúvidas sobre alinhamento

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Estilizando o cabeçalho

por Estudante
| 9.7k xp | 18 posts

Olá, estou conseguindo acompanhar as aulas mas agora surgiu uma dúvida: como faço para posicionar todos os elementos (fotos, textos e botões) para próximo essa linha vermelha que tracei à esquerda? tentei de várias formas e não consegui! Também gostaria de colocar o texto "eleve seu negocio digital.." em menos linhas a palavra "front-end" apresenta uma quebra, por exemplo. Como posso mudar isso?

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


@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat+Alternates:wght@200;400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}

body {
    
    box-sizing: border-box;
    background-color: #000000;
    background: linear-gradient(160deg, #000000,#030331 );
    color: #F6F6F6;
    overflow: hidden;
}

.cabecalhonav {
display: flex;
gap: 0px
}


.home {
    font-family: 'Monserrat Alternates', sans-serif;
    font: size 24px;
    font-weight: 600px;
    color: #22D4FD;
    padding: 2% 0 0 18%;
    
}

.boutme {
    font-family: 'Monserrat Alternates', sans-serif;
    font: size 24px;
    font-weight: 600px;
    color: #22D4FD;
    padding: 2% 2% 0 ;
}

.botaocor {
    
    background-color: #02032c;
    width: 250px;
    text-align: center;
    gap: 16px;
    text-indent:2%;
    border-radius: 14px;
    font-size: 28px;
    text-decoration: none;
    padding: 10px 19px 10px;
    font-family: 'Montserrat Alternates', sans-serif;
    color:  #22D4FD;
    margin-right: 80px;
    margin-top: 20px;
    box-shadow: 0 0 10px #F6F6F6
    
}

.botaocor:hover {
    background-color:#0b0b48;
}

.titulodestaque {
    color: #22D4FD;
}

.apresentacao__cont {
    width: 615px;
}

.apresentacao__cont__tit {
    font-size: 36px;
    font-family: 'Montserrat Alternates', sans-serif;
    margin-bottom: 2%;
    margin-top: 1%;
    margin-left: 0;
    margin-right: 0px;
    padding: 1% 1% 0 8%;
    
  
                }

.paragrafo {
    margin-top: 40px;
    margin-left: 20px;
    font-size: 15px;
    font-family: 'Krona One', sans-serif;
}

.apresentacao {
      
        margin-left: 10%;
        display: flex;
        align-items: center;
        justify-content:space-between; 
        padding: 6%;
        height: 50%;
        gap: 55px;


}

.botao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 8%;
    margin-left: 40px;

}

.titdois { margin-right: 20%;
    margin-left: 10px;
    margin-top: 1%;
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

.imagem {
    border-radius: 20px;
    box-shadow: 0 0 20px #45bad1 ;
    margin-left: 30px;
}

h1{
    font-weight: bold;
}

span{
    color: #22D4FD;}

.rodape {
    color: #F6F6F6;
    background-color: #030331;
    text-align: center;
    padding: 5px;
    font-size: 20px;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 400;

}
3 respostas
por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Olá Flora! Tudo bem?

Uma alternativa para colocar os elementos mais próximos ao local que você deseja seria procurar pela tag pai desses elementos e diminuir o espaçamento colocado naquela área. Agora, se não tiver um espaçamento e você só centralizou os elementos com o FlexBox, Grid, ou Alinhamentos, então nesse caso algumas soluções mais alternativas seriam necessárias.

Mas para isso eu precisaria de todo o código e imagens para poder ter o mesmo ambiente e reproduzir tudo aqui e aplicar essas soluções.

Agora sobre o colocar o texto "Eleve seu negócio digital" separado do resto é bem simples até. É só usar uma tag de quebra de linha, assim a palavra "Front-end" não vai ficar com uma quebra de linha, digamos que tenhamos essa estrutura:

<h1><strong>Eleve seu negócio digital <span>com um Front-End de qualidade</span></strong></h1>

Com a quebra, teríamos algo assim:

<h1><strong>Eleve seu negócio digital<br> <span>com um Front-End de qualidade</span></strong></h1>

Em suma, seria isso, se tiver dúvidas eu estarei por aqui!

Se você pudesse colocar seu código no GitHub e compartilhar o link do repositório para eu fazer os testes, seria mais fácil lhe ajudar.

Abraços e bons estudos.

por Estudante
| 9.7k xp | 18 posts

Oii, tudo bem? eu mexi de novo e agora não sei o que aconteceu para sumir o footer! Resumindo, gostaria de alinhar os blocos de texto mais próximos a essa reta vermelha da imagem e deixar o footer visível. Link para o repositório https://github.com/florannunes/landingpage.git

por Renan Cezar Wuicik
| 3167.3k xp | 6165 posts

Opa Flora, tudo ok?

Peço desculpas pela demora em obter um retorno!

O footer sumiu porque o conteúdo empurrou ele para baixo e a rolagem da página meio que parou de funcionar quando você adicionou a propriedade overflow: hidden; na tag body.

Portanto, apagar ela deve resolver. Ou só trocar hidden por auto também resolve, mas é meio desnecessário essa propriedade.

Agora sobre o alinhamento dos itens existem somente duas mudanças que já resolvem, nessa parte aqui do arquivo style.css está aproximadamente ali perto da linha 43 até mais ou menos a 55:

.apresentacao {
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6%;
    height: 50%;
    gap: 55px;
}

.apresentacao__cont {
    padding-left: 1%;
}

Aqui você pode apagar todos os estilos referentes a classe apresentacao__cont, e a propriedade margin-left: 10%; da classe apresentacao. Assim:

.apresentacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6%;
    /* padding-left: 4%;  <= Esse padding você pode usar para deixar os itens ainda mais perto daquela linha vermelha se você desejar */
    height: 50%;
    gap: 55px;
}

O padding-left pode deixar os itens mais perto daquela linha vermelha que você desenhou, é diminuir o valor, até chegar a 0, chegando nesse valor, o contêiner vai grudar na direita da tela.

Em suma era isso! Se tiver dúvidas eu estarei por aqui!

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓