1 creas un archivo descargar-blabla.html
2. creas un <div> principal por ejemplo contx...
<div class="contx">
...
</div>
3. dentro creas lo siguiente
1 div anuncios
el "Tu descarga está por comenzar"
1 div contador
1 div "oculto"
1 div "redes-sociales"
1 div "anuncios"
4. ...
<div class="contx">
<div class="anuncios">Anuncios</div>
<p>Tu descarga está por comenzar en:</p>
<div id="contador">6</div>
<div class="oculto" id="descarga">
...
</div>
<div class="redes-sociales">Redes Sociales</div>
<div class="anuncios">Más Anuncios</div>
</div>
5. dentro de <div> "oculto" iria tu link pdf y le ponemos a la class display none
<div class="oculto" id="descarga">
<a href="linkArchivo.pdf">Descargar</a>
</div>
.oculto {
display: none;
}
6. al div contex le ponemos width y margin 0 auto
.contx{
width: 600px;
margin: 0 auto;
}
7. ponemos el script que cuente 6 seg y le quite el display none al div class "oculto"
<script>
let segundos = 5; // segundos a Esperar
const contador = document.getElementById('contador');
const descarga = document.getElementById('descarga');
function mostrarContador() {
contador.textContent = segundos;
segundos--;
if (segundos < 0) {
clearInterval(intervalo);
contador.style.display = 'none';
descarga.style.display = 'block';
}
}
const intervalo = setInterval(mostrarContador, 1000);
</script>
7. previo ...
Ver el archivo adjunto 1098256
8. previo después de los segundos...
Ver el archivo adjunto 1098257
9. en resumen tu archivo descargar-blabla.html, solo le faltaria ponerle mas diseño/css y ponerle contenido a los <div> anuncios y redes, etc
HTML:
<html>
<head>
<title>Tu Descarga</title>
<style>
.contx{
width: 600px;
margin: 0 auto;
}
.oculto {
display: none;
}
</style>
</head>
<body>
<div class="contx">
<div class="anuncios">Anuncios</div>
<p>Tu descarga está por comenzar en:</p>
<div id="contador">6</div>
<div class="oculto" id="descarga">
<a href="linkArchivo.pdf">Descargar</a>
</div>
<div class="redes-sociales">Redes Sociales</div>
<div class="anuncios">Más Anuncios</div>
</div>
<script>
let segundos = 5; // segundos a Esperar
const contador = document.getElementById('contador');
const descarga = document.getElementById('descarga');
function mostrarContador() {
contador.textContent = segundos;
segundos--;
if (segundos < 0) {
clearInterval(intervalo);
contador.style.display = 'none';
descarga.style.display = 'block';
}
}
const intervalo = setInterval(mostrarContador, 1000);
</script>
</div>
</body>
</html>
