The admins of VP

by Kofod

HTML

<div id="vp-admins">
  <header class="vpa-header">
    <h1>✦ THE ADMINS OF VP ✦</h1>
  </header>
  <div class="vpa-tabs" role="tablist" aria-label="Choose an admin">
    <button class="vpa-tab" type="button" role="tab" data-vpa="talent" aria-selected="true">TALENT</button>
    <button class="vpa-tab" type="button" role="tab" data-vpa="lain" aria-selected="false">LAIN</button>
    <button class="vpa-tab" type="button" role="tab" data-vpa="secret" aria-selected="false">New Admins</button>
  </div>
  <main class="vpa-stage" role="tabpanel" aria-live="polite"></main>
</div>

CSS

#vp-admins, #vp-admins * { box-sizing: border-box; }
  #vp-admins {
    width: 960px;
    height: 700px;
    padding: 18px 24px 20px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% -20%, #a52c31 0%, #7c0d13 43%, #470307 100%);
    color: #f9dfc2;
    font-family: Arial, sans-serif;
  }
  #vp-admins:before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(246, 196, 133, .25);
    pointer-events: none;
  }
  #vp-admins .vpa-header { height: 76px; text-align: center; position: relative; }
  #vp-admins .vpa-kicker {
    font: bold 9px/12px Arial, sans-serif;
    letter-spacing: 3px;
    color: #f0bc81;
  }
  #vp-admins .vpa-header h1 {
    margin: 0;
    font: normal 50px/59px Impact, 'Arial Narrow', sans-serif;
    letter-spacing: 2px;
    color: #ffdfb0;
    text-shadow: 2px 3px 0 #3f070b;
  }
  #vp-admins .vpa-tabs {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 5px 0 12px;
    height: 38px;
  }
  #vp-admins .vpa-tab {
    width: 195px;
    height: 38px;
    border: 1px solid #bb6558;
    border-radius: 6px;
    background: linear-gradient(#a52b2c, #83181e);
    color: #f8d6b1;
    font: normal 20px/36px Impact, 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
  }
  #vp-admins .vpa-tab:hover,
  #vp-admins .vpa-tab:focus-visible {
    background: #c14b41;
    outline: 1px solid #f4d3a1;
    outline-offset: 1px;
  }
  #vp-admins .vpa-tab[aria-selected="true"] {
    background: linear-gradient(#f5d39f, #dba66d);
    border-color: #ffe4bc;
    color: #550d11;
    box-shadow: 0 2px 0 #4b0b11;
  }
  #vp-admins .vpa-stage {
    height: 530px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  #vp-admins .vpa-stack {
    min-height: 0;
   ...

JavaScript

(function () {

function questionTitle(text, size) {
  return { text: text, size: size || 15 };
}

  var adminData = {
    talent: {
  image: "https://file.garden/au8mIPy05_Vz9t77/VP/NT/The%20New%20Admins%202026/Talent.png",
  questions: [
    {
      title: questionTitle("What has been your favourite part of being admin?", 15),
      answer: "i really loved getting to work with lain, truly and honestly. getting into such a big job, especially starting on my own, was a lot of pressure and kinda nerve wracking. it was really exciting to have someone join me, especially someone i already considered a friend. we had our trials and tribulations as we learned to combine our work styles and manage our different schedules, but i'd honestly say i had the best time."
    },
    {
      title: questionTitle("Do you have a distinct memory during your term that you will always remember?", 15),
      answer: "opening up the admin only Prohibited words tab for the first time... i will miss my beloved Prohibited words tab... unfortunately i can't say much more than that but the new admins will get some enjoyment out of that when their time begins!"
    },
    {
      title: questionTitle("What advice do you have for the new admins?", 15),
      answer: "first, set lots of notifications! there are a lot of important time based things you have to do pretty much all the time and calendar notifications and phone reminders are a gem for being on top of them. otherwise, you have a partner- work with them! having someone you can rely on to have your back whenever you dont have time is great. it makes a world of difference."
    },
    {
      title: questionTitle("What will you miss the most about being admin?", 15),
      answer: "getting a sneak peek of everything coming up... always a fun time getting to see new designs uploaded before theyre used and new events as they get prepared... its really exciting and makes me feel like i have super secret spy...