Introduction to How to Build Netflix Clone
Are you looking to How to build Netflix Clone using HTML, CSS, and JavaScript? If Yes then this tutorial is for you.
Contents
Hello Guys, welcome back to another tutorial from The Coding Hubs. Today in this tutorial we are going to create the Netflix Clone Website using HTML, CSS, and JavaScript. We are also going to use Bootstrap to build the Netflix Clone.
I am a Programmer and Content creator, writing programs and blogs since 2015 and I know how to build projects using programming easily and step by step. Here I am going to share the Netflix Clone source code.
Technologies Used to Build Netflix Clone
To build this project we are going to use some technologies. Here is an overview description of the technologies.
HTML: HTML stands for HyperText Markup Language. HTML is used to give the structure to web pages.
CSS: CSS is a Cascading Style Sheets programming language. It’s used for specifying the presentation and styling of a document written in a markup language such as HTML or XML.
JavaScript: JavaScript is a computer language that makes your website more interactive.
Bootstrap: Bootstrap is a free front-end framework, to make web development faster and easier.
Read More: Create BMI Calculator Using HTML, CSS, and JavaScript
Features
Here are some features of this project.
Responsive Design: The project is made to be responsive across all platforms using responsive design.
Trailer Playback: Movie and TV program trailers are available for viewing.
Carousel: The design includes a carousel.
Multiple Section: the web pages have multiple sections like trending, Hollywood, Bollywood, and many other
Read More: Random Password Generator Using Python
Netflix Clone Source Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tagss for new branch -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="./landing.css">
<link rel="stylesheet" href="./responsive.css">
<title>Hello, world!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div style="position: relative;">
<!-- header -->
<nav class="navbar navbar-expand-lg netflix-navbar netflix-padding-left netflix-padding-right">
<div class="container-fluid">
<div class="netflix-row">
<div class="left d-flex align-items-center">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="">
</a>
<div class="netflix-nav">
<section>
<button>Home</button>
<button>TV Shows</button>
<button>Movies</button>
<button>News & Popular</button>
<button>My List</button>
</section>
</div>
<div class="netflix-dropdown-box dropdown">
<button class="netflix-dropdown dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Browse
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">TV Shows</a></li>
<li><a class="dropdown-item" href="#">Movies</a></li>
<li><a class="dropdown-item" href="#">News & Popular</a></li>
<li><a class="dropdown-item" href="#">My List</a></li>
</ul>
</div>
</div>
<div class="right d-flex align-items-center">
<i class="bi bi-search"></i>
<i class="bi bi-bell-fill"></i>
<section class="netflix-profile">
</section>
</div>
</div>
</div>
</nav>
<!-- /header -->
<!-- video -->
<div class="">
<section class="netflix-home-video">
<div class="top"></div>
<div class="bottom"></div>
<video src="./video/video.mp4" autoplay muted loop></video>
<div class="content">
<section class="left">
<img src="./images/image2.webp" alt="">
<div class="d-flex mt-2">
<button class="btn btn-light m-2" > <i class="bi bi-play-fill" style="color: black; padding: 0%;"></i> Play Now </button>
<button class="btn btn-secondary m-2"><i class="bi bi-info-circle" style=" padding: 0%;"></i> More Info</button>
</div>
</section>
</div>
</section>
</div>
<!-- video -->
<!-- sliders -->
<div class="slider-box">
<div class="container-fluid slider">
<section class="d-flex justify-content-between margin-right">
<p class="text-white"> <b>Trending</b> </p>
<div class="">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active tab-change-btn" aria-current="true" aria-label="Slide 1"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</section>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" style="position: relative; overflow: visible;">
<div class="carousel-item active">
<section class="d-flex" style="">
<div class="card" >
<img src="./images/trending/img6.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div> <div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex">
<div class="card">
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex" >
<div class="card" >
<img src="./images/trending/img7.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="container-fluid slide2">
<section class="d-flex justify-content-between margin-right margin-title">
<p class="text-white"> <b>Hollywood</b> </p>
<div class="">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active tab-change-btn" aria-current="true" aria-label="Slide 1"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</section>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" style="position: relative; overflow: visible;">
<div class="carousel-item active">
<section class="d-flex" >
<div class="card" >
<img src="./images/trending/img6.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div> <div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex ">
<div class="card">
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex ">
<div class="card" >
<img src="./images/trending/img7.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="container-fluid slide3">
<section class="d-flex justify-content-between margin-right margin-title2">
<p class="text-white"> <b>Bollywood</b> </p>
<div class="">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active tab-change-btn" aria-current="true" aria-label="Slide 1"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button class="tab-change-btn" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</section>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" style="position: relative; overflow: visible;">
<div class="carousel-item active">
<section class="d-flex " >
<div class="card" >
<img src="./images/trending/img6.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div> <div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex">
<div class="card">
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card">
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
<div class="carousel-item">
<section class="d-flex ">
<div class="card" >
<img src="./images/trending/img7.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img3.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img4.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img1.webp" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
<div class="card" >
<img src="./images/trending/img2.jpeg" class="card-img-top" alt="...">
<div class="card-body">
<section class="d-flex justify-content-between">
<div>
<i class="bi bi-play-circle-fill card-icon" ></i>
<i class="bi bi-plus-circle card-icon"></i>
</div>
<div>
<i class="bi bi-arrow-down-circle card-icon"></i>
</div>
</section>
<section class="d-flex align-items-center justify-content-between" >
<p class="netflix-card-text m-0" style="color: rgb(0, 186, 0);">97% match</p>
<span class="m-2 netflix-card-text text-white">Limited Series</span> <span class="border netflix-card-text p-1 text-white">HD</span>
</section>
<span class="netflix-card-text text-white">Provocative • Psychological • Thriller</span>
</div>
</div>
</section>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!-- sliders-end -->
<!-- footer -->
<div class="container footer">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="row">
<div class="col-md-3">
<ul>
<li>Audio and Subtitle</li>
<li>Media Center</li>
<li>Privacy</li>
<li>Contact Us</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>Audio description</li>
<li>Investor Relation</li>
<li>Terms and Conditions</li>
<li>Legal Notices</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>Help Center</li>
<li>Jobs</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>Gift card</li>
<li>Subscription</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 mx-auto">
<div class="row">
<div class="col">
<p class="copy-right">@netflix copyright</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script src="./javaScript.js"></script>
</body>
</html>
Output
Conclusion
In this tutorial, I shared how to build a Netflix clone using HTML, CSS, and JavaScript. We also used the front-end framework Bootstrap to build this project. I hope you enjoyed reading this tutorial and found the information provided on how to build a Netflix Clone helpful.
Written by: The Coding Hubs
Code by: Abhishek Raj
Amazing project. thank for sharing the code