<!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>