ajout du rendue de WEB

Web/tp/tpfinal/CSS/Impression.css

@@ -0,0 +1,14 @@
+@media print {
+    body 
+    {
+        font-size: 13px;
+    }
+    header
+    {
+        display: none;
+    }
+    footer 
+    {
+        display: none;
+    }
+}

Web/tp/tpfinal/CSS/PageAcceuil.css

@@ -0,0 +1,109 @@
+/*  Presentation    */
+
+#Presentation
+{
+    display: flex;
+    align-items: center;
+    height: 355px;
+    flex-flow: column wrap;
+    margin: 3em;
+}
+
+p
+{
+    display: block;
+    text-align: justify;
+    margin: 1.5em;
+}
+
+#Presentation:active
+{
+    color: red;
+}
+
+/*  Actus   */
+
+.DivActus
+{
+    display: flex;
+    flex-flow: row nowrap;
+    height: 230px;
+    margin: 1.5em;
+    border: 1px solid black;
+    box-shadow: 10px 10px 5px #001534;
+}
+
+.text
+{
+    background-color: #001534;
+    color: white;
+
+}
+
+.ImagesActus
+{
+    display: block;
+    float: left;
+    height: 230px;
+    
+}
+
+h2
+{
+    padding: 20px;
+    text-align: center;
+
+}
+
+#Titre
+{
+    text-align: center;
+    text-decoration: underline;
+    color: red;
+}
+
+.voirplus
+{
+    color: red;
+    text-decoration: none;
+}
+
+.voirplus:visited
+{
+    color:blueviolet;
+}
+
+/*  Reseaux */
+
+.reseaux
+{
+    width: 30px;
+    margin: 0.3em;
+}
+
+#reseaux
+{
+    display: flex;
+    position: fixed;
+    right: 20px;
+    top: 100px;
+    flex-flow: column nowrap;
+}
+
+/*  Aside   */
+
+ul
+{
+    margin-top: 100px;
+    text-align: center;
+    list-style-type: none;
+}
+
+aside
+{
+    background:linear-gradient(rgb(233, 255, 30), orange);
+    float: right;
+    width: 20%;
+    height: 400px;
+    border: solid black 1px;
+}

Web/tp/tpfinal/CSS/PageConditions.css

@@ -0,0 +1,22 @@
+body
+{
+    background-color: blue;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+}
+
+h1
+{
+    color: red;
+}
+
+p
+{
+    color: yellow;
+}
+
+p:hover
+{
+    color: gold;
+}

Web/tp/tpfinal/CSS/PageFormulaire.css

@@ -0,0 +1,35 @@
+form
+{
+	background-color: #ffdab9;
+	display: flex;
+	flex-flow: column wrap;
+	align-items: center;
+	justify-content: center;
+}
+
+#Nom
+{
+	margin: 10px;
+	margin-top: 10%;
+}
+
+#date
+{
+	margin: 10px;
+}
+
+#Sexe
+{
+	margin: 10px;
+}
+
+#Raison
+{
+	margin: 10px;
+}
+
+#Conditions
+{
+	margin: 10px;
+	margin-bottom: 40%;
+}

Web/tp/tpfinal/CSS/PageImages.css

@@ -0,0 +1,34 @@
+#Images
+{
+	background: linear-gradient(#e66465, #9198e5);
+    display: flex;
+    flex-flow: row wrap;
+    align-items:center;
+    justify-content: space-around;    
+}
+
+.FormeImage
+{
+	width: 20em;
+	height: auto;
+	margin: 10px;
+	border-radius: 2em;
+}
+img.FormeImage
+{
+	/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
+	-webkit-transition: all 0.75s ease; /* Safari et Chrome */
+	-moz-transition: all 0.75s ease; /* Firefox */
+	-ms-transition: all 0.75s ease; /* Internet Explorer 9 */
+	-o-transition: all 0.75s ease; /* Opera */
+	transition: all 0.75s ease;
+}
+img.FormeImage:hover
+{
+	/* L'image est grossie de 25% */
+	-webkit-transform:scale(1.25); /* Safari et Chrome */
+	-moz-transform:scale(1.25); /* Firefox */
+	-ms-transform:scale(1.25); /* Internet Explorer 9 */
+	-o-transform:scale(1.25); /* Opera */
+	transform:scale(1.25);
+}

Web/tp/tpfinal/CSS/PageVideo.css

@@ -0,0 +1,14 @@
+.DivVideo
+{
+	background-color: #ffdab9;
+	display: flex;
+	align-items: center;
+	flex-flow: row wrap;
+	justify-content: space-around;
+}
+.Videos
+{
+	width: 38em;
+	height: 20em;
+	margin: 10px;
+}

Web/tp/tpfinal/CSS/Style.css

@@ -0,0 +1,54 @@
+header
+{
+	background-color: rgba(0, 17.6, 45.5, 0.7);
+}
+
+body{
+	margin: 0px;
+	font-family: 'Roboto', sans-serif;
+	font-family: 'Roboto Condensed', sans-serif;
+	font-family: 'Open Sans', sans-serif;
+	font-size: medium;
+}
+
+a{
+	text-decoration: none;
+	color: black;
+}
+
+a:visited
+{
+	color: rgb(48, 47, 47);
+}
+
+nav
+{
+	display: flex;
+	align-items: center;
+	flex-flow: row nowrap;
+	justify-content: space-around;
+}
+
+.PPIHC
+{
+	width: 12%;
+}
+
+#PPIHC
+{
+	width: 100%;
+	height: 100%;
+}
+
+footer
+{
+	background-color: rgba(0, 17.6, 45.5, 0.7);
+}
+
+#contact
+{
+	display: flex;
+	align-items: center;
+	flex-flow: row-reverse nowrap;
+	justify-content:space-around;
+}

Web/tp/tpfinal/CSS/pageActualites.css

@@ -0,0 +1,35 @@
+.DivActus
+{
+    display: flex;
+    flex-flow: row nowrap;
+    height: 220px;
+    margin: 1.5em;
+    border: 1px solid black;
+    box-shadow: -10px -5px 5px #001534;
+}
+
+.text
+{
+    background-color: #001534;
+    color: white;
+}
+
+.ImagesActus
+{
+    display: block;
+    float: left;
+    height: 220px;
+}
+
+h2
+{
+    padding: 4px;
+    text-align: center;
+}
+
+p
+{
+    display: block;
+    text-align: justify;
+    margin: 1.5em;
+}

Web/tp/tpfinal/CSS/pageTableaux.css

@@ -0,0 +1,59 @@
+.Tableaux
+{
+	background-color: #ffdab9;
+	display: flex;
+	align-items: center;
+	flex-flow: column wrap;
+	justify-content: space-around;
+	padding: 15px;
+}
+
+.drapeaux
+{
+	width: 25px;
+	border: 1px solid black;
+}
+
+table
+{
+	background-color: white;
+	border-width:1px; 
+	border-style:solid; 
+	border-collapse: collapse;
+	border-color:black;
+}
+
+h1
+{
+	text-align: center;
+	color: red;
+	text-decoration: underline;
+}
+
+.headerTbl
+{
+	background-color: rgba(0, 17.6, 45.5, 0.7);
+}
+
+.top1
+{
+	background-color: #e97640;
+}
+
+td
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:red;
+}
+
+.rien
+{
+	text-align: center;
+}
+
+caption
+{
+	padding: 5px;
+	caption-side: top;
+}

