<!--
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
-->
<!-- Background text with the stampsynk class -->
<div class="stampsynk">
https://stampsynk.com/
</div>
<!--Scan Line Effect -->
<div class="scanline"></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
*/
/* background style */
body {
margin: 0;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
overflow: hidden;
}
.stampsynk {
position: absolute;
font-size: 70px;
text-align: center;
font-weight: bold;
color: rgba(0, 255, 0, 0.7);
text-shadow: 0 0 20px rgba(0, 255, 0, 0.6), 0 0 30px rgba(0, 255, 0, 0.5);
animation: glow 2s infinite alternate;
z-index: -1;
opacity: 0.8;
}
/* Glow animation on text */
@keyframes glow {
0% {
text-shadow: 0 0 20px rgba(0, 255, 0, 0.6), 0 0 30px rgba(0, 255, 0, 0.5);
}
100% {
text-shadow: 0 0 40px rgba(0, 255, 0, 1), 0 0 60px rgba(0, 255, 0, 1);
}
}
/*you can delete it from here */
/* Effect Scan Line, below is just what you need */
.scanline {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
rgba(0, 255, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 10%,
rgba(0, 255, 0, 0.05) 100%
);
animation: scanline 6s linear infinite;
pointer-events: none;
z-index: 999;
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.