phonkhub html seulement 1 heure

35 edwinvaldes2689

Ouvrir dans l'éditeur Publiez votre code

Recommandé

4 November 2024

Modèle de barre de navigation HTML CSS

29 January 2026

EaglercraftX HTML : Configuration du cadre de jeu et du serveur

13 December 2025

Code Canvas HTML WebGL de Super Mario 64

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PhonkHub</title>
<meta name="description" content="Official PhonkHub: Goon to the moon!" />
<link rel="canonical" href="https://phonkhub.online/" />

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

html,
    body {
      min-height: 100vh;
    }

body {
      background: #000000;
      color: var(--white);
      font-family: 'Barlow', sans-serif;
      overflow-x: hidden;
    }

header {
      position: relative;
      background: #050505;
      border-bottom: 1px solid #242424;
    }

.header-main,
    .nav-inner {
      max-width: 1320px;
      margin: 0 auto;
    }

.header-main {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 1.15rem;
      padding: 0.75rem 1.25rem;
    }

.brand-lockup {
      display: inline-flex;
      align-items: center;
    }

#logo {
      display: block;
      width: clamp(8rem, 14vw, 11.5rem);
      height: auto;
      animation: logoIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

.search-box {
      display: flex;
      align-items: center;
      min-width: 0;
      max-width: 32rem;
      height: 2.35rem;
      padding: 0 0.8rem;
      border: 1px solid #303030;
      border-radius: 999px;
      background: #191919;
      color: #aaa;
      justify-self: center;
      width: 100%;
      pointer-events: none; 
      cursor: default;
    }
    .search-box svg {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }
    .search-box input {
      width: 100%;
      border: 0;
      outline: 0;
      padding: 0 0.6rem;
      background: transparent;
      color: var(--white);
      font: inherit;
      pointer-events: none; 
      cursor: default;
    }
    .search-box input::placeholder {
      color: #858585;
    }

.header-actions {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      justify-self: end;
    }

.action-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      min-height: 2.15rem;
      padding: 0.4rem 0.8rem;
      border: 1px solid #383838;
      border-radius: 999px;
      color: #ddd;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .action-chip.accent {
      background: var(--red);
      border-color: var(--red);
      color: #080808;
    }

.primary-nav {
      border-top: 1px solid #181818;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(1rem, 3vw, 3rem);
      overflow-x: auto;
      padding: 0 1.25rem;
    }
    .nav-link {
      position: relative;
      flex: 0 0 auto;
      padding: 0.75rem 0.1rem 0.68rem;
      color: #d4d4d4;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-decoration: none;
      text-transform: uppercase;
    }
    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--red);
      outline: none;
    }
    .nav-link.active::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: var(--red);
    }

@keyframes logoIn {
      from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

.content-frame {
      position: relative;
      max-width: 1600px;
      margin: 0 auto;
      min-height: 100vh;
      background: url('https://i.ibb.co/xbYDgSL/Untitled18-20260831201428.png') no-repeat center top / 100% auto;
      display: flex;
      flex-direction: column;
    }

main {
      flex: 1;
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 1.25rem 4rem;
      width: 100%;
    }

.track-section {
      margin-bottom: 2.75rem;
    }

.track-section:first-of-type {
      margin-top: 215px;
    }

.section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.7rem;
      padding: 0.7rem 0;
      border: 1px solid #1d1d1d;
      border-left: 3px solid var(--red);
      background: rgba(13, 13, 13, 0.8);
      backdrop-filter: blur(4px);
    }
     .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1rem, 2vw, 1.35rem);
      font-weight: 700;
      letter-spacing: 0.06em;
      line-height: 1;
      color: var(--white);
      text-transform: uppercase;
    }

.featured-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 0 70px;
    }

.featured-card {
      position: relative;
      display: flex;
      min-height: 9.5rem;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      padding: 1.25rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background:
        linear-gradient(135deg, rgba(255, 153, 0, 0.16), transparent 58%),
        linear-gradient(160deg, #181818, var(--card-bg));
      color: var(--white);
      text-decoration: none;
      transition: border-color 0.2s, transform 0.2s, background 0.2s;
    }
    .featured-card::before {
      content: '';
      position: absolute;
      top: -3rem;
      right: -2rem;
      width: 8rem;
      height: 8rem;
      border: 1px solid rgba(255, 153, 0, 0.22);
      border-radius: 50%;
    }
    .featured-card:hover,
    .featured-card:focus-visible {
      border-color: var(--red-dim);
      background:
        linear-gradient(135deg, rgba(255, 153, 0, 0.24), transparent 62%),
        linear-gradient(160deg, #1d1d1d, var(--card-bg));
      outline: none;
      transform: translateY(-2px);
    }
    .featured-number {
      position: absolute;
      top: 1rem;
      right: 1rem;
      color: var(--red);
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.4rem;
      line-height: 1;
      opacity: 0.72;
    }
    .featured-card-title {
      position: relative;
      z-index: 1;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .featured-card-artist {
      position: relative;
      z-index: 1;
      margin-top: 0.25rem;
      color: var(--gray);
      font-size: 0.78rem;
    }
    .featured-card-link {
      position: relative;
      z-index: 1;
      margin-top: 0.85rem;
      color: var(--red);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

.track-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.55rem;
      padding: 0 70px;
    }

.track-card {
      background: rgba(5, 5, 5, 0.85);
      backdrop-filter: blur(4px);
      border: 1px solid #1d1d1d;
      border-radius: 2px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
      transition: border-color 0.2s, transform 0.2s, background 0.2s;
    }
    .track-card:hover {
      border-color: var(--red-dim);
      background: rgba(11, 11, 11, 0.95);
      transform: translateY(-2px);
    }

.track-card:nth-child(1) { animation-delay: 0.05s; }
    .track-card:nth-child(2) { animation-delay: 0.10s; }
    .track-card:nth-child(3) { animation-delay: 0.15s; }
    .track-card:nth-child(4) { animation-delay: 0.20s; }
    .track-card:nth-child(5) { animation-delay: 0.25s; }
    .track-card:nth-child(6) { animation-delay: 0.30s; }
    .track-card:nth-child(7) { animation-delay: 0.35s; }
    .track-card:nth-child(8) { animation-delay: 0.40s; }
    .track-card:nth-child(9) { animation-delay: 0.45s; }

@keyframes cardIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

.video-panel {
      display: block !important;
      border: none;
      padding: 0;
      background: #000;
      flex-shrink: 0;
    }
    .video-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      background: #000;
    }
    .video-wrap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

.track-card.coming-soon .video-panel {
      display: none !important;
    }
    .track-card.coming-soon .track-header {
      border-top: none;
      padding: 1.25rem 0.75rem;
      justify-content: center;
    }
    .track-card.coming-soon .track-title {
      font-size: 1.1rem;
      letter-spacing: 0.15em;
      color: var(--red);
    }

.track-header {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 0.65rem 0.75rem 0.85rem;
      border-top: 1px solid #181818;
      cursor: default;
      user-select: none;
      min-width: 0;
    }
    .rank {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.35rem;
      color: var(--red);
      line-height: 1;
      flex-shrink: 0;
      opacity: 0.8;
    }
    .track-card:first-child .rank {
      opacity: 1;
      text-shadow: 0 0 16px rgba(255, 153, 0, 0.5);
    }

.track-meta {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
    }
    .track-title {
      order: 2;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.035em;
      line-height: 1.08;
      text-transform: uppercase;
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .track-artist {
      order: 1;
      margin: 0 0 0.25rem;
      color: #a2a2a2;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .track-badge {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.2rem 0.45rem;
      border-radius: 2px;
      background: rgba(255, 153, 0, 0.12);
      color: var(--red);
      border: 1px solid var(--red-dim);
      white-space: nowrap;
    }

footer {
      background: #000000;
      text-align: center;
      padding: 2rem;
      font-size: 0.75rem;
      color: #ccc;
      letter-spacing: 0.1em;
      border-top: 1px solid var(--border);
      margin-top: 0;
    }

.tagline {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(0.68rem, 1.4vw, 0.82rem);
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--red);
    }

@keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

@media (max-width: 780px) {
      .header-main {
        grid-template-columns: auto 1fr auto;
        gap: 0.7rem;
      }
      .search-box {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
        justify-self: stretch;
      }
      .header-actions { gap: 0.35rem; }
      .action-chip { padding: 0.35rem 0.55rem; font-size: 0.62rem; }

.section-heading {
        padding: 0.7rem 0;
      }
      .featured-list,
      .track-list {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 30px;
      }
      .content-frame { min-height: auto; }
      main { padding: 0 0.75rem 3rem; }
    }

@media (max-width: 480px) {
      .header-main {
        padding: 0.65rem 0.75rem;
        grid-template-columns: auto 1fr auto;
      }
      .header-actions .action-chip:first-child { display: none; }
      .nav-inner { justify-content: flex-start; gap: 1.25rem; }

.section-heading {
        padding: 0.7rem 0;
      }
      .featured-list,
      .track-list {
        grid-template-columns: 1fr;
        padding: 0 8px;
        gap: 0.85rem;
      }

.track-card {
        border-radius: 6px;
        background: rgba(5, 5, 5, 0.92);
        backdrop-filter: blur(4px);
        border-color: #2a2a2a;
        transform: none;
      }
      .track-card:hover {
        transform: none;
        border-color: var(--red-dim);
      }

.video-wrap {
        padding-bottom: 56.25%;
      }

.track-header {
        padding: 1rem 1rem 1.1rem;
        gap: 0.9rem;
        border-top: 1px solid #282828;
      }

.rank {
        font-size: 2.2rem;
        opacity: 1;
        min-width: 2.2rem;
      }

.track-title {
        font-size: 1.25rem;
        line-height: 1.15;
        letter-spacing: 0.05em;
      }

.track-artist {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
        color: #bbb;
      }

.track-badge {
        display: inline-block;
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
      }

.section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
      }

main { padding: 0 0.5rem 2rem; }

.track-card.coming-soon .track-header {
        padding: 1.5rem 1rem;
      }
      .track-card.coming-soon .track-title {
        font-size: 1.3rem;
      }
    }
  </style>
</head>

<body>
  <header id="top">
    <div class="header-main">
      <a class="brand-lockup" aria-label="PhonkHub home">
        <img id="logo" src="https://i.ibb.co/FbnNpjpp/phonk-Hub.png" alt="PhonkHub Logo" />
      </a>
      <label class="search-box" role="search">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
        <input type="search" placeholder="Search PhonkHub" aria-label="Search tracks" readonly onfocus="this.blur()" />
      </label>
      <div class="header-actions">
        <a class="action-chip accent" href="#featured-heading">Featured</a>
        <a class="action-chip" href="https://discord.gg/gGv7yUQw7y" target="_blank" rel="noopener noreferrer">Join Discord</a>
      </div>
    </div>

<nav class="primary-nav" aria-label="Primary navigation">
      <div class="nav-inner">
        <a class="nav-link active" >Home</a>
        <a class="nav-link" >Featured</a>
        <a class="nav-link" >All Tracks</a>
        <a class="nav-link" >Genres</a>
        <a class="nav-link" >Community</a>
        <a class="nav-link" >About</a>
      </div>
    </nav>
  </header>

<div class="content-frame">
    <main>
      <section class="track-section" aria-labelledby="featured-heading">
        <div class="section-heading">
          <h2 class="section-title" id="featured-heading">Featured</h2>
        </div>
        <div class="featured-list">
          <article class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe src="https://www.youtube.com/embed/neWz6AFzfkA?si=gWEraASeIccip6CZ" title="Hava Nagila Hardtekk Remix by Dmitry Webster" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">1</span>
              <div class="track-meta">
                <div class="track-title">HAVA NAGILA (HARDTEKK REMIX)</div>
                <div class="track-artist">Dmitry Webster</div>
              </div>
              <span class="track-badge">Top</span>
            </div>
          </article>

<article class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe src="https://www.youtube.com/embed/7gW_OjuEwOM?si=T4A0F7ndeAanrpyr" title="EFN HardTekk Slowed by zesuna" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">2</span>
              <div class="track-meta">
                <div class="track-title">EFN (HardTekk - Slowed)</div>
                <div class="track-artist">zesuna</div>
              </div>
              <span class="track-badge">Top</span>
            </div>
          </article>

<article class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe src="https://www.youtube.com/embed/xVS4zgb9AuU?si=rFWE66PANndVRMB-" title="Tiki Tiki by Qmiir" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">3</span>
              <div class="track-meta">
                <div class="track-title">TIKI TIKI</div>
                <div class="track-artist">QMIIR</div>
              </div>
              <span class="track-badge">Top</span>
            </div>
          </article>
        </div>
      </section>

<section class="track-section" aria-labelledby="all-tracks-heading">
        <div class="section-heading">
          <h2 class="section-title" id="all-tracks-heading">All Tracks</h2>
        </div>
        <div class="track-list" id="trackList">

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/52IoCmGPnx8?si=MBYQ6XtCTW3QeTvQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">4</span>
              <div class="track-meta">
                <div class="track-title">Miguel Phonk</div>
                <div class="track-artist">DJ Tuff</div>
              </div>
              <span class="track-badge">New</span>
              <span class="track-badge">Hot</span>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/7v4SNg76UYc?si=baN6N5DySH2-LgGP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">5</span>
              <div class="track-meta">
                <div class="track-title">VERITY HARDTEKK (SLOWED + REVERB)</div>
                <div class="track-artist">Yoriichi</div>
              </div>
              <span class="track-badge">New</span>
              <span class="track-badge">Hot</span>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/X_TB2B1_uU8?si=Cs0Rq2IPIw2RR5mr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">6</span>
              <div class="track-meta">
                <div class="track-title">OH NO NO NO FUNKk</div>
                <div class="track-artist">Loop Hit Music</div>
              </div>
              <span class="track-badge">Hot</span>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe src="https://www.youtube.com/embed/EkXu0bPHP-0?si=p3LRP2by8pXM6Q-V" title="Yara Yara Ya Funk by Joko Phonk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">7</span>
              <div class="track-meta">
                <div class="track-title">YARA YARA YA FUNK</div>
                <div class="track-artist">JOKO PHONK</div>
              </div>
              <span class="track-badge">Hot</span>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe src="https://www.youtube.com/embed/aVrxbSbyIgU?si=86CkC4UzXJucC-rZ" title="No Batidão by Phonk Time" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">8</span>
              <div class="track-meta">
                <div class="track-title">NO BATIDÃO</div>
                <div class="track-artist">Phonk Time</div>
              </div>
              <span class="track-badge">Hot</span>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/vQIhJQXSfdM?si=JTiH0Bf-4T0aUzFm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">9</span>
              <div class="track-meta">
                <div class="track-title">CALA BONITA (Instagram Remix)</div>
                <div class="track-artist">zedow.</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/65Mb6GcqZ6A?si=Y8p9AGlC7cw5LO95" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">10</span>
              <div class="track-meta">
                <div class="track-title">MATADORA</div>
                <div class="track-artist">INTERTONE</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/wUQAlBR7-K4?si=ExWxHhI2V93kwIf_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">12</span>
              <div class="track-meta">
                <div class="track-title">FUNK CRIMINAL</div>
                <div class="track-artist">ICEDMANE</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/iMTttPpJjAY?si=cSUi6gnqVOC2qHeo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">13</span>
              <div class="track-meta">
                <div class="track-title">MONTAGEM ALQUIMIA</div>
                <div class="track-artist">Yonas blox</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/ojCbolxVf5Q?si=NSeGrLfjHNHMctcD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">14</span>
              <div class="track-meta">
                <div class="track-title">SEMPERO</div>
                <div class="track-artist">Phonkmania</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/6HJjhZ-jloI?si=-aHZ4sBVvNMgkvtk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">15</span>
              <div class="track-meta">
                <div class="track-title">HEAVENLY JUMPSTYLE</div>
                <div class="track-artist">The Vibe Guide</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/JjPtDl6EJ3o?si=EonPI8IeScenb49Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">16</span>
              <div class="track-meta">
                <div class="track-title">MONTAGEM XONADA</div>
                <div class="track-artist">TheGoodVibe</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/hC0O9EVZQcg?si=wgp9UQWVKQ6ZBbAx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">17</span>
              <div class="track-meta">
                <div class="track-title">MISERY PHONK</div>
                <div class="track-artist">BERSERK PHONK</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/NbuzmpmB8Jo?si=gwDaM8Q6KFeUyr2l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">18</span>
              <div class="track-meta">
                <div class="track-title">HELLO NEIGHBOUR PHONK</div>
                <div class="track-artist">DUCKYBLXX</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/OcThLhyoTDc?si=WruR4_4wJ3DTJ_lh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">19</span>
              <div class="track-meta">
                <div class="track-title">DDLC - MY CONFESSION PHONK</div>
                <div class="track-artist">WARPBXY</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/kMiBV-nEAHI?si=wdaE3iLJLrPoqZca" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">20</span>
              <div class="track-meta">
                <div class="track-title">MATUSHKA ULTRAFUNK (SLOWED VERSION)</div>
                <div class="track-artist">SATIRIN</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/eJrv__xA64k?si=WvmrhUa1xJIlMPwx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">21</span>
              <div class="track-meta">
                <div class="track-title">MONTAGEM PIXELORA A2 (SLOWED)</div>
                <div class="track-artist">DJ JAVI26 X SASORIIXPP</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/kw1CfWt-BI0?si=PddrJ-yxQJGeWEVh" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">22</span>
              <div class="track-meta">
                <div class="track-title">MUNDO FICTICIO</div>
                <div class="track-artist">DRAWMEDEATH</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/1RUB4DGa48Y?si=di8pm7_NUKsItK67" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">23</span>
              <div class="track-meta">
                <div class="track-title">NECK HURTS PHONK</div>
                <div class="track-artist">DJ ZICOZIN X RUBIX</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/3ZPbEMmNeck?si=-SVVSuVgKVO3VmKz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">24</span>
              <div class="track-meta">
                <div class="track-title">MI PAN PHONK</div>
                <div class="track-artist">NZXT</div>
              </div>
            </div>
          </div>
          
                                                  <div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
             <iframe width="560" height="315" src="https://www.youtube.com/embed/z2Kh3ki8_aw?si=rH8AC3oaOK1B1fcC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">25</span>
              <div class="track-meta">
                <div class="track-title">Serhat Durmus - La Câlin</div>
                <div class="track-artist">DOPE BASS HD</div>
              </div>
            </div>
          </div>
          
                                                  <div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/i6w0RgaHvv4?si=7nLMUzhQAlpm-chZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">26</span>
              <div class="track-meta">
                <div class="track-title">HOMAGE PHONK</div>
                <div class="track-artist">KIXIA</div>
              </div>
            </div>
          </div>

<div class="track-card">
            <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/iTQkVFc9Be8?si=9r6H_QZHZyYlwCZs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">27</span>
              <div class="track-meta">
                <div class="track-title">BANG JUMPSTYLE (Extended)</div>
                <div class="track-artist">Sxilwix · TWXNY · Innxcence</div>
              </div>
            </div>
          </div>
          
                                                            <div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/34Pl2DTuwoQ?si=GWsAWNxqgJtVENv4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">28</span>
              <div class="track-meta">
                <div class="track-title">TUCA DONKA</div>
                <div class="track-artist">CURSEDEVIL, DJ FKU, Skorde</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-ugD1JiI4hc?si=5uIR86U8eW_Rmape" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">29</span>
              <div class="track-meta">
                <div class="track-title">SLAYASHI!</div>
                <div class="track-artist">Eternxlkz, 6YNTHMANE</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/i5zR6toPVQ8?si=NvRMAtdCbEUKa8kS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">30</span>
              <div class="track-meta">
                <div class="track-title">RAPTURE</div>
                <div class="track-artist">INTERWORLD</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Zm235vec_Y4?si=MBP0lquixnSpiJGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">31</span>
              <div class="track-meta">
                <div class="track-title">SLEEPING CITY FUNK</div>
                <div class="track-artist">Phonky Town</div>
              </div>
            </div>
       </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/oODl1ullv8Q?si=gHfGOrKw_1KxEjrC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">32</span>
              <div class="track-meta">
                <div class="track-title">VSAUCE PHONK</div>
                <div class="track-artist">FRAMEZERR</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sByKIOHaR_o?si=JWHachMrC7tgeT5j" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">33</span>
              <div class="track-meta">
                <div class="track-title">TIKI TAKIS PHONK</div>
                <div class="track-artist">STIVION</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/U5-cdIMv59c?si=kcejCWEvv9SaNFut" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">34</span>
              <div class="track-meta">
                <div class="track-title">trompete phonk</div>
                <div class="track-artist">redrubix</div>
              </div>
            </div>
          </div>

<div class="track-card">
                      <div class="video-panel">
              <div class="video-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BZnNsBN6tms?si=DlDvV-sTXhXUNsjg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              </div>
            </div>
            <div class="track-header">
              <span class="rank">35</span>
              <div class="track-meta">
                <div class="track-title">67</div>
                <div class="track-artist">Phonky Town</div>
              </div>
            </div>
       </div>

<div class="track-card">
  <div class="video-panel">
    <div class="video-wrap"></div>
  </div>
  <div class="track-header">
    <div class="track-meta">
      <div class="track-title">COMING SOON</div>
      <div class="track-artist"></div>
    </div>
    <span class="track-badge">Soon</span>
  </div>
</div>

</div>
      </section>
    </main>
  </div>
  
  <footer>
    <p>
      <span class="tagline">New Tracks Added Periodically</span><br /> <br />
      © 2026 PhonkHub  ·  Property Of ¥GoyMafia¥™  ·  All Rights To The Respective Artists
    </p>
  </footer>

</body>
</html>

CSS