Scribd
Upload
10 views

HTML

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

HTML

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/svg+xml" href="./images/shanmugam_ico.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Disney+ Clone by SHANMUGAM</title>
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="" />
<ul class="nav-links">
<li class="nav-items"><a href="#">TV</a></li>
<li class="nav-items"><a href="#">Movies</a></li>
<li class="nav-items"><a href="#">Sports</a></li>
<li class="nav-items"><a href="#">Premium</a></li>
</ul>

<div class="right-container">
<input type="text" class="search-box" placeholder="Search" />
<button class="sub-btn">Subscribe</button>
<a href="#" class="login-link">Login</a>
</div>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
</nav>

<div class="video-card-container">
<div class="video-card">
<img src="images/disney.PNG" class="video-card-image" alt="" />
<video src="videos/disney.mp4" mute loop class="card-video"></video>
</div>

<div class="video-card">
<img src="images/pixar.PNG" class="video-card-image" alt="" />
<video src="videos/pixar.mp4" mute loop class="card-video"></video>
</div>

<div class="video-card">
<img src="images/marvel.PNG" class="video-card-image" alt="" />
<video src="videos/marvel.mp4" mute loop class="card-video"></video>
</div>

<div class="video-card">
<img src="images/star-wars.PNG" class="video-card-image" alt="" />
<video src="videos/star-war.mp4" mute loop class="card-video"></video>
</div>

<div class="video-card">
<img src="images/geographic.PNG" class="video-card-image" alt="" />
<video src="videos/geographic.mp4" mute loop class="card-video"></video>
</div>
</div>
<h1 class="title">recommended for you</h1>
<div class="movies-list">
<button class="pre-btn"><img src="images/pre.png" alt="" /></button>
<button class="nxt-btn"><img src="images/nxt.png" alt="" /></button>
<div class="card-container">
<div class="card">
<img src="images/poster 1.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 2.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 3.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 4.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 5.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 6.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>
<div class="card">
<img src="images/poster 7.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>
</div>
</div>

<!-- Popular Shows -->

<h1 class="title">Popular Shows</h1>


<div class="movies-list">
<button type="button" class="pre-btn">
<img src="images/pre.png" alt="" />
</button>
<button type="button" class="nxt-btn">
<img src="images/nxt.png" alt="" />
</button>
<div class="card-container">
<div class="card">
<img src="images/poster 11.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 9.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 8.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 7.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 6.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 6.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 5.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>
</div>
</div>

<!-- New Releases -->


<h1 class="title">New Releases</h1>
<div class="movies-list">
<button class="pre-btn"><img src="images/pre.png" alt="" /></button>
<button class="nxt-btn"><img src="images/nxt.png" alt="" /></button>
<div class="card-container">
<div class="card">
<img src="images/poster 12.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 6.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 2.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 10.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 4.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 8.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>

<div class="card">
<img src="images/poster 4.png" alt="" class="card-img" />
<div class="card-body">
<h2 class="name">movie name</h2>
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
<button class="watchlist-btn">add to watchlist</button>
</div>
</div>
</div>
</div>

<script src="data.js"></script>
<script src="app.js"></script>
</body>
</html>

You might also like