Scribd
Upload
11 views5 pages

HTML

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views5 pages

HTML

Uploaded by

KundiLokesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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