Entrar Ainda não tem acesso?
5
respostas

Meu cabeçalho em flexbox

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Mais sobre flexbox & desafios e atividade Próximos passos

por Eder Bruno Almeida Teodoro
| 127.2k xp | 34 posts
Designer gráfico

Eu fiz esse cabeçalho e ficou do jeito que eu quis. Mas me sinto inseguro para cravar de que eu usei os atributos do flexbox da maneira certa. Encontrei muita dificuldade pq no meu esboço os alinhamentos não são certinhos. Gostaria de saber se posso considerar que a dinâmica está exata ou se não é uma gambiarra mal feita!

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

body {
    background: #282828;
}

header {
    background: #000302;
    padding: 10px 0;
}

.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.cabecalho__logo {
    display: flex;
    padding: 0 2rem;
}

.cabecalho__links {
    display: flex;
    margin-left: -20%;
}

.redes .cabecalho__icones {
    display: flex;
    justify-content: space-around;
    width: 70%;
    margin-left: 80%; 
}

.botao {
    display: flex;
    justify-content: space-around;
    margin-right: 2%; 
}
nav {
    top: 30px;

}

nav li {
    margin: 0 0 0 15px;
    padding: 5px 25px;
}

nav a {
    text-transform: lowercase;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;

}

nav i {
    font-weight: bold;
    font-size: 30px;
    text-decoration: none;
    padding: 10px 10px;
    width: 30px;

}

nav a:hover {
    color: #FBD87A;
    text-decoration: underline;
}

.btn {
    background-color: #FBD87A;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    padding: 10px 25px;
    border-radius: 5px;
    transition: transform .1s;

}

.btn:hover {
    transform: scale(1.2);
}
5 respostas
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Boa tarde, Eder! Tudo bem?

Estou adorando o resultado do seu cabeçalho, está ficando muito bonito! Inclusive se quiser passar o código html pra eu testar por aqui eu aceito, fiz um rascunhozinho pra testar seu CSS e ver possíveis melhorias hehe

A principio o código está indo no caminho certo, só algumas vezes você está botando o display: flex em locais que não precisaria. É o caso do cabecalho_logo e o botao. Ambos são elementos dentro do <header>, que por si só já posiciona tudo um ao lado do outro. Já nas listas de portfolio e redes sociais, faz sentido incluir novamente o display: flex pois você quer que os itens dentro deles se posicionem lado a lado.

Espero que tenha te ajudado a entender melhor essa questão do flexbox. Outras anotações eu até conseguiria fazer, mas ai gostaria de ler seu código html junto pra ver se faz sentido (dependendo de como está seus elementos, muda algumas coisas do CSS, como eu sempre digo: não existe só um jeito de programar).

Bons estudos! =)

por Eder Bruno Almeida Teodoro
| 127.2k xp | 34 posts
Designer gráfico

Olá Mônica, obrigado pelas dicas. Segue o código HTML

<!DOCTYPE html>
<html lang="pt-br">
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Portfólio Eder Bronson</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" type="text/css" href="css/all.min.css">
    </head>
        <body>    
            <header>
                <div class="cabecalho">
                    <h1><img class="cabecalho__logo" src="logo.png" alt="Logo Eder Bronson "></h1>
                        <nav>
                            <ul class="cabecalho__links">
                                <li><a href="behance.html">Behance</a></li>
                                <li><a href="medium.html">Medium</a></li>
                                <li><a href="github.html">Github</a></li>
                                <li><a href="soundcloud.html">SoundCloud</a></li>
                                <li><a href="contato.html">Contato</a></li>
                        </nav>
                    </h1>
                    <nav class="redes">
                        <ul class="cabecalho__icones">
                            <a><i class="fab fa-twitter-square"></i></a>
                            <a><i class="fab fa-youtube-square"></i></a>
                            <a><i class="fab fa-instagram-square"></i></a>
                            <a><i class="fab fa-linkedin"></i></a>
                    </nav>
                    <nav class="botao">
                        <a href="#" class="btn">Me contrate</a>
                    </nav>

                </div>

            </header>
        </body>
</html>
por Mônica Mazzochi Hillman
| 932.5k xp | 1472 posts
Instrutor Instrutora

Opa! Agora com o código html consegui confirmar as coisas que pontuei antes. Vendo o CSS ainda estava com dúvidas da diferença da classe botao e btn.

Realmente, como falei antes, para melhorar eu tiraria o display: flex da logo e do botão por não precisar posicionar nada dentro deles lado a lado.

Também testando o seu HTML e CSS junto a lista de redes sociais acabou ficando atrás do botão, retirei o margin-left: 80%; do estilo das classes .redes .cabecalho__icones e agora ficou normal. Pode ser que importei a versão diferente do font-awesome e só acontece o problema aqui kkk

Enfim, quero parabeniza-lo por estar indo além das atividades da aula e aprendendo cada vez mais. Qualquer coisa, pode contar conosco.

Bons estudos!

por Eder Bruno Almeida Teodoro
| 127.2k xp | 34 posts
Designer gráfico

Mônica, obrigado mais uma vez. Eu tirei os links e deixei apenas ícones no cabeçalho e para isso recomecei o processo. Mas o que está me intrigando é que nem a fonte do google fonts está sendo aplicada e nem a transição da classe .btn

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

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio | Eder Bronson</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/cabecalho.css">
    <link rel="stylesheet" href="assets/css/rodape.css">
    <script src="https://kit.fontawesome.com/70884030e4.js" crossorigin="anonymous"></script>
    <link rel = "preconnect" href = "https://fonts.googleapis.com">
    <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
    <link href = "https: //fonts.googleapis.com/css2? family = Arima + Madurai: wght @ 300 & family = Source + Serif + Pro & family = Vidaloka & display = swap "rel =" stylesheet ">
</head>
<body>
    <header>
        <div class="cabecalho">
            <h1><img class="cabecalho__logo" src="assets/img/LogoEB_cabecalho.png" alt="Logo Eder Bronson "></h1>
                <nav>
                    <ul class="cabecalho__icones">
                        <li><a href="#"></a><i class="fa-brands fa-linkedin-in"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-instagram"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-youtube"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-twitter"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-soundcloud"></a></i></li>
                        <li><a href="#"></a><i class="fa-brands fa-github"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-medium"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-behance"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-tiktok"></i></a></li>
                        <li><a href="#"></a><i class="fa-brands fa-facebook-f"></a></i></li>                    
                </nav>
                <nav class="botao">
                    <a href="#" class="btn">Me contrate</a>
                </nav> 
        </div>
    </header>
</body>
</html>
body {
    background: #282828;
}

header {
    background: #000302;
    padding: 1px 10px;
}

.cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

.cabecalho__icones {
       color: #FFFFFF;
    font-size: 30px;
    display: flex;
    text-decoration: none;

}

.fa-brands {
    margin: 1.5rem;

}

.fa-brands:hover {
    color: #FBD87A;
    cursor: pointer;


}

.btn {
    background-color: #FBD87A;
    color: #000000;
    text-decoration: none;
    border: 2px solid transparent;
    padding: 10px 25px;
    border-radius: 30px;
    transition: transform .1s;
    font-family: 'Arima Madurai', cursiva;

}

.btn:hover {
    transform: scale(1.2);
}
por Eder Bruno Almeida Teodoro
| 127.2k xp | 34 posts
Designer gráfico

Sobre a transição consegui resolver, mas referente as fontes não. Não estou conseguindo encontrar a solução para esses erros.

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