<!-- 
  Project: Stampsynk - Free Codes
  Author: @Saulomg2
  Description: Responsive background for the stampsynk website, with buttons and useful links.
  Website: https://stampsynk.com
  License: Open source
  Creation date: February 2025
  
-->


<!-- CTA section -->
<div class="cta-container">
    <h2>Stampsynk</h2>
    
</div>
/*
  Project: Stampsynk - Free Codes
  Author: @Saulomg2
  Description: Responsive background for the stampsynk website, with buttons and useful links.
  Website: https://stampsynk.com
  License: Open source
  Creation date: February 2025
  
*/


/* CTA styles */
    .cta-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      background-color:#000;
        color: #fff;
        padding: 50px 20px;
        border-radius: 15px;
        margin-top: 50px;
        position: relative;
        overflow: hidden;
    }

    /* Shadow effect on text */
    .cta-container h2 {
        font-size: 2.8rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: #ff9900;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
    }

    /* Animation for neon shadow effect */
    .cta-container h2::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 110%;
        height: 110%;
        background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
        filter: blur(40px);
        z-index: -1;
        animation: shadowEffect 3s infinite;
    }

    @keyframes shadowEffect {
        0% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
        }
    }

    /* Texto explicativo da CTA */
    .cta-container p {
        font-size: 1.2rem;
        line-height: 1.8;
        max-width: 900px;
        color: #ccc;
        margin: 20px 0;
        z-index: 1;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.