-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (214 loc) · 11.8 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Presentation serie</title>
</head>
<body>
<header>
<nav>
<ul>
<li class="deroule">
<img src="img/menu.png" alt="menu">
<ul class="sous">
<li><a href="index.html">Présentation de la série</a></li>
<li><a href="pres_saisons.html">Présentations des saisons</a></li>
<li><a href="detail_saisons_1.html">Detail saisons</a></li>
<li><a href="avis_critique.html">Avis et Critiques</a></li>
<li><a href="backstage.html">Info backstage</a></li>
</ul>
</li>
</ul>
</nav>
<a href="index.html">
<img title="logo" src="img/logo.png" alt="logo" >
</a>
<div class="div1header">
<h1 class="h1blanc">TABAS'KHO</h1>
<ul class="ulheader">
<li><a class="pheader actuel" href="index.html">Présentation de la série</a></li>
<li><a class="pheader" href="pres_saisons.html">Présentations des saisons</a></li>
<li><a class="pheader" href="detail_saisons_1.html">Detail saisons</a></li>
<li><a class="pheader" href="avis_critique.html">Avis et Critiques</a></li>
<li><a class="pheader" href="backstage.html">Info backstage</a></li>
</ul>
</div>
<div class="div2header">
<img width="90px" height="86px" title="connexion" src="img/connexion.png" alt="connexion">
<a class="pheader" href="">Connexion</a>
</div>
</header>
<main>
<article>
<h2 class="h2bleue">Résumé</h2>
<article class="articleflex">
<img title="Black-Mirror" src="img/Black-Mirror.png" alt="BM">
<p class="pbleue">Black Mirror, série de Science fiction britannique créée par Charlie Brooker et disponible sur Netflix, est une satire des nouvelles technologies dans nos sociétés contemporaines, guidées par les innovations et les écrans.</p>
</article>
</article>
<article class="articleflex">
<div>
<h3>Spectateurs</h3>
<div class="divnote">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star1">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star2">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star3">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star4">
<img class ="etoile" title="etoile" src="img/Star_black.png" alt="star5">
<p>4/5</p>
</div>
<p class="p_min">1234 notes des utilisateurs</p>
</div>
<div>
<h3>Presse</h3>
<div class="divnote">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star1">
<img class ="etoile"title="etoile" src="img/Star_white.png" alt="star2">
<img class ="etoile" title="etoile" src="img/Star_white.png" alt="star3">
<img class ="etoile" title="etoile" src="img/Star_black.png" alt="star4">
<img class ="etoile" title="etoile" src="img/Star_black.png" alt="star5">
<p>3/5</p>
</div>
<p class="p_min">69 avis de la presse</p>
</div>
</article>
<article class="articledegrade">
<article class="articleflex">
<div>
<h2 class="h2blanc">Synopsis</h2>
<p class="pblanc">Selon Charlie Brooker, chaque épisode a un casting, un décor et une réalité différente (impossible d’avoir donc un synopsis de la serie), mais ils traitent de la façon dont nous vivons maintenant et de la façon dont nous pourrions vivre dans dix minutes si nous commettions une erreur.</p>
</div>
<div>
<video controls width="600" height="400" type="video/mp4" src="video/Bande annonce.mp4" class="index_video">
<p>
Le navigateur ne supporte pas la balise video
</p>
</video>
<p class="p_min">Bande annonce Netflix</p>
</div>
</article>
<article>
<h2 class="h2blanc">Mots-clés</h2>
<ul>
<li>Dystopique</li>
<li>Réflexive</li>
<li>Satirique</li>
<li>Inquiétante</li>
</ul>
</article>
<article>
<h2 class="h2blanc">Informations</h2>
<div class="block-total">
<div>
<h3>Sortie : 4 décembre 2011</h3>
<p class="pblock">La serie a fait ses débuts le 4 décembre 2011 au Royaume-Uni. La série a rapidement gagné en popularité grace a ses récits dystopiques explorant les implications sombre de la technologie sur la société.</p>
</div>
<div>
<h3>Saison : 6 Saison</h3>
<p class="pblock">Chaque saison de Black Mirror offre une plongée fascinante dans un futur potentiellement sinistre, explorant les relations humaines, la surveillance, et les implications psychologiques et éthiques de la technologie contemporaine.</p>
</div>
<div>
<h3>Format de Lecture</h3>
<p class="pblock">Toute les saisons de Black Mirror sont retrouvables sur Netflix sous plusieurs format de lecture :</p>
<p class="pblock">4K</p>
<p class="pblock">1080p</p>
<p class="pblock">720p</p>
</div>
<div>
<h3>Auteur : Charlie Brooker</h3>
<img src="img/Charlie.png" title="Charlie Brooker" alt="charlie">
<p class="pblock">Charlie Brooker (né le 3 mars 1971), est un journaliste, scénariste et animateur britannique.</p>
</div>
<div>
<h3>Limite d’age : 16+</h3>
<p class="pblock">En raison de sont contenu mature et de ses thèmes parfois perturbants, la série est recommandée pour un public averti et mature, elle est donc deconseillé au moins de 16 ans .</p>
</div>
</div>
</article>
</article>
<article>
<h2 class="h2bleue">Acteur Principaux</h2>
<p class="pbleue">La serie ayant des episodes independants, elle ne possede pas d’acteur principaux. Voici donc les acteurs les plus connu ayant jouer dans la serie.</p>
<article class="articleflex wrap">
<figure>
<img src="img/Salma Hayek.png" alt="Salma" title="Salma Hayek">
<figcaption class="pblock">Salma Hayek</figcaption>
</figure>
<figure>
<img src="img/Aaron Paul.png" alt="Aaron" title="Aaron Paul">
<figcaption class="pblock">Aaron Paul</figcaption>
</figure>
<figure>
<img src="img/Alex Lawther.png" alt="Alex" title="Alex Lawther">
<figcaption class="pblock">Alex Lawther</figcaption>
</figure>
<figure>
<img src="img/Anthony mackie.png" alt="Anthony" title="Anthony mackie">
<figcaption class="pblock">Anthony mackie</figcaption>
</figure>
</article>
</article>
<article>
<h2 class="h2bleue">Prix et Recompense</h2>
<p class="pbleue">La serie a reçu 4 prix et a été nominée 6 fois</p>
<article class="articleflex wrap">
<figure>
<img src="img/Group 1.png" alt="Emmy awards" title="Emmy awards">
<figcaption>
<h3>Emmy awards</h3>
<p class="p_min">3 nominations et 3 prix </p>
</figcaption>
</figure>
<figure>
<img src="img/Group 2.png" alt="Les globes" title="Les globes">
<figcaption>
<h3>Les Globes</h3>
<p class="p_min">1 nomination </p>
</figcaption>
</figure>
<figure>
<img src="img/Group 3.png" alt="Producers guild of America" title="Producers guild of America">
<figcaption>
<h3>Producers guild of America</h3>
<p class="p_min">1 nomination et 1 prix </p>
</figcaption>
</figure>
<figure>
<img src="img/Group 4.png" alt="Screen actors guild Awards" title="Screen actors guild Awards">
<figcaption>
<h3>Screen actors guild Awards</h3>
<p class="p_min">1 nomination </p>
</figcaption>
</figure>
</article>
</article>
</main>
<footer>
<div class="image-centre">
<img src="img/logo.png" alt="Logo tabas'KHO" width="191px" height="191px">
</div>
<div>
<p>Site web réalisé par l’équipe A11 <br>Nous contacter :</p>
<p></p>
<table>
<tr>
<th>Liam</th>
<th>Piel</th>
<th>Matthieu</th>
<th>Kylian</th>
<th>Thibault</th>
</tr>
<tr>
<th><a href="mailto:[email protected]"> <img src="img/email-svgrepo-com.webp" width="45px" height="45px"> </a ></th>
<th><a href="mailto:[email protected]"> <img src="img/email-svgrepo-com.webp" width="45px" height="45px"> </a ></th>
<th><a href="mailto:[email protected]"> <img src="img/email-svgrepo-com.webp" width="45px" height="45px"> </a ></th>
<th><a href="mailto:[email protected]"> <img src="img/email-svgrepo-com.webp" width="45px" height="45px"> </a ></th>
<th><a href="mailto:[email protected]"> <img src="img/email-svgrepo-com.webp" width="45px" height="45px"> </a ></th>
</tr>
</table>
</div>
</footer>
</body>
</html>