Good What is the cause of the badly focused link (work together)?
.Portada {
height: 100vh;
width: 100%;
background-image: url(../Img/fondo.jpg);
background-size: cover;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
HEADER {
height: 80px;
width: 100%;
background-color: transparent;
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s;
}
#Barra-Navegacion {
display: table;
margin: auto;
margin-top: 15px;
height: 40px;
transition: margin-left 0.3s;
}
#Barra-Navegacion ul {
display: block;
float: left;
list-style: none;
}
img#Logo {
height: 60px;
display: block;
margin: 0 30px;
float: left;
transition: width 0.3s, height 0.3s, margin-top 0.3s, margin-right 0.3s;
}
#Barra-Navegacion ul li {
float: left;
margin: 10px;
padding: 10px;
}
#Barra-Navegacion ul li a {
color: #FFF;
opacity: 0.8;
}
#Barra-Navegacion ul li a:visited {
color: #FFF;
}
#Frase-Presentacion-Introduccion {
font-size: 34px;
font-weight: bold;
color: #FFF;
opacity: 0.9;
position: relative;
top: 25%;
}
#Frase-Presentacion {
font-size: 24px;
font-weight: lighter;
color: #FFF;
opacity: 0.9;
position: relative;
top: 28%;
}
.Conbtenedor-Contacto {
height: 200px;
width: auto;
background-color: forestgreen;
}
#Btn-Ready {
height: auto;
width: 300px;
font-size: 24px;
background-color: transparent;
color: #FFF;
font-weight: bold;
line-height: 36px;
outline: none;
position: absolute;
bottom: 10%;
border: solid 2px;
border-radius: 28px;
border-color: #FFF;
cursor: pointer;
transition: width 0.2s;
}
#Btn-Ready:hover {
width: 320px;
}
#Aprende-Mas {
color: #FFF;
font-size: 18px;
font-weight: lighter;
opacity: 0.6;
display: block;
width: 100%;
position: absolute;
bottom: 1%;
cursor: pointer;
}
#Aprende-Mas:hover {
opacity: 1;
}
.icon-keyboard_arrow_down {
color: #FFF;
font-size: 28px;
opacity: 0.6;
}
#Aprende-Mas:hover .icon-keyboard_arrow_down {
opacity: 1;
}
<div class="Portada">
<HEADER>
<nav id="Barra-Navegacion">
<ul>
<li><a href="#Portada" id="PECHA" onclick="pruebaPecha();">Portada</a></li>
<li><a href="#Conoceme">Mis destrezas</a></li>
<li><a href="#Mis-Proyectos">Mis proyectos</a></li>
</ul>
<img id="Logo" src="Img/logo200px.png" alt="Logo NEA">
<ul>
<li><a href="#Contacto">¿Trabajamos juntos?</a></li>
<li><a href="#Mis-Datos">¿Nos vemos?</a></li>
</ul>
</nav>
</HEADER>
<a name="Portada"></a>
<!--<img id="Fondo-Portada" src="Img/fondo.jpg" alt="Fondo">-->
<p id="Frase-Presentacion-Introduccion">
¡Bienvenido! Me llamo Carlos.
</p>
<p id="Frase-Presentacion">
Soy un futuro ingeniero industrial y apasionado desarrollador web.
</p>
<div class="Contenedor-Contacto">
</div>
<a href="#Contacto" id="Btn-Ready">¡Trabajemos juntos!</a>
<a href="#Conoceme">
<p id="Aprende-Mas">
Aprende más de lo que hago
<br>
<span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span>
</p>
</a>
</div>