Last active
February 13, 2018 21:54
-
-
Save jeromelegrand/34aaabdde2762e3ec1dcce4784b5275b to your computer and use it in GitHub Desktop.
eye of sauron
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
Donc pour la hauteur des rows, cela devient: