Bienvenida EL TEMPLO

 <!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Bienvenida al Templo</title>

  <style>

    body {

      margin: 0;

      overflow: hidden;

      background: linear-gradient(to top, #000000, #1a1a1a);

      height: 100vh;

      display: flex;

      justify-content: center;

      align-items: center;

      position: relative;

      font-family: 'Georgia', serif;

      color: white;

    }


    .nubes {

      position: absolute;

      bottom: 0;

      width: 100%;

      height: 50%;

      background: url('https://i.imgur.com/VyzfIUm.png') repeat-x;

      animation: moverNubes 60s linear infinite;

      opacity: 0.5;

      z-index: 1;

    }


    @keyframes moverNubes {

      0% { background-position: 0 0; }

      100% { background-position: 1000px 0; }

    }


    .abeja {

      width: 120px;

      height: 120px;

      background: url('https://i.imgur.com/2CK4gO7.png') no-repeat center center / contain;

      animation: girar 4s linear infinite;

      z-index: 2;

    }


    @keyframes girar {

      0% { transform: rotate(0deg); }

      100% { transform: rotate(360deg); }

    }


    .mensaje {

      position: absolute;

      bottom: 10%;

      z-index: 3;

      text-align: center;

      font-size: 22px;

      letter-spacing: 2px;

      text-shadow: 0 0 8px #ffffff;

    }


    .estrella {

      position: absolute;

      top: 10%;

      width: 20px;

      height: 20px;

      background: radial-gradient(white, transparent);

      animation: parpadear 2s infinite alternate;

      z-index: 3;

    }


    @keyframes parpadear {

      from { opacity: 0.1; }

      to { opacity: 1; }

    }

  </style>

</head>

<body>

  <div class="nubes"></div>

  <div class="abeja"></div>

  <div class="estrella" style="left: 20%;"></div>

  <div class="estrella" style="left: 50%;"></div>

  <div class="estrella" style="left: 75%;"></div>

  <div class="mensaje">

    <p>Estás entrando al Templo.<br>Un espacio entre dimensiones.</p>

  </div>

</body>

</html>


Comentarios