digitalbooting/brand.js

The brand footer designed by digital booting agency

class digitalBootingFooter extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
        <style>
            *,*:after,*:before {
                box-sizing: border-box;
            }
            :host {
                display:block;
                width: 100%;
            }
            
            #__db_footer__ {
                color:#fff;
                display:flex;
                width: 100%;
                max-width: 100%;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                align-content: center;
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
                font-family: sans-serif;
                user-select: none;
            }
            :host(.black) #__db_footer__ {
             color: #000;
            }
            #__db_footer__ * {
                color:inherit;
                text-decoration: none;
            }
            #__db_footer__ img {
                width: 30px;
                height: 30px;
                object-fit: contain;
                margin-right: 0.5rem;
            }
        </style>
        <div id="__db_footer__">
            <img src="https://digitalbooting.com/images/logo.png" alt="Digital Booting Agency">
            <small>Designed by <a href="https://digitalbooting.com">Digital <strong style="color:#38c172">Booting</strong></a></small>
        </div>
        `;
    }
}
window.customElements.define('make-digital', digitalBootingFooter);