1

Estoy haciendo un login y abajo estoy poniendo el tipico enlace de que si quiere crearse una cuenta que vaya a la pagina de registro, pero es que no me detecta el enlace y no encuentro el error, este es mi código html:

<html>
    <head>  
        <meta charset="UTF-8" />
        <meta name="description" content="Todas las recetas profesionales de los mejores cocineros a tu alcance." />
        <meta name="keywords" content="Recetas,cocina,restaurantes,comida,postres" />
        <meta name="author" content="Mario Ramos García" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" type="image/png" href="/img/logo.PNG" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
        <link rel="stylesheet" type="text/css" href="login.css" />
        <title>Cook-It!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $("#login-button").click(function(event){
                event.preventDefault();

                $('form').fadeOut(500);
                $('.wrapper').addClass('form-success');
            });
        </script>
    </head>
    <body>
        <div class="container-fluid row p-0 m-0">
            <div class="wrapper">
                <div class="container">
                    <h1>Bienvenido a Cook-It!</h1>
                    <form class="form" method="POST" action="index.php">
                        <input type="text" name="usuario" value="<?php if(isset($usuario)) echo $usuario; ?>" placeholder="Usuario" required autofocus>
                        <input type="password" name="contrasena" placeholder="Contraseña" required>
                        <button type="submit" name="login" id="login-button">Iniciar Sesión</button>
                    </form>

                </div>
                <a href="google.es" class="h6">¿No tienes cuenta? Regístrate.</a>
                <ul class="bg-bubbles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
      </div>
 </body>
CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}
body {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body ::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
.wrapper {
  background: #50a3a2;
  background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  position: absolute;
  /*top: 50%;*/
  left: 0;
  width: 100%;
  /*height: 400px;*/
  height: 100%;
  /*margin-top: -200px;*/
  overflow: hidden;
}
.wrapper.form-success .container h1 {
    transform: translateY(85px);
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 0;
  height: 400px;
  text-align: center;
}
.container h1 {
  font-size: 40px;
  transition-duration: 1s;
  transition-timing-function: ease-in-     put;
  font-weight: 200;
}
form {
  padding: 20px 0;
  position: relative;
  z-index: 2;
}
form input {
  appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
form input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
  background-color: white;
  width: 300px;
  color: #53e3a6;
}
form button {
  appearance: none;
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #53e3a6;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  transition-duration: 0.25s;

}
form button:hover {
  background-color: #f5f7f9;
}
.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bg-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  animation: square 25s infinite; 
  transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
  left: 10%;
}
.bg-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  animation-delay: 2s;
  animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;

}
.bg-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
  left: 70%;
}
.bg-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  animation-delay: 15s;
  animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  animation-delay: 2s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  animation-delay: 11s;        
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700px) rotate(600deg);
  }
}
5
  • Bienvenido para que tu pregunta sea bien recibida te invito a leer Cómo preguntar Commented el 20 abr. 2018 a las 18:29
  • intentastes hacere <a href="http://google.es"> Commented el 20 abr. 2018 a las 18:30
  • sigue sin funcionar, es rarísimo que no me lo esté detectando Commented el 20 abr. 2018 a las 18:32
  • a mi me funciona tu link, no me envia a google pero si me redirige probaste con la propiedad target="_blank" Commented el 20 abr. 2018 a las 18:34
  • creo que he encontrado el error, puede ser que esté en mi CSS, porque he quitado el linkeado al archivo de estilos y si me funciona, adjunto codigo css arriba Commented el 20 abr. 2018 a las 18:37

2 respuestas 2

0

El problema está en tu CSS:

.bg-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Al poner z-index a 1, queda por encima del enlace. Cuando hacés click donde ves el enlace, en realidad, estás haciendo click sobre bg-bubbles. Cambiá los z-index y listo. Por ejemplo:

<a href="google.es" class="h6" style="
    position: relative;
    z-index: 2;
">¿No tienes cuenta? Regístrate.</a>
2
  • Estoy probando a cambiarlos pero por mucho que cambie el z-index sigue sin poder utilizarse, si les pongo z-index: -1 a los bubbles no se ven y si que funciona el enlace, como lo podría soolucionar? Commented el 20 abr. 2018 a las 19:01
  • El z-index únicamente se aplica a los elementos que tienen una posición. Asigná las propiedad position a relative y ahí el enlace va a hacer caso de z-index. Commented el 20 abr. 2018 a las 19:07
0

Lo que pasa es que le estás pasando mal el atributo a la etiqueta a.

<a href="google.es" class="h6">¿No tienes cuenta? Regístrate.</a>

Entonces href="google.es" deberías pasarle el http:// al principio, quedando asi: href="http://google.es", si lo que querés es cambiar de archivo (localmente), tenés que pasarle la ruta, por ejemplo:

<a href="registrate.html" class="h6">¿No tienes cuenta? Regístrate.</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.