[Dúvida] Alguém consegue me dizer por que meu link está com a cor roxa e o css não tira a linha sublinhada no link... | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Navegando entre páginas

por João Victor Lemes Pereira

| 30.9k xp | 11 posts

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

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');
* { 
    margin: 0;
    padding: 0;    
}

body {
    box-sizing: border-box;
    background-color: #000000;
    color: #edede9;
}
.cabecalho{
padding: 2% 0% 0% 15%;
}
.cabecalho__menu{
    font-family: 'Montserrat', sans-serif;
    display: flex;
    font-weight: 600;
    font-size: 24px;
    gap: 80px;
    color: #fca311;
    text-decoration: none;
}
.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 630px;
    display: flex;
    flex-direction: column;
    position: relative;
    left:70px;
    gap: 30px;
}
.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
    font-weight: bold;
}
.apresentacao__conteudo__texto{
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
}
span{
    color: #fca311;
    padding: 3px;
}
.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.apresentacao__links__subtitulo{
    font-weight: 400;
    font-family: 'Krona One', 'sans-serif';
    font-size: 24px;
    color: #ffffff;
}
.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    height: 35px;
    text-align: center;
    border: 2px solid #fca311;
    border-radius: 8px;
    font-size: 24px;
    padding: 20px 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}    
.apresentacao__links__subtitulo:hover{
    background-color: #14213d;
    transition: background-color 0.3s ease;
    transform: scale(1.05);
}
.apresentacao__links__link:hover{
    background-color: #14213d;
    transition: background-color 0.8s ease;
    transform: scale(1.05)
}
span:hover{
    background-color: #14213d;
    transition: background-color 0.8s ease;
}
.rodape{
    padding: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
    font-size: 24px;
    color: #000000;
    background-color: #fca311;
}

3 respostas

por João Victor Lemes Pereira

| 30.9k xp | 11 posts

04/05/2023

<!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>Portifólio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Transformando ideias em realidade através da <span>programação front-end!</span></h1>
            <p class="apresentacao__conteudo__texto">Olá e bem-vindo(a) ao meu portfólio! Meu nome é João Victor, e sou um estudante iniciante de <span>programação front-end</span>.
                Estou atualmente estudando<span>HTML, CSS e React JS</span>, e estou empolgado em compartilhar meu progresso e projetos com você. 
                Eu comecei a me interessar pela criação de sites simples usando <span>HTML</span>, e agora estou me dedicando a aprimorar minhas habilidades com o objetivo de me tornar um desenvolvedor <span>front-end competente</span>.
                Estou sempre em busca de oportunidades para aprender e crescer como <span>desenvolvedor</span>, e adoro experimentar novas tecnologias e soluções criativas para resolver problemas.
                Se você está procurando um <span>desenvolvedor front-end</span> com entusiasmo, comprometimento e muita vontade de aprender, fique à vontade para explorar meu portfólio e entrar em contato comigo. 
                Juntos, podemos criar soluções incríveis e inovadoras para sua empresa.</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/jo%C3%A3o-victor-lemes-87a475244/"><img src="./assets/linkedin.png">LinkedIn</a>
                <a class="apresentacao__links__link" href="https://github.com/joao50-gif"><img src="./assets/github.png">Github</a>
                <a class="apresentacao__links__link" href="https://www.twitch.tv/pairulito3"><img src="./assets/twitch.png">Twitch</a>
                <a class="apresentacao__links__link" href="https://wa.me/+5562984600896"><img src="./assets/whatsapp.png" height="20px" width="20">Whatsapp</a>

            </div>    
        </section>   
            <img src="./assets/eu.png" height="480" width="480" >

    </main>    

    <footer class="rodape">
        <p>Desenvolvido por João Victor Lemes Pereira</p>
    </footer>

</body>
</html>

por João Victor Lemes Pereira

| 30.9k xp | 11 posts

04/05/2023

Básicamente o que rolou foi que eu adicionei os links conforme fora demonstrado na aula e depois que eu salvei o arquivo aconteceu isso de o link ficar com cara de link ao invés de ter a cara de um link estilizado em css... Se alguém puder dar um help com isso ficarei extremamente agradecido!!

solução!

por Victor Costa Santos

| 1923.4k xp | 3690 posts

Alura Scuba Team Monitor de ForumOps

04/05/2023

Olá João, tudo bem?

Para contornarmos esse erro basta, reaproveitarmos uma classe já criada em seu CSS, chamada .cabecalho__menu__link que está ligada no CSS de cada link do cabeçalho, e por fim devemos passar os valores, para retirar o aspecto de link e alterar a cor, como exemplificado mais abaixo:

.cabecalho__menu__link{
    text-decoration: none;
    color: #fca311;
}

As propriedades CSS que estão sendo aplicadas a este seletor são:

text-decoration: none;: remove o sublinhado padrão dos links, deixando-os sem decoração.
color: #fca311;: define a cor do texto dos links como #fca311, que é um tom de laranja. Esta é uma forma de destacar os links e torná-los mais visíveis para o usuário.

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

PRORROGAMOS O DESCONTO!