Netflix Clone – Movie Website in HTML CSS JavaScript

19 0 Websites codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Netflix Clone – Movie Website in HTML CSS JavaScript

<header class="top" id="top">
  <a href="#" class="logo">FLIXO</a>
  <nav><a class="on" href="#">Home</a><a href="#">Series</a><a href="#">Movies</a><a href="#">New & Popular</a><a href="#">My List</a></nav>
  <div class="tools"><input id="search" placeholder="🔍 Titles, genres"><span class="av">🙂</span></div>
</header>
<section class="hero" id="hero">
  <div class="hinfo">
    <p class="kind">🎬 FLIXO ORIGINAL SERIES</p>
    <h1 id="htitle">The Last Signal</h1>
    <p class="meta"><b class="match">98% Match</b> 2026 · <span class="age">16+</span> · 3 Seasons · HD</p>
    <p id="hdesc">A radio engineer on a remote island picks up a message from 40 years in the future — and it’s addressed to her.</p>
    <div class="hbtn"><button class="play" id="hplay">▶ Play</button><button class="info" id="hinfo">ⓘ More Info</button></div>
  </div>
</section>
<main id="rows"></main>
<div class="modal" id="modal"><div class="mbox">
  <button class="x" id="mx" aria-label="Close">✕</button>
  <div class="mhero" id="mhero"><h2 id="mtitle"></h2><div class="hbtn"><button class="play">▶ Play</button><button class="round" id="mlist">＋</button><button class="round">👍</button></div></div>
  <div class="mbody"><p class="meta"><b class="match" id="mmatch"></b> <span id="myear"></span> · <span class="age">13+</span> · <span id="mgenre"></span></p><p id="mdesc"></p></div>
