Notebook inspo profilecard janitor ai

<!-- ══════════════════════════════════════ -->
<!--        PROFILE CARD - JAI ABOUT ME   -->
<!--   Basado en el diseño de referencia  -->
<!-- ══════════════════════════════════════ -->

<!-- ── HEADER: hi i'm + name ── -->
<div class="nb-intro">
  <p class="nb-hi">hi, i'm</p>
  <p class="nb-name">name!</p>
  <p class="nb-info">brazilian. she/they. pt-eng-esp. 17yo.</p>
  <p class="nb-links">
    <a class="nb-link" href="https://open.spotify.com" target="_blank">spotify</a> +
    <a class="nb-link" href="https://instagram.com" target="_blank">insta</a> +
    <a class="nb-link" href="#" target="_blank">ccat</a>
  </p>
</div>

<!-- ── BOTONES: DONT REMOVE CREDITS / messages / favs ── -->
<div class="nb-btnrow">
  <div class="nb-btnleft">
    <a class="nb-btn" href="#" target="_blank">made by Shadzzw</a>
    <a class="nb-btn" href="#" target="_blank">messages</a>
  </div>
  <a class="nb-btn nb-btn-wide" href="#" target="_blank">favs</a>
</div>

<!-- ── CUERPO PRINCIPAL ── -->
<div class="nb-body">

  <!-- COLUMNA IZQUIERDA: byf + dfi -->
  <div class="nb-col-left">
    <div class="nb-box">
      <p><b>byf. . .</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="nb-box">
      <p><b>dfi. . .</b> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>

  <!-- COLUMNA DERECHA: favs + anime list -->
  <div class="nb-col-right">
    <div class="nb-favs-imgs">
      <img class="nb-fav-img" src="https://i.imgur.com/placeholder1.png" alt="fav 1">
      <img class="nb-fav-img" src="https://i.imgur.com/placeholder2.png" alt="fav 2">
    </div>
    <a class="nb-btn nb-btn-wide" href="#" target="_blank">anime list</a>
    <p class="nb-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</p>
  </div>

</div>

<!-- ── PUBLIC PLAYLIST ── -->
<div class="nb-section-label">public playlist</div>
<div class="nb-playlist">
  <div class="nb-song">
    <img class="nb-song-img" src="https://i.imgur.com/placeholder3.png" alt="cover">
    <p>money - the drums</p>
  </div>
  <div class="nb-song">
    <img class="nb-song-img" src="https://i.imgur.com/placeholder4.png" alt="cover">
    <p>i love u - the walters</p>
  </div>
  <div class="nb-song">
    <img class="nb-song-img" src="https://i.imgur.com/placeholder5.png" alt="cover">
    <p>space song - beach house</p>
  </div>
  <div class="nb-song">
    <img class="nb-song-img" src="https://i.imgur.com/placeholder6.png" alt="cover">
    <p>yellow - coldplay</p>
  </div>
</div>

<!-- ── LOVES / HATES ── -->
<div class="nb-bottom">
  <div class="nb-box nb-half">
    <p><b>loves. . .</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
  </div>
  <div class="nb-box nb-half">
    <p><b>hates. . .</b> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua…</p>
  </div>
</div>


<!-- ══════════ ESTILOS ══════════ -->
<style>

/* ── RESET ABOUT ME ── */
.pp-uc-about-me,
.profile-about-me {
  padding: 0 !important;
  background: #f2f0eb !important;
}

/* ── FONDO RAYADO TIPO CUADERNO ── */
.pp-uc-about-me *,
.profile-about-me * {
  box-sizing: border-box;
}

/* Líneas de cuaderno sobre todo el about me */
.nb-intro,
.nb-btnrow,
.nb-body,
.nb-playlist,
.nb-bottom,
.nb-section-label {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 19px,
    #c8c4be 19px,
    #c8c4be 20px
  );
  background-color: #f2f0eb;
}

/* ── INTRO: hi i'm name ── */
.nb-intro {
  padding: 14px 14px 10px 14px;
  border-bottom: 1.5px solid #9a9590;
}

.nb-hi {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #5a5650;
  margin: 0 0 0 2px;
}

.nb-name {
  font-family: "Courier New", Courier, monospace;
  font-size: 32px;
  font-weight: bold;
  color: #2a2825;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.nb-info {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #4a4845;
  margin: 0 0 4px;
  line-height: 1.5;
}

.nb-links {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #4a4845;
  margin: 0;
}

.nb-link {
  color: #2a2825;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nb-link:hover {
  color: #6b7c5e;
}

/* ── FILA DE BOTONES ── */
.nb-btnrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  gap: 8px;
  border-bottom: 1.5px solid #9a9590;
}

.nb-btnleft {
  display: flex;
  gap: 8px;
}

.nb-btn {
  display: inline-block;
  background: #888480;
  color: #f2f0eb;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}

.nb-btn:hover {
  background: #5a5650;
}

.nb-btn-wide {
  flex: 1;
  text-align: center;
}

/* ── CUERPO: dos columnas ── */
.nb-body {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid #9a9590;
}

/* COLUMNA IZQUIERDA */
.nb-col-left {
  flex: 1.1;
  border-right: 1.5px solid #9a9590;
  display: flex;
  flex-direction: column;
}

/* COLUMNA DERECHA */
.nb-col-right {
  flex: 1;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 19px,
    #c8c4be 19px,
    #c8c4be 20px
  );
  background-color: #f2f0eb;
}

/* CAJAS byf / dfi */
.nb-box {
  border: 1.5px solid #9a9590;
  padding: 8px 10px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10.5px;
  color: #2a2825;
  line-height: 1.6;
  background-color: #f2f0eb;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 19px,
    #c8c4be 19px,
    #c8c4be 20px
  );
}

.nb-box p { margin: 0; }

/* HALF para loves/hates */
.nb-half {
  flex: 1;
}

/* IMÁGENES favs */
.nb-favs-imgs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.nb-fav-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid #9a9590;
  object-fit: cover;
  filter: grayscale(60%);
}

.nb-small {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  color: #4a4845;
  line-height: 1.6;
  margin: 0;
}

/* ── SECTION LABEL (public playlist) ── */
.nb-section-label {
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: #f2f0eb;
  background: #888480 !important;
  background-image: none !important;
  padding: 7px 14px;
  border-top: 1.5px solid #9a9590;
  border-bottom: 1.5px solid #9a9590;
}

/* ── PLAYLIST ── */
.nb-playlist {
  display: flex;
  gap: 6px;
  padding: 12px 10px;
  border-bottom: 1.5px solid #9a9590;
  justify-content: space-between;
}

.nb-song {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.nb-song-img {
  width: 100%;
  max-width: 80px;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(40%);
  border: 1px solid #9a9590;
}

.nb-song p {
  font-family: "Courier New", Courier, monospace;
  font-size: 8.5px;
  color: #2a2825;
  text-align: center;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

/* ── LOVES / HATES ── */
.nb-bottom {
  display: flex;
  gap: 0;
  padding: 10px 10px;
}

.nb-bottom .nb-box {
  margin: 0 5px;
}


/* ═══════════════════════════════════════════ */
/*   ESTILOS DE ELEMENTOS NATIVOS DE JAI       */
/* ═══════════════════════════════════════════ */

/* ── CONTENEDOR PRINCIPAL del perfil ── */
/* (pfp + username + followers + badges) */
.profile-info-hstack,
.css-1uodvt1 {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background-color: #f2f0eb !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 19px,
    #c8c4be 19px,
    #c8c4be 20px
  ) !important;
  border-bottom: 1.5px solid #9a9590 !important;
}

/* ── FOTO DE PERFIL ── */
.pp-uc-avatar,
.profile-avatar,
.css-18bnokj {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  border: 2.5px solid #888480 !important;
  object-fit: cover !important;
  filter: grayscale(55%) !important;
  box-shadow: 3px 3px 0 #9a9590 !important;
}

/* ── CONTENEDOR avatar (recorta bien el círculo) ── */
.pp-uc-avatar-container,
.profile-avatar-container,
.css-79elbk {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* ── STACK de info (username + followers + badges) ── */
.profile-info-stack-inner,
.css-1uodvt1 > .css-8g8ihq {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* ── USERNAME ── */
.pp-uc-title,
.profile-title-heading,
.css-o5an2m {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 22px !important;
  font-weight: bold !important;
  color: #2a2825 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}

/* ── FOLLOWERS ── */
.pp-uc-followers-count,
.profile-followers-count {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 10px !important;
  color: #6e6a62 !important;
  letter-spacing: .04em !important;
}

/* Número de followers */
.pp-uc-followers-count span:nth-of-type(1) {
  font-weight: bold !important;
  color: #2a2825 !important;
  font-size: 12px !important;
}

/* Texto "followers" */
.pp-uc-followers-count span:nth-of-type(2) {
  color: #6e6a62 !important;
  font-size: 10px !important;
}

/* ── MEMBER SINCE ── */
.pp-uc-member-since,
.profile-member-since-box {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 9px !important;
  color: #9a9590 !important;
}

/* ── BOTÓN FOLLOW ── */
.pp-uc-follow-button,
.profile-uc-follow-button,
.Btn {
  background: #888480 !important;
  border: none !important;
  border-radius: 20px !important;
}

.pp-uc-follow-button:before,
.profile-uc-follow-button:before,
.Btn:before {
  background: #6a6660 !important;
  border-radius: 20px !important;
}

.profile-uc-follow-text,
.Btn span {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 11px !important;
  color: #f2f0eb !important;
}

/* ── BADGES ── */
.profile-badges,
.css-1n7vfh0 {
  display: flex !important;
  gap: 4px !important;
}

/* ── FONDO GENERAL DE LA PROFILE BOX ── */
.pp-uc-background,
.profile-uc-background-flex {
  background-color: #f2f0eb !important;
}

.profile-background-box-1,
.profile-background-box-2,
.profile-background-box-3 {
  background: transparent !important;
  opacity: 0 !important;
}

/* ── FONDO DE LA PÁGINA ── */
.pp-page-background,
.profile-page-background {
  background-color: #e8e5df !important;
}

</style>