🎮 Tutorial "Voice Hub" Integration WordPress...

Code:

/* --- Voice Hub CSS (STABIL & MOBIL) --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@500;700&display=swap');

:root {
    --dg-red: #e60000;
    --dg-dark: #121212;
    --dg-white: #ffffff;
}

/* Hauptcontainer */
.dg-wrapper {
    background: var(--dg-white);
    padding: 40px 20px;
    font-family: 'Rajdhani', sans-serif;
    text-align: center;
}

/* Überschrift mit Glow-Animation */
.animated-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 2.8rem;
    color: var(--dg-dark);
    text-transform: uppercase;
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}

.animated-title::after {
    content: 'VOICE HUB';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--dg-red);
    width: 100%;
    overflow: hidden;
    border-right: 3px solid var(--dg-red);
    white-space: nowrap;
    animation: typewriter 4s steps(10) infinite;
    filter: drop-shadow(0 0 10px var(--dg-red));
}

@keyframes typewriter {
    0%, 10% { width: 0; }
    40%, 60% { width: 100%; }
    90%, 100% { width: 0; }
}

/* Grid Layout */
.dg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* KARTEN-DESIGN & HOVER (MOUSEOVER FIX) */
.dg-wrapper .dg-card {
    background: #ffffff !important;
    border: 2px solid #f0f0f0 !important;
    border-radius: 20px !important;
    padding: 40px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    flex: 1 1 350px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative !important;
    z-index: 1 !important;
}

/* DIESER TEIL STEUERT DAS MOUSEOVER */
.dg-wrapper .dg-card:hover {
    border-color: var(--dg-red) !important;
    transform: translateY(-12px) !important; /* Karte hebt sich ab */
    box-shadow: 0 20px 45px rgba(230, 0, 0, 0.15) !important;
    z-index: 10 !important;
}

/* Discord Viewer - Lang gezogen */
.discord-widget {
    width: 100%;
    height: 600px !important;
    margin-bottom: 25px;
    border-radius: 10px;
    border: none;
}

/* Pulsierende Icons */
.voice-icon-box {
    width: 80px;
    height: 80px;
    background: var(--dg-red);
    border-radius: 50%;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.voice-icon-box svg {
    width: 40px;
    height: 40px;
    fill: white;
}

.voice-icon-box::before, .voice-icon-box::after {
    content: '';
    position: absolute;
    border: 2px solid var(--dg-red);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: pulse-ring 2s linear infinite;
}
.voice-icon-box::after { animation-delay: 1s; }

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Button Design */
.dg-btn {
    display: inline-block;
    background: var(--dg-dark);
    color: white !important;
    text-decoration: none !important;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.3s !important;
    margin-top: auto;
}

.dg-wrapper .dg-card:hover .dg-btn {
    background: var(--dg-red) !important;
    box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
}

/* --- MOBILOPTIMIERUNG --- */
@media (max-width: 768px) {
    .animated-title { font-size: 1.8rem; margin-bottom: 40px; }
    .dg-grid { gap: 20px; }
    .dg-card { flex: 1 1 100% !important; padding: 30px 20px !important; }
    .discord-widget { height: 500px !important; }
    .dg-btn { width: 100%; }
}

Code:

<div class="dg-wrapper">
    <h2 class="animated-title">VOICE HUB</h2>

    <div class="dg-grid">
        <div class="dg-card">
            <div class="voice-icon-box">
                <svg viewBox="0 0 24 24"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/><path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>
            </div>
            <h3>TEAMSPEAK</h3>
            <div style="margin-bottom: 20px;">
                User online:<br>
                <div id="ts3viewer_1130845"></div>
                <script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
                <script>
                    var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1130845&text=080808&text_size=12&text_family=1&text_s_color=bd1e1e&text_s_weight=bold&iconset=default";
                    ts3v_display.init(ts3v_url_1, 1130845, 100);
                </script>
            </div>
            <a href="ts3server://Domain oder ID" class="dg-btn">Beitreten</a>
        </div>

        <div class="dg-card">
            <div class="voice-icon-box">
                <svg viewBox="0 0 24 24"><path d="M12 1c-4.97 0-9 4.03-9 9v7c0 1.66 1.34 3 3 3h3v-8H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-4v8h3c1.66 0 3-1.34 3-3v-7c0-4.97-4.03-9-9-9z"/></svg>
            </div>
            <h3>DISCORD</h3>
            <iframe class="discord-widget" src="https://discord.com/widget?id=Deien ID&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
            <a href="https://discord.gg/Dein Einladungslink" class="dg-btn" target="_blank">Beitreten</a>
        </div>
    </div>

    <p style="margin-top: 40px; color: #888; font-size: 0.9rem;">
        Powered by GameServer-Install.de by rumpel
    </p>
</div>