• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez

  • ¿Eres agencia?
  • Quién soy
  • Servicios WordPress
    • Mantenimiento
    • Maquetación & Desarrollo
    • Soporte técnico
  • Portfolio
  • Blog
  • Presupuestos
Estás en: Inicio / Tutoriales / Recurso: Página de mantenimiento provisional en HTML

Recurso: Página de mantenimiento provisional en HTML

El 3 de julio de 2025 por dani.sanchez Deja un comentario

Una página de mantenimiento provisional en un único archivo HTML, que nos puede venir muy bien cuando estamos haciendo migraciones:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitio en Mantenimiento</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            line-height: 1.6;
        }
        
        .maintenance-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 40px;
            max-width: 600px;
            width: 90%;
        }
        
        h1 {
            color: #e74c3c;
            margin-bottom: 20px;
        }
        
        .icon {
            font-size: 60px;
            margin-bottom: 20px;
            color: #f39c12;
        }
        
        p {
            margin-bottom: 25px;
            font-size: 18px;
        }
        
        .contact {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
            font-style: italic;
        }
        
        .progress-container {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .progress-bar {
            width: 65%;
            height: 20px;
            background-color: #2ecc71;
            border-radius: 5px;
            animation: progress 2s ease-in-out infinite;
        }
        
        @keyframes progress {
            0% { width: 65%; }
            50% { width: 70%; }
            100% { width: 65%; }
        }
    </style>
</head>
<body>
    <div class="maintenance-container">
        <div class="icon">🔧</div>
        <h1>Sitio en Mantenimiento</h1>
        <p>Estamos realizando tareas de mantenimiento para mejorar nuestro servicio.</p>
        <p>Disculpa las molestias. Volveremos pronto con una experiencia mejorada.</p>
        
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        
        <div class="contact">
            Si necesitas asistencia inmediata, contáctanos en:<br>
            <strong>soporte@ejemplo.com</strong>
        </div>
    </div>
</body>
</html>

Publicado en: Tutoriales

¿Quiéres invitarme a un café?

Si te has fijado en este blog no hay ni rastro de publicidad, todo el contenido publicado lo hago de forma artruista al igual que yo recurro a otros sitios cuando necesito algo. Pero si te he servido de ayuda y quieres agradecérmelo, puedes hacer una pequeña donación (el importe que quieras):

Entradas similares

  • Recurso: Página de mantenimiento provisional en HTML
  • Iniciar sesión en nuestros VPS mediante SSH Keys
  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio
  • Guía rápida de Flexbox

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Barra lateral principal

Autor

Dani Sánchez

logo mastodon @danisanchez

Entradas recientes

  • Cambia el texto «Sin existencias» de WooCommerce cuando un producto está agotado
  • Recurso: Página de mantenimiento provisional en HTML
  • Iniciar sesión en nuestros VPS mediante SSH Keys
  • Cerrar modales de Elementor con JavaScript (jQuery)
  • Redirección 301 para cambios de dominio

Comentarios recientes

  1. Brandon Portes en Taller de verano de WooCommerce #1
  2. Sebastian en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  3. Rigol en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora
  4. dani.sanchez en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  5. rikylinux en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress
Medium banner says Support Inkscape
+ +

Maquetación web, landings, blogs y tiendas online
cuidando hasta el mínimo detalle

Si necesitas que desarrolle tu proyecto web ponte en contacto conmigo.

Contacto
  • Mastodon
  • YouTube
  • LinkedIn

Alojado con energía 100% verde

Dani Sánchez © 2025 · Política de privacidad · Política de cookies