Here's a simplified Netflix-like website implementation with HTML and CSS: Netflix Clone

Unlimited movies, TV shows, and more.

Watch anywhere. Cancel anytime.

Cancel anytime

Watch anywhere

Pick your price

If you decide Netflix isn't for you - no problem. No commitment. Cancel online anytime.

Watch Free For 30 Days

Watch TV shows and movies anytime, anywhere — personalized for you.

Watch Free For 30 Days

Watch on your TV

Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.

Watch instantly or download for later

Available on phone and tablet, wherever you go.

Use any computer

Watch right on Netflix.com.

Choose one plan and watch everything on Netflix.

Watch Free For 30 Days

	Basic	Standard	Premium
Monthly price	$8.99	$12.99	$15.99
HD Available
Ultra HD Available
Screens you can watch on at the same time	1	2	4
Watch on your laptop, TV, phone and tablet
Unlimited movies and TV shows
Cancel anytime
First month free

* { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #000; color: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: #fff; text-decoration: none; } .btn { display: inline-block; background: #e50914; color: #fff; padding: 0.4rem 1.3rem; font-size: 1rem; text-align: center; border: none; cursor: pointer; margin-right: 0.5rem; outline: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); border-radius: 2px; } .btn:hover { opacity: 0.9; } .btn-rounded { border-radius: 5px; } .btn-xl { font-size: 2rem; padding: 1.5rem 2.1rem; text-transform: uppercase; } .btn-lg { font-size: 1rem; padding: 0.8rem 1.3rem; text-transform: uppercase; } .text-xl { font-size: 2rem; margin-bottom: 1rem; } .text-lg { font-size: 1.8rem; margin-bottom: 1rem; } .text-md { font-size: 1.5rem; margin-bottom: 1rem; } .text-dark { color: #999; } .showcase { width: 100%; height: 93vh; position: relative; background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover; } .showcase::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.6); box-shadow: inset 120px 100px 250px #000000, inset -120px -100px 250px #000000; } .showcase-top { position: relative; height: 90px; z-index: 2; } .showcase-top img { width: 170px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .showcase-top a { position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); } .showcase-content { position: relative; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-top: 9rem; z-index: 2; } .showcase-content h1 { font-weight: 700; font-size: 5.2rem; line-height: 1.1; margin: 0 0 2rem; } .showcase-content p { text-transform: uppercase; color: #fff; font-weight: 400; font-size: 1.9rem; line-height: 1.25; margin: 0 0 2rem; } .email-form { display: flex; align-items: center; margin-top: 20px; overflow: hidden; } .email-form input { flex: 1; padding: 1.5rem; font-size: 1.2rem; border: none; outline: none; } .email-form button { display: flex; align-items: center; justify-content: center; } .btn-icon { margin-left: 0.5rem; } .tabs { background: #141414; padding-top: 1rem; border-bottom: 3px solid #3d3d3d; } .tabs .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; align-items: center; justify-content: center; text-align: center; } .tab-item { padding: 1.5rem 0; } .tab-item:hover { color: #fff; cursor: pointer; } .tab-border { border-bottom: 4px solid #e50914; } .tab-content { padding: 3rem 0; background: #000; color: #fff; } .tab-content-item { display: none; } .tab-content-item.show { display: block; } .tab-1-content-inner { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; align-items: center; justify-content: center; } .tab-2-content-top { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 1rem; justify-content: center; align-items: center; } .tab-2-content-bottom { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; text-align: center; } .table { width: 100%; margin-top: 2rem; border-collapse: collapse; border-spacing: 0; } .table thead th { text-transform: uppercase; padding: 0.8rem; } .table tbody tr td { color: #999; padding: 0.8rem 1.2rem; text-align: center; } .table tbody tr td:first-child { text-align: left; } .table tbody tr:nth-child(odd) { background: #222; } .footer { max-width: 75%; margin: 1rem auto; overflow: auto; } .footer, .footer a { color: #999; font-size: 0.9rem; } .footer p { margin-bottom: 1.5rem; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem; } .footer li { line-height: 1.9; } .text-center { text-align: center; margin-bottom: 2rem; } @media (max-width: 960px) { .showcase { height: 70vh; } .hide-sm { display: none; } .showcase-top img { top: 30%; left: 5%; transform: translate(0); } .showcase-content h1 { font-size: 3.7rem; line-height: 1; } .showcase-content p { font-size: 1.5rem; } .btn-xl { font-size: 1.5rem; padding: 1.4rem 2rem; } .text-xl { font-size: 1.5rem; } .text-lg { font-size: 1.3rem; } .text-md { font-size: 1rem; } } @media (max-width: 700px) { .showcase::after { background: rgba(0, 0, 0, 0.6); box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000; } .email-form { flex-direction: column; } .email-form input { width: 100%; margin-bottom: 1rem; } .tab-1-content-inner { grid-template-columns: 1fr; text-align: center; } .tab-2-content-top { display: block; text-align: center; } .tab-2-content-bottom { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } }