Skip to content

Instantly share code, notes, and snippets.

@ConnorFM
Last active February 23, 2019 10:21
Show Gist options
  • Save ConnorFM/4b50cbd47cc6d70e0250100e0a55b138 to your computer and use it in GitHub Desktop.
Save ConnorFM/4b50cbd47cc6d70e0250100e0a55b138 to your computer and use it in GitHub Desktop.
Grand Oeil
.col-1 {
border: 1px solid #ffffff;
padding-top: 8%;
}
.grey {
background: #333333;
}
.black {
background: black;
}
.yellow {
background: #ffc107;
}
.orange {
background: #fd7e14;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap.css">
<title>Grand Oeil</title>
</head>
<body>
<section class="container-fluid">
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 offset-9 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 offset-3 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-3 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 offset-2 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 offset-2 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 grey"></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 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 offset-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 offset-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 offset-1 orange"></div>
<div class="col-1 yellow"></div>
<div class="col-1 orange"></div>
<div class="col-1 offset-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 offset-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 offset-3 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 offset-2 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 offset-3 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 offset-4 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
<div class="row no-gutters">
<div class="col-1 offset-4 grey"></div>
<div class="col-1 grey"></div>
<div class="col-1 grey"></div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment