logo de McKenzie Scott Civil Rights & Criminal Defense Lawyers
  • Español
  • Հայերեն
  • English
(619) 794-0451

Escribe un titular atractivo que funcione sin un lede

Encabezado de sección

Encabezado de acento

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Encabezado de característica

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu texto finalizado aún no está listo. Lo reemplazaremos pronto.

Tarjetas & Iconos

Tarjetas Claras

Tarjeta Icono

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu copia finalizada aún no está lista. Una vez que tengamos tu contenido finalizado, reemplazaremos este texto de marcador de posición con tu contenido real.

Enlace de texto

Tarjeta de Medios

Aquí va tu texto ... Selecciona cualquier parte de tu texto para acceder a la barra de herramientas de formato.

Llamado a la acción

Tarjeta Avatar

No te alarmes, esto está aquí solo para llenar espacio ya que tu copia finalizada aún no está lista.

tarjetas oscuras

Tarjeta Icono

Este es solo un texto de marcador de posición. No te alarmes, esto está aquí solo para llenar espacio ya que tu copia finalizada aún no está lista. Una vez que tengamos tu contenido finalizado, reemplazaremos este texto de marcador de posición con tu contenido real.

Enlace de texto

Tarjeta de Medios

Aquí va tu texto ... Selecciona cualquier parte de tu texto para acceder a la barra de herramientas de formato.

Llamado a la acción

Tarjeta Avatar

No te alarmes, esto está aquí solo para llenar espacio ya que tu copia finalizada aún no está lista.

Iconos Grandes

Iconos Medianos

iconos pequeños

Lista de Iconos

  • Este es un elemento de la lista.
  • Este es un elemento de la lista.
  • Este es un elemento de la lista.
  • Este es un elemento de la lista.
  • Este es un elemento de la lista.
<!-- Activate & Sign -->
console.log('Script is starting');

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is fully loaded');

  const iconGroups = document.querySelectorAll('[data-ui-icon-group]');
  console.log(`Found ${iconGroups.length} icon groups`);

  iconGroups.forEach((group, index) => {
    console.log(`Processing group ${index + 1}`);

    const label = group.querySelector('[data-ui-icon-row-label]');
    const row = group.querySelector('[data-ui-icon-row]');
    const icon = row?.querySelector('[data-icon]');

    console.log(`Group ${index + 1}: Label found: ${!!label}, Row found: ${!!row}, Icon found: ${!!icon}`);

    if (icon && label) {
      const computedStyle = window.getComputedStyle(icon);
      const iconSize = computedStyle.getPropertyValue('--icon-size');

      console.log(`Group ${index + 1}: Icon size from CSS: ${iconSize || 'not found'}`);

      if (iconSize) {
        console.log(`Group ${index + 1}: Appending size to label`);
        label.textContent += ` (${iconSize})`;
      } else {
        console.log(`Group ${index + 1}: Icon size not found, skipping label update`);
      }
    } else {
      console.log(`Group ${index + 1}: Missing icon or label, skipping`);
    }
  });

  console.log('Script execution completed');
});

Paleta de Marca

Colores

Los siguientes colores y tonalidades están disponibles para este proyecto.

Primario

Secundario

terciario

Acento

Base

Neutral

<!-- Activate me and sign me -->
document.addEventListener('DOMContentLoaded', function() {
  const colorElements = document.querySelectorAll('[data-color]');

  colorElements.forEach(element => {
    const bgValue = getComputedStyle(element).getPropertyValue('--bg').trim();
    const contentWrapper = element.querySelector('[class*="__content-wrapper"]');

    if (!bgValue || bgValue === 'undefined') {
      element.style.display = 'none';
      return;
    }

    if (contentWrapper) {
      const color = new Color(bgValue);
      const hexValue = color.hex();
      const rgbValue = color.rgb().string();
      const hslValue = color.hsl().string();

      const colorInfo = document.createElement('div');
      colorInfo.innerHTML = `
        <p>Hex: ${hexValue}</p>
        <p>RGB: ${rgbValue}</p>
        <p>HSL: ${hslValue}</p>
      `;
      contentWrapper.appendChild(colorInfo);
    }
  });
});

// Simple Color conversion class
class Color {
  constructor(color) {
    this.color = color;
  }

  hex() {
    const rgb = this.rgb().array();
    return '#' + rgb.map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    }).join('');
  }

  rgb() {
    const div = document.createElement('div');
    div.style.color = this.color;
    document.body.appendChild(div);
    const rgb = window.getComputedStyle(div).color.match(/d+/g).map(Number);
    document.body.removeChild(div);
    return {
      array: () => rgb,
      string: () => `rgb(${rgb.join(', ')})`
    };
  }

  hsl() {
    const rgb = this.rgb().array();
    const r = rgb[0] / 255;
    const g = rgb[1] / 255;
    const b = rgb[2] / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }

    return {
      array: () => [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)],
      string: () => `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
    };
  }
}

Soy un encabezado

Soy un encabezado