What's new
By:

AetherFrozt

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gaming Bio</title>

<style>
:root{
    --bg:#0b0914;
    --card:#161124;
    --card2:#1d1630;
    --accent:#8b5cf6;
    --accent2:#c084fc;
    --text:#f5f3ff;
    --muted:#a8a3c0;
    --border:rgba(255,255,255,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:var(--bg);
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:20px;
}

.profile-card{
    width:420px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
    box-shadow:
        0 0 40px rgba(139,92,246,.15),
        0 0 80px rgba(139,92,246,.08);
}

.banner{
    height:140px;
    background:
    radial-gradient(circle at 30% 40%, rgba(192,132,252,.35), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(139,92,246,.25), transparent 30%),
    linear-gradient(135deg,#22043d,#0d0b1a);
    position:relative;
}

.banner::after{
    content:"✦ ✧ ✦";
    position:absolute;
    top:15px;
    right:20px;
    color:rgba(255,255,255,.3);
    letter-spacing:10px;
}

.avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    border:6px solid var(--card);
    background:linear-gradient(135deg,#8b5cf6,#c084fc);
    position:absolute;
    bottom:-50px;
    left:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
}

.content{
    padding:65px 25px 25px;
}

.username{
    font-size:1.7rem;
    font-weight:700;
    color:var(--text);
}

.tagline{
    color:var(--accent2);
    font-size:.9rem;
    margin-top:4px;
}

.quote{
    margin-top:18px;
    padding:14px;
    background:var(--card2);
    border-left:3px solid var(--accent);
    border-radius:12px;
    color:var(--muted);
    font-size:.9rem;
}

.section{
    margin-top:22px;
}

.section-title{
    color:var(--text);
    font-size:.9rem;
    font-weight:700;
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.games{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.game-tag{
    background:rgba(139,92,246,.15);
    color:#d8c8ff;
    border:1px solid rgba(139,92,246,.25);
    padding:7px 12px;
    border-radius:999px;
    font-size:.8rem;
}

.stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.stat-box{
    background:var(--card2);
    border-radius:14px;
    padding:12px;
}

.stat-label{
    color:var(--muted);
    font-size:.75rem;
}

.stat-value{
    color:var(--text);
    font-weight:700;
    margin-top:4px;
}

.footer{
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:.85rem;
    text-align:center;
}
</style>
</head>
<body>

<div class="profile-card">

    <div class="banner">
        <div class="avatar">🚀</div>
    </div>

    <div class="content">

        <div class="username">AETHER</div>
        <div class="tagline">Explorer of Worlds • Achievement Hunter</div>

        <div class="quote">
            "One more quest before I log off."
        </div>

        <div class="section">
            <div class="section-title">Currently Playing</div>
            <div class="games">
                <div class="game-tag">Helldivers 2</div>
                <div class="game-tag">Monster Hunter</div>
                <div class="game-tag">Hollow Knight</div>
                <div class="game-tag">Minecraft</div>
            </div>
        </div>

        <div class="section">
            <div class="section-title">Gaming Stats</div>

            <div class="stats">
                <div class="stat-box">
                    <div class="stat-label">Favorite Genre</div>
                    <div class="stat-value">Action RPG</div>
                </div>

                <div class="stat-box">
                    <div class="stat-label">Playstyle</div>
                    <div class="stat-value">Completionist</div>
                </div>

                <div class="stat-box">
                    <div class="stat-label">Difficulty</div>
                    <div class="stat-value">Hard Mode</div>
                </div>

                <div class="stat-box">
                    <div class="stat-label">Status</div>
                    <div class="stat-value">Grinding XP</div>
                </div>
            </div>
        </div>

        <div class="footer">
            🌌 Collecting achievements across the galaxy.
        </div>

    </div>

</div>

</body>
</html>
Occupation
Streamer - Gamer

Following

Cumulative trophies

  1. 15

    Received a reaction

    Someone reacted to your content, indicating that your contribution was appreciated by others.
    1 / 6
    Number of actions completed / Number of actions per trophy point
  2. 3

    Posted replies

    You posted multiple replies in a discussion, showing your ongoing engagement and contribution to the conversation.
    4 / 6
    Number of actions completed / Number of actions per trophy point
  3. 1

    Started a thread

    You started a discussion that sparked engagement and received multiple replies - it could be the start of something big!
    Number of actions completed: 1
  4. 0

    First responder

    You posted the first reply in a discussion, demonstrating your eagerness to participate and engage with others.
    Number of actions completed: 3
Back
Top