Skip to content

Instantly share code, notes, and snippets.

@pmarkun

pmarkun/gist:7028326

Created October 17, 2013 16:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pmarkun/7028326 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pmarkun/7028326 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<style>
#repo {
display:none;
}
#folha {
text-align: center;
width:210mm;
height:297mm;
padding:0.4cm;
}
.unidade {
background-color: #f00;
}
.unidade {
height:0.9cm;
width:0.9cm;
border:0.1cm solid #000;
margin:0cm;
}
.dezena {
clear:both;
}
.dezena .unidade:first-child {
border-left:0.1cm solid #000;
}
.dezena .unidade {
float:left;
border-left:0cm;
}
.centena {
clear:both;
float:left;
}
.centena .dezena {
float:left;
}
.centena .dezena:first-child .unidade {
border-top:0.1cm solid #000;
}
.centena .dezena .unidade {
border-top:0cm;
}
#centena, #dezena, #unidade {
margin:0.2cm;
float:right;
clear:none;
}
</style>
</head>
<body>
<div id="repo">
<div id="unidade" class="unidade"></div>
<div id="dezena" class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div id="centena" class="centena">
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
<div class="dezena">
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
<div class="unidade"></div>
</div>
</div>
</div>
<div id="folha"></div>
<script>
var unidade = document.getElementById("unidade");
var dezena = document.getElementById("dezena");
var centena = document.getElementById("centena");
for (var i=0;i<56;i++) {
document.getElementById("folha").appendChild(unidade.cloneNode(true));
}
for (var i=0;i<20;i++) {
document.getElementById("folha").appendChild(dezena.cloneNode(true));
}
for (var i=0;i<2;i++) {
document.getElementById("folha").appendChild(centena.cloneNode(true));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment