-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
118 lines (104 loc) · 4.79 KB
/
main.html
File metadata and controls
118 lines (104 loc) · 4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Just Stream It</title>
</head>
<body>
<!-- Panneau de navigation -->
<header id="head">
<h2 id="logo">JustStreamIt</h2>
<nav id="navigation">
<h3 id="home">Accueil</h3>
<h3 id="categories">Catégories</h3>
</nav>
</header>
<!-- Film à l'affiche -->
<div class="category" id="topmovie">
<img id="image" src="#" alt ="Hopeful Notes">
<h3 id="title"></h3>
<button class="more-button" id="play-button">Play</button>
<p id="description"></p>
</div>
<!-- Films les mieux notés -->
<h2 class="category-title">Films les mieux notés</h2>
<div class="category" id="best-category">
<button data-track-previous="#trackZero" class="change-button Previous"><i class="material-icons">chevron_left</i></button>
<div class="slideshow-container">
<div class="track" id="trackZero">
<img class="movie-poster" id="1" src="#" alt="Suvarna Sundari">
<img class="movie-poster" id="2" src="#" alt="Vaarthakal Ithuvare">
<img class="movie-poster" id="3" src="#" alt="Notuku Poku">
<img class="movie-poster" id="4" src="#" alt="Lejos de Casa">
<img class="movie-poster" id="5" src="#" alt="Isha">
<img class="movie-poster" id="6" src="#" alt="Love in Kilnerry">
<img class="movie-poster" id="7" src="#" alt="Le ali della libertà">
</div>
</div>
<button data-track-next="#trackZero" class="change-button Next"><i class="material-icons">chevron_right</i></button>
</div>
<!-- Categorie 1 -->
<h2 class="category-title">Animation</h2>
<div class="category" id="animation-category">
<button data-track-previous="#trackOne" class="change-button Previous"><i class="material-icons">chevron_left</i></button>
<div class="slideshow-container">
<div class="track" id="trackOne">
<img class="movie-poster" id="8" src="#" alt="Ramayana">
<img class="movie-poster" id="9" src="#" alt="Leera the Soulmate">
<img class="movie-poster" id="10" src="#" alt="Precure Miracle Universe Movie">
<img class="movie-poster" id="11" src="#" alt="Mushi-Shi Zoku Shou: Suzu no Shizuku">
<img class="movie-poster" id="12" src="#" alt="Ejen Ali the Movie">
<img class="movie-poster" id="13" src="#" alt="Joe Finds Grace">
<img class="movie-poster" id="14" src="#" alt="La città incantata">
</div>
</div>
<button data-track-next="#trackOne" class="change-button Next"><i class="material-icons">chevron_right</i></button>
</div>
<!-- Categorie 2 -->
<h2 class="category-title">Comédie</h2>
<div class="category" id="comedy-category">
<button data-track-previous="#trackTwo" class="change-button Previous"><i class="material-icons">chevron_left</i></button>
<div class="slideshow-container">
<div class="track" id="trackTwo">
<img class="movie-poster" id="15" src="#" alt="Vaarthakal Ithuvare">
<img class="movie-poster" id="16" src="#" alt="Love in Kilnerry">
<img class="movie-poster" id="17" src="#" alt="Hababam Sinifi">
<img class="movie-poster" id="18" src="#" alt="The Moving on Phase">
<img class="movie-poster" id="19" src="#" alt="The Best Years">
<img class="movie-poster" id="20" src="#" alt="Maya Bazaar">
<img class="movie-poster" id="21" src="#" alt="Innocent">
</div>
</div>
<button data-track-next="#trackTwo" class="change-button Next"><i class="material-icons">chevron_right</i></button>
</div>
<!-- Categorie 3 -->
<h2 class="category-title">Crime</h2>
<div class="category" id="crime-category">
<button data-track-previous="#trackThree" class="change-button Previous"><i class="material-icons">chevron_left</i></button>
<div class="slideshow-container">
<div class="track" id="trackThree">
<img class="movie-poster" id="22" src="#" alt="Il padrino">
<img class="movie-poster" id="23" src="#" alt="The Best Years">
<img class="movie-poster" id="24" src="#" alt ="Aynabaji">
<img class="movie-poster" id="25" src="#" alt="La parola ai giurati">
<img class="movie-poster" id="26" src="#" alt="Il padrino - Parte II">
<img class="movie-poster" id="27" src="#" alt="Il cavaliere oscuro">
<img class="movie-poster" id="28" src="#" alt="Pulp Fiction">
</div>
</div>
<button data-track-next="#trackThree" class="change-button Next"><i class="material-icons">chevron_right</i></button>
</div>
<!-- Modal window -->
<div id="modal" class="modal">
<div class="modal-content">
<span id="close-button">×</span>
<img id="modal-picture" src="#" alt="affiche du film">
<h2 id="modal-title"></h2>
<p id="modal-paragraph"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>