JuBertoo
9/4/2018 - 2:20 PM

le Grand Œil.css

le Grand il.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Le Grand Oeil de Barad-Dur</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="L'Oeil.css"/>
  </head>

  <body>

      <div class="container Mycontainer">

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-9 grey"></div>

        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-3 orange"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 offset-sm-3 grey"></div>

        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-2 orange"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 black"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 offset-sm-2 grey"></div>

        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 black"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>

        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-1 orange"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 black"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 offset-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
      


        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-1 orange"></div>
          <div class="col-sm-1 yellow"></div>
          <div class="col-sm-1 orange"></div>
          <div class="col-sm-1 offset-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>


        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 offset-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 offset-sm-3 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="offset-sm-1 "></div>


        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 offset-sm-2 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="offset-sm-2"></div>

        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 offset-sm-3 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="offset-sm-3"></div>


        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 offset-sm-4 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="offset-sm-4"></div>


        </div> 

        <div class="row Myrow">

          <div class="col-sm-1 offset-sm-4 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="col-sm-1 grey"></div>
          <div class="offset-sm-4"></div>

        </div> 

       </div>


    

  </body>
   
</html>
le Grand il.css
content_copyfile_download

.Mycontainer {
      display: flex;
      flex-direction: column;
      width: 600px;
      height: 600px;


    }

    .Myrow {
      height: 50px ;
      justify-content: center;

    }

    .grey {
      height: 100%;
      background-color: #2a2d2f;
      border: 1px solid #d7d8d8;


    }

    .black {
      height: 100%;
      background-color: black;
      border: 1px solid #d7d8d8;

    }

    .yellow {
      height: 100%;
      background-color: yellow;
      border: 1px solid #d7d8d8;


    }

    .orange {
      height: 100%;
      background-color: orange;
      border: 1px solid #d7d8d8;

    }