Web/tp/tpfinal/PageAcceuil.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/PageAcceuil.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;1,400&family=Roboto&family=Roboto+Condensed:ital@0;1&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+  <aside>
+    <ul>
+      <h1>Liens utiles</h1><br/>
+      <li><a href="https://fr.wikipedia.org/wiki/Pikes_Peak_International_Hill_Climb">Wikipedia</a></li>
+      <li><a href="https://ppihc.org/">PPIHC</a></li>
+      <li><a href="https://benzin.fr/articles/show/pikes0peak0la0folie0des0hauteurs0top0des0voitures0de0lintertionnal0hillclimb-5e9da0aaab11a">Benzin</a></li>
+      <li><a href="https://www.dailymotion.com/video/xxver">Climb Dance</a></li>
+    </ul>
+  </aside>
+  <div id="reseaux">
+    <a href="https://fr-fr.facebook.com/" target="_blank"><img src="Medias/Images/Facebook.png" class="reseaux"/></a>
+    <a href="https://twitter.com/?lang=fr" target="_blank"><img src="Medias/Images/Twitter.png" class="reseaux"/></a>
+    <a href="https://www.instagram.com/?hl=fr" target="_blank"><img src="Medias/Images/Instagram.png" class="reseaux"/></a>
+  </div>
+  <div id="Presentation">
+      <h1 class="PikesPeak">Le Pikes Peak International Hill Climb c'est quoi ?</h1>
+      <p id="text_cache">Le <strong>Pikes Peak International Hill Climb</strong> ou Course de côte du Pic Pikes, est une course de côte, qui se tient sur la montagne de Pikes Peak, aux États-Unis, tous les ans en été. En 1915, l'aménagement d'une route vers le sommet fut entrepris, et un an plus tard, les 10, 11, et 12 août 1916, la première Pikes Peak Hill Climb fut organisée à l'initiative de Spencer Penrose, le propriétaire d'un hôtel qui avait financé l'aménagement de la route. <br/>C'est la troisième plus ancienne course automobile officielle encore active aux États-Unis, après la Course de côte du Mont Washington (1904), et les 500 miles d'Indianapolis (dont la première épreuve a eu lieu en 1911).</p>
+  </div>
+  <h1 id="Titre">Dernières Actus</h1>
+  <div id="Actus">
+    <div class="DivActus">
+      <img src="Medias/Images/405T16.jpg" class="ImagesActus">
+      <div class="text">
+        <h2>Il y a plus de 30 ans, Ari Vattanen domptait les Pikes Peak</h2>
+        <p>En 1988, Peugeot Sport vient pour la première fois défier la montée vers les nuages de Pikes Peak. Victoire au général, record d'Audi battu, et un film devenu mythique "climb dance" qui montre ... <a href="pageActualites.html" class="voirplus">Voir Plus</a></p>
+      </div>
+    </div>
+    <div class="DivActus">
+      <img src="Medias/Images/vw-id-r-pikes-peak-test.jpg" class="ImagesActus">
+      <div class="text">
+        <h2>2018, l'année du dernier record</h2>
+        <p>L'édition 2018 est à nouveau gagnée par une voiture électrique, en l'occurrence une Volkswagen I.D. R pilotée par Romain Dumas. Avec un temps de 7 min 57 s 148, le précédent record absolu est battu et c'est la première fois que l'épreuve connaît un temps inférieur à ... <a href="pageActualites.html" class="voirplus">Voir Plus</a></p>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/PageConditions.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/PageConditions.css">
+</head>
+<body>
+  <h1>C'est faux, <strong>aucunes conditions</strong> sont présentes ici</h1>
+  <p>Vous êtes désormais coincés sur cette page !!!</p>
+</body>
+</html> 

