Entrar Ainda não tem acesso?
1
resposta

Código não está funcionando

Referente ao curso Arquitetura CSS: descomplicando os problemas, no capítulo Layout base e Estilização de cabeçalho e atividade Estilizando o cabeçalho

por Felipe Dalapicula Amorim
| 23.8k xp | 1 posts

O meu código não está alterando a aparencia do meu cabeçalho, não estou entendendo, pode ser um erro no código, ou talvez o meu normalize.css, que veio acusando 4 erros no código

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <link href="https://fonts.googleapis.com/css?family=Pacifico|Roboto:100,300,400,500,700,900" rel="stylesheet" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Fruta & Fruto</title>
        <link href="./assets/css/normalize.css" rel="stylesheet" />
        <link href="./assets/css/reset.css" rel="stylesheet" />
        <link rel="stylesheet" href="./assets/css/style.css">
    </head>
    <body>
        <header>
            <img alt="Fruta e Fruto" src="./assets/img/logo.jpg"/>
            <nav>
                <ul>
                    <link><a href="#">Inicio</a></li>
                    <link><a href="#">receitas</a></li>
                    <link><a href="#">quem-somos</a></li>
                    <link><a href="#">comunidade</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

header {
    align-items: center;
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
}

header nav ul {
    display: flex;
}

header nav ul li {
    list-style: none;
}

header nav ul li a {
    color: #808080;
    margin-right: 1.25rem;
    text-decoration: none;
}

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

1 resposta
por Rafael Silva E Silva
| 67.3k xp | 13 posts
Front-end Studant

Olá boa noite tudo bem? tenta colocar classes no seu html antes de tudo. por exemplo:

<header class="cabecalho">
            <img src="assets/img/logo.jpg" alt="Fruta e Fruto" class="logo">
            <nav class="menu">
                <ul class="menu__lista">
                    <li class="menu__item"><a class="menu__link ativo" href="#">Inicio</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Receita</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Quem somos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Comunidade</a></li>
                </ul>
            </nav>
        </header>

que daí seu css ficaria assim:

.cabecalho{
    align-items: center;
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem 0 2rem ;
}

.menu__lista{
    display: flex;
}

.menu__item:last-child .menu-link{
    margin-right: 0;    
}

.menu__item{
    list-style: none;

}

.menu__link{
    color: #808080;
    margin-right: 1.25rem;
    text-decoration: none;
}

.menu__link.ativo{
    color: #333333;
    font-weight: bold;
}