<!-- 
  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%); }
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.