4
respostas

Todos os Links do projeto não ficam brancos

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

Os links do meu projeto não ficam branco igual ao do instrutor

HTML

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap"     rel="stylesheet">

    <link rel="stylesheet" href="css/base">
    <link rel="stylesheet" href="css/Style.css">
    <link rel="stylesheet" href="css/chamada.css">
</head>
<body>
    <header class="cabecalho">
        <img src="img/logo-apeperia.svg" alt=" Logo da Apeperia" class="cabecalho_logo">
        <nav class="cabecalho_navegacao"> 
            <ul>
                <li class="cabecalho_link"><a href="#">Sobre </a></li>
                <li class="cabecalho_link"><a href="#">Planos </a></li>
                <li class="cabecalho_link"><a href="#">Blog </a></li>
                <li class="cabecalho_link"><a href="#">Destaques </a></li>
                <li class="cabecalho_link"><a href="#">Institucional </a></li>
                <li class="cabecalho_link"><a href="#">Contato </a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="chamada_secao">
            <h1 class="chamada_titulo">Aplicativos Na Medida</h1>
            <p class="chamada_paragrafo">Apeperia tem um jeito inovador de comparar e montar aplicativos para pequenas e médias empresas.</p>
            <a href="#" class="chamada_link">Conheça os planos</a>
        </section>
    </main>

    <footer></footer>
</body>
CSS Cabeçalho

.cabecalho{ color: #fff;

width: 100%;

box-sizing: border-box;

display: flex;
flex-direction: column;
align-items: center;

padding-top: .75em ;
padding-bottom:.75em ;

background-color: #00161C;
border-bottom: 1px solid #103d4a;

position: absolute;

}

.cabecalho_logo{ margin-bottom: 1rem; }

.cabecalho_navegacao{ text-align: center; } .cabecalho_link{ font-size: 1.1rem;

display: inline-block;

margin-right: .7rem;
margin-bottom: 1.25rem ;
margin-left: .7rem;
color: #FFF;

} CSS Chamada .chamada_secao{ display: flex; flex-direction: column; align-items: center;

color: #fff;
text-align: center;

background-color: #00161C;

padding-top:12.25rem;
padding-bottom: 2.5rem;

}

.chamada_titulo{ font-family: 'Montserrat', serif; font-size: 2rem; font-weight: 700;

text-transform: uppercase;

margin-bottom: 1.5rem;

} .chamada_paragrafo{ font-size: 1.25rem; line-height: normal; margin: 0 auto 2.5rem; } .chamada_link{ width: 100%;

}

4 respostas

Boa tarde! Para conseguir aplicar na tag de link <a></a> precisa ser um seletor mais especifico, se você tá chamando aqui: .cabecalho_linkfaz o seguinte:.cabecalho_link, a (cabecalho daí coloca uma vírgula e depois a tag a), assim ele aplica o CSS na class cabecalho e na tag a, Se você quiser ainda tirar o sublinhado por padrão do LINK usa text-decoration: none; testa isso!

Muito obrigado resolveu, eu tinha alterado a classe .cabecalho_link para a tag mas ai o código perdia a formatação, até tentei puxar o a .cabecalho_link, mas esqueci da virgula kkk, muito obrigado mais uma vez.

Oi, Gabriel. Acho que o problema na verdade é que você esqueceu de importar o reset.css :)

Mas o reset.css ta importado