[FusionRhythm]

*Descriere: Index simplu in css. Initial voiam sa il pastrez pentru proiectul meu, dar am facut altul.
Deci, vreau sa il impartasesc cu voi... poate ii este cuiva de folos, cine stie.

*Poze / Video (obligatoriu):

*Link download:

Code:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@900&family=Oswald:wght@200;300;700&display=swap');

        body { 
            background: #000;
            margin: 0; padding: 0; overflow: hidden;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            height: 100vh; font-family: 'Cinzel', serif;
        }

        /* Fundal cu adancime */
        .chamber {
            position: absolute; width: 100%; height: 100%;
            background: radial-gradient(circle at center, #151108 0%, #000 90%);
            z-index: 1;
        }

        /* Branding - Corectie dimensiuni pentru incadrare */
        .brand-masterpiece {
            position: relative; z-index: 10; text-align: center;
            margin-bottom: 20px;
            width: 100%;
            transform: perspective(500px) rotateX(5deg);
        }

        .svg-prestige { 
            filter: drop-shadow(0 10px 20px rgba(0,0,0,1)) drop-shadow(0 0 15px rgba(212, 175, 55, 0.2));
            max-width: 90%; /* Siguranta pentru margini */
            height: auto;
        }

        .slogan-imperial {
            font-family: 'Oswald', sans-serif;
            font-weight: 300; font-size: 14px; letter-spacing: 18px;
            color: #fff; text-transform: uppercase; margin-top: 10px;
            opacity: 0.8; text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
            margin-left: 18px; /* Compensare letter-spacing */
        }

        /* Interfata  */
        .throne-interface {
            position: relative; z-index: 10;
            background: #050505;
            border-left: 2px solid #1a1a1a;
            border-right: 2px solid #1a1a1a;
            padding: 50px 120px;
            width: 500px; /* Latime controlata pentru stabilitate */
            box-shadow: 0 0 100px rgba(0,0,0,1), inset 0 0 50px rgba(212, 175, 55, 0.02);
            clip-path: polygon(0 10%, 5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%);
            text-align: center;
        }

        .throne-interface::before {
            content: ''; position: absolute; top: -1px; left: 10%; width: 80%; height: 1px;
            background: linear-gradient(90deg, transparent, #d4af37, transparent);
            box-shadow: 0 0 20px #d4af37;
        }

        .laser-sensor {
            position: absolute; width: 2px; height: 15px;
            background: #d4af37; box-shadow: 0 0 10px #d4af37;
        }
        .ls-tl { top: 15px; left: 15px; }
        .ls-tr { top: 15px; right: 15px; }

        .power-readout {
            font-family: 'Oswald', sans-serif;
            font-size: 10px; color: #444; letter-spacing: 6px;
            text-transform: uppercase; margin-bottom: 5px;
        }

        .status-hero {
            font-size: 50px; font-weight: 700; color: #fff;
            letter-spacing: 5px; text-transform: uppercase;
            font-family: 'Oswald', sans-serif; margin: 0;
            line-height: 1;
        }
        .hero-green { 
            color: #2ecc71; 
            text-shadow: 0 0 35px rgba(46, 204, 113, 0.5);
            animation: hero-glow 2s infinite ease-in-out;
        }

        .mercury-track {
            width: 80%; height: 1px; background: rgba(255,255,255,0.05);
            margin: 35px auto 25px auto; position: relative;
        }
        .mercury-flow {
            position: absolute; width: 40px; height: 3px;
            background: #fff; top: -1px; left: 0;
            box-shadow: 0 0 15px #fff;
            animation: flow-mercury 3s infinite cubic-bezier(1, 0, 0, 1);
        }

        .motto-monolith {
            font-size: 14px; color: rgba(212, 175, 55, 0.4);
            font-style: italic; letter-spacing: 5px; text-align: center;
            text-transform: lowercase;
        }

        /* Navigatie - Centrata sub interfata */
        .nav-elite {
            position: relative; margin-top: 30px; display: flex; gap: 40px; z-index: 10;
        }
        .elite-link {
            font-family: 'Oswald', sans-serif;
            color: #444; text-decoration: none; font-size: 11px;
            text-transform: uppercase; letter-spacing: 5px;
            transition: 0.5s;
            padding: 5px 10px;
        }
        .elite-link:hover {
            color: #d4af37; text-shadow: 0 0 15px #d4af37;
            transform: translateY(-2px);
        }

        @keyframes flow-mercury {
            0% { left: 0%; width: 10px; }
            50% { left: 50%; width: 60px; }
            100% { left: 100%; width: 10px; }
        }
        @keyframes hero-glow {
            0%, 100% { opacity: 1; filter: brightness(1.2); }
            50% { opacity: 0.7; filter: brightness(0.9); }
        }
    </style>
</head>
<body>

    <div class="chamber"></div>

    <div class="brand-masterpiece">
        <svg class="svg-prestige" width="900" height="110" viewBox="0 0 900 110">
            <defs>
                <linearGradient id="throneGold" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#ffffff;" />
                    <stop offset="45%" style="stop-color:#d4af37;" />
                    <stop offset="55%" style="stop-color:#8a6d3b;" />
                    <stop offset="100%" style="stop-color:#4b3c22;" />
                </linearGradient>
            </defs>
            <text x="50%" y="80" text-anchor="middle" font-family="'Cinzel', serif" font-size="95" font-weight="950" letter-spacing="25" fill="url(#throneGold)">
                METIN2 AVG
            </text>
        </svg>
        <div class="slogan-imperial">Play with the best! Die like the best!</div>
    </div>

    <div class="throne-interface">
        <div class="laser-sensor ls-tl"></div>
        <div class="laser-sensor ls-tr"></div>

        <div class="power-readout">Encrypted Link: <span style="color:#fff">STABLE</span> // Frequency: <span style="color:#d4af37">60HZ</span></div>
        <div class="status-hero">SYSTEM <span class="hero-green">ONLINE</span></div>
        
        <div class="mercury-track">
            <div class="mercury-flow"></div>
        </div>
        
        <div class="motto-monolith">"Slefuim experienta old-school"</div>
    </div>

    <div class="nav-elite">
        <a href="#" class="elite-link">Discord</a>
        <a href="#" class="elite-link">Server</a>
        <a href="#" class="elite-link">Forum</a>
    </div>

</body>
</html>

*Scanare VirusTotal: