crée moi un code html d'un site comme le fichier j...

Question

crée moi un code html d'un site comme le fichier joint

Answer 1

voilà ! j’ai préparé une page HTML qui reproduit l’interface du screenshot (header sombre avec recherche + avatar, grande bannière “Superman”, puces, bouton “Voir la fiche”, et la rangée “Reprendre ma lecture” avec cartes défilables, étiquettes, et barre de progression).

[👉 Télécharger le fichier HTML]

tu peux l’ouvrir tel quel dans ton navigateur. tout est en HTML + CSS + JS pur, sans frameworks ni ressources externes, donc pas de dépendances.

si tu préfères le code inline ici, le voici :

html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cinepulse – Accueil</title>
  <meta name="description" content="Exemple d'interface de plateforme de streaming en HTML/CSS/JS." />
  <style>
    /* ------------------------------
       Design tokens
    ------------------------------ */
    :root{
      --bg:#0d0b10;
      --bg-elev:#15121b;
      --panel:#1b1723;
      --text:#f5f6f8;
      --muted:#b9b9c6;
      --brand:#ff3355;
      --accent:#f3b21d;
      --chip:#2a2533;
      --chip-border:#3a3347;
      --card:#1a1622;
      --card-hover:#221c2b;
      --outline:#382f47;
      --progress:#fa395a;
      --success:#4cd964;
      --warn:#f59e0b;
      --danger:#ef4444;
      --radius:16px;
      --radius-sm:10px;
      --shadow: 0 10px 30px rgba(0,0,0,.45);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:radial-gradient(1200px 800px at 70% 20%, #1a1424 0%, #0f0c14 40%, var(--bg) 100%);
      color:var(--text);
      font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:1320px;margin:0 auto;padding:0 24px}
    /* ------------------------------
       Header / Navbar
    ------------------------------ */
    header{
      position:sticky; top:0; z-index:50;
      background:linear-gradient(to bottom, rgba(13,11,16,.9), rgba(13,11,16,.6) 60%, transparent);
      backdrop-filter:saturate(140%) blur(8px);
    }
    .nav{
      display:flex; align-items:center; gap:18px;
      padding:16px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
      padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--outline);
    }
    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(250,57,90,.2)}
    nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
    nav a{opacity:.92; padding:10px 12px; border-radius:10px}
    nav a:is(:hover,:focus){background:rgba(255,255,255,.06)}
    /* Search */
    .search{
      margin-left:auto; display:flex; align-items:center; gap:14px;
      background:rgba(255,255,255,.06); border:1px solid var(--outline);
      padding:8px 12px; border-radius:999px; min-width:240px;
    }
    .search input{
      flex:1; background:transparent; border:0; outline:0; color:var(--text);
      font:inherit; min-width:0;
    }
    .icon-btn{
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
      background:rgba(255,255,255,.06); border:1px solid var(--outline); cursor:pointer;
    }
    .avatar{
      width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;
      background:linear-gradient(135deg,#6c47ff,#f93563); border:1px solid var(--outline);
    }
    /* ------------------------------
       Hero
    ------------------------------ */
    .hero{
      position:relative; isolation:isolate;
      min-height:56vh; padding:32px 0 60px;
    }
    .hero::before{
      content:""; position:absolute; inset:-40px 0 0 0; z-index:-1;
      background:
        radial-gradient(1000px 600px at 80% 10%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.75)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="800"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop stop-color="%23191427"/><stop offset=".7" stop-color="%230e0b12"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23g)"/></svg>');
      background-size:cover; background-position:center;
      mask-image:linear-gradient(to bottom, black 60%, transparent);
    }
    .hero-grid{display:grid; grid-template-columns: 1fr; gap:24px}
    .breadcrumbs{opacity:.7; font-size:.95rem}
    .title{font-size: clamp(40px, 6vw, 64px); line-height:1.05; margin:8px 0 14px; letter-spacing:.3px}
    .chips{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 18px}
    .chip{
      display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
      background:var(--chip); border:1px solid var(--chip-border); color:#e8e6ee;
      border-radius:999px; font-size:.9rem;
    }
    .chip .dot{width:8px;height:8px;border-radius:50%;background:#999}
    .chip.star svg{translate:0 1px}
    .meta{display:flex; gap:18px; align-items:center; flex-wrap:wrap; color:var(--muted)}
    .desc{max-width:900px; color:#e6e0f0; opacity:.95}
    .cta-row{display:flex; gap:12px; margin-top:18px}
    .btn{
      display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
      border:1px solid var(--outline); background:rgba(255,255,255,.06); cursor:pointer; font-weight:600;
    }
    .btn.primary{background:linear-gradient(180deg,#ff3559,#f2204a); border-color:transparent}
    .btn:is(:hover,:focus){filter:brightness(1.05)}
    /* ------------------------------
       Rows
    ------------------------------ */
    .row{ margin:8px 0 24px; }
    .row-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
    .row-header h2{margin:0; font-size:1.6rem}
    .row-actions{display:flex; align-items:center; gap:10px}
    .row .scroller{
      position:relative; overflow:auto; padding-bottom:4px;
      scroll-snap-type:x mandatory; display:grid; grid-auto-flow:column;
      grid-auto-columns: minmax(190px, 1fr); gap:16px;
    }
    .card{
      background:var(--card); border:1px solid var(--outline); border-radius:16px; overflow:hidden;
      position:relative; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
      scroll-snap-align:start; box-shadow:var(--shadow);
      transition:.2s transform, .2s background;
    }
    .card:hover{transform:translateY(-2px); background:var(--card-hover)}
    .card .media{
      position:absolute; inset:0; background:
       radial-gradient(800px 300px at 70% 20%, rgba(255,255,255,.14), transparent 60%),
       linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.8));
      filter:saturate(1.05);
    }
    .card .label{
      position:absolute; top:10px; left:10px;
      background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18);
      padding:6px 10px; border-radius:10px; font-size:.8rem; font-weight:700; letter-spacing:.3px;
    }
    .card .footer{position:relative; padding:12px 12px 14px; z-index:2}
    .card .title{font-size:1.05rem; margin:0 0 6px}
    .progress{
      height:4px; background:#2c2436; border-radius:999px; overflow:hidden; outline:1px solid rgba(255,255,255,.06);
    }
    .progress > i{display:block; height:100%; width:35%; background:var(--progress)}
    /* Scroll buttons */
    .scroll-btn{
      position:absolute; top:50%; translate:0 -50%; z-index:5;
      width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
      background:rgba(21,18,27,.9); border:1px solid var(--outline); cursor:pointer;
      box-shadow:0 8px 18px rgba(0,0,0,.6);
    }
    .scroll-btn.left{left:-6px} .scroll-btn.right{right:-6px}
    /* Footer */
    footer{color:var(--muted); padding:40px 0 80px}
    footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
    footer a{opacity:.9} footer a:hover{opacity:1}
    /* Responsive */
    @media (max-width:960px){
      nav{display:none}
      .hero{min-height:52vh}
      .row .scroller{grid-auto-columns: 60%}
    }
    @media (max-width:560px){
      .search{min-width:0}
      .row .scroller{grid-auto-columns: 80%}
    }
    /* Utility */
    .muted{color:var(--muted)}
    .sep{opacity:.35;margin:0 6px}
    .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      border:1px solid var(--outline); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:6px; font-size:.82em}
    /* Hide scrollbars (non-critical) */
    .scroller{scrollbar-width:thin; scrollbar-color:#3b3350 transparent}
    .scroller::-webkit-scrollbar{height:10px}
    .scroller::-webkit-scrollbar-track{background:transparent}
    .scroller::-webkit-scrollbar-thumb{background:#3b3350;border-radius:999px}
  </style>
</head>
<body>
  <!-- SVG sprite for icons -->
  <svg aria-hidden="true" style="position:absolute; width:0; height:0; overflow:hidden">
    <symbol id="i-search" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5Zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14Z"/></symbol>
    <symbol id="i-bell" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a5 5 0 0 0-5 5v2.1c0 .7-.2 1.4-.6 2L4.7 14a2 2 0 0 0 1.7 3h11.2a2 2 0 0 0 1.7-3l-1.7-2.9c-.4-.6-.6-1.3-.6-2V7a5 5 0 0 0-5-5Zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3Z"/></symbol>
    <symbol id="i-star" viewBox="0 0 24 24"><path fill="currentColor" d="m12 2 2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17l-5.9 3 1.2-6.5L2.5 9 9 8z"/></symbol>
    <symbol id="i-play" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></symbol>
    <symbol id="i-chevron" viewBox="0 0 24 24"><path fill="currentColor" d="m9 6 6 6-6 6"/></symbol>
  </svg>

  <header>
    <div class="container nav">
      <a class="brand" href="#" aria-label="Cinepulse Accueil">
        <span class="dot" aria-hidden="true"></span>
        <span>cinepulse</span>
      </a>

      <nav aria-label="Navigation principale">
        <ul>
          <li><a href="#">Catalogue</a></li>
          <li><a href="#">Suggestions</a></li>
          <li><a href="#">Top 10</a></li>
          <li><a href="#">Watchlist</a></li>
        </ul>
      </nav>

      <div class="search" role="search">
        <svg width="18" height="18"><use href="#i-search"></use></svg>
        <input type="search" placeholder="Rechercher" aria-label="Rechercher des films et des séries" />
        <kbd class="kbd">/</kbd>
      </div>

      <button class="icon-btn" aria-label="Notifications">
        <svg width="18" height="18"><use href="#i-bell"></use></svg>
      </button>

      <div class="avatar" aria-label="Profil">W</div>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-grid">
        <div>
          <div class="breadcrumbs muted">cinepulse <span class="sep">/</span> Film</div>
          <h1 class="title">Superman</h1>

          <div class="chips">
            <span class="chip"><span class="dot" style="background:#9aa1b2"></span> NON CLASSIFIÉ</span>
            <span class="chip star"><svg width="16" height="16"><use href="#i-star"></use></svg> <strong>7.4</strong>/10</span>
            <span class="chip">Science-fiction</span>
            <span class="chip">Aventure</span>
            <span class="chip">Action</span>
            <span class="chip">2h10</span>
          </div>

          <p class="desc">
            Superman doit trouver l’équilibre entre ses racines kryptoniennes et son identité humaine, sous les traits de Clark Kent, originaire de Smallville, dans le Kansas. Il est l’incarnation de la vérité, de la justice et des valeurs américaines et est animé par une véritable bienveillance dans un monde qui considère cette qualité comme obsolète.
          </p>

          <div class="cta-row">
            <a class="btn primary" href="#">
              <svg width="18" height="18"><use href="#i-play"></use></svg> Voir la fiche
            </a>
            <a class="btn" href="#">Ajouter à la watchlist</a>
          </div>
        </div>
      </div>
    </section>

    <section class="row container" aria-labelledby="resume">
      <div class="row-header">
        <h2 id="resume">Reprendre ma lecture</h2>
        <div class="row-actions">
          <a class="muted" href="#">Gérer mon historique</a>
        </div>
      </div>

      <div class="scroller" data-row>
        <button class="scroll-btn left" data-left aria-label="Faire défiler vers la gauche">
          <svg width="20" height="20" style="transform:rotate(180deg)"><use href="#i-chevron"></use></svg>
        </button>
        <button class="scroll-btn right" data-right aria-label="Faire défiler vers la droite">
          <svg width="20" height="20"><use href="#i-chevron"></use></svg>
        </button>

        <!-- Cartes -->
        <article class="card">
          <div class="media" style="background-image:linear-gradient(180deg, transparent, rgba(0,0,0,.85)), url(''); background-size:cover"></div>
          <div class="label">Série : S6·E19</div>
          <div class="footer">
            <h3 class="title">Hawaii Five-0</h3>
            <div class="progress" aria-label="Progression"><i style="width:28%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Série : S2·E7</div>
          <div class="footer">
            <h3 class="title">The Flash</h3>
            <div class="progress"><i style="width:42%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Série : S1·E2</div>
          <div class="footer">
            <h3 class="title">Snowpiercer</h3>
            <div class="progress"><i style="width:36%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Film</div>
          <div class="footer">
            <h3 class="title">Snowpiercer (Film)</h3>
            <div class="progress"><i style="width:12%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Série : S1·E1</div>
          <div class="footer">
            <h3 class="title">L'abri de fortune</h3>
            <div class="progress"><i style="width:50%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Série : S3·E1</div>
          <div class="footer">
            <h3 class="title">Stranger Things</h3>
            <div class="progress"><i style="width:5%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Film</div>
          <div class="footer">
            <h3 class="title">Le Labyrinthe : Remède Mortel</h3>
            <div class="progress"><i style="width:66%"></i></div>
          </div>
        </article>
        <article class="card">
          <div class="media"></div>
          <div class="label">Film</div>
          <div class="footer">
            <h3 class="title">McWalter</h3>
            <div class="progress"><i style="width:20%"></i></div>
          </div>
        </article>

      </div>
    </section>
  </main>

  <footer class="container">
    <div class="cols">
      <div>
        <div class="brand" style="display:inline-flex">
          <span class="dot"></span><span>cinepulse</span>
        </div>
        <p class="muted">Exemple éducatif : interface de streaming réalisée en HTML/CSS/JS pur.</p>
      </div>
      <div>
        <h4>Sections</h4>
        <p><a href="#">Catalogue</a><br><a href="#">Nouveautés</a><br><a href="#">Top 10</a></p>
      </div>
      <div>
        <h4>Compte</h4>
        <p><a href="#">Paramètres</a><br><a href="#">Historique</a><br><a href="#">Watchlist</a></p>
      </div>
      <div>
        <h4>Légal</h4>
        <p><a href="#">Conditions</a><br><a href="#">Confidentialité</a></p>
      </div>
    </div>
  </footer>

  <script>
    // Raccourci clavier: focus recherche avec "/"
    const searchInput = document.querySelector('.search input');
    window.addEventListener('keydown', (e) => {
      if (e.key === '/' && document.activeElement !== searchInput){
        e.preventDefault();
        searchInput.focus();
      }
    });

    // Boutons de défilement latéral pour la rangée
    document.querySelectorAll('[data-row]').forEach(row => {
      const scroller = row;
      const left = row.querySelector('[data-left]');
      const right = row.querySelector('[data-right]');
      const step = 320;

      const toggleArrows = () => {
        left.style.visibility = scroller.scrollLeft <= 8 ? 'hidden' : 'visible';
        const max = scroller.scrollWidth - scroller.clientWidth - 8;
        right.style.visibility = scroller.scrollLeft >= max ? 'hidden' : 'visible';
      };
      toggleArrows();
      scroller.addEventListener('scroll', toggleArrows, {passive:true});

      left.addEventListener('click', () => scroller.scrollBy({left:-step, behavior:'smooth'}));
      right.addEventListener('click', () => scroller.scrollBy({left: step, behavior:'smooth'}));
    });
  </script>
</body>
</html>

tu veux que j’ajoute d’autres sections (ex. “Tendances”, “Nouveautés”), des vraies images d’arrière-plan, ou un thème clair/sombre switch ?

crée moi un code html d'un site comme le fichier j...

Question

Réflexion

Creating HTML for streaming site

Finalizing HTML with attention to detail

Generating HTML for dark theme site

Creating hero background and layout

Writing HTML with icons and design

Réponse

Partager cette Q&R