Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
KnW - Game Informer Style

Author: knownwonder
Category: Games
Created: May 10, 2026
basic Game Informer layout code
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FriendRewind — My Profile</title>
  <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,900;1,700&family=Barlow:wght@400;500;600&family=Oswald:wght@700&display=swap" rel="stylesheet" />
  <style>
    /* ─────────────────────────────────────────
       TOKENS & RESET
    ───────────────────────────────────────── */
    :root {
      --black:       #0a0a0a;
      --dark:        #111111;
      --surface:     #1a1a1a;
      --surface2:    #222222;
      --border:      #2e2e2e;
      --red:         #d42b2b;
      --red-bright:  #ff3333;
      --orange:      #e8631a;
      --gold:        #c9a84c;
      --white:       #f0ece4;
      --muted:       #888;
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body:    'Barlow', sans-serif;
      --font-accent:  'Oswald', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      background: var(--black);
      color: var(--white);
      font-family: var(--font-body);
      font-size: 15px;
      line-height: 1.55;
      min-height: 100vh;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    ul { list-style: none; }

    /* ─────────────────────────────────────────
       NOISE TEXTURE OVERLAY
    ───────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.4;
    }

    /* ─────────────────────────────────────────
       TOP MASTHEAD BAR
    ───────────────────────────────────────── */
    .masthead {
      background: var(--red);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      height: 40px;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .masthead__logo {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #fff;
    }
    .masthead__logo span { color: var(--black); }
    .masthead__nav { display: flex; gap: 24px; }
    .masthead__nav a {
      color: rgba(255,255,255,0.85);
      transition: color 0.15s;
    }
    .masthead__nav a:hover { color: #fff; }

    /* ─────────────────────────────────────────
       ISSUE-STYLE SECONDARY BAR
    ───────────────────────────────────────── */
    .issue-bar {
      background: var(--dark);
      border-bottom: 1px solid var(--border);
      padding: 8px 28px;
      display: flex;
      align-items: center;
      gap: 18px;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .issue-bar__dot {
      width: 4px; height: 4px;
      background: var(--red);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .issue-bar__tag {
      color: var(--red);
    }

    /* ─────────────────────────────────────────
       HERO / COVER BANNER
    ───────────────────────────────────────── */
    .hero {
      position: relative;
      height: 380px;
      background:
        linear-gradient(to bottom, transparent 30%, var(--black) 100%),
        linear-gradient(135deg, #1c0000 0%, #2d0d0d 40%, #0a0a0a 100%);
      display: flex;
      align-items: flex-end;
      padding: 0 32px 28px;
      overflow: hidden;
    }

    /* diagonal red slash */
    .hero::before {
      content: '';
      position: absolute;
      top: -40px; left: -60px;
      width: 380px; height: 600px;
      background: var(--red);
      opacity: 0.06;
      transform: rotate(-18deg);
    }

    /* cover number badge */
    .hero__issue-badge {
      position: absolute;
      top: 28px; right: 32px;
      background: var(--red);
      color: #fff;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 6px 14px;
      clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    }

    /* avatar */
    .hero__avatar {
      position: relative;
      flex-shrink: 0;
      margin-right: 28px;
    }
    .hero__avatar-ring {
      width: 110px; height: 110px;
      border-radius: 4px;
      border: 3px solid var(--red);
      overflow: hidden;
      background: var(--surface2);
      position: relative;
    }
    .hero__avatar-ring::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
    }
    .hero__avatar-img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .avatar-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 900;
      color: var(--red);
      letter-spacing: -2px;
    }
    .hero__online {
      position: absolute;
      bottom: 6px; right: 6px;
      width: 12px; height: 12px;
      background: #4caf50;
      border-radius: 50%;
      border: 2px solid var(--black);
    }

    /* identity */
    .hero__identity {}
    .hero__username {
      font-family: var(--font-display);
      font-size: 54px;
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--white);
    }
    .hero__username em {
      font-style: normal;
      color: var(--red);
    }
    .hero__tagline {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 6px;
    }
    .hero__stats {
      display: flex;
      gap: 24px;
      margin-top: 14px;
    }
    .hero__stat {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .hero__stat-value {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 900;
      color: var(--white);
      line-height: 1;
    }
    .hero__stat-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 2px;
    }
    .hero__stat-divider {
      width: 1px;
      height: 36px;
      background: var(--border);
      align-self: center;
    }

    /* ─────────────────────────────────────────
       SECTION LABEL (magazine chapter opener)
    ───────────────────────────────────────── */
    .section-label {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }
    .section-label__bar {
      width: 4px;
      height: 22px;
      background: var(--red);
      flex-shrink: 0;
    }
    .section-label__text {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--white);
    }
    .section-label__line {
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ─────────────────────────────────────────
       MAIN LAYOUT
    ───────────────────────────────────────── */
    .layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      max-width: 1100px;
      margin: 28px auto;
      padding: 0 24px;
    }

    /* ─────────────────────────────────────────
       FEED CARDS
    ───────────────────────────────────────── */
    .feed { display: flex; flex-direction: column; gap: 20px; }

    .memory-card {
      background: var(--surface);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s, transform 0.15s;
    }
    .memory-card:hover {
      border-color: var(--red);
      transform: translateY(-2px);
    }

    /* accent corner cut */
    .memory-card::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      border-top: 22px solid var(--red);
      border-left: 22px solid transparent;
    }

    .memory-card__header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px 10px;
      border-bottom: 1px solid var(--border);
    }
    .memory-card__friend-avatar {
      width: 34px; height: 34px;
      border-radius: 3px;
      background: var(--surface2);
      overflow: hidden;
      border: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 900;
      color: var(--red);
    }
    .memory-card__meta { flex: 1; }
    .memory-card__friend-name {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
    }
    .memory-card__date {
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }
    .memory-card__badge {
      background: var(--red);
      color: #fff;
      font-family: var(--font-display);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 3px 8px;
      clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    }
    .memory-card__badge--gold { background: var(--gold); color: var(--black); }
    .memory-card__badge--orange { background: var(--orange); }

    .memory-card__body { padding: 16px 18px; }
    .memory-card__headline {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 8px;
    }
    .memory-card__headline span { color: var(--red); }
    .memory-card__copy {
      font-size: 13.5px;
      color: #bbb;
      line-height: 1.6;
    }

    .memory-card__media {
      height: 180px;
      background: var(--surface2);
      position: relative;
      overflow: hidden;
      margin: 0 18px 16px;
      border: 1px solid var(--border);
    }
    .memory-card__media-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--border);
    }

    .memory-card__footer {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 10px 18px 14px;
      border-top: 1px solid var(--border);
    }
    .react-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      transition: color 0.15s;
      background: none;
      border: none;
      padding: 4px 0;
    }
    .react-btn:hover { color: var(--red); }
    .react-btn svg { width: 14px; height: 14px; }
    .react-btn--fire:hover { color: var(--orange); }
    .react-btn--star:hover { color: var(--gold); }
    .memory-card__footer-score {
      margin-left: auto;
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 900;
      color: var(--gold);
      line-height: 1;
    }
    .memory-card__footer-score small {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.1em;
      display: block;
      text-align: right;
    }

    /* ─────────────────────────────────────────
       SIDEBAR
    ───────────────────────────────────────── */
    .sidebar { display: flex; flex-direction: column; gap: 22px; }

    .sidebar-block {
      background: var(--surface);
      border: 1px solid var(--border);
      overflow: hidden;
    }
    .sidebar-block__head {
      background: var(--red);
      padding: 8px 14px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-block__head--dark {
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      color: var(--white);
    }
    .sidebar-block__body { padding: 14px; }

    /* XP bar */
    .xp-bar-wrap { margin-top: 8px; }
    .xp-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .xp-bar-label span { color: var(--gold); }
    .xp-bar-track {
      height: 7px;
      background: var(--surface2);
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .xp-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--red), var(--orange));
      width: 68%;
      position: relative;
    }
    .xp-bar-fill::after {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 4px; height: 100%;
      background: #fff;
      opacity: 0.5;
      animation: pulse 1.6s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:0.3} 50%{opacity:0.9} }

    .level-display {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 10px;
    }
    .level-display__num {
      font-family: var(--font-display);
      font-size: 52px;
      font-weight: 900;
      color: var(--red);
      line-height: 1;
    }
    .level-display__label {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* achievement grid */
    .achievement-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .achievement {
      aspect-ratio: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      transition: border-color 0.15s;
      cursor: default;
      padding: 6px 4px;
    }
    .achievement:hover { border-color: var(--gold); color: var(--gold); }
    .achievement--unlocked { border-color: var(--gold); }
    .achievement--unlocked .achievement__icon { color: var(--gold); }
    .achievement__icon { font-size: 20px; line-height: 1; }

    /* friends list */
    .friend-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .friend-row:last-child { border-bottom: none; }
    .friend-row__avatar {
      width: 30px; height: 30px;
      border-radius: 3px;
      background: var(--surface2);
      border: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 900;
      color: var(--red);
    }
    .friend-row__name {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--white);
      flex: 1;
    }
    .friend-row__status {
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }
    .friend-row__online {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #555;
      flex-shrink: 0;
    }
    .friend-row__online--active { background: #4caf50; }

    /* top memories mini */
    .mini-memory {
      display: flex;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      align-items: flex-start;
    }
    .mini-memory:last-child { border-bottom: none; }
    .mini-memory__thumb {
      width: 50px; height: 38px;
      background: var(--surface2);
      border: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      color: var(--border);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 600;
    }
    .mini-memory__title {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1.2;
    }
    .mini-memory__meta {
      font-size: 10px;
      color: var(--muted);
      margin-top: 3px;
      letter-spacing: 0.06em;
    }

    /* ─────────────────────────────────────────
       RATING BADGE (GI-style score circle)
    ───────────────────────────────────────── */
    .gi-score {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 52px; height: 52px;
      background: var(--black);
      border: 2px solid var(--gold);
      font-family: var(--font-display);
      font-weight: 900;
      color: var(--gold);
    }
    .gi-score__num { font-size: 24px; line-height: 1; }
    .gi-score__label { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

    /* ─────────────────────────────────────────
       BOTTOM TICKER
    ───────────────────────────────────────── */
    .ticker-wrap {
      background: var(--red);
      overflow: hidden;
      height: 32px;
      display: flex;
      align-items: center;
      margin-top: 40px;
    }
    .ticker-label {
      background: var(--black);
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 16px;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--red);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ticker-track {
      display: flex;
      animation: scroll-ticker 22s linear infinite;
      white-space: nowrap;
    }
    .ticker-track span {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.9);
      padding: 0 32px;
    }
    .ticker-track span::before {
      content: '◆';
      margin-right: 32px;
      font-size: 8px;
    }
    @keyframes scroll-ticker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
    footer {
      background: var(--dark);
      border-top: 3px solid var(--red);
      padding: 22px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
    }
    footer .logo { font-family: var(--font-display); font-size: 16px; font-weight: 900; color: var(--white); }
    footer .logo span { color: var(--red); }

    /* ─────────────────────────────────────────
       SCROLLBAR
    ───────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--dark); }
    ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 0; }

    /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */
    @media (max-width: 800px) {
      .layout { grid-template-columns: 1fr; }
      .hero__username { font-size: 36px; }
      .hero { height: auto; padding: 24px 20px 24px; }
      .sidebar { display: none; }
    }

    /* ─────────────────────────────────────────
       PAGE LOAD ANIMATION
    ───────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .memory-card { animation: fadeUp 0.4s ease both; }
    .memory-card:nth-child(1) { animation-delay: 0.05s; }
    .memory-card:nth-child(2) { animation-delay: 0.15s; }
    .memory-card:nth-child(3) { animation-delay: 0.25s; }
  </style>
</head>
<body>

  <!-- MASTHEAD -->
  <header class="masthead">
    <div class="masthead__logo">Friend<span>Rewind</span></div>
    <nav class="masthead__nav">
      <a href="#">Feed</a>
      <a href="#">Memories</a>
      <a href="#">Friends</a>
      <a href="#">Awards</a>
      <a href="#">Settings</a>
    </nav>
  </header>

  <!-- ISSUE BAR -->
  <div class="issue-bar">
    <span class="issue-bar__tag">Vol. 12  |  Issue 47</span>
    <div class="issue-bar__dot"></div>
    <span>My Profile</span>
    <div class="issue-bar__dot"></div>
    <span>Season 5 Active</span>
    <div class="issue-bar__dot"></div>
    <span>872 Memories Logged</span>
  </div>

  <!-- HERO -->
  <section class="hero">
    <div class="hero__issue-badge">Level 24 · Veteran</div>
    <div class="hero__avatar">
      <div class="hero__avatar-ring">
        <div class="avatar-placeholder">JD</div>
      </div>
      <div class="hero__online"></div>
    </div>
    <div class="hero__identity">
      <div class="hero__username">Jake<em>_</em>Drayton</div>
      <div class="hero__tagline">Collector · Night Owl · Always Rewinding</div>
      <div class="hero__stats">
        <div class="hero__stat">
          <span class="hero__stat-value">872</span>
          <span class="hero__stat-label">Memories</span>
        </div>
        <div class="hero__stat-divider"></div>
        <div class="hero__stat">
          <span class="hero__stat-value">43</span>
          <span class="hero__stat-label">Friends</span>
        </div>
        <div class="hero__stat-divider"></div>
        <div class="hero__stat">
          <span class="hero__stat-value">218</span>
          <span class="hero__stat-label">Reactions</span>
        </div>
        <div class="hero__stat-divider"></div>
        <div class="hero__stat">
          <span class="hero__stat-value">6</span>
          <span class="hero__stat-label">Awards</span>
        </div>
      </div>
    </div>
  </section>

  <!-- MAIN LAYOUT -->
  <main class="layout">

    <!-- FEED -->
    <div class="feed">
      <div class="section-label">
        <div class="section-label__bar"></div>
        <div class="section-label__text">Latest Memories</div>
        <div class="section-label__line"></div>
      </div>

      <!-- Memory Card 1 -->
      <article class="memory-card">
        <div class="memory-card__header">
          <div class="memory-card__friend-avatar">MR</div>
          <div class="memory-card__meta">
            <div class="memory-card__friend-name">Marcus Rivera</div>
            <div class="memory-card__date">May 8, 2026 · 11:42 PM</div>
          </div>
          <div class="memory-card__badge">Flashback</div>
        </div>
        <div class="memory-card__body">
          <h2 class="memory-card__headline">The Night We Almost <span>Broke the Arcade</span></h2>
          <p class="memory-card__copy">Four hours straight on that beat-em-up cabinet at Round One. Marcus fed it $40 in quarters and we made it to the final boss exactly once. The owner gave us free tokens after we drew a crowd.</p>
        </div>
        <div class="memory-card__media">
          <div class="memory-card__media-placeholder">📷 Photo Attached</div>
        </div>
        <div class="memory-card__footer">
          <button class="react-btn react-btn--fire">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c0 6-6 8-6 14a6 6 0 0012 0c0-6-6-8-6-14z"/></svg>
            14
          </button>
          <button class="react-btn react-btn--star">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
            7
          </button>
          <button class="react-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            3
          </button>
          <div class="memory-card__footer-score">
            9.4
            <small>MEMORY SCORE</small>
          </div>
        </div>
      </article>

      <!-- Memory Card 2 -->
      <article class="memory-card">
        <div class="memory-card__header">
          <div class="memory-card__friend-avatar">SP</div>
          <div class="memory-card__meta">
            <div class="memory-card__friend-name">Sam & Priya</div>
            <div class="memory-card__date">Apr 30, 2026 · 2:15 PM</div>
          </div>
          <div class="memory-card__badge memory-card__badge--gold">Top Rated</div>
        </div>
        <div class="memory-card__body">
          <h2 class="memory-card__headline">Camping Trip That <span>Went Sideways</span> (In a Good Way)</h2>
          <p class="memory-card__copy">Forgot half the gear, rain hit by midnight, and we ended up playing 20 Questions in a tent with one dying flashlight until 3 AM. Priya's impression of a malfunctioning robot had us crying laughing.</p>
        </div>
        <div class="memory-card__footer">
          <button class="react-btn react-btn--fire">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c0 6-6 8-6 14a6 6 0 0012 0c0-6-6-8-6-14z"/></svg>
            31
          </button>
          <button class="react-btn react-btn--star">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
            18
          </button>
          <button class="react-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            11
          </button>
          <div class="memory-card__footer-score">
            10
            <small>MEMORY SCORE</small>
          </div>
        </div>
      </article>

      <!-- Memory Card 3 -->
      <article class="memory-card">
        <div class="memory-card__header">
          <div class="memory-card__friend-avatar">TK</div>
          <div class="memory-card__meta">
            <div class="memory-card__friend-name">Tori Kwan</div>
            <div class="memory-card__date">Apr 12, 2026 · 7:08 PM</div>
          </div>
          <div class="memory-card__badge memory-card__badge--orange">Milestone</div>
        </div>
        <div class="memory-card__body">
          <h2 class="memory-card__headline">100th <span>Diner Run</span> Together</h2>
          <p class="memory-card__copy">We counted back through the log. The Empire Diner at 2 AM after Tori's show was officially our 100th meetup. The waitress brought us a free slice of pie. We did not deserve it but we ate it anyway.</p>
        </div>
        <div class="memory-card__media">
          <div class="memory-card__media-placeholder">🎞 Video Clip</div>
        </div>
        <div class="memory-card__footer">
          <button class="react-btn react-btn--fire">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c0 6-6 8-6 14a6 6 0 0012 0c0-6-6-8-6-14z"/></svg>
            22
          </button>
          <button class="react-btn react-btn--star">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
            9
          </button>
          <button class="react-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
            6
          </button>
          <div class="memory-card__footer-score">
            8.7
            <small>MEMORY SCORE</small>
          </div>
        </div>
      </article>
    </div>

    <!-- SIDEBAR -->
    <aside class="sidebar">

      <!-- Level / XP -->
      <div class="sidebar-block">
        <div class="sidebar-block__head">Player Card</div>
        <div class="sidebar-block__body">
          <div class="level-display">
            <div class="level-display__num">24</div>
            <div class="level-display__label">Level<br>Veteran</div>
          </div>
          <div class="xp-bar-wrap">
            <div class="xp-bar-label">
              <span>XP</span>
              <span>6,800 / 10,000</span>
            </div>
            <div class="xp-bar-track">
              <div class="xp-bar-fill"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Achievements -->
      <div class="sidebar-block">
        <div class="sidebar-block__head">Achievements</div>
        <div class="sidebar-block__body">
          <div class="achievement-grid">
            <div class="achievement achievement--unlocked">
              <div class="achievement__icon">🏆</div>
              <span>Top 10</span>
            </div>
            <div class="achievement achievement--unlocked">
              <div class="achievement__icon">🔥</div>
              <span>On Fire</span>
            </div>
            <div class="achievement achievement--unlocked">
              <div class="achievement__icon">📼</div>
              <span>Archivist</span>
            </div>
            <div class="achievement achievement--unlocked">
              <div class="achievement__icon">🌙</div>
              <span>Night Owl</span>
            </div>
            <div class="achievement">
              <div class="achievement__icon">🎖️</div>
              <span>Loyalist</span>
            </div>
            <div class="achievement">
              <div class="achievement__icon">⚡</div>
              <span>Streak</span>
            </div>
            <div class="achievement">
              <div class="achievement__icon">🗓️</div>
              <span>Year 1</span>
            </div>
            <div class="achievement">
              <div class="achievement__icon">👑</div>
              <span>Legend</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Friends -->
      <div class="sidebar-block">
        <div class="sidebar-block__head dark" style="background:var(--surface2);border-bottom:1px solid var(--border);color:var(--white)">
          Friends Online
        </div>
        <div class="sidebar-block__body" style="padding: 10px 14px;">
          <div class="friend-row">
            <div class="friend-row__online friend-row__online--active"></div>
            <div class="friend-row__avatar">MR</div>
            <div class="friend-row__name">Marcus Rivera</div>
            <div class="friend-row__status">Active now</div>
          </div>
          <div class="friend-row">
            <div class="friend-row__online friend-row__online--active"></div>
            <div class="friend-row__avatar">TK</div>
            <div class="friend-row__name">Tori Kwan</div>
            <div class="friend-row__status">Active now</div>
          </div>
          <div class="friend-row">
            <div class="friend-row__online"></div>
            <div class="friend-row__avatar">SP</div>
            <div class="friend-row__name">Sam Park</div>
            <div class="friend-row__status">3h ago</div>
          </div>
          <div class="friend-row">
            <div class="friend-row__online"></div>
            <div class="friend-row__avatar">CL</div>
            <div class="friend-row__name">Chris Lau</div>
            <div class="friend-row__status">Yesterday</div>
          </div>
        </div>
      </div>

      <!-- Top Memories -->
      <div class="sidebar-block">
        <div class="sidebar-block__head">Hall of Fame</div>
        <div class="sidebar-block__body" style="padding: 10px 14px;">
          <div class="mini-memory">
            <div class="mini-memory__thumb">PHOTO</div>
            <div>
              <div class="mini-memory__title">Camping Trip Disaster</div>
              <div class="mini-memory__meta">Score: 10.0  ·  31 🔥</div>
            </div>
          </div>
          <div class="mini-memory">
            <div class="mini-memory__thumb">PHOTO</div>
            <div>
              <div class="mini-memory__title">The Arcade Night</div>
              <div class="mini-memory__meta">Score: 9.4  ·  14 🔥</div>
            </div>
          </div>
          <div class="mini-memory">
            <div class="mini-memory__thumb">VIDEO</div>
            <div>
              <div class="mini-memory__title">100th Diner Run</div>
              <div class="mini-memory__meta">Score: 8.7  ·  22 🔥</div>
            </div>
          </div>
        </div>
      </div>

    </aside>
  </main>

  <!-- NEWS TICKER -->
  <div class="ticker-wrap">
    <div class="ticker-label">Breaking</div>
    <div class="ticker-track">
      <span>Marcus Rivera posted a new memory</span>
      <span>You've earned the Night Owl achievement</span>
      <span>Tori Kwan reacted to your camping memory</span>
      <span>Season 5 recap now available</span>
      <span>Your memory streak is at 14 days</span>
      <span>New friend suggestion: Alex Moreno</span>
      <!-- duplicate for seamless loop -->
      <span>Marcus Rivera posted a new memory</span>
      <span>You've earned the Night Owl achievement</span>
      <span>Tori Kwan reacted to your camping memory</span>
      <span>Season 5 recap now available</span>
      <span>Your memory streak is at 14 days</span>
      <span>New friend suggestion: Alex Moreno</span>
    </div>
  </div>

  <!-- FOOTER -->
  <footer>
    <div class="logo">Friend<span>Rewind</span></div>
    <span>© 2026 FriendRewind  ·  Vol. 12 Issue 47  ·  All Rights Reserved</span>
    <span>Privacy  ·  Terms  ·  Contact</span>
  </footer>

</body>
</html></style>