Meu computador não está identificando as pseudo classes, nem no IDE e nem no navegador. Quando digito o código IDE como (".social-icons a:hover{color: rgba(255, 255, 255, 0.7;)}" ele nem marca o .:hover como deveria e no navegador ele nem executa a função do hover… Alguém pode me ajudar ? Uso o Windows 10 e Google Chrome
poste o codigo
Descobri que no Mozilla eles funcionam, porém não rodou nem no chrome e nem no IE. Porém ja vi pessoas usando estas funções no chrome. O meu diz estar atualizado, alguma sugestão do que fazer ?
OBS: Media Types também não funcionam
Arquivo index.html :
meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> meta name="author" content="Gabriel Cilico Leite"> meta name="keywords" content="Arquitetura e Urbanismo, Arquiteto Ubiratã, Caio Pazim"> meta name="description" content="Caio Pazim. Arquiteto em Ubiratã - PR."> meta name="robots" content="index, follow"> link rel="shortcut icon" href="img/caiologo.png" type="image/png"/> link rel="stylesheet" href="css/style2.css"> link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,700"> Caio Pazim - Arquitetura & Urbanismo</head>
<body>
<!-- CABECALHO -->
<header class="cabecalho">
<a href="index.php"><h1 class="logo">Caio Pazim - Arquitetura & Urbanismo</h1></a>
<button class="btn-menu"> <i class="fa fa-bars fa-lg"></i> </button>
<!-- MENU -->
<nav class="menu">
<a class="btn-close"><i class="fa fa-times"></i></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Quem sou</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</header>
<!-- BANNER -->
<div class="banner">
<div class="title">
<h2>Arquitetura & Urbanismo</h2>
<h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elit faucibus, ullamcorper arcu non.</h3>
<div class="buttons">
<a href="#"><button class="btn-saiba">Saiba mais <i class="fa fa-question-circle"></i></button></a>
<a href="#"><button class="btn-onde">Onde me encontrar <i class="fa fa-compass"></i></button></a>
</div>
</div>
</div>
<!-- BANNER MEUS SERVICOS -->
<main class="servicos">
<article class="bn-servicos">
<a href="#"><img class="servico" src="img/projetos.jpg" alt="Meus Projetos"></a>
<div class="inner">
<a href="#"> Meus Projetos </a>
<h4>Maquetes, Videos 3D, AutoCAD</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elit faucibus, ullamcorper arcu non, vehicula arcu. Nunc vitae lobortis purus. Duis diam enim, cursus id erat malesuada, feugiat consequat diam. Fusce rutrum tellus id sem rhoncus suscipit. </p>
</div>
<a href="#"><button class="btn-servico-saiba">Saiba mais <i class="fa fa-question-circle"></i></button></a>
</article>
</main>
<!-- BANNER LOCALIZACAO -->
<main class="servicos">
<article class="bn-servicos">
<iframe class="servico" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3629.220486299724!2d-52.991097684771994!3d-24.547041684202682!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94f26b3da318aaa7%3A0x5666227fc84a9216!2sR.+Cear%C3%A1%2C+717%2C+Ubirat%C3%A3+-+PR%2C+85440-000!5e0!3m2!1spt-BR!2sbr!4v1507576252261"></iframe>
<div class="inner">
<a href="#"> Localização </a>
<h4>Rua Prof. Pedro Beckauser, 717</h4>
<p>Atrás da Igreja Matriz, próximo ao Hospital Santa Casa.</p>
</div>
<a href="https://www.google.com/maps?ll=-24.547042,-52.988909&z=15&t=m&hl=pt-BR&gl=BR&mapclient=embed&q=R.+Cear%C3%A1,+717+Ubirat%C3%A3+-+PR+85440-000"><button class="btn-servico-saiba">Abrir no mapa <i class="fa fa fa-compass"></i></button></a>
</article>
</main>
<!-- BANNER MEU CONTATO -->
<main class="servicos">
<article class="bn-servicos">
<a href="#"><img class="servico" src="img/caio.jpg" alt="Meus Projetos"></a>
<div class="inner">
<a href="#"> Meu Contato </a>
<h4>Seg - Sex / 08:00 - 18:00</h4>
<p> <i class="fa fa fa-whatsapp"></i> (44) 9 99999999 <br>
<i class="fa fa fa-phone-square"></i> (44) 9 99999999 <br>
<i class="fa fa fa-envelope"></i> exemplo@hotmail.com</p>
</div>
<a href="tel:9999999999"><button class="btn-servico-saiba">Ligue agora! <i class="fa fa-phone"></i></button></a>
</article>
</main>
<!-- NEWSLETTER -->
<SECTION class="newsletter">
<h2> Inscreva-se agora! <h2>
<h3> Receba novidades, dicas, promoções e muito mais. </h3>
<form method="post">
<input class="pla" type="email" name="email" placeholder="Seu Email">
<input class="button" type="submit" value="Cadastrar">
</form>
</SECTION>
<!-- RODAPÉ -->
<footer class="rodape">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-phone"></i></a>
<a href="#"><i class="fa fa-youtube-play"></a></i>
</div>
<p class="copyright">2017 © Caio Pazim - Desenvolvido por <a target="_blank" href="https://www.facebook.com/gabrielcilico">Gabriel Cilico</a></p>
</footer>
<!-- JQUERY -->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(".btn-menu").click(function(){
$(".menu").show();
});
$(".btn-close").click(function(){
$(".menu").hide();
});
</script>
</body>
OBS: tirei os “<” dos meta e link para aparecer aqui.
Segue também o arquivo CSS:
/* ========== RESET =========== */
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'lato', san-serif;}
body {background-color: #f5f5f5;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
/* CABECALHO */
.cabecalho {width: 100%; float: left; padding: 3% 4%;}
.logo {width: 56px; height: 56px; float: left; background: url(…/img/caiologo.png) center center/56px no-repeat; font-size: 0;}
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #fff; border-radius: 56px; cursor: pointer;
background: linear-gradient(to right, #006bb3, #99d6ff)}
/* MENU */
.menu {display: none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0;}
.btn-close {font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin: 2% 3% 0 0;}
.menu ul { width: 100%; float: left; text-align: center; }
.menu li {padding: 1.5%}
.menu li a {font-size: 2.5em; color: #fff; padding: 1.5% 3%;}
.menu li a:hover {border:1px solid #006bb3;}
/* BANNER */
.banner {width: 100%; float: left; text-align: center; padding: 3% 4%; background: url(…/img/bg.png) no-repeat fixed center;}
.title {width: 100%;}
.title h2 {font-size: 2.5em; color: #fff; font-weight: 700;}
.title h3 {font-size: 1.5em; color: #fff;}
.buttons {width: 100%;}
.buttons i {float: right;}
.btn-saiba {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px;
background-color: #fff; color: #130400; margin-top: 2%;}
.btn-onde {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px;
background-color: #130400; color: #fff; margin-top: 2%;}
/* SERVICOS */
.servicos {width: 100%; float: left; padding: 3% 4%;}
.bn-servicos {width: 100%; background-color: #fff; text-align: left; border-radius: 10px; margin-bottom: 3%;}
.servico {width: 100%; border-radius: 10px 10px 0 0;}
.inner {padding: 7%}
.inner a {font-size: 1.5em; color: #130400; font-weight: 700;}
.inner h4 {font-size: 1.2em; color: #130400; margin-top: 2%;}
.inner p {margin-top: 10%; color: #130400; line-height: 1.5em;}
.btn-servico-saiba {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; border-radius: 0 0 10px 10px;
background-color: #130400; color: #fff; margin-top: 2%;}
.btn-servico-saiba i {float: right;}
.newsletter {width: 100%; float: left; text-align: center; padding: 3% 4%; background-color: #130400}
.newsletter h2 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3 {color: #fff;}
.newsletter form {margin-top: 2%}
.pla {width: 100%; background-color: #130400; border: 1px solid rgba(255, 255, 255, 0.3 ); padding: 5%; border-radius: 5px;}
.button {width: 100%; background-color: #fff; padding: 5%; border-radius: 5px; cursor: pointer; margin-top: 2%;}
/* RODAPÉ */
.rodape {width: 100%; float: left; padding: 3% 4%; text-align: center; background: linear-gradient(to right, #006bb3, #99d6ff);}
.social-icons a {font-size: 1.5em; color: rgba(255, 255, 255, 0.7); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgba(255, 255, 255);}
.copyright {font-size: 0.7em; margin-top: 3%; color: #130400;}
.copyright a {color: #130400;}
/* MOBILE FIRST */
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px;)
{
.logo {width: 250px; background: url(…/img/caiologo2.png) center center/250px no-repeat;}
.btn-saiba {width: 100%; font-size: 2em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px;
background-color: #fff; color: #130400; margin-top: 2%;}
.btn-onde {width: 100%; font-size: 2em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px;
background-color: #130400; color: #fff; margin-top: 2%;}
}