Dellpinos.com Signature

gistfile1.txt

HTML:

---------
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    
    
    <div id="dellpinos-brand-signature">
        <div class="dp-local-brand-contenedor">
            <p>Engineered by</p>
            <a class="dp-local-brand-enlace" href="https://dellpinos.com" target="_blank" rel="noopener noreferrer">
                <h2 class="dp-local-brand-enlace__texto">DellPinos</h2>
            </a>
        </div>
    </div>
    <script>
        async function loadContent() {
            try {
                const response = await fetch('https://dellpinos.com/api/brand', {
                    method: 'GET',
                    headers: {
                        'Accept': 'text/html'
                    }
                });
                if (!response.ok) {
                    console.error('Error connecting to dellpinos')
                } else {
                    const html = await response.text();
                    document.getElementById('dellpinos-brand-signature').innerHTML = html;
                }
            } catch (error) {
                console.error('Error connecting to dellpinos')
            }
        }
        loadContent();
    </script>
    
    
    ------------
    
CSS:

---------
    :root {
        --dp-local-brand-fuente_prim: "Pacifico", cursive;
        --dp-local-brand-cBlanco: #FFFFFF;
        --dp-local-brand-cGris: #444444;
        --dp-local-brand-cPrim0: #f6b73c;
        --dp-local-brand-cPrim1: #f48c06;
    }

    .dp-local-brand-contenedor * {
        box-sizing: inherit;
    }

    .dp-local-brand-contenedor {
        box-sizing: border-box;
        margin: 0;
        padding: 5px 20px;
        width: 100%;
        background-color: var(--dp-local-brand-cGris);
        display: flex;
        align-content: center;
        justify-content: center;
        gap: 10px;
    }

    @media(min-width: 480px) {
        .dp-local-brand-contenedor {
            padding: 5px 60px;
            justify-content: flex-end;
        }
    }

    .dp-local-brand-contenedor p {
        margin: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: var(--dp-local-brand-cBlanco);
        font-size: 12px;
        font-family: "Verdana", sans-serif;
    }

    .dp-local-brand-enlace {
        height: 100%;
        display: flex;
        align-content: center;
        justify-content: center;
        gap: 5px;
        text-decoration: none;
    }

    .dp-local-brand-enlace:hover .dp-local-brand-enlace__texto {
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .dp-local-brand-enlace__texto {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        font-family: var(--dp-local-brand-fuente_prim);
        color: var(--dp-local-brand-cBlanco);
        transition: color 1s ease;
        font-size: 18px;

        background: linear-gradient(to right, var(--dp-local-brand-cPrim1), var(--dp-local-brand-cPrim0), var(--dp-local-brand-cBlanco));
        background-size: 100% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: currentColor;
        transition: all 1s ease;
    }