Deci, vreau sa il impartasesc cu voi... poate ii este cuiva de folos, cine stie.
*Poze / Video (obligatoriu):
![[Index] hompage / forum - Mesaj 1 - Imagine 1](https://i.postimg.cc/vZ4wqpNh/ezgif-71ca3eef3a5e4009.gif "[Index] hompage / forum - Mesaj 1 - Imagine 1")
*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>
