Skip to content

Instantly share code, notes, and snippets.

@ryaninvents

ryaninvents/index.html

Created March 2, 2016 22:09
Show Gist options
  • Save ryaninvents/6f6cc219cc38a4788701 to your computer and use it in GitHub Desktop.
Save ryaninvents/6f6cc219cc38a4788701 to your computer and use it in GitHub Desktop.
Download ZIP
Avery labels template
Raw
index.html
<html>
<head>
<style>
.label {
display: inline-block;
text-align: center;
margin: 0 0.25cm 0.05cm;
width: 4in;
height: 2in;
}
.label-page {
width: 8.5in;
padding: 1.2cm 0.15cm 0;
}
@media print {
.label-page {
page-break-after: always;
page-break-inside: avoid;
}
}
@media screen {
.label {
width: 20em;
height: 10em;
border: 1px solid #dcdcdc;
border-radius: 1.2em;
}
.label-page {
border: 1px dashed skyblue;
padding: 1em;
border-radius: 0.3em;
}
@page {
margin: 0;
}
}
</style>
</head>
<body>
<div class="label-page">
<div class="label">foo</div>
<div class="label">bar</div>
<div class="label">baz</div>
<div class="label">foo</div>
<div class="label">bar</div>
<div class="label">baz</div>
<div class="label">foo</div>
<div class="label">bar</div>
<div class="label">baz</div>
<div class="label">foo</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment