Skip to content

Instantly share code, notes, and snippets.

@maylisdoucet

maylisdoucet/grandoeil.css

Last active February 26, 2018 15:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maylisdoucet/ba442667d237f7be41b02d919ba8b475 to your computer and use it in GitHub Desktop.
Save maylisdoucet/ba442667d237f7be41b02d919ba8b475 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grandoeil.css
.container
{
background-color: white;
}
.col-1
{
width: 10vw;
height: 10vh;
border: solid white 1px;
}
.black
{
background-color: black;
}
.orange{
background-color: orange;
}
.yellow{
background-color: yellow;
}
.silver{
background-color: silver;
}
Raw
grandoeil.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<!-- Un site typique optimisé pour les mobiles contient cette meta. Width : contrôle la taille de la fenêtre. Le initial-scalepropriété contrôle le niveau de zoom lors du premier chargement de la page. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grand Œil</title>
<!-- mais il aurait fallu préférer ce lien après avoir télécharger Bootstrap : bootstrap/css/bootstrap.min.css" rel="stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- lier à la page CSS. -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Container = 960px cad ne prend pas la fenetre entière -->
<div class="container">
<!-- ligne 1 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="offset-9 col-1 silver"></div>
</div>
<!-- ligne 2 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="offset-3 col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="offset-3 col-1 silver"></div>
</div>
<!-- ligne 3 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="offset-2 col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="offset-2 col-1 silver"></div>
</div>
<!-- ligne 4 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 orange"></div>
<div class="col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 orange"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 5 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="offset-1 col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 black"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="offset-1 col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 6 -->
<div class="row">
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="offset-1 col-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="offset-1 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 7 -->
<div class="row">
<div class="col-1 offset-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="offset-3 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 8 -->
<div class="row">
<div class="offset-2 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 9 -->
<div class="row">
<div class="offset-3 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 10 -->
<div class="row">
<div class="offset-4 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
<!-- ligne 11 -->
<div class="row">
<div class="offset-4 col-1 silver"></div>
<div class="col-1 silver"></div>
<div class="col-1 silver"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment