HTML - Código para 9 recuadros con media query

 

CÓDIGO HTML5

<main>

<!-------------- 1ERA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://play.hbomax.com/page/urn:hbo:page:home"><img src="img/hbo.png" alt="HBO Max" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://disneyplus.com/"><img src="img/disneyplus.jpg" alt="Disney +" style="width:100%"></a>

    </div>    

    <div class="column">

      <a href="https://www.netflix.com/browse"><img src="img/netflix.jpg" alt="Netflix" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://www.starplus.com/"><img src="img/starplus.jpg" alt="Star +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAZOpTJ.img?h=0&w=600&m=6&q=60&u=t&o=f&l=f" alt="Vix +" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/dragon-ball-gt"><img src="img/dragonballgt.jpg" alt="Dragon Ball GT" title="Dragon Ball GT" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://serieslan.com/los-caballeros-del-zodiaco"><img src="https://i0.wp.com/lacomikeria.com/wp-content/uploads/2022/02/33D1123B-9E73-40F4-A189-B74FDE357C54.jpeg?resize=600%2C400&ssl=1" alt="Caballeros del Zodiaco" title="Caballeros del Zodiaco" style="width:100%"></a>

    </div>

    <div class="column">

      <a href="https://vix.com/es-es/ondemandplus"><img src="img/livetv.jpg" alt="Vix +" style="width:100%"></a>

    </div>

  </div>

<!-------------- 2DA SECCION -------------->

  <div class="row">

    <div class="column">

      <a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>

    </div>

.

.

.

</main>

CÓDIGO CSS

/************* MAIN *************/

main{

    width: 100%;

    height: auto;

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

}

.column {

    float: left;

    width: 11%;

    padding: 5px;

  }

 

  /* Clearfix (clear floats) */

  .row::after {

    content: "";

    clear: both;

    display: table;

  }

main img{

    border-radius: 6px;

    border: .5px solid rgba(128, 128, 128, 0.301);

}

main img:hover{

    transition: .5s ease all;

    transform: scale(1.1);

}

@media screen and (min-width: 200px) and (max-width: 750px){

    .column{

        float: left;

        width: 33%;

        padding: 5px;

    }

}

Facebook - Modo Oscuro

 

Tema oscuro para aplicación de Facebook

Pasos que tienes que seguir para poderlo cambiar de claro hacía oscuro.

1. Accede a la app de Facebook.
2. Clic a las tres líneas
3. Configuración y Privacidad
4. Modo Oscuro
5. Activar...

Nieve - Gadget para tu sitio web con javascript

 

Nieve en tu sitio web con Javascript

Hay que tener este código:

var speed=30; // A menor numero más rápido

var flakes=150; // Numero de Copos de Nieve

var flake_image="http://i60.servimg.com/u/f60/13/20/23/83/sin_ta11.png"; // URL de la imagen de nieve

var swide, shigh;

var dx=new Array();

var xp=new Array();

var yp=new Array();

var am=new Array();

var sty=new Array();

window.onload=function() { if (document.getElementById) {

var k, f, b;

b=document.createElement("div");

b.style.position="absolute";

b.setAttribute("id", "bod");

document.body.appendChild(b);

set_scroll();

set_width();

for (var i=0; i<flakes; i++) {

dx[i]=0;

am[i]=Math.random()*20;

xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);

yp[i]=Math.random()*shigh;

sty[i]=0.75+1.25*Math.random();

f=document.createElement("div");

f.style.position="absolute";

f.setAttribute("id", "flk"+i);

f.style.zIndex=i;

f.style.top=yp[i]+"px";

f.style.left=xp[i]+"px";

k=document.createElement("img");

k.src=flake_image;

f.appendChild(k);

b.appendChild(f);

}

setInterval("winter_snow()", speed);

}}

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600

}

}

window.onscroll=set_scroll;

function set_scroll() {

var sleft, sdown;

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

document.getElementById("bod").style.top=sdown+"px";

document.getElementById("bod").style.left=sleft+"px";

}

function winter_snow() {

for (var i=0; i<flakes; i++) {

yp[i]+=sty[i];

if (yp[i]>shigh-30) {

xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);

yp[i]=0;

sty[i]=0.75+1.25*Math.random();

}

dx[i]+=0.02+Math.random()/10;

document.getElementById("flk"+i).style.top=yp[i]+"px";

document.getElementById("flk"+i).style.left=(xp[i]+am[i]*Math.sin(dx[i]))+"px";

}

}

Decora tu sitio web con este Gadget para Navidad

Recuerden que el script puede estar dentro de HTML o en su propio archivo.JS

Cuando es la 1era vez que se agrega el código tarda en aparecer en el sitio web. Javascript mejorado con CHATGPT

    /************* EFECTO DE NIEVE *************/

    const cantidadCopos = window.innerWidth <= 750 ? 35 : 65;

    const copos = [];

    let ancho = window.innerWidth;

    let alto = window.innerHeight;

    const nieve = document.createElement('div');

    nieve.id = 'bod';

    Object.assign(nieve.style, {

        position: 'fixed',

        top: '0',

        left: '0',

        width: '100%',

        height: '100%',

        overflow: 'hidden',

        pointerEvents: 'none',

        zIndex: '50'

    });

    nieve.setAttribute('aria-hidden', 'true');

    document.body.appendChild(nieve);

    for (let i = 0; i < cantidadCopos; i++) {

        const copo = document.createElement('span');

        copo.textContent = '❄';

        const tamano = 8 + Math.random() * 13;

        const datos = {

            x: Math.random() * ancho,

            y: Math.random() * alto,

            velocidad: 0.5 + Math.random() * 1.5,

            movimiento: Math.random() * 0.8,

            fase: Math.random() * 6.28

        };

        Object.assign(copo.style, {

            position: 'absolute',

            left: datos.x + 'px',

            top: datos.y + 'px',

            color: '#ffffff',

            fontSize: tamano + 'px',

            opacity: String(0.4 + Math.random() * 0.6),

            textShadow: '0 0 5px white'

        });

        nieve.appendChild(copo);

        datos.elemento = copo;

        copos.push(datos);

    }

    function actualizarNieve() {

        copos.forEach(function (copo) {

            copo.y += copo.velocidad;

            copo.fase += 0.025;

            copo.x += Math.sin(copo.fase) * copo.movimiento;

            if (copo.y > alto) {

                copo.y = -20;

                copo.x = Math.random() * ancho;

            }

            if (copo.x > ancho) copo.x = 0;

            if (copo.x < 0) copo.x = ancho;

            copo.elemento.style.top = copo.y + 'px';

            copo.elemento.style.left = copo.x + 'px';

        });

    }

    setInterval(actualizarNieve, 20);

    window.addEventListener('resize', function () {

        ancho = window.innerWidth;

        alto = window.innerHeight;

    });

});

Windows - Ms Settings - Comandos para abrir las configuración en Windows

Comandos de Windows que si los utilizas como enlaces, abren las configuraciones que tienes en tu PC

ms-settings:

ms-settings:display

ms-settings:colors

ms-settings:system

ms-settings-connectabledevices:devicediscovery transferir a pantallas disponibles

ms-settings:nightlight luz nocturna

ms-settings:sound sonido

ms-settings:powersleep energia y bateria

ms-settings:storagesense almacenamiento

ms-settings:savelocations donde se guarda cada contenido

ms-settings:multitasking multitareas

ms-settings:bluetooth

ms-settings:network-wifi

ms-settings:personalization-background fondo de pantalla

Crear nuevo escritorio en Windows

 

Windows + Tab.

Ctrl + Win + D.