<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>
<body>
    <div class="container">
        <header class="d-flex justify-content-center py-3">
          <ul class="nav nav-pills">
            <li class="nav-item"><a href="./" class="nav-link" aria-current="page">Home</a></li>
            <li class="nav-item"><a href="./black&white" class="nav-link" aria-current="page">B&W</a></li>
            <li class="nav-item"><a href="./gray" class="nav-link">Gray</a></li>
            <li class="nav-item"><a href="./resize" class="nav-link">Resize</a></li>
            <li class="nav-item"><a href="./align_v" class="nav-link">Align_V</a></li>
            <li class="nav-item"><a href="./align_h" class="nav-link">Align_H</a></li>
            <li class="nav-item"><a href="./fusion" class="nav-link">Fusion</a></li>
            <li class="nav-item"><a href="./animation" class="nav-link">Animation</a></li>
          </ul>
        </header>
    </div>

    <div class="container">
      <h3>Mini projet</h3>
      <div>
        L'objectif de ce projet est de réaliser une application web qui regroupe plusieurs fonctionnalités 
        sur la transformation d'images. Vous pouvez naviguez sur nos différentes fonctionnalités à l'aide de notre 
        menu. Plus d'information en dessous.
      </div>
      <br>
      <br>

      <div class="grid">
        <div class="col-10">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">B&W</th>
                <td>Transformation to black and white of an image</td>
              </tr>
              <tr>
                <th scope="row">Gray</th>
                <td>Transformation to shade of gray of an image</td>
              </tr>
              <tr>
                <th scope="row">Resize</th>
                <td>Resize the size of an image (height, width)</td>
              </tr>
              <tr>
                <th scope="row">Align_V</th>
                <td>Align vertically two images</td>
              </tr>
              <tr>
                <th scope="row">Align_H</th>
                <td>Align horizontally two images</td>
              </tr>
              <tr>
                <th scope="row">Fusion</th>
                <td>Merge of two image with an opacity and a position</td>
              </tr>
              <tr>
                <th scope="row">Animation</th>
                <td>Creation of a gif with many images</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>
