Skip to content

Instantly share code, notes, and snippets.

@saraclima

saraclima/sauron.html

Created October 6, 2017 14:20
Show Gist options
  • Save saraclima/328aa2d198335f7c5cbdbb07ac735746 to your computer and use it in GitHub Desktop.
Save saraclima/328aa2d198335f7c5cbdbb07ac735746 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sauron.html
<!Doctype html>
<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width" >
<title>Sauron's Eye</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container container_costum">
<!-- Ligne 1 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-9 col-xs-1 custom_col"></div>
</div>
<!-- Ligne 2 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="orange col-xs-offset-3 col-xs-1 custom_col "></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-3 col-xs-1 custom_col"></div>
<div class="col-xs-offset-1 custom_col"></div>
</div>
<!-- Ligne 3 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="orange col-xs-offset-2 col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="black col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-2 col-xs-1 custom_col"></div>
</div>
<!-- Ligne 4 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="black col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 5 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="orange col-xs-offset-1 col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="black col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-1 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 6 -->
<div class="row row_custom">
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="orange col-xs-offset-1 col-xs-1 custom_col"></div>
<div class="yellow col-xs-1 custom_col"></div>
<div class="orange col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-1 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 7 -->
<div class="row row_custom">
<div class="col-xs-offset-1 gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-offset-3 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 8 -->
<div class="row row_custom">
<div class="gray col-xs-offset-2 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 9 -->
<div class="row row_custom">
<div class="gray col-xs-offset-3 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 10 -->
<div class="row row_custom">
<div class="gray col-xs-offset-4 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
<!-- Ligne 11 -->
<div class="row row_custom">
<div class="gray col-xs-offset-4 col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
<div class="gray col-xs-1 custom_col"></div>
</div>
</div>
</body>
</html>
Raw
style.css
.row_custom {
height: 45px;
padding: 1px;
}
.orange {
background-color: orange;
height: 100%;
}
.gray {
background-color: dimgray;
height: 100%;
}
.black {
background-color: black;
height: 100%;
}
.yellow {
background-color: yellow;
height: 100%;
}
@media (max-width: 767px) {
.container {
width: 370px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment