Skip to content

Instantly share code, notes, and snippets.

@rakeshr

rakeshr/nflix.htm

Last active March 12, 2026 12:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rakeshr/8b746ab6e60258050c7ab394811792fc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rakeshr/8b746ab6e60258050c7ab394811792fc to your computer and use it in GitHub Desktop.
Download ZIP
Nflix
Raw
nflix.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Netflix Clone</title>
<style>
/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Helvetica Neue',Arial,sans-serif;
background:#141414;
color:#fff;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;outline:none;font-family:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
::-webkit-scrollbar{height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#555;border-radius:4px}
/* ===== NAVBAR ===== */
.navbar{
position:fixed;top:0;left:0;width:100%;z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:16px 4%;
background:linear-gradient(180deg,rgba(0,0,0,.85) 0%,transparent 100%);
transition:background .3s;
}
.navbar.scrolled{background:#141414}
.nav-left,.nav-right{display:flex;align-items:center;gap:20px}
.logo{font-size:1.8rem;font-weight:900;color:#e50914;letter-spacing:2px}
.nav-links{display:flex;gap:18px;font-size:.9rem;color:#e5e5e5}
.nav-links a:hover{color:#b3b3b3}
.search-box{
display:flex;align-items:center;background:rgba(0,0,0,.75);
border:1px solid #555;border-radius:4px;overflow:hidden;
transition:width .3s;width:0;padding:0;
}
.search-box.active{width:220px;padding:0 10px}
.search-box input{
background:transparent;border:none;outline:none;color:#fff;
font-size:.9rem;width:100%;padding:6px 0;
}
.search-btn{background:none;color:#fff;font-size:1.2rem}
.bell{font-size:1.2rem;position:relative}
.bell .dot{
position:absolute;top:-2px;right:-4px;width:8px;height:8px;
background:#e50914;border-radius:50%;
}
.avatar{
width:32px;height:32px;border-radius:4px;
background:linear-gradient(135deg,#fca311,#e63946);
}
/* ===== HERO ===== */
.hero{
position:relative;height:95vh;
background:url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}
.hero::after{
content:'';position:absolute;inset:0;
background:
linear-gradient(to right,rgba(0,0,0,.85) 20%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.5)),
linear-gradient(to top,#141414 3%,transparent 25%);
}
.hero-content{
position:absolute;bottom:22%;left:4%;z-index:2;max-width:550px;
}
.tag{
display:inline-flex;align-items:center;gap:8px;
font-size:.85rem;color:#e5e5e5;letter-spacing:3px;margin-bottom:12px;
}
.tag .n-logo{
background:#e50914;color:#fff;font-weight:800;
font-size:.65rem;padding:2px 6px;border-radius:2px;
}
.hero h1{font-size:3.4rem;line-height:1.1;margin-bottom:16px}
.hero p{font-size:1rem;color:#ddd;margin-bottom:24px;line-height:1.5}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:12px 28px;border-radius:4px;font-size:1rem;font-weight:700;
transition:.2s;
}
.btn-play{background:#fff;color:#000}
.btn-play:hover{background:#e0e0e0}
.btn-info{background:rgba(109,109,110,.7);color:#fff}
.btn-info:hover{background:rgba(109,109,110,.5)}
.maturity{
display:flex;align-items:center;gap:10px;margin-top:18px;
font-size:.85rem;color:#bbb;
}
.maturity span{
border-left:3px solid #46d369;padding-left:8px;
}
/* ===== ROW ===== */
.content{position:relative;z-index:3;margin-top:-80px;padding-bottom:60px}
.row{padding:0 4%;margin-bottom:32px}
.row-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:12px;
}
.row-header h2{font-size:1.35rem}
.row-header a{font-size:.85rem;color:#54b9c5;transition:.2s}
.row-header a:hover{color:#fff}
/* ===== SLIDER ===== */
.slider-wrapper{position:relative}
.slider{
display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.slide-btn{
position:absolute;top:0;bottom:6px;width:48px;z-index:5;
display:flex;align-items:center;justify-content:center;
background:rgba(20,20,20,.7);color:#fff;font-size:1.6rem;
opacity:0;transition:.2s;border:none;
}
.slider-wrapper:hover .slide-btn{opacity:1}
.slide-btn:hover{background:rgba(20,20,20,.9)}
.slide-btn.left{left:0;border-radius:0 4px 4px 0}
.slide-btn.right{right:0;border-radius:4px 0 0 4px}
/* ===== CARD ===== */
.card{
flex:0 0 210px;scroll-snap-align:start;position:relative;
border-radius:4px;overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:scale(1.15);z-index:10;box-shadow:0 14px 36px rgba(0,0,0,.65)}
.card-img{height:300px;background:#222}
.card-overlay{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,0,0,.9),transparent 55%);
opacity:0;transition:.3s;display:flex;flex-direction:column;justify-content:flex-end;
padding:14px;
}
.card:hover .card-overlay{opacity:1}
.card-title{font-size:.95rem;font-weight:700;margin-bottom:8px}
.card-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.card-meta .match{color:#46d369;font-weight:700;font-size:.8rem}
.card-meta .year,.card-meta .rating{
font-size:.75rem;color:#aaa;border:1px solid #555;
padding:1px 5px;border-radius:2px;
}
.card-actions{display:flex;gap:6px}
.card-actions button{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:.85rem;border:2px solid #888;
background:rgba(42,42,42,.6);color:#fff;transition:.2s;
}
.card-actions button:first-child{background:#fff;color:#000;border-color:#fff}
.card-actions button:hover{border-color:#fff}
/* Top‑10 row */
.top10 .card{flex:0 0 130px}
.top10 .card-img{height:190px}
.top10 .rank{
position:absolute;left:-6px;bottom:4px;
font-size:6rem;font-weight:900;color:transparent;
-webkit-text-stroke:3px #888;z-index:3;line-height:1;
}
/* ===== MODAL ===== */
.modal-bg{
position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;
display:none;align-items:center;justify-content:center;
}
.modal-bg.open{display:flex}
.modal{
width:90%;max-width:780px;max-height:90vh;overflow-y:auto;
background:#181818;border-radius:8px;position:relative;
}
.modal-hero{position:relative;height:400px}
.modal-hero::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to top,#181818 5%,transparent 40%);
}
.modal-close{
position:absolute;top:14px;right:14px;z-index:5;
width:36px;height:36px;border-radius:50%;background:#181818;
color:#fff;font-size:1.2rem;display:flex;align-items:center;
justify-content:center;border:none;
}
.modal-body{padding:0 40px 40px}
.modal-body h2{font-size:1.6rem;margin-bottom:12px}
.modal-body p{color:#ccc;font-size:.95rem;line-height:1.6;margin-bottom:18px}
.modal-info{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#999;margin-bottom:18px}
.modal-info span{display:flex;align-items:center;gap:6px}
/* ===== FOOTER ===== */
.footer{
padding:40px 4%;color:#808080;font-size:.8rem;
}
.footer-links{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:10px;margin-bottom:20px;
}
.footer-links a{display:block;padding:4px 0;transition:.2s}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{display:flex;align-items:center;gap:14px;margin-top:12px}
.lang-btn{
background:transparent;border:1px solid #555;color:#fff;
padding:6px 14px;border-radius:4px;font-size:.8rem;
}
/* ===== RESPONSIVE ===== */
@media(max-width:900px){
.nav-links{display:none}
.hero{height:75vh}
.hero h1{font-size:2.4rem}
.card{flex:0 0 160px}
.card-img{height:240px}
.modal-hero{height:260px}
.modal-body{padding:0 20px 30px}
}
@media(max-width:520px){
.hero h1{font-size:1.8rem}
.hero p{font-size:.9rem}
.card{flex:0 0 130px}
.card-img{height:200px}
.logo{font-size:1.4rem}
}
</style>
</head>
<body>
<!-- ===== NAVBAR ===== -->
<nav class="navbar" id="navbar">
<div class="nav-left">
<div class="logo">NETFLIX</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">TV Shows</a>
<a href="#">Movies</a>
<a href="#">New &amp; Popular</a>
<a href="#">My List</a>
<a href="#">Browse by Languages</a>
</div>
</div>
<div class="nav-right">
<button class="search-btn" onclick="toggleSearch()">🔍</button>
<div class="search-box" id="searchBox">
<input type="text" placeholder="Titles, people, genres" />
</div>
<div class="bell">🔔<div class="dot"></div></div>
<div class="avatar"></div>
</div>
</nav>
<!-- ===== HERO ===== -->
<section class="hero">
<div class="hero-content">
<div class="tag"><span class="n-logo">N</span> ORIGINAL SERIES</div>
<h1>Stranger Things</h1>
<p>When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying supernatural forces and one very strange little girl.</p>
<div class="hero-btns">
<button class="btn btn-play" onclick="openModal()">▶ Play</button>
<button class="btn btn-info" onclick="openModal()">ℹ More Info</button>
</div>
<div class="maturity">
<span>TV-14</span>
<span>4 Seasons</span>
<span>HD</span>
</div>
</div>
</section>
<!-- ===== CONTENT ===== -->
<main class="content" id="content">
<!-- Row 1: Trending -->
<section class="row">
<div class="row-header">
<h2>Trending Now</h2>
<a href="#">Explore All &rsaquo;</a>
</div>
<div class="slider-wrapper">
<button class="slide-btn left" onclick="scrollSlider(this,-1)">‹</button>
<div class="slider" id="slider-trending"></div>
<button class="slide-btn right" onclick="scrollSlider(this,1)">›</button>
</div>
</section>
<!-- Row 2: Top 10 -->
<section class="row">
<div class="row-header">
<h2>Top 10 in Your Country Today</h2>
</div>
<div class="slider-wrapper">
<button class="slide-btn left" onclick="scrollSlider(this,-1)">‹</button>
<div class="slider top10" id="slider-top10"></div>
<button class="slide-btn right" onclick="scrollSlider(this,1)">›</button>
</div>
</section>
<!-- Row 3: Popular -->
<section class="row">
<div class="row-header">
<h2>Popular on Netflix</h2>
<a href="#">Explore All &rsaquo;</a>
</div>
<div class="slider-wrapper">
<button class="slide-btn left" onclick="scrollSlider(this,-1)">‹</button>
<div class="slider" id="slider-popular"></div>
<button class="slide-btn right" onclick="scrollSlider(this,1)">›</button>
</div>
</section>
<!-- Row 4: Action -->
<section class="row">
<div class="row-header">
<h2>Action &amp; Adventure</h2>
<a href="#">Explore All &rsaquo;</a>
</div>
<div class="slider-wrapper">
<button class="slide-btn left" onclick="scrollSlider(this,-1)">‹</button>
<div class="slider" id="slider-action"></div>
<button class="slide-btn right" onclick="scrollSlider(this,1)">›</button>
</div>
</section>
<!-- Row 5: Continue Watching -->
<section class="row">
<div class="row-header">
<h2>Continue Watching for You</h2>
<a href="#">Explore All &rsaquo;</a>
</div>
<div class="slider-wrapper">
<button class="slide-btn left" onclick="scrollSlider(this,-1)">‹</button>
<div class="slider" id="slider-continue"></div>
<button class="slide-btn right" onclick="scrollSlider(this,1)">›</button>
</div>
</section>
</main>
<!-- ===== MODAL ===== -->
<div class="modal-bg" id="modal" onclick="closeModal(event)">
<div class="modal">
<div class="modal-hero">
<img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=1200&q=80" alt="">
<button class="modal-close" onclick="closeModal()">✕</button>
</div>
<div class="modal-body">
<h2>Stranger Things</h2>
<div class="modal-info">
<span style="color:#46d369;font-weight:700">97% Match</span>
<span>2022</span>
<span>TV-14</span>
<span>4 Seasons</span>
<span>HD</span>
</div>
<p>When a young boy vanishes, a small town uncovers a mystery involving secret experiments, terrifying supernatural forces and one very strange little girl. As the search for answers grows, the residents must confront terrifying forces in order to get to the truth.</p>
<p style="color:#777;font-size:.85rem"><strong style="color:#999">Cast:</strong> Millie Bobby Brown, Finn Wolfhard, Winona Ryder</p>
<p style="color:#777;font-size:.85rem"><strong style="color:#999">Genres:</strong> Sci-Fi, Horror, Drama, Mystery</p>
</div>
</div>
</div>
<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="footer-links">
<a href="#">Audio Description</a>
<a href="#">Help Center</a>
<a href="#">Gift Cards</a>
<a href="#">Media Center</a>
<a href="#">Investor Relations</a>
<a href="#">Jobs</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy</a>
<a href="#">Legal Notices</a>
<a href="#">Cookie Preferences</a>
<a href="#">Corporate Information</a>
<a href="#">Contact Us</a>
</div>
<button class="lang-btn">🌐 English</button>
<div class="footer-bottom">
<p>© 2024 Netflix Clone — For demo purposes only.</p>
</div>
</footer>
<!-- ===== JAVASCRIPT ===== -->
<script>
// --- DATA ---
const movies = {
trending:[
{title:"The Witcher",img:"https://images.unsplash.com/photo-1535016120720-40c646be5580?auto=format&fit=crop&w=600&q=80",match:93,year:2023,rating:"TV-MA"},
{title:"Dark",img:"https://images.unsplash.com/photo-1509281373149-e957c6296406?auto=format&fit=crop&w=600&q=80",match:98,year:2020,rating:"TV-MA"},
{title:"Money Heist",img:"https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=600&q=80",match:91,year:2021,rating:"TV-16"},
{title:"Ozark",img:"https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=600&q=80",match:95,year:2022,rating:"TV-MA"},
{title:"The Crown",img:"https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=600&q=80",match:89,year:2023,rating:"TV-14"},
{title:"Lupin",img:"https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=600&q=80",match:90,year:2021,rating:"TV-14"},
{title:"Peaky Blinders",img:"https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=600&q=80",match:96,year:2022,rating:"TV-MA"},
{title:"Breaking Bad",img:"https://images.unsplash.com/photo-1574267432553-4b4628081c31?auto=format&fit=crop&w=600&q=80",match:99,year:2013,rating:"TV-MA"},
],
popular:[
{title:"Squid Game",img:"https://images.unsplash.com/photo-1611419010196-2ae63897ab8e?auto=format&fit=crop&w=600&q=80",match:95,year:2021,rating:"TV-MA"},
{title:"Wednesday",img:"https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=600&q=80",match:88,year:2022,rating:"TV-14"},
{title:"Glass Onion",img:"https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=600&q=80",match:92,year:2022,rating:"PG-13"},
{title:"All Quiet",img:"https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&w=600&q=80",match:94,year:2022,rating:"R"},
{title:"Extraction",img:"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80",match:87,year:2023,rating:"R"},
{title:"Bird Box",img:"https://images.unsplash.com/photo-1513106580091-1d82408b8cd6?auto=format&fit=crop&w=600&q=80",match:85,year:2018,rating:"R"},
{title:"The Adam Project",img:"https://images.unsplash.com/photo-1505685296765-3a2736de412f?auto=format&fit=crop&w=600&q=80",match:83,year:2022,rating:"PG-13"},
{title:"Don't Look Up",img:"https://images.unsplash.com/photo-1518998053901-5348d3961a04?auto=format&fit=crop&w=600&q=80",match:90,year:2021,rating:"R"},
],
action:[
{title:"Red Notice",img:"https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=600&q=80",match:82,year:2021,rating:"PG-13"},
{title:"The Gray Man",img:"https://images.unsplash.com/photo-1524985069026-dd778a71c7b4?auto=format&fit=crop&w=600&q=80",match:86,year:2022,rating:"PG-13"},
{title:"6 Underground",img:"https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=600&q=80",match:79,year:2019,rating:"R"},
{title:"Old Guard",img:"https://images.unsplash.com/photo-1535016120720-40c646be5580?auto=format&fit=crop&w=600&q=80",match:88,year:2020,rating:"R"},
{title:"Triple Frontier",img:"https://images.unsplash.com/photo-1509281373149-e957c6296406?auto=format&fit=crop&w=600&q=80",match:81,year:2019,rating:"R"},
{title:"Bright",img:"https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=600&q=80",match:74,year:2017,rating:"TV-MA"},
{title:"Spenser",img:"https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=600&q=80",match:77,year:2020,rating:"R"},
{title:"Kate",img:"https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=600&q=80",match:84,year:2021,rating:"R"},
],
continue:[
{title:"Narcos",img:"https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=600&q=80",match:96,year:2017,rating:"TV-MA"},
{title:"Black Mirror",img:"https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&w=600&q=80",match:92,year:2023,rating:"TV-MA"},
{title:"You",img:"https://images.unsplash.com/photo-1574267432553-4b4628081c31?auto=format&fit=crop&w=600&q=80",match:89,year:2023,rating:"TV-MA"},
{title:"Cobra Kai",img:"https://images.unsplash.com/photo-1611419010196-2ae63897ab8e?auto=format&fit=crop&w=600&q=80",match:91,year:2023,rating:"TV-14"},
{title:"Bridgerton",img:"https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=600&q=80",match:85,year:2022,rating:"TV-MA"},
{title:"Emily in Paris",img:"https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=600&q=80",match:78,year:2023,rating:"TV-MA"},
{title:"Manifest",img:"https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?auto=format&fit=crop&w=600&q=80",match:87,year:2023,rating:"TV-14"},
{title:"Behind Her Eyes",img:"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80",match:83,year:2021,rating:"TV-MA"},
]
};
// --- BUILD CARDS ---
function createCard(m){
return `
<div class="card" onclick="openModal()">
<div class="card-img"><img src="${m.img}" alt="${m.title}" loading="lazy"></div>
<div class="card-overlay">
<div class="card-title">${m.title}</div>
<div class="card-meta">
<span class="match">${m.match}% Match</span>
<span class="rating">${m.rating}</span>
<span class="year">${m.year}</span>
</div>
<div class="card-actions">
<button>▶</button>
<button>+</button>
<button>👍</button>
<button>▾</button>
</div>
</div>
</div>`;
}
function createTop10Card(m,i){
return `
<div class="card" onclick="openModal()">
<div class="card-img"><img src="${m.img}" alt="${m.title}" loading="lazy"></div>
<div class="rank">${i+1}</div>
<div class="card-overlay">
<div class="card-title">${m.title}</div>
<div class="card-actions">
<button>▶</button>
<button>+</button>
</div>
</div>
</div>`;
}
function renderRow(id,data,isTop10){
const el=document.getElementById(id);
el.innerHTML=data.map((m,i)=>isTop10?createTop10Card(m,i):createCard(m)).join('');
}
renderRow('slider-trending',movies.trending,false);
renderRow('slider-top10',movies.trending.slice(0,10),true);
renderRow('slider-popular',movies.popular,false);
renderRow('slider-action',movies.action,false);
renderRow('slider-continue',movies.continue,false);
// --- SLIDER SCROLL ---
function scrollSlider(btn,dir){
const slider=btn.parentElement.querySelector('.slider');
slider.scrollBy({left:dir*600,behavior:'smooth'});
}
// --- NAVBAR SCROLL ---
window.addEventListener('scroll',()=>{
document.getElementById('navbar').classList.toggle('scrolled',window.scrollY>50);
});
// --- SEARCH TOGGLE ---
function toggleSearch(){
document.getElementById('searchBox').classList.toggle('active');
const inp=document.querySelector('.search-box input');
if(document.getElementById('searchBox').classList.contains('active')) inp.focus();
}
// --- MODAL ---
function openModal(){
document.getElementById('modal').classList.add('open');
document.body.style.overflow='hidden';
}
function closeModal(e){
if(!e||e.target===document.getElementById('modal')||e.currentTarget.classList.contains('modal-close')){
document.getElementById('modal').classList.remove('open');
document.body.style.overflow='';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment