Skip to content

Instantly share code, notes, and snippets.

@Karnak19

Karnak19/sauron.css

Created October 8, 2018 13:39
Show Gist options
  • Save Karnak19/4f78ca85f64f26832460908f92c6533f to your computer and use it in GitHub Desktop.
Save Karnak19/4f78ca85f64f26832460908f92c6533f to your computer and use it in GitHub Desktop.
Download ZIP
Sauron
Raw
sauron.css
/* General Style */
.cube {
height: 60px;
width: 60px;
border: 0.5px solid white;
}
.content {
width: 700px;
margin-left: auto;
margin-right: auto;
}
Raw
sauron.html
<!DOCTYPE html>
<html>
<head>
<title>findThePrecious</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sauron.css" />
</head>
<body>
<div class="content">
<div class="row">
<div class="col-sm-1 bg-dark cube"></div>
<div class="offset-sm-9 col-sm-1 bg-dark cube"></div>
</div>
<div class="row">
<div class="cube col-sm-1 bg-dark"></div>
<div class="offset-sm-3 cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="offset-sm-3 cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="cube col-sm-1 bg-dark"></div>
<div class="offset-sm-2 cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class=" offset-sm-2 cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="offset-sm-1 cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="offset-sm-1 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="offset-sm-1 cube col-sm-1 bg-danger"></div>
<div class="cube col-sm-1 bg-warning"></div>
<div class="cube col-sm-1 bg-danger"></div>
<div class="offset-sm-1 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="offset-sm-1 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="offset-sm-3 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="offset-sm-2 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="offset-sm-3 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="offset-sm-4 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
<div class="row">
<div class="offset-sm-4 cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
<div class="cube col-sm-1 bg-dark"></div>
</div>
</div>
</body>
<footer>
<hr />
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment