195 lines
5.2 KiB
HTML
195 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>JustStreamIt</title>
|
|
<link href="style.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body>
|
|
<center>
|
|
<header>
|
|
<div class="container banniere">
|
|
<img alt="logo" title="logo" src=logo.png>
|
|
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<h2> Meilleur film </h2>
|
|
|
|
<div class="container-lg best-film">
|
|
<div class="affiche">
|
|
<img src=https://picsum.photos/seed/picsum/200/300 alt="film cover" >
|
|
</div>
|
|
<div class="title">
|
|
<h2> film </h2>
|
|
</div>
|
|
<div class="description">
|
|
Lorem ipsum odor amet, consectetuer adipiscing elit. Tempus non pellentesque bibendum eu sapien litora neque tortor.
|
|
Volutpat diam himenaeos risus vitae congue hendrerit elit. Porttitor semper leo pretium mattis bibendum consequat. Tincidunt tincidunt cursus eget aenean senectus pretium consectetur cubilia senectus. Rutrum ex fermentum consectetur parturient ornare. Quam amet maximus potenti ac in penatibus hendrerit lacus. Duis neque non at dictum ligula nullam amet orci. Consequat lectus consequat morbi dis suscipit ridiculus ultricies.
|
|
</div>
|
|
<div class="film_detail">
|
|
<button class="detail">Details</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2> Mystery </h2>
|
|
<div class="conteneur">
|
|
|
|
<div class="col">
|
|
<div class="col-hover">
|
|
<p class="titre">Film1</p>
|
|
<p class="button">Détail</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Film 2</h3>
|
|
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Film 3</h3>
|
|
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Film 4</h3>
|
|
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
|
<div class="col">
|
|
<h3>Film 5</h3>
|
|
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<h3>Film 6</h3>
|
|
<p><img title="Truc" alt="machin" src="https://picsum.photos/150/150?grayscale"</p>
|
|
<p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class=category>
|
|
<h2> Category2 </h2>
|
|
<p>
|
|
<ul>
|
|
<div>Film 1
|
|
</div>
|
|
|
|
<div>
|
|
Film 2
|
|
</div>
|
|
<div>
|
|
Film 3
|
|
</div>
|
|
<div>
|
|
Film 4
|
|
</div>
|
|
<div>
|
|
Film 5
|
|
</div>
|
|
<div>
|
|
Film 6
|
|
</div>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
<div class=category>
|
|
<h2> Category2 </h2>
|
|
<p>
|
|
<ul>
|
|
<div>Film 1
|
|
</div>
|
|
|
|
<div>
|
|
Film 2
|
|
</div>
|
|
<div>
|
|
Film 3
|
|
</div>
|
|
<div>
|
|
Film 4
|
|
</div>
|
|
<div>
|
|
Film 5
|
|
</div>
|
|
<div>
|
|
Film 6
|
|
</div>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
|
|
<div class=categorie_other>
|
|
<h2> Other </h2>
|
|
<div class=category>
|
|
<ul>
|
|
<div>Film 1
|
|
</div>
|
|
|
|
<div>
|
|
Film 2
|
|
</div>
|
|
<div>
|
|
Film 3
|
|
</div>
|
|
<div>
|
|
Film 4
|
|
</div>
|
|
<div>
|
|
Film 5
|
|
</div>
|
|
<div>
|
|
Film 6
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class=category>
|
|
<h2> Category </h2>
|
|
|
|
<label for="category-select">Category</label>
|
|
|
|
<select name="category" id="category-select">
|
|
<option value="Action">Action</option>
|
|
<option value="Adult">Adult</option>
|
|
<option value="Adventure">Adventure</option>
|
|
<option value="Animation">Animation</option>
|
|
<option value="Biography">Biography</option>
|
|
<option value="Comedy">Comedy</option>
|
|
<option value="Crime">Crime</option>
|
|
<option value="Documentary">Documentary</option>
|
|
<option value="Drama">Drama</option>
|
|
<option value="Family">Family</option>
|
|
<option value="Fantasy">Fantasy</option>
|
|
<option value="Film-Noir">Film-Noir</option>
|
|
<option value="History">History</option>
|
|
<option value="Horror">Horror</option>
|
|
<option value="Music">Music</option>
|
|
<option value="Musical">Musical</option>
|
|
<option value="Mystery">Mystery</option>
|
|
<option value="News">News</option>
|
|
<option value="Reality-TV">Reality-TV</option>
|
|
<option value="Romance">Romance</option>
|
|
<option value="Sci-Fi">Sci-Fi</option>
|
|
<option value="Sport">Sport</option>
|
|
<option value="Thriller">Thriller</option>
|
|
<option value="War">War</option>
|
|
<option value="Western">Western</option>
|
|
|
|
</select>
|
|
</center>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|