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?
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?
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!!