Last active
November 9, 2018 10:15
-
-
Save MkLHX/7ff3d878fb1ef6d092a2d7b5bb3b6db3 to your computer and use it in GitHub Desktop.
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> | |
<meta charset="UTF-8"> | |
<meta name="viewport" | |
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" | |
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
<title>Eye of Sauron</title> | |
<style> | |
body { | |
background-color: #999999; | |
} | |
.box { | |
height: 13vh; | |
max-width: 10vw; | |
} | |
.transparent { | |
background-color: transparent; | |
} | |
.black { | |
background-color: #000000; | |
} | |
.yellow { | |
background-color: #ffff00; | |
} | |
.orange { | |
background-color: #ec971f; | |
} | |
.row{ | |
margin-top: 10px; | |
margin-bottom: 10px; | |
} | |
@media (max-width: 679px) { | |
.row{ | |
margin-top: 5px; | |
margin-bottom: 5px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box yellow"></div> | |
<div class="col-1 box orange"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
</div> | |
<div class="row no-gutters justify-content-between"> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box black"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
<div class="col-1 box transparent"></div> | |
</div> | |
</div> | |
</body> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" | |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" | |
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" | |
crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" | |
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" | |
crossorigin="anonymous"></script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment