0

Eyy hola, mi pregunta es que estoy realizando mi primera pagina web y estoy realizando un fondo basado en este tutorial (https://www.youtube.com/watch?v=StjmEh211Oc), lo estuve modificando para que quedara de esta manera:Los puntos brillantes son varios  y lo que quiero hacer es que se vean igual, el bloque de luces de la izquierda esta pegado a la pantalla y el otro no, intente cambiar su posición para que quedara pegado de lado derecho en CSS pero no lo logre, alguien me puede ayudar?

Los puntos brillantes son varios y lo que quiero hacer es que se vean igual, el bloque de luces de la izquierda esta pegado a la pantalla y el otro no, intente cambiar su posición para que quedara pegado de lado derecho en CSS pero no lo logre, alguien me puede ayudar?

Este es mi codigo:

*
{
    margin: 0;
    padding: 0px;
    box-sizing:border-box;
    min-width: 0px;
    min-height:0px ;
    background: #001300;
}


 section
 {
    
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 0vh;
    
 }

 
 span
 {
    
    width: 30px;
    height: 30px;
    display: block;
    animation: changeColor 10s linear infinite;
    
    
 }

 #Luces2
 {
    padding-left:  81pc;
   
    
 }

 @keyframes changeColor
    {
        0%
        {
            filter:hue-rotate(0deg);
        }
        100%
        {
            filter:hue-rotate(360deg);
        }
    }

 span::before
 {
 content: '';
 position: absolute;
 width: 100%;
 height: 100%;
 background: #00ff0a;
 transform: scale(0.1);
 box-shadow: 0 0 10px #00ff0a,
 0 0 40px   #00ff0a,
 0 0 60px   #00ff0a,
 0 0 80px   #00ff0a,
 0 0 20px   #00ff0a;
 border-radius: 50%;
 pointer-events: none;
 transition: 2s;
 }
 
span:hover::before
{
    transform: scale(1);
    transition: 0.25s;
}
 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

  

      <section id="Luces">

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

  

  
    
      </section>

      <section id="Luces2">

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

        <div>
          <p>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> 
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </p>
        </div>

  

  
    
      </section>

      

    
      
    
</body>

</html>

introducir el código aquí

1 respuesta 1

0

Lo que podrías hacer es reemplazar en el archivo CSS esto:

#Luces2 {
  padding-left: 81pc;
}

Por esto:

#Luces2 {
    display: flex;
    justify-content: flex-end;   
 }

En la siguiente parte del CSS puedes eliminar el flex-wrap: wrap; en principio no es necesario, también podrías eliminar el height: 0vh, por último agregar al body directamente un dislplay: flex, en resumen, reemplazarías esto:

section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 0vh;
}

Por esto:

body {
    display: flex;
}

section {
    width: 100%;
    display: flex;
}

Hay un juego que podría ayudarte mucho a entender como funciona Flexbox, te paso link por si te interesa. Va desde básico a propuestas bastante complejas. https://flexboxfroggy.com/#es

Eso debería ser suficiente. Quedo a las órdenes.

1
  • Eyyy hola, muchas gracias por tu respuesta funcionó a la perfección, y gracias voy a probar el juego para practicar!
    – Zucaritas
    el 18 dic. 2021 a las 3:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.