Nom du fichier : product.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Téléboutique achat</title>
</head>
<body>
<header>
<img src="Images/teleboutiquachat.jpg" alt="Télé Boutique Achat" height="360">
<br>
<form action="">
<label for="recherche">Rechercher sur le site:</label>
<input type="search" id="recherche" name="recherche"/>
<button type="button">Va chercher mon Lycos!</button>
</form>
</header>
<main>
<article>
<section>
<h1>Le fameux Marifouet</h1>
<h2>Le fouet éducatif révolutionnaire !</h2>
<p>Vous avez des enfants ? Ils sont adorables mais… à l’approche des fêtes, on ne peut plus les tenir ? Ils
veulent regarder la télévision ? Ils font des caprices ?</p>
<p>Nous avons LA solution ! Découvrez le Martifouette, le superbe objet qui va changer votre vie de parent
!</p>
<h2>Caractéristiques exceptionnelles :</h2>
<ul>
<li>Bague en inox, donc inoxydable</li>
<li>Manche en noisetier véritable verni que l'on peut astiquer, donc asticable</li>
<li>Fière allure et belle mine, donc minable...</li>
</ul>
</section>
<section>
<img src="Images/martifouet.png" alt="Le Martifouet" height="200">
</section>
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NwtmOi3su6I?si=qnEAmQrezcgUFarO"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</section>
<section>
<p>
<del>599,99€</del>
<strong>19,99€</strong>
</p>
</section>
<section>
<form action="">
<label for="quantite">Quantité</label>
<select name="quantite" id="quantite">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<fieldset>
<legend>Choisissez votre livraison:</legend>
<div>
<input type="radio" id="standard" name="livraison" value="standard" checked/>
<label for="standard">Standard</label>
</div>
<div>
<input type="radio" id="express" name="livraison" value="express"/>
<label for="express">Express</label>
</div>
<div>
<input type="radio" id="pointrelais" name="livraison" value="pointrelais"/>
<label for="pointrelais">Point Relais</label>
</div>
</fieldset>
<button>Ajouter au panier</button>
</form>
</section>
</article>
<article>
<h3>Vous aimerez aussi</h3>
<table border="1">
<tbody>
<tr>
<td>Le robot multifonction</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><img src="Images/robot.png" width="100" alt="Robot"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>99,99€</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Le fameux robot multifonction</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<a href="product2.html">
<button type="button">Voir</button>
</a>
</td>
<td>
<button type="button">Voir</button>
</td>
<td>
<button type="button">Voir</button>
</td>
<td>
<button type="button">Voir</button>
</td>
<td>
<button type="button">Voir</button>
</td>
</tr>
</tbody>
</table>
</article>
</main>
</body>
</html>