2
respostas

Ajuda em projeto

Ei, para me ajudar a absorver o conteúdo, comecei a fazer outro projeto que não o da barbearia.

Estou com problemas com o meu nav bar "comendo" parte do meu conteúdo principal. Como eu resolvo isso?

2 respostas

Olá Lucia,

postar o código que está tendo problemas aí pra gente entender melhor. =)

Ei Luciano, acabou que eu fui fuçando e consegui resolver esse problema, porém, surgiram outros kkk

1 - Por que tem uma margem a direita que me obriga fazer um scroll na tela? 2 - Eu não consigo fazer com que o meu footer seja igual às outras sessões que "quebram" em colunas quando eu diminuo o tamanho da tela e; 3 - Eu não consigo que os videos e a discografia tenham o mesmo alinhamento;

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.cabecalho {
    background-color: #785480;
    box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: flex;
    position: fixed;
    width: 100vw;
    height: auto;
}

.cabecalho-texto {
    color: white;
    display: flex;
    text-align: center;
    width: 50%;
    padding: 20px;
}

.cabecalho-nav {
    color: white;
    font-weight: bold;
    width: 50%;
    padding: 20px;
}

.nav-lista {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-around;
}

.nav-lista a {
    display: inline-block;
    padding: 5px;
    color: white;
    text-decoration: none;
}

.nav-lista a:hover {
    background: #BF87CC;
    opacity: 80%;
    border-radius: 10px;
}

.sobre,
.discografia,
.videos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    margin: 0px 50px 0 50px;
    padding: 100px 0 0 0;
}

.sobre-titulo,
.sobre-conteudo,
.disco-titulo,
.videos-titulo {
    margin: 0;
}

.discos {
    display: flex;
    flex-direction: inline-flex;
    width: 100vw;
    justify-content: center;
    text-align: justify;
}

.discos>iframe {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    width: 50%;
    margin: 20px;
}

.videos-grid>iframe {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    margin: 20px;
}

.footer {
    background-color: #785480;
    text-align: center;
    color: white;
    width: 100vw;
}

.redes-sociais {
    text-align: center;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.redes-sociais-link {
    color: white;
    padding: 10px;
    text-decoration: none;
}

.redes-sociais :hover {
    opacity: 0.6;
}

.copyright {
    font-size: 12px;
}

Valeu!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software