modal ok, category blocks ok, before changing best block
This commit is contained in:
243
index2.html
243
index2.html
@@ -4,191 +4,92 @@
|
||||
<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>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.square {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background-color: lightgray;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 10rem;
|
||||
height: 8rem;
|
||||
width: 90%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-y: 1rem;
|
||||
margin: 0.1rem;
|
||||
|
||||
}
|
||||
</style>
|
||||
</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 class="container text-bg-secondary shadow rounded-4 p-3 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<img alt="logo" title="logo" src="logo.png" class="img-fluid">
|
||||
</div>
|
||||
<div class="col align-self-center d-none d-sm-block ms-5">
|
||||
<h1 color="white" text-align="center"> Vidéos à la demande </h1>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- best film -->
|
||||
<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 class="container mt-5">
|
||||
<h2> Meilleur film </h2></div>
|
||||
<div class="container border border-black border-4 mt-1">
|
||||
<div class="row" id="bestFilm">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- best note -->
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h2>Best rated</h2>
|
||||
<div class="row" id="bestRated">
|
||||
<!-- square block model-->
|
||||
</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>
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<h2>Mystery</h2>
|
||||
<div class="row" id="mystery">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
</div>
|
||||
<div class=category>
|
||||
<h2> Category </h2>
|
||||
</section>
|
||||
|
||||
<label for="category-select">Category</label>
|
||||
<section class="py-5">
|
||||
<div class="container">
|
||||
<div id="menu">
|
||||
<label for="category-select" class="fs-2">Autres : </label>
|
||||
<select name="category" id="category-select">
|
||||
<option selected id="selected">Category</option>
|
||||
<!-- getCategory() to fill the options -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="row" id="other">
|
||||
<!-- square block model-->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<script src="test2.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user