<!--
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.