Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
eye of sauron
.height {
max-height: 100vh;
}
.row {
height: 8.33vw;
max-height: 9.09vh;
max-width: 109.08vh;
}
.square {
border: 1px solid white;
padding: 1px;
}
.bg-orange {
background-color: orange;
}
.bg-yellow {
background-color: yellow;
}
.bg-black {
background-color: black;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<title>bootstrap</title>
</head>
<body class="container-fluid height">
<div class="row">
<div class="col-1 square bg-dark"></div>
<div class="col-1 square bg-dark offset-9"></div>
</div>
<div class="row">
<div class="col-1 square bg-dark"></div>
<div class="col-1 square bg-orange offset-3"></div>
<div class="col-1 square bg-yellow"></div>
<div class="col-1 square bg-orange"></div>
<div class="col-1 square bg-dark offset-3"></div>
</div>
<div class="row">
<div class="col-1 square bg-dark"></div>
<div class="col-1 square bg-orange offset-2"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-black square"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-dark square offset-2"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-black square"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-orange square offset-1"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-black square"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-dark square offset-1"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-orange square offset-1"></div>
<div class="col-1 bg-yellow square"></div>
<div class="col-1 bg-orange square"></div>
<div class="col-1 bg-dark square offset-1"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square offset-1"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square offset-3"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square offset-2"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square offset-3"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square offset-4"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
<div class="row">
<div class="col-1 bg-dark square offset-4"></div>
<div class="col-1 bg-dark square"></div>
<div class="col-1 bg-dark square"></div>
</div>
</body>
</html>
@AurelieBayre

This comment has been minimized.

Copy link

commented Feb 12, 2018

Super! C'est la solution la plus efficace.
Tu peux afficher l'image intégralement sur tous les écrans en ajoutant ce code au div .container:

.half {
    width: 50%;
    margin-top: 3%;
}

Donc pour la hauteur des rows, cela devient:

.row {
    height: calc(8.33vw / 2);
}
@jeromelegrand

This comment has been minimized.

Copy link
Owner Author

commented Feb 13, 2018

@AurelieBayre J'ai modifier un peu mon code à ma manière pour que ça tienne sur la page...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.