-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpersos.html
136 lines (123 loc) · 8.14 KB
/
persos.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TINTIN</title>
<link rel="stylesheet"
href="projet.css">
<script src="projet.js"> </script>
</head>
<body>
<header>
<div id="en-tete">
<div id="img">
<img src="Images/tintin_milou.png">
</div>
<div id="titre">
<h1>TINTIN</h1>
</div>
<div id="img2">
<img src="Images/tintin_milou.png">
</div>
</div>
<nav>
<ul>
<li id="accueil" onmouseover="couleurChange('accueil', '#F97068')" onmouseout="couleurChange('accueil', '#9E8FAB')"><a href="accueil.html">Accueil</a></li>
<li id="personnages" onmouseover="couleurChange('personnages', '#F97068')" onmouseout="couleurChange('personnages', '#9E8FAB')"><a href="persos.html">Personnages</a></li>
<li id="bd" onmouseover="couleurChange('bd', '#F97068')" onmouseout="couleurChange('bd', '#9E8FAB')"><a href="bd.html">BD</a></li>
<li id="serie_animee" onmouseover="couleurChange('serie_animee', '#F97068')" onmouseout="couleurChange('serie_animee', '#9E8FAB')"><a href="serie_animee.html">Série Animée</a></li>
<li class="dernier" id="film" onmouseover="couleurChange('film', '#F97068')" onmouseout="couleurChange('film', '#9E8FAB')"><a href="film.html">Film</a></li>
</ul>
</nav>
</header>
<a href="#top"><img src ="Images/top.png" id="fleche"/></a>
<main>
<h1><u>LES PERSONNAGES</u> :</h1>
<nav>
<ul>
<li id="c_tintin" onmouseover="couleurChange('c_tintin', '#ffc776')" onmouseout="couleurChange('c_tintin', '#E8E8E8')"><a href="#tintin">Tintin</a></li>
<li id="c_milou" onmouseover="couleurChange('c_milou', '#ffc776')" onmouseout="couleurChange('c_milou', '#E8E8E8')"><a href="#milou">Milou</a></li>
<li id="c_haddock" onmouseover="couleurChange('c_haddock', '#ffc776')" onmouseout="couleurChange('c_haddock', '#E8E8E8')"><a href="#haddock">Le Capitaine Haddock</a></li>
<li id="c_tournesol" onmouseover="couleurChange('c_tournesol', '#ffc776')" onmouseout="couleurChange('c_tournesol', '#E8E8E8')"><a href="#tournesol">Le Professeur Tournesol</a></li>
<li id="c_dupondt" onmouseover="couleurChange('c_dupondt', '#ffc776')" onmouseout="couleurChange('c_dupondt', '#E8E8E8')"><a href="#dupondt">Les Dupondt</a></li>
<li id="c_castafiore" onmouseover="couleurChange('c_castafiore', '#ffc776')" onmouseout="couleurChange('c_castafiore', '#E8E8E8')"><a href="#castafiore">La Castafiore</a></li>
<li id="c_rastapopoulos" onmouseover="couleurChange('c_rastapopoulos', '#ffc776')" onmouseout="couleurChange('c_rastapopoulos', '#E8E8E8')" class="dernier"><a href="#rastapopoulos">Rastapopoulos</a></li>
</ul>
</nav>
<div class="persos">
<a name="tintin"></a><img src="Images/tintin.png">
<div><h2><u>TINTIN</u> :</h2>
Tintin est le personnage principal des différentes œuvres. En réalité, c'est bien plus qu'un personnage, c'est tout un univers !<br>Son âge n'est pas précisement connu, mais on sait qu'il s'agit d'un jeune garçon. Tintin est toujours accompagné de son fidèle compagnon à quatre pattes, <a href="#milou">Milou</a>.<br>Au fil des différentes aventures, Tintin rencontre de plus en plus de personnes avec qui il devient ami, comme <a href="#haddock">le Capitaine Haddock</a>, <a href="#tournesol">le Professeur Tournesol</a>, <a href="#dupondt">Dupond et Dupont</a>, Nestor ou encore <a href="#castafiore">la Castafiore</a>.
</div>
</div>
<div class="persos">
<a name="milou"></a>
<div><h2><u>MILOU</u> :</h2>
Milou est le fidèle compagnon de <a href="#tintin">Tintin</a>. Il s'agit d'un fox - terrier à poil dur d'une blancheur atypique. Il est plutôt du genre pépère mais se sent obligé de suivre son maître dans toutes ses aventures plus folles les une que les autres. Les moines tibétains le surnomme "Neige du matin" dans <a href="serie_animee.html#19"><i>Tintin au Tibet</i></a>.
</div>
<img src="Images/milou.png">
</div>
<div class="persos">
<a name="haddock"></a><img src="Images/haddock.png">
<div><h2><u>LE CAPITAINE HADDOCK</u> :</h2>
Le Capitaine Haddock est certainement le plus aimé des personnages. Son tempérament emporté, ses coups de gueule, ses faiblesses, son côté tantôt maladroit, tantôt courageux font de ce personnage un "véritable cœur qui bat", nous dirons même plus, une palpitation d'âme. Son prénom est Archibald et, après <a href="#milou">Milou</a> bien - sûr, c'est sans conteste le meilleur ami de <a href="#tintin">Tintin</a>. Il fait son apparition dans <a href="serie_animee.html#8"><i>Le Crabe aux Pinces d'Or</i></a> et suivra ensuite <a href="#tintin">Tintin</a> dans toutes ses aventures.
</div>
</div>
<div class="persos">
<a name="tournesol"></a>
<div><h2><u>LE PROFESSEUR TOURNESOL</u> :</h2>
Le Professeur Tournesol est un inventeur de génie, étourdi, sourd (même s'il dit qu'il est simplement un peu dûr d'une oreille), il apparaît pour la première fois dans <a href="serie_animee.html#11"><i>Le Trésor de Rackham Le Rouge</i></a>. Par la suite, il restera présent, particulièrement parce que, à la fin du récit, son argent permet au capitaine Haddock de faire l'acquisition de la demeure de ses ancêtres : le château de Moulinsart. Son prénom est Tryphon.
</div>
<img src="Images/tournesol.png">
</div>
<div class="persos">
<a name="dupondt"></a><img src="Images/dupondt.png">
<div><h2><u>LES DUPONDT</u> :</h2>
Dupond et Dupont sont deux experts en bouleversements, désordres, gaffes, troubles, chamboulements, perturbations, confusions, malentendus et méprises ! Il s'agit en réalité de 2 policiers qui sont certes courageux mais pas téméraires, ils leur arrivent parfois d'avoir peur de leur ombre ou, dans <a href="serie_animee.html#15"><i>Objectif Lune</i></a>, de leur image passée aux rayons X.<br><br><i><u>Petite astuce pour les différencier</u> : Dupon<b>d</b> avec "<b>D</b>" a la moustache taillée <b>d</b>roite, alors que Dupon<b>t</b> avec un "<b>T</b>" a la moustache recourbée vers l'extérieur.</i>
</div>
</div>
<div class="persos">
<a name="castafiore"></a>
<div><h2><u>LA CASTAFIORE</u> :</h2>
Bianca Castafiore est une célèbre cantatrice connue internationalement. Elle fait sa première apparation dans <a href="serie_animee.html#7"><i>Le Sceptre d'Ottokar</i></a> et sera, par la suite, rencontrée de nombreuses fois par <a href="#tintin">Tintin</a> comme beaucoup des autres personnages.
</div>
<img src="Images/castafiore.png">
</div>
<div class="persos">
<a name="rastapopoulos"></a><img src="Images/rastapopoulos.png">
<div><h2><u>RASTAPOPOULOS</u> :</h2>
Génie du mal, Rastapopoulos est un des ennemis de <a href="#tintin">Tintin</a>, il trouve que ce dernier se mêle trop de ce qui ne le regarde pas et veut, par conséquent, le tuer. De son prénom Roberto, il a presque toujours été présent dans <i>Les Aventures de Tintin</i> puisqu'on le trouve déjà dans la 2ème tome, <a href="serie_animee.html#2"><i>Tintin en Amérique</i></a>.
</div>
</div>
</main>
<aside>
<h2>Envoie nous un message !</h2>
<form action="formulaire.php" method="post">
<label for="nom">NOM et Prénom : </label>
<input type="text" name="nom" id="nom" placeholder="NOM Prénom" required size="16"><br><br>
<label for="mail">Email : </label>
<input type="email" name="mail" id="mail" placeholder="[email protected]" required size="16"></br><br>
<label for="objet">Objet : </label>
<select name="objet" id="objet">
<option value="suggestions">Suggestions</option>
<option value="bugs_pbs">Bugs / Problèmes</option>
<option value="avis">Avis</option>
</select>
<br><br>
<label for="message"><div id="msg">Message :</div></label>
<textarea name="message" id="message" placeholder="Votre site est trop bien !" required"></textarea>
<br><br>
<input type="submit" value="Envoyer le message">
<br><br>
<input type="reset" value="Vider les champs">
</form>
</aside>
<footer>
<ul><a href="mailto:[email protected]">Nous contacter</a> |
<a href="cgu.html">Conditions Générales d'Utilisation (CGU)</a> |
<a href="rgpd.html">Mentions Légales</a> |
<a href="pol-conf.html">Politique de Confidentialité</a> |
<a href="sources.html">Sources</a></ul>
</footer>
</body>
</html>