</div></div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #141414; color: #fff; font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif; }
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 30px; padding: 18px 4vw; background: linear-gradient(rgba(0,0,0,.7), transparent); transition: background .3s; }
.top.solid { background: #141414; }
.logo { color: #e50914; font-weight: 900; font-size: 1.9rem; letter-spacing: 2px; text-decoration: none; }
nav { display: flex; gap: 18px; } nav a { color: #e5e5e5; text-decoration: none; font-size: .9rem; } nav a.on { font-weight: 700; color: #fff; }
.tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }
#search { background: rgba(0,0,0,.6); border: 1px solid #fff; color: #fff; padding: 7px 10px; width: 200px; outline: none; }
.av { width: 34px; height: 34px; border-radius: 6px; background: #2b7bd9; display: grid; place-items: center; }
.hero { height: 85vh; min-height: 480px; display: flex; align-items: center; padding: 0 4vw; position: relative;
  background: radial-gradient(ellipse at 75% 40%, rgba(40,120,255,.55), transparent 55%), radial-gradient(circle at 85% 30%, #ffdd8a 0 2%, transparent 3%), linear-gradient(135deg, #04122e, #0b2a5c 50%, #020611); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, #141414); }
.hinfo { max-width: 560px; position: relative; z-index: 1; }
.kind { font-size: .8rem; letter-spacing: 3px; color: #ccc; }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; margin: 10px 0 14px; text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.meta { color: #ccc; margin-bottom: 12px; } .match { color: #46d369; } .age { border: 1px solid #aaa; padding: 0 5px; font-size: .85rem; }
.hero p#hdesc { font-size: 1.1rem; line-height: 1.5; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hbtn { display: flex; gap: 12px; margin-top: 20px; }
.hbtn button { border: 0; border-radius: 6px; padding: 11px 26px; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.play { background: #fff; color: #000; } .play:hover { background: #ffffffcc; }
.info { background: rgba(109,109,110,.7); color: #fff; }
.round { width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; background: rgba(42,42,42,.7); color: #fff; border: 2px solid #888 !important; }
main { position: relative; z-index: 2; margin-top: -90px; padding-bottom: 50px; }
.row { margin: 0 0 34px; }
.row h3 { padding: 0 4vw; margin-bottom: 10px; font-size: 1.25rem; }
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 4vw; scroll-behavior: smooth; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.m { flex: 0 0 230px; aspect-ratio: 16/9; border-radius: 6px; position: relative; cursor: pointer; transition: transform .3s, box-shadow .3s; display: flex; align-items: flex-end; padding: 10px; overflow: hidden; }
.m:hover { transform: scale(1.12); z-index: 3; box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.m .em { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); font-size: 3rem; opacity: .9; }
.m b { position: relative; font-size: .95rem; text-shadow: 0 2px 6px #000; }
.rank .m { flex-basis: 170px; aspect-ratio: 2/3; padding-left: 70px; }
.rank .num { position: absolute; left: -6px; bottom: -22px; font-size: 7rem; font-weight: 900; color: #141414; -webkit-text-stroke: 3px #777; line-height: 1; }
.bar { position: absolute; left: 0; bottom: 0; height: 4px; background: #e50914; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 20; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal.on { display: flex; }
.mbox { width: min(820px, 100%); background: #181818; border-radius: 10px; overflow: hidden; position: relative; animation: up .3s; }
@keyframes up { from { transform: scale(.9); opacity: 0; } }
.x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #181818; color: #fff; cursor: pointer; }
.mhero { height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 40px; position: relative; }
.mhero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, #181818); }
.mhero > * { position: relative; z-index: 1; } .mhero h2 { font-size: 2.6rem; }
.mbody { padding: 0 40px 40px; line-height: 1.6; }
@media (max-width: 760px) { nav { display: none; } #search { width: 130px; } .m { flex-basis: 160px; } .mhero { height: 260px; padding: 20px; } .mbody { padding: 0 20px 30px; } }

// FLIXO — Netflix clone movie website (HTML CSS JS): hero, horizontal rows, Top 10, search, My List and detail modal
var G = ['#e50914,#3b0000', '#1d4ed8,#020617', '#16a34a,#022c22', '#f59e0b,#451a03', '#9333ea,#1e0336', '#0891b2,#042f2e', '#db2777,#3b0721', '#475569,#020617'];
var M = [
  ['The Last Signal', 'Sci-Fi', '📡'], ['Midnight Chef', 'Reality', '🍳'], ['Desert Kings', 'Action', '🏜️'], ['Love in Beirut', 'Romance', '💌'],
  ['Pixel Wars', 'Animation', '👾'], ['Deep Blue', 'Documentary', '🐋'], ['The Heist Club', 'Thriller', '💰'], ['Ghost Mountain', 'Horror', '👻'],
  ['Laugh Track', 'Comedy', '😂'], ['Galaxy Drift', 'Sci-Fi', '🚀'], ['Street Racers', 'Action', '🏎️'], ['The Royal Secret', 'Drama', '👑'],
  ['Wild Kingdom', 'Documentary', '🦁'], ['Code Red', 'Thriller', '🚨'], ['Haunted Hotel', 'Horror', '🏨'], ['Summer Camp', 'Comedy', '⛺']
].map(function (m, i) { return { t: m[0], g: m[1], e: m[2], c: G[i % G.length], y: 2018 + i % 9, match: 80 + (i * 7) % 19, prog: i % 3 === 0 ? 20 + i * 4 : 0, d: 'An unforgettable ' + m[1].toLowerCase() + ' story full of twists. Critics call it “the most binge-worthy show of the year.”' }; });
var myList = [];
try { myList = JSON.parse(localStorage.getItem('flixo-list') || '[]'); } catch (e) {}
var ROWS = [
  ['Trending Now', function () { return M.slice(0, 10); }],
  ['Top 10 Today', function () { return M.slice(3, 13); }, true],
  ['Continue Watching', function () { return M.filter(function (m) { return m.prog; }); }],
  ['My List', function () { return M.filter(function (m) { return myList.indexOf(m.t) > -1; }); }],
  ['Action & Thrillers', function () { return M.filter(function (m) { return m.g === 'Action' || m.g === 'Thriller'; }); }],
  ['Comedies & Horror', function () { return M.filter(function (m) { return m.g === 'Comedy' || m.g === 'Horror'; }); }]
];
function card(m, rank) {
  return '<div class="m" data-t="' + m.t + '" style="background:linear-gradient(135deg,' + m.c + ')">' + (rank ? '<span class="num">' + rank + '</span>' : '') +
    '<span class="em">' + m.e + '</span><b>' + m.t + '</b>' + (m.prog ? '<span class="bar" style="width:' + m.prog + '%"></span>' : '') + '</div>';
}
function render(q) {
  var html = '';
  if (q) {
    var res = M.filter(function (m) { return (m.t + ' ' + m.g).toLowerCase().indexOf(q) > -1; });
    html = '<div class="row"><h3>Results for “' + q.replace(/</g, '') + '”</h3><div class="strip">' + (res.map(function (m) { return card(m); }).join('') || '<p style="padding:20px;color:#999">No titles found</p>') + '</div></div>';
  } else ROWS.forEach(function (r) {
    var list = r[1](); if (!list.length) return;
    html += '<div class="row' + (r[2] ? ' rank' : '') + '"><h3>' + r[0] + '</h3><div class="strip">' + list.map(function (m, i) { return card(m, r[2] ? i + 1 : 0); }).join('') + '</div></div>';
  });
  document.getElementById('rows').innerHTML = html;
  document.getElementById('hero').style.display = q ? 'none' : '';
  document.getElementById('rows').style.marginTop = q ? '90px' : '';
}
var current;
function open(t) {
  var m = M.filter(function (x) { return x.t === t; })[0]; current = m;
  document.getElementById('mhero').style.background = 'linear-gradient(135deg,' + m.c + ')';
  document.getElementById('mtitle').textContent = m.e + ' ' + m.t;
  document.getElementById('mmatch').textContent = m.match + '% Match';
  document.getElementById('myear').textContent = m.y; document.getElementById('mgenre').textContent = m.g;
  document.getElementById('mdesc').textContent = m.d;
  document.getElementById('mlist').textContent = myList.indexOf(m.t) > -1 ? '✓' : '＋';
  document.getElementById('modal').classList.add('on');
}
document.getElementById('rows').onclick = function (e) { var c = e.target.closest('.m'); if (c) open(c.dataset.t); };
document.getElementById('hinfo').onclick = function () { open('The Last Signal'); };
document.getElementById('mx').onclick = function () { document.getElementById('modal').classList.remove('on'); };
document.getElementById('modal').onclick = function (e) { if (e.target === this) this.classList.remove('on'); };
document.getElementById('mlist').onclick = function () {
  var i = myList.indexOf(current.t); if (i > -1) myList.splice(i, 1); else myList.push(current.t);
  try { localStorage.setItem('flixo-list', JSON.stringify(myList)); } catch (e) {}
  this.textContent = i > -1 ? '＋' : '✓'; render(document.getElementById('search').value.trim().toLowerCase());
};
document.getElementById('search').oninput = function () { render(this.value.trim().toLowerCase()); };
addEventListener('scroll', function () { document.getElementById('top').classList.toggle('solid', scrollY > 60); });
render('');

Comments 0

…

Netflix Clone – Movie Website in HTML CSS JavaScript

Recommended

Comments 0