Error using :Hover selector

Asked

Viewed 27 times

-2

Good Afternoon, I created a project and am using HTML, CSS and JS in it. I created a menu and applied the :Hover selector to the links, but it doesn’t work! Note: I am using reset.css!

body{
    background-color:#00a08f80;
    font-family: 'Open Sans', sans-serif;
}

header{
    padding: 1em;
}

header img{
    width: 15em;
}

nav{
    position: absolute;
    top: 4.2em;
    left: 15em;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: black;
    font-size: 14px;
    text-decoration: none;
}

nav a:hover{
    font-weight: bold;
}

h1{
    color: #fee074;
    text-shadow: 0.1em 0.1em 0.05em #333;
    font-size: 1000px;;    
}

h2{
    color: #27575B;
}

.btn-yellow{
    background-color: rgb(254, 224, 116);  
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/general.css">
    <title>Yellow Reach</title>
</head>
<body>
    <header>
        <img src="assets/img/logo-yellow-reach.svg" alt="yellow-reach-logo">
        <nav>
            <ul>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="planos.html">Planos</a></li>
                <li><a href="http://blog.yellowreach.com.br/">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
    </header>

</body>
</html>

css

1 answer

0


It doesn’t work because you just imported the value 600 font Open Sans, for vc tb have what would be the Regular or Normal style, vc need to import the value 400 tb!

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">

It should be so, including the value 400

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

OBS: Note that in this index there is no style Italic, so if you try the italic style too will not work

inserir a descrição da imagem aqui

Run the example below to see Open Sans with the two font weights

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

<p style="font-weight: 600; font-family: 'Open Sans', sans-serif;">600 - Lorem ipsum dolor sit amet.</p>
<p style="font-weight: 400; font-family: 'Open Sans', sans-serif;">400 - Lorem ipsum dolor sit amet.</p>

  • Cara...you are a monster!!! You helped me a lot!!!!!! Thank you so much!!!

  • @Dimasfelippe cool that worked out there! Thanks for the strength, I’m happy to help!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.