before changing the modal for a bootstrap one

This commit is contained in:
2025-03-06 07:44:17 +01:00
parent 9adc0d0c7c
commit 1d5dad00e3
4 changed files with 287 additions and 0 deletions

194
index2.html Normal file
View File

@@ -0,0 +1,194 @@
<!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>