<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Stocks</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<main role="main">
<h1>état des stocks</h1>
<table>
<thead>
<tr><th class="left">produit</th><th>état du stock</th></tr>
</thead>
<tbody>
<tr>
<td>café en grain</td>
<td class="right"><i title="en stock" class="green"></i><span class="not-on-screen">haut</span></td>
</tr>
<tr>
<td>café soluble</td>
<td class="right"><i class="orange"></i><span class="not-on-screen">délais à prévoir</span></td>
</tr>
<tr>
<td>café moulu</td>
<td class="right"><i class="red"></i><span class="not-on-screen">indisponible</span></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>produit</th><th>état du stock</th></tr>
</thead>
<tbody>
<tr>
<td>café en grain</td>
<td class="right"><i class="icon-grin2"></i><span class="not-on-screen">haut</span></td>
</tr>
<tr>
<td>café soluble</td>
<td class="right"><i class="icon-confused2"></i><span class="not-on-screen">délais à prévoir</span></td>
</tr>
<tr>
<td>café moulu</td>
<td class="right"><i class="icon-angry2"></i><span class="not-on-screen">indisponible</span></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th>produit</th><th>état du stock</th></tr>
</thead>
<tbody>
<tr>
<td>café en grain</td>
<td class="right"><i class="green"></i><span class="not-on-screen">haut</span></td>
</tr>
<tr>
<td>café soluble</td>
<td class="right"><i class="icon-contrast"></i><span class="not-on-screen">délais à prévoir</span></td>
</tr>
<tr>
<td>café moulu</td>
<td class="right"><i class="icon-blocked"></i><span class="not-on-screen">indisponible</span></td>
</tr>
</tbody>
</table>
</main>
</body>
</html>