<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>SIMILAR LANDING PAGE</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="grad1"></div>
<div id="logo">
<img src="imagenes/logo.png" class="rounded mx-auto d-block" alt="Responsive image" width="100%" >
</div>
<div class="contenedor">
<div id= "linea">
<img src="imagenes/linea.png" class="rounded mx-auto d-block" alt=".responsive image" width="100%" >
</div>
<h1> COMPLETÁ LOS DATOS Y RECIBÍ UNA CANCIÓN
ALEATORIA DE NUESTRO NUEVO ALBUM
'FANZINE'
ANTES DEL LANZAMIENTO OFICIAL </h1>
<form id= "formulario" action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">Nombre</label>
</div>
<div class="col-75">
<input type="text" id="nombre" name="Nombre" class="removeLater" required:"required" data-validation="length alphanumeric" data-validation-length="min4" placeholder="Ingresá tu nombre">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">E-mail</label>
</div>
<div class="col-75">
<input type="text" id="email" name="Email" class="removeLater" required:"required" data-validation="length alphanumeric" data-validation-length="min4" placeholder="Ingresá tu email">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Localidad</label>
</div>
<div class="col-75">
<input type="text" id="localidad" name="localidad" class= "removeLater" required:"required" data-validation="length alphanumeric" data-validation-length="min4" placeholder="Ingresá tu localidad">
</div>
</div>
<input type="submit" id="enviar" value="Enviar" >
</form>
<div id="modal-overlay">
<p> YA ESTAMOS ELIGIENDO QUE CANCION MANDARTE!</p>
<div id="logo2">
<img src="imagenes/logo.png" class="rounded mx-auto d-block" alt="Responsive image" width="10%" >
</div>
<p> No te olvides de revisar tu mail y compartir la canción con el hashtag #FANZINE </p>
<p> Se el primero en encontrar los 10 nombres de las canciones y ganar un montón de premios </p>
</div>
<div id="overlay-wrapper">
<div id="cerrar">
<input type="button" id="close" value="Cerrar">
</div>
</div>
<h2> SUBILA CON EL HASHTAG #FANZINE
Y ESCUCHÁ LOS TEMAS QUE RECIBIERON OTROS OYENTES.
LA PRIMERA PERSONA QUE CONSIGA LOS 1O NOMBRES
GANA ENTRADAS PARA NUESTRA GIRA Y MUCHAS COSAS MÁS </h2>
<div id= "redes">
<img src="imagenes/redes.png" class="rounded mx-auto d-block" alt=".responsive image" width=5% >
</div>
<div id= "lineas">
<img src="imagenes/linea.png" class="rounded mx-auto d-block" alt=".responsive image" width=100% >
</div>
</div>
<h3>LANZAMIENTO DE 'FANZINE': <i id="contador"></i></h3>
<div id="portada">
<img src="imagenes/portada.png" class="rounded mx-auto d-block" alt=".responsive image" width=50% >
</div>
<div id= "cuenta">
<script>
TargetDate = "JUL/4/2019 12:00 AM/PM UTC+0100";
BackColor = "transparent";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos";
FinishMessage = "YA DISPONIBLE EN SPOTIFY Y YOUTUBE";
</script>
<script src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script-->
<script src= "http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
$(document).ready(function () { $("#modal-overlay").hide(); $("#overlay-wrapper").hide(); /*$('#enviar').on('click', function (e) {*/ $("#formulario").submit(function (e) { e.preventDefault();
if (validaForm()) { var localidad = $("#localidad").val(); $(".removeLater").val(""); $("#modal-overlay").fadeIn(500); $("#overlay-wrapper").fadeIn(500); }
});
$('#close').on('click', function () { $("#modal-overlay").slideUp(500); $("#overlay-wrapper").slideUp(500); });
// 15 days from now!
//var date = new Date(new Date().valueOf() + 15 * 24 * 60 * 60 * 1000);
var date = new Date(2019, 6, 4);
$("#contador").countdown(date, function (event) { $(this).html(event.strftime('%D days %H:%M:%S')); });
});
function validaForm() { if ($("#nombre").val() === "") { alert("El campo Nombre no puede estar vacío."); $("#nombre").focus(); return false;
} else if ($("#email").val() === "") { alert("El campo Email no puede estar vacío."); $("#email").focus(); return false;
} else if ($("#localidad").val() === "") { alert("El campo Localidad no puede estar vacío."); $("#localidad").focus(); return false;
} else { return true;
}
}
</script>
</body>
</html>