Web/tp/tpfinal/PageFormulaire.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/PageFormulaire.css">
+</head>
+
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+  <form method="post" action="PageFormulaire.php">
+    <div id="Nom">
+      <input type="text" name="Nom" placeholder="Nom" minlength="3" required/>
+      <input type="text" name="Prenom" placeholder="Prenom"/>
+    </div>
+    <input type="email" name="email" placeholder="email" required/>
+    <div id="date">
+      <label for="date">Date de votre demande :</label>
+      <input type="date" name="date" value="2022-08-08"/>
+    </div>
+    <div id="Sexe">
+      <label for="sexe">Sexe :</label>
+        <input type="radio" name="sexe" value="homme"/>Homme
+        <input type="radio" name="sexe" value="femme"/>Femme
+        <input type="radio" name="sexe" value="autre"/>Autres
+    </div> 
+    <div id="Raison">
+      <label for="raison">Raison de votre demande :</label>
+        <select name="raison" id="raison">
+          <optgroup label="Problème technique">
+            <option value="Pbt">Problème d'images</option>
+            <option value="Pbt">Problème de texte</option>
+            <option value="Pbt">Problème de forme</option>
+            <option value="Pbt">Données éronnées</option>
+          </optgroup>
+          <optgroup label="Autres">
+            <option value="Autres">Demande d'information</option>
+            <option value="Autres">Suggestions</option>
+          </optgroup>
+        </select>
+    </div>
+    <textarea name="message" placeholder="message" rows="10" cols="50"></textarea>
+    <div id="Conditions">
+      <input type="checkbox" name="conditions" placeholder="conditions d'utilisations"/>
+      <label for="conditions"><a title="Hello" href="PageConditions.html">Conditions d'utilisations</a></label>
+      <input type="submit" name="submittp7" value="Envoyer" />
+    </div>
+  </form>
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/PageFormulaire.php

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+</head>
+
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+
+Bonjour, 
+<?php
+    
+    $nom = $_POST['Nom'];
+    $prenom = $_POST['Prenom'];
+    $email = $_POST['email'];
+    $raison = $_POST['raison'];
+    $sexe = $_POST['sexe'];
+    $date = $_POST['date'];
+    $message = $_POST['message'];
+    $check = $_POST['conditions'];
+    
+    echo $nom;
+    
+    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
+      echo("<br>$email is a valid email address<br>");
+    } else {
+      echo("<br>$email is not a valid email address<br>");
+    }
+    if(empty($nom) || strlen($nom) <2 || strlen($nom) > 20)
+    {
+        echo '<br>Le nom doit être renseigné<br>';
+    }
+    if(empty($prenom) || strlen($prenom) <2 || strlen($prenom) > 20)
+    {
+        echo '<br>Le prénom doit être renseigné ou est pas de la bonne taille (compris entre 2 et 20)<br>';
+    }
+    if(empty($raison))
+    {
+        echo '<br>La raison doit être renseignée<br>';
+    }
+    if(empty($sexe))
+    {
+        echo '<br>Le sexe doit être renseigné<br>';
+    }
+    if(empty($message))
+    {
+        echo '<br>Le message doit être renseigné<br>';
+    }
+    if(empty($check))
+    {
+        echo '<br>Les conditions doivent être cochées<br>';
+    }
+?>.
+
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/PageImages.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/PageImages.css">
+</head>
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html" title="Actus">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+  <div id="Images">
+    <a href="pageTableaux.html" title="Ari Vattanen"><img src="Medias/Images/AriVatanen.jpg" alt="Image : Ari Vattanen à bord de sa Peugeot 405 T16" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Volkswagen IDR"><img src="Medias/Images/vkwIDR.png" alt="Image : Wolkvagen I.D.R de Romain Dumas" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Romain Dumas"><img src="Medias/Images/RomainDumas.jpg" alt="Image : Romain Dumas" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="logo Pikes Peak Hill Climb Racing"><img src="Medias/Images/PPIHC.png" alt="Image : logo des Pikes Peak International Hill Climb" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Peugeot 206 T16"><img src="Medias/Images/206T16_1.jpg" alt="Image : Peugeot 206 T16 de Sebastien Loeb" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Peugeot 206 T16"><img src="Medias/Images/206T16_3.jpg" alt="Image : Peugeot 206 T16 de Sebastien Loeb" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Lamborghini Urus"><img src="Medias/Images/pikes_peak_corpo2_m.jpg" alt="Image : Lamborghini Urus" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Porsche 911"><img src="Medias/Images/porsche.jpg" alt="Image : Porsche 911 Hoonipigasus de Ken Block" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Suzuki Escudo"><img src="Medias/Images/Suzuki.jpeg" alt="Image : Suzuki Escudo de Nobuhiro Tajima" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Volkswagen IDR"><img src="Medias/Images/vw-id-r-pikes-peak-test.jpg" alt="Image : Wolkvagen I.D.R de Romain Dumas" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Peugeot 405 T16"><img src="Medias/Images/405T16.jpg" alt="Image : Peugeot 405 T16 de Ari Vattanen" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Ford Mustang"><img src="Medias/Images/ken_block.jpg" alt="Image : Ford Mustang de Ken Block" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Porsche GT2 RS"><img src="Medias/Images/porshe911GT2.jpg" alt="Image : Porsche GT2 RS de David Donner" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Porsche 911"><img src="Medias/Images/911.jpg" alt="Image : Porsche 911" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Carlin Dunne"><img src="Medias/Images/CarlinDunne.jpg" alt="Image : Carlin Dunne" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Ducati"><img src="Medias/Images/Ducati.jpg" alt="Image : Ducati" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Chris Fillmore"><img src="Medias/Images/fillmore.jpg" alt="Image : Chris Fillmore à bord de sa KTM 1290 Super Duke R" class="FormeImage"></a>
+    <a href="pageTableaux.html" title="Tesla Model S Plaid"><img src="Medias/Images/pobst-tesla-millen-bentley-et-dumas-porsche-s-illustrent-a-pikes-peak-23171-1-P.jpg" alt="Image : Randy Pobst au volant de sa Tesla Model S Plaid" class="FormeImage"></a>
+  </div>
+<footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/PageVideo.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/PageVideo.css">
+</head>
+
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+  <div class="DivVideo">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/yS1KCNluIvc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/Y20CLumT2Sg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/UEuZG37gFdM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6I637NNHieY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Hg6L_7qLIEQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ICivMiNuato" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vtIdQxW8F2Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="Videos"></iframe>
+  </div>
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/pageActualites.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/pageActualites.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <a href="pageActualites.html">actus</a>
+      <a href="pageTableaux.html">taleaux</a>
+      <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+      <a href="PageImages.html">Images</a>
+      <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+  <div id="Actus">
+    <div class="DivActus">
+      <img src="Medias/Images/405T16.jpg" id="ImagesActus">
+      <div class="text">
+        <h2>Il y a plus de 30 ans, Ari Vattanen domptait les Pikes Peak</h2>
+        <p>En 1988, Peugeot Sport vient pour la première fois défier la montée vers les nuages de Pikes Peak. Victoire au général, record d'Audi battu, et un film devenu mythique "climb dance" qui montre Ari Vatanen, pilotant la Peugeot 405 T16, battant le record de chronométrage.</p>
+      </div>
+    </div>
+    <div class="DivActus">
+      <img src="Medias/Images/vw-id-r-pikes-peak-test.jpg" id="ImagesActus">
+      <div class="text">
+        <h2>2018, l'année du dernier record</h2>
+        <p>L'édition 2018 est à nouveau gagnée par une voiture électrique, en l'occurrence une Volkswagen I.D. R pilotée par Romain Dumas. Avec un temps de 7 min 57 s 148, le précédent record absolu est battu et c'est la première fois que l'épreuve connaît un temps inférieur à 8 minutes. Cela est imputable aux progrès des véhicules électriques ainsi qu'à la compétitivité de ce type de motorisation dans des épreuves de côte.</p>
+      </div>
+    </div>
+    <div class="DivActus">
+      <img src="Medias/Images/pikes-peak-motos-interdites.jpg" id="ImagesActus">
+      <div class="text">
+        <h2>Les motos de nouveau interdites sur le vertigineux tracé de Pikes Peak</h2>
+        <p>Cette nouvelle interdiction fait suite au tragique décès de Carlin Dunne il y a deux ans. Pour triste mémoire, le pilote du prototype de la Ducati Streetfighter V4 avait chuté à grande vitesse dans la toute dernière courbe du périlleux tracé américain : 156 virages répartis sur 20 km de bitume, une ascension de 1440 m et une arrivée au sommet à 4330 m.</p>
+      </div>
+    </div>
+    <div class="DivActus">
+      <img src="Medias/Images/Loeb.jpeg" id="ImagesActus">
+      <div class="text">
+        <h2>Loeb : «Cela restera un grand souvenir»</h2>
+        <p>Vainqueur à Pikes Peak avec la manière, Sébastien Loeb a pris beaucoup de plaisir au volant de la 208. Le Français n’exclut pas de revenir un jour dans le Colorado, ravi du public américain très chaleureux.</p>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html> 

