code

<!-- Colors
Press Ctrl-F to select all colors (￣y▽,￣)╭
Main background: #1a1a1a
Text: #f0f0f0
Quotes/secondary text: #ccc
Borders: #333
Outer border and shadows: #000
Image shadow: #111
Scrollbar accents: grey -->




<!-- Character Profile -->
<div style="font-family:'MS Gothic', monospace; max-width:500px; margin:auto; background:#1a1a1a url('https://i.pinimg.com/1200x/67/32/ab/6732abbcb84a94c8ae444ab60f85dbd3.jpg') no-repeat center center; background-size:cover; color:#f0f0f0; border:2px solid #000; border-radius:12px; box-shadow:0 0 20px #000; padding:12px;">

  <!-- Name Section -->
  <div style="text-align:center; border-bottom:1px solid #333; padding-bottom:10px; margin-bottom:12px;">
    <h1 style="font-size:24px; font-weight:bold; margin:0;">
      NAME <i class="fas fa-feather-pointed"></i>
    </h1>
    <p style="font-size:12px; font-style:italic; color:#ccc; margin-top:4px;">
      "Quote."
    </p>
  </div>

  <!-- Profile Image + Basic Info -->
  <div style="display:flex; gap:12px; margin-bottom:12px; flex-wrap:wrap;">
    <div style="flex:1; text-align:center;">
      <img src="https://i.pinimg.com/736x/93/d3/48/93d3481a7d1030d8a8e9f4410f6cf75f.jpg" style="width:120px; height:120px; object-fit:cover; border-radius:50%; border:4px solid #000; box-shadow:0 0 12px #111;">
    </div>

    <div style="flex:2; display:flex; flex-direction:column; gap:6px;">
      <div style="background:rgba(0,0,0,0.6); border:1px solid #333; border-radius:6px; padding:6px;">
        <p style="margin:2px;"><i class="fas fa-venus-mars"></i> <b>Pronouns:</b> Pro/nouns</p>
        <p style="margin:2px;"><i class="fas fa-birthday-cake"></i> <b>Age:</b> Age</p>
        <p style="margin:2px;"><i class="fas fa-dna"></i> <b>Species:</b> Species</p>
        <p style="margin:2px;"><i class="fas fa-heartbeat"></i> <b>Status:</b> Status</p>
        <p style="margin:2px;"><i class="fas fa-brain"></i> <b>MBTI:</b> MBTI</p>
        <p style="margin:2px;"><i class="fas fa-gem"></i> <b>Zodiac:</b> Zodiac</p>
      </div>
    </div>
  </div>

  <!-- Description -->
  <div style="height:120px; margin-bottom:10px; border-radius:6px; overflow-y:auto; border:1px solid #333; background:rgba(0,0,0,0.6); padding:8px; font-size:13px; line-height:1.4; text-align:justify; color:#f0f0f0; scrollbar-width: thin; scrollbar-color: grey black; accent-color: grey;">
    <p style="margin:0;">
      DESCRIPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

  <!-- Design Notes / Trivia -->
  <div style="background:rgba(0,0,0,0.6); border:1px solid #333; border-radius:6px; padding:8px; margin-bottom:10px;">
    <p style="margin:2px; font-size:13px;"><i class="fas fa-lightbulb"></i> <b>Design Notes:</b> DESIGN NOTES HERE. (Doesn't scroll).</p>
    <p style="margin:2px; font-size:13px;"><i class="fas fa-quote-left"></i> <b>Trivia:</b> TRIVIA HERE.</p>
  </div>

  <!-- Likes / Dislike / Personality -->
  <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;">
    <div style="flex:1 1 45%; background:rgba(0,0,0,0.6); border:1px solid #333; border-radius:6px; padding:6px; font-size:13px;">
      <p style="margin:2px;"><i class="fas fa-feather"></i> Likes: Likes, Likes, Likes</p>
      <p style="margin:2px;"><i class="fas fa-skull"></i> Dislikes: Dislikes, Dislikes, Dislikes</p>
    </div>
    <div style="flex:1 1 45%; background:rgba(0,0,0,0.6); border:1px solid #333; border-radius:6px; padding:6px; font-size:13px;">
      <p style="margin:2px;"><i class="fas fa-mask"></i> Personality: Personality, Personality, Personality</p>
    </div>
  </div>

  <!-- Backstory -->
  <div style="height:120px; margin-bottom:10px; border-radius:6px; overflow-y:auto; border:1px solid #333; background:rgba(0,0,0,0.6); padding:8px; font-size:13px; line-height:1.4; text-align:justify; color:#f0f0f0; scrollbar-width: thin; scrollbar-color: grey black; accent-color: grey;">
    <p style="margin:0;">
      BACKSTORY. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>

<!-- Stamps -->
<div style="padding:6px; margin:0 auto 10px auto; border:1px solid #333; border-radius:6px; background:rgba(0,0,0,0.6); text-align:center; max-width:500px; overflow:visible; white-space:normal;">
  <img src="https://64.media.tumblr.com/dd7923e74e2cd34f675f0b46154e5c68/1b2410df95e87ee7-50/s100x200/a04762cd2f298ead46823996b906f1511b3778b7.gifv" width="73" height="55" style="display:inline-block; margin:4px;">
  <img src="https://64.media.tumblr.com/3a3a1936fe0294722006f1241f33665f/c1975b938af6d6c1-a7/s100x200/cd70a292838b21b6ea79b586f440407edcaf4d7a.gifv" width="73" height="55" style="display:inline-block; margin:4px;">
  <img src="https://64.media.tumblr.com/233d47c7bd3f515eed06781729c6beb1/c1975b938af6d6c1-80/s100x200/d3775cd60d64c1b3bee9dae485421a2dc9a73a9d.pnj" width="73" height="55" style="display:inline-block; margin:4px;">
  <img src="https://64.media.tumblr.com/ddc3dd6a5141e14e5adecb591c357ba2/c1975b938af6d6c1-4d/s100x200/e3b93e7cc5e5d92d54f3a5be3a1eec1a5bcb970b.gifv" width="73" height="55" style="display:inline-block; margin:4px;">
  <img src="https://64.media.tumblr.com/ed3f31cddf2ec7b6fc348ec1bb551f52/c1975b938af6d6c1-a1/s100x200/fb34ca2e2bdbd6b74d89b1f477a8c485cbc4803a.pnj" width="73" height="55" style="display:inline-block; margin:4px;">
</div>



  <!-- Music Player -->
  <div style="background:rgba(0,0,0,0.6); border:1px solid #333; border-radius:20px; padding:6px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px;">
    <span style="font-size:12px; color:#f0f0f0; flex:1;">
      <i class="fas fa-music"></i> Now Playing: <b>黒塗り世界宛て書簡 - フロクロ</b>
    </span>
    <audio controls style="width:160px; height:28px; border-radius:12px; background:rgba(0,0,0,0.6); accent-color:#f0f0f0;">
      <source src="https://file.garden/aP7X0xdvrQfG8QTe/%E9%BB%92%E5%A1%97%E3%82%8A%E4%B8%96%E7%95%8C%E5%AE%9B%E3%81%A6%E6%9B%B8%E7%B0%A1%EF%BC%8F%E9%87%8D%E9%9F%B3%E3%83%86%E3%83%88%EF%BC%88Letter%20to%20the%20Black%20World%20%20Kasane%20Teto%EF%BC%89.mp3">
    </audio>
  </div>

  <!-- Coding credit, dont remove -->
<div class="col-12 mx-auto" style="text-align:center;"><a href="https://toyhou.se/sokie_Visuvel" style="color:#f0f0f0;"> <i class="fa-solid fa-cloud"></i></a></div>
</div>
</div>
</center>

</div>