Skip to content

Instantly share code, notes, and snippets.

@clrko

clrko/index.html

Last active February 28, 2020 11:23
Show Gist options
  • Save clrko/3ee9b78326a68a33e8137dbdcff05296 to your computer and use it in GitHub Desktop.
Save clrko/3ee9b78326a68a33e8137dbdcff05296 to your computer and use it in GitHub Desktop.
Download ZIP
Le Grand Oeil - 09 - Bootstrap : le système de grilles
Raw
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="author" content="Claire Kodia">
<meta name="description" content="Le Grand Œil sur sa tour de Barad-Dûr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<title>Le Grand Œil</title>
</head>
<body>
<div class="container-fluid">
<div class="row no-gutters"> <!--Ligne 1 -->
<div class="col-1 square grey"></div>
<div class="col-1 offset-9 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 2 -->
<div class="col-1 square grey"></div>
<div class="col-1 offset-3 square orange"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square orange"></div>
<div class="col-1 offset-3 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 3 -->
<div class="col-1 square grey"></div>
<div class="col-1 offset-2 square orange"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square black"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square orange"></div>
<div class="col-1 offset-2 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 4 -->
<div class="col-2 square grey"></div>
<div class="col-2 square orange"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square black"></div>
<div class="col-1 square yellow"></div>
<div class="col-2 square orange"></div>
<div class="col-2 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 5 -->
<div class="col-2 square grey"></div>
<div class="col-1 offset-1 square orange"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square black"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square orange"></div>
<div class="col-2 offset-1 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 6 -->
<div class="col-3 square grey"></div>
<div class="col-1 offset-1 square orange"></div>
<div class="col-1 square yellow"></div>
<div class="col-1 square orange"></div>
<div class="col-3 offset-1 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 7 -->
<div class="col-3 offset-1 square grey"></div>
<div class="col-3 offset-3 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 8 -->
<div class="col-7 offset-2 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 9 -->
<div class="col-5 offset-3 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 10 -->
<div class="col-3 offset-4 square grey"></div>
</div>
<div class="row no-gutters"> <!--Ligne 11 -->
<div class="col-3 offset-4 square grey"></div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Raw
style.css
/* Couleurs */
.black {
background-color: black;
}
.grey {
background-color: #6A6859;
}
.yellow {
background-color: #F3DE42;
}
.orange {
background-color: orange;
}
/* Forme carrée */
.square {
width: 5vw;
height: 8vw;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment