Created
November 11, 2019 16:18
-
-
Save 51enra/076a5a47471c4bcc3813cf60bc6e6638 to your computer and use it in GitHub Desktop.
Sauron's Eye
This file contains hidden or 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, initial-scale=1, shrink-to-fit=no"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
<title>Sauron's eye</title> | |
</head> | |
<body> | |
<div class="container no-gutters"> | |
<div class="row no-gutters"> | |
<div class="col grey"> | |
  | |
</div> | |
<div class="col-9 white"> | |
</div> | |
<div class="col grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col grey"> | |
  | |
</div> | |
<div class="col-3 white"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col-3 white"> | |
</div> | |
<div class="col grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col grey"> | |
  | |
</div> | |
<div class="col-2 white"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col black"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col-2 white"> | |
</div> | |
<div class="col grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-2 grey"> | |
  | |
</div> | |
<div class="col-2 orange"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col black"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col-2 orange"> | |
</div> | |
<div class="col-2 grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-2 grey"> | |
  | |
</div> | |
<div class="col white"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col black"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col white"> | |
</div> | |
<div class="col-2 grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-3 grey"> | |
  | |
</div> | |
<div class="col white"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col yellow"> | |
</div> | |
<div class="col orange"> | |
</div> | |
<div class="col white"> | |
</div> | |
<div class="col-3 grey"> | |
</div> | |
<div class="col white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col white"> | |
</div> | |
<div class="col-3 grey"> | |
  | |
</div> | |
<div class="col-3 white"> | |
</div> | |
<div class="col-3 grey"> | |
</div> | |
<div class="col-2 white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-2 white"> | |
</div> | |
<div class="col-7 grey"> | |
  | |
</div> | |
<div class="col-3 white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-3 white"> | |
</div> | |
<div class="col-5 grey"> | |
  | |
</div> | |
<div class="col-4 white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-4 white"> | |
</div> | |
<div class="col-3 grey"> | |
  | |
</div> | |
<div class="col-5 white"> | |
</div> | |
</div> | |
<div class="row no-gutters"> | |
<div class="col-4 white"> | |
</div> | |
<div class="col-3 grey"> | |
  | |
</div> | |
<div class="col-5 white"> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains hidden or 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
.row { | |
height: 5vh; | |
} | |
.grey { | |
background-color: rgb(80,80,80); | |
} | |
.orange { | |
background-color: orange; | |
} | |
.yellow { | |
background-color: yellow; | |
} | |
.white { | |
background-color: white; | |
} | |
.black { | |
background-color: black; | |
} |
This file contains hidden or 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
https://codepen.io/51enra/full/WNNKdYP |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment