Call to action, sidfot, Html ainnova.se

<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CTA-bollar | Navigationslänkar</title> <style> /* Reset för plattformskonsistens */

{ margin: 0; padding: 0; box-sizing: border-box; }

    /* Grundläggande styling för hela sidan */
    html, body {
        font-family: 'Lato', Arial, sans-serif !important;
        color: #333333 !important;
        line-height: 1.6;
        min-height: 100vh;
    }

    /* Sidfot */
    footer {
        background: transparent; /* Transparent bakgrund */
        padding: 40px 20px; /* Ger tillräckligt med utrymme runt bollarna */
        text-align: center;
    }

    /* Call-to-action-bollar */
    .cta-circles {
        display: flex;
        justify-content: center;
        margin: 30px 0; /* Mer vertikal margin för att undvika att bollarna klipps av */
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
        pointer-events: none !important;
    }

    .cta-circle:nth-child(1) {
        background-color: #80CB45 !important;
    }

    .cta-circle:nth-child(2) {
        background-color: #007BBF !important;
        color: #FFFFFF !important;
    }

    .cta-circle:nth-child(3) {
        background-color: #80CB45 !important;
    }

    .cta-circle:nth-child(4) {
        background-color: #007BBF !important;
        color: #FFFFFF !important;
    }

    .cta-circle {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 120px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
        font-size: 18px;
        font-weight: bold;
        color: #222222 !important;
        margin: 0 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        animation: pulse 2s infinite ease-in-out;
        will-change: transform;
        backface-visibility: hidden;
        z-index: 1000;
        pointer-events: auto !important;
    }

    /* Pulse-animation för CTA-bollar */
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

    /* Fade-in-animation för bollarna */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Stäng av animationer för användare med prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .cta-circles {
            animation: none;
            opacity: 1;
        }
        .cta-circle {
            animation: none;
            transition: none;
        }
    }

    /* Hover-effekter och fokus för CTA-bollar */
    @media (hover: hover) {
        .cta-circle:hover {
            background-color: #3A8C2D !important;
            color: #FFFFFF !important;
            transform: scale(1.05);
        }
    }

    .cta-circle:focus {
        outline: 3px solid #005F9F;
        outline-offset: 2px;
    }

    /* Responsivitet för mobil (under 768px) */
    @media only screen and (max-width: 768px) {
        footer {
            padding: 30px 15px; /* Mindre padding på mobiler, men fortfarande tillräckligt */
        }
        .cta-circles {
            display: flex;
            flex-wrap: wrap;
            gap: 15px 20px;
            justify-content: center;
            max-width: 200px;
            margin: 20px auto; /* Mer vertikal margin för att undvika att bollarna klipps av */
        }
        .cta-circle {
            width: 80px;
            height: 80px;
            aspect-ratio: 1 / 1;
            line-height: 80px;
            font-size: 12px;
            margin: 0;
            padding: 0;
            flex: 0 0 80px;
            border-radius: 50%;
            box-sizing: border-box;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>

</head> <body> <footer> <div class="cta-circles"> <a href="https://ainnova.se/" class="cta-circle" data-url="https://ainnova.se/" aria-label="Navigationslänk till AINNOVAs startsida">AINNOVA</a> <a href="https://erbjudanden.ainnova.se/" class="cta-circle" data-url="https://erbjudanden.ainnova.se/" aria-label="Navigationslänk till AINNOVAs erbjudanden">Erbjudanden</a> <a href="https://ainnova.se/kontakt" class="cta-circle" data-url="https://ainnova.se/kontakt" aria-label="Navigationslänk till AINNOVAs kontaktsida">Kontakt</a> <a href="https://delicate-neighbor-37a.notion.site/Du-f-r-alltid-AINNOVAS-b-sta-tips-1649c8142e3f805cbf91d9c1fe7d320c" class="cta-circle" data-url="https://delicate-neighbor-37a.notion.site/Du-f-r-alltid-AINNOVAS-b-sta-tips-1649c8142e3f805cbf91d9c1fe7d320c" aria-label="Navigationslänk till AINNOVAs Notion-sida med tips">Notion</a> </div> </footer> <script> // Hantera klick på CTA-bollarna document.querySelectorAll('.cta-circle').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const url = this.getAttribute('data-url'); window.open(url, '_blank'); }); }); </script> </body> </html>