Oxygenados Com

                    <!-- HAY CODE-BLOCKS  -->

<div id="div_block-102-171" class="ct-div-block">
    <div id="div_block-75-171" class="ct-div-block">
        <div id="code_block-76-171" class="ct-code-block">
            <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
            <a class="btn">
                <lord-icon target="a.btn" trigger="hover" src="https://cdn.lordicon.com/ggqtvqxi.json"
                    colors="primary:#da65bf,secondary:#10def6"></lord-icon>
                <span>Menu</span>
            </a>
        </div>
    </div>
    <div id="div_block-67-171" class="ct-div-block">
        <div id="code_block-68-171" class="ct-code-block">
            <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
            <a class="btn">
                <lord-icon target="a.btn" trigger="hover" src="https://cdn.lordicon.com/ivhjpjsw.json"
                    colors="primary:#da65bf,secondary:#10def6"></lord-icon>
                <span>Designer</span>
            </a>
        </div>
    </div>
    <div id="div_block-71-171" class="ct-div-block">
        <div id="code_block-72-171" class="ct-code-block">
            <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
            <a class="btn">
                <lord-icon target="a.btn" trigger="hover" src="https://cdn.lordicon.com/kxrhwtdg.json"
                    colors="primary:#da65bf,secondary:#10def6"></lord-icon>
                <span>Master</span>
            </a>
        </div>
    </div>
    <div id="div_block-73-171" class="ct-div-block">
        <div id="code_block-74-171" class="ct-code-block">
            <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
            <a class="btn">
                <lord-icon target="a.btn" trigger="boomerang" src="https://cdn.lordicon.com/hursldrn.json"
                    colors="primary:#da65bf,secondary:#10def6"></lord-icon>
                <span>Formations</span>
            </a>
        </div>
    </div>
</div>
                  

                    /*https://codepen.io/t_afif/pen/QWZqpYN*/

.container > * {
  border:1px solid;
  margin: 10px;
  padding: 5px;
  font-size: 20px;
  min-height: 1.2em;
}
.container [class]::before {
  content: attr(class) " ";
}

.start ~ :not(.end,.end ~ *) {
  color: red;
}
.start ~ div:not(.end,.end ~ *)::before {
  content: " I am selected !!"
}
                  

                    /*https://codepen.io/t_afif/pen/GRYEZrr*/

img {
  --s: 200px; /* the image size */
  
  width: var(--s);
  height: var(--s); /* better than aspect-ratio in case the image has a height attribute */
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}
img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}
img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}
img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 30px;
  background: #C6E5D9;
}
                  

                    /*https://codepen.io/t_afif/pen/ExdgYXo*/

/* first element with class*/
.bird:not(.bird ~ *),
.cat:not(.cat ~ *){
  color: green;
}
/* OR */
:nth-child(1 of .bird),
:nth-child(1 of .cat){
  font-weight:bold;
}
/* last element with class*/
.bird:not(:has(~ .bird)),
.cat:not(:has(~ .cat)){
  color: red;
}
/* OR */
:nth-last-child(1 of .bird),
:nth-last-child(1 of .cat){
    font-style: italic;
}
/**/



.container [class] {
  border:1px solid #000;
  margin: 10px;
  padding: 5px;
  font-size: 20px;
}
.container [class]::after {
  content:attr(class);
}
:is(.bird:not(.bird ~ *),.cat:not(.cat ~ *))::before{
  content: "I am the first "
}
:is(.bird:not(:has(~ .bird)),.cat:not(:has(~ .cat)))::before{
  content: "I am the last "
}
                  

                    /*
Crear un service worker en JavaScript es un proceso sencillo. Un service worker es un tipo especial de script que se 
ejecuta en segundo plano, permitiéndote interceptar y controlar las solicitudes de red, gestionar el almacenamiento en 
caché y proporcionar una experiencia sin conexión para tu sitio web o aplicación. 
Aquí tienes un ejemplo básico de cómo crear un service worker:

1: - Crear un archivo llamado service-worker.js en el directorio raíz de tu proyecto.

2: - Añadir el siguiente código en service-worker.js:
*/
self.addEventListener('install', (event) => {
  console.log('Service Worker instalado');
});

self.addEventListener('activate', (event) => {
  console.log('Service Worker activado');
});

self.addEventListener('fetch', (event) => {
  console.log('Service Worker interceptando una petición:', event.request.url);
  event.respondWith(fetch(event.request));
});


/*
3 - Registrar el service worker en tu archivo JavaScript principal, por ejemplo, main.js:
*/

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then((registration) => {
        console.log('Service Worker registrado con éxito:', registration);
      })
      .catch((error) => {
        console.log('Error al registrar el Service Worker:', error);
      });
  });
}

/*
4: - Asegúrate de servir tu proyecto a través de un servidor local o en producción, ya que los 
    service workers solo funcionan en contextos seguros (https).

5: - Abre tu sitio web o aplicación en un navegador compatible con service workers, y podrás ver 
    los mensajes de consola que indican que el service worker se ha instalado y está activo.
    
Este es un ejemplo básico de service worker. Puedes ampliar su funcionalidad interceptando 
solicitudes de red y gestionando el almacenamiento en caché, lo que te permitirá mejorar la 
experiencia de usuario en situaciones de conexión lenta o sin conexión.
*/