Web/tp/tpfinal/pageTableaux.html

@@ -0,0 +1,242 @@
+<!doctype html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Pikes Peak</title>
+  <link rel="stylesheet" type="text/css" href="CSS/Style.css">
+  <link rel="stylesheet" type="text/css" href="CSS/pageTableaux.css">
+  <link rel="stylesheet" type="text/css" href="CSS/Impression.css" media="print">
+</head>
+<body>
+  <header>
+    <nav>
+        <a href="pageActualites.html">actus</a>
+        <a href="pageTableaux.html">taleaux</a>
+        <a href="PageAcceuil.html" class="PPIHC"><img src="Medias/Images/PPIHC.png" id="PPIHC"></a>
+        <a href="PageImages.html">Images</a>
+        <a href="PageVideo.html">vidéos</a>
+    </nav>
+  </header>
+<div class="Tableaux">
+  <h1>Tableaux des records de temps</h1>
+  <table>
+    <caption>Records des temps catégorie voiture</caption>
+      <tr class="headerTbl">
+        <th>Catégorie</th>
+        <th>Pilote</th>
+        <th>Voiture</th>
+        <th>Année</th>
+        <th>Temps</th>
+        <th>Vitesse<br/>moyenne</th>
+        <th>Remarques</th>
+      </tr>
+      <tr class="top1">
+        <td>Unlimited</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/> Romain Dumas</td>
+        <td>Volkswagen I.D. R Pikes Peak</td>
+        <td>2018</td>
+        <td>7 min 57 s 148</td>
+        <td>150,3 km/h</td>
+        <td>Véhicule électrique</td>
+      </tr>
+      <tr>
+        <td>Unlimited</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Sébastien Loeb</td>
+        <td>Peugeot 208 T16 Pikes Peak</td>
+        <td>2013</td>
+        <td>8 min 13 s 878</td>
+        <td>145 km/h</td>
+        <td rowspan="2">Véhicule thermique</td>
+      </tr>
+      <tr>
+        <td>Time Attack 1</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Raphael Astier</td>
+        <td>Porsche 911 GT3 Cup Turbo</td>
+        <td>2019</td>
+        <td>9 min 23 s 721</td>
+        <td>122,3 km/h</td>
+      </tr>
+      <tr>
+        <td>Open Wheel</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Clint Vahsholtz</a></td>
+        <td>Ford Open</td>
+        <td>2013</td>
+        <td>9 min 35 s 747</td>
+        <td>124,4 km/h</td>
+        <td rowspan="2" class="rien">—</td>
+      </tr>
+      <tr>
+        <td>Pikes Peak Open</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Romain Dumas</a></td>
+        <td>Porsche GT3R</a></td>
+        <td>2012</td>
+        <td>9 min 46 s 181</td>
+        <td>122,8 km/h</td>
+      </tr>
+  </table>
+  <br/>
+  <table>
+    <caption>Records des temps catégorie moto</caption>
+      <tr class="headerTbl">
+        <th>Catégorie</th>
+        <th>Pilote</th>
+        <th>Moto</th>
+        <th>Année</th>
+        <th>Temps</th>
+      </tr>
+      <tr class="top1">
+        <td>Pikes Peak Heavyweight</td>
+        <td><img src="Medias/Images/Drapeau_australie.jpg" title="Drapeau : Australie" class="drapeaux"/>Rennie Scaysbrook</td>
+        <td>Aprilia Tuono 1100 Factory</td>
+        <td>2019</td>
+        <td>9 min 44 s 963</td>
+      </tr>
+      <tr>
+        <td>Pikes Peak Middleweight</td>
+        <td rowspan="2"><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Chris Fillmore</td>
+        <td>2018 KTM 790 Duke</td>
+        <td>2018</td>
+        <td>10 min 04 s 038</td>
+      </tr>
+      <tr>
+        <td>Pikes Peak Lightweight</td>
+        <td>450 SX-F Factory Edition</td>
+        <td>2019</td>
+        <td>10 min 20 s 819</td>
+      </tr>
+      <tr>
+        <td>Pikes Peak Challenge Motorcycle (Eletric Motorcycle)</td>
+        <td><img src="Medias/Images/Drapeau_sudAfrique.png" title="Drapeau : Afrique du Sud" class="drapeaux"/>Carlin Dunne</td>
+        <td>Lightning Electric SuperBike</td>
+        <td>2013</td>
+        <td>10 min 00 s 694</td>
+      </tr>
+      <tr>
+        <td>Pikes Peak Challenge Motorcycle (Quad)</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Cyril Combes</td>
+        <td>KTM 749JF Prototype</td>
+        <td>2016</td>
+        <td>11 min 05 s 664</td>
+      </tr>
+  </table>
+  <br/>
+  <table>
+    <caption>Records des temps toutes catégories</caption>
+      <tr class="headerTbl">
+        <th>Année</th>
+        <th>Temps</th>
+        <th>Pilote</th>
+        <th>Véhicule</th>
+        <th>Catégorie</th>
+      </tr>
+      <tr class="top1">
+        <td>2018</td>
+        <td>7 min 57 s 148</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Romains Dumas</td>
+        <td>Volkswagen I.D.R Pikes Peak</a></td>
+        <td>Unlimited / Electric Category</td>
+      </tr>
+      <tr>
+        <td>2013</td>
+        <td>8 min 13 s 878</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Sébastien Loeb</td>
+        <td>Peugeot 208 T16 Pikes Peak</td>
+        <td>Unlimited Category</td>
+      </tr>
+      <tr>
+        <td rowspan="2">2012</td>
+        <td>9 min 46 s 164</td>
+        <td><img src="Medias/Images/Drapeau_NZ.jpg" title="Drapeau : Nouvelle Zélande" class="drapeaux"/>Rhys Millen</td>
+        <td>Hyundai Genesis Coupé</td>
+        <td>Time Attack Category</td>
+      </tr>
+      <tr>
+        <td>9 min 46 s 181</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Romains Dumas</td>
+        <td>Porsche 911 GT3 R</td>
+        <td>Pikes Peak Open Category</td>
+        </tr>
+      <tr>
+        <td>2011</td>
+        <td>9 min 51 s 278</td>
+        <td rowspan="2"><img src="Medias/Images/Drapeau_japon.jpg" title="Drapeau : Japon" class="drapeaux"/>Nobuhiro Tajima</td>
+        <td>Suzuki SX4</td>
+        <td rowspan="3">Unlimited Category</td>
+      </tr>
+      <tr>
+        <td>2007</td>
+        <td>10 min 01 s 408</td>
+        <td>Suzuki XL4 Hill Climb Special</td>
+      </tr>
+      <tr>
+        <td>1994</td>
+        <td>10 min 04 s 06</td>
+        <td><img src="Medias/Images/Drapeau_NZ.jpg" title="Drapeau : Nouvelle Zélande" class="drapeaux"/>Rod Millen</td>
+        <td>Toyota Celica Turbo "Pikes Peak"</td>
+      </tr>
+      <tr>
+        <td>1993</td>
+        <td>10 min 43 s 63</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Paul Dallenbach</td>
+        <td>Davis Chevrolet</td>
+        <td>Open Wheel Category</td>
+      </tr>
+      <tr>
+        <td>1988</td>
+        <td>10 min 47 s 22</td>
+        <td><img src="Medias/Images/Drapeau_finlande.png" title="Drapeau : Finlande" class="drapeaux"/>Ari Vatanen</td>
+        <td>Peugeot 405 Turbo 16 "Pikes Peak"</td>
+        <td rowspan="4">Open Rally Category</td></tr>
+      <tr>
+        <td>1987</td>
+        <td>10 min 47 s 85</td>
+        <td><img src="Medias/Images/Drapeau_allemagne.png" title="Drapeau : Allemagne" class="drapeaux"/>Walter Röhrl</td>
+        <td>Audi Sport Quattro S1 "Pikes Peak"</td>
+      </tr>
+      <tr>
+        <td>1986</td>
+        <td>11 min 09 s 22</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Bobby Unser</td>
+        <td>Audi Sport Quattro S1</td>
+      </tr>
+      <tr>
+        <td>1985</td>
+        <td>11 min 25 s 39</td>
+        <td><img src="Medias/Images/Drapeau_france.jpg" title="Drapeau : France" class="drapeaux"/>Michèle Mouton</td>
+        <td>Audi Quattro</td>
+      </tr>
+      <tr>
+        <td>1983</td>
+        <td>11 min 38 s 30</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Al Unser Jr.</td>
+        <td rowspan="2">Woziwodzki Wells Coyote Chevrolet</td>
+        <td rowspan="4">Open Wheel Category</td>
+      </tr>
+      <tr>
+        <td>1982</td>
+        <td>11 min 44 s 82</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Bill Brister</td>
+      </tr>
+      <tr>
+        <td>1979</td>
+        <td>11 min 54 s 18</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Dick Dodge Jr.</td>
+        <td>Hoffpauir Wells Coyote Chevrolet</td>
+      </tr>
+      <tr>
+        <td>1968</td>
+        <td>11 min 54 s 90</td>
+        <td><img src="Medias/Images/Drapeau_EtatsUnis.png" title="Drapeau : Etats-Unis" class="drapeaux"/>Bobby Unser</td>
+        <td>Rislone Special</td>
+      </tr>
+  </table>
+</div>
+  <footer>
+    <div id="contact">
+      <p>© 2004-2022</p>
+      <p>AntoinePEREDERII corp.</p>
+      <p><a href="PageFormulaire.html">Contact</a></p>
+  </div>
+  </footer>
+</body>
+</html>