Skip to content

Instantly share code, notes, and snippets.

@mneuhaus

mneuhaus/Invoice.html

Created January 5, 2015 12:05
Show Gist options
  • Save mneuhaus/b62dc07ad5660d771393 to your computer and use it in GitHub Desktop.
Save mneuhaus/b62dc07ad5660d771393 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Invoice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
function subst() {
var vars={};
var x=document.location.search.substring(1).split('&');
for (var i in x) {var z=x[i].split('=',2);vars[z[0]] = unescape(z[1]);}
var x=['frompage','topage','page'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j=0; j<y.length; ++j) y[j].textContent = 1;
}
};
</script>
<style type="text/css">
html {
background: #efefef;
padding: 20px 0;
}
body {
display: block;
width: 210mm;
margin: 0 auto;
border: 1px solid #dedede;
background: white;
}
html {
margin: 0;
padding: 0;
}
body {
position: relative;
padding: 0 60px;
box-sizing: border-box;
margin: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: 'Open sans';
}
h3 {
color: #000;
font-weight: bold;
}
.avoid-page-break {
page-break-inside: avoid;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
strong {
color: #1795d0;
font-weight: bold;
}
p {
margin: 0 0 10px;
}
.background-proof {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 0;
opacity: 0.6;
}
.marker1 {
width: 25px;
height: 2px;
background: #aaa;
position: absolute;
top: 15px;
left: 0;
}
.marker2 {
width: 25px;
height: 2px;
background: #aaa;
position: absolute;
top: 405px;
left: 0;
}
.body {
z-index: 1000;
}
.logo {
float: right;
margin-top: -2px;
}
.header {
height: 330px;
position: relative;
}
.header > h1 {
margin: 0 0 0 25px;
font-weight: normal;
text-transform: uppercase;
position: relative;
top: 45px;
font-size: 55px;
letter-spacing: -5px;
}
.block-address {
position: absolute;
top: 180px;
left: 40px;
font-size: 12px;
color: #706f6f;
width: 360px;
}
.block-sender {
font-size: 8px;
color: #706f6f;
margin-left: -10px;
margin-bottom: 20px;
}
.block-sender img {
width: 8px;
height: 8px;
margin: 0 4px -1px 11px;
}
.block-information {
font-size: 11px;
position: absolute;
top: 206px;
right: 0;
}
.block-information th {
font-weight: normal;
width: 175px;
text-align: left;
}
.table-positions {
margin-left: 25px;
font-size: 12px;
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
.table-positions th {
font-size: 11px;
background: #706F6F;
color: white;
font-weight: normal;
}
.table-positions td,
.table-positions th {
padding: 8px 15px;
width: 13%;
}
.table-positions thead td,
.table-positions thead th,
.table-positions tbody td,
.table-positions tbody th {
border-right: 1px solid #9d9d9c;
}
.table-positions thead td.right,
.table-positions thead th.right,
.table-positions tbody td.right,
.table-positions tbody th.right {
border-right: 0;
}
.table-positions th.right {
background: #1795d0;
width: 19%;
}
.table-positions th.left {
width: 50%;
}
.table-positions tbody > tr:nth-child(odd) > td {
background-color: #ececec;
}
.table-total {
margin-left: 25px;
width: 100%;
color: #706f6f;
border-spacing: 0;
border-collapse: collapse;
}
.table-total td {
padding: 10px 15px;
font-size: 12px;
}
.table-total img {
display: block;
width: auto;
max-height: 40px;
}
.table-total td.left {
border: 3px solid #ececec;
border-right: 0;
padding: 15px;
width: 50%;
}
.table-total td.left h3{
margin: 0;
font-weight: normal;
font-size: 13px;
}
.table-total td.left p{
margin: 0 0 20px;
font-size: 11px;
}
.table-total td.top {
border-top: 3px solid #ececec;
}
.table-total td.bottom {
border-bottom: 3px solid #ececec;
font-size: 14px;
color: #000;
font-weight: bold;
}
.table-total td.right {
background: #1795d0;
width: 104px;
padding: 10px 14px 10px 13px;
color: white;
}
.block-notes {
margin-top: 30px;
border: 3px solid #ececec;
padding: 16px;
}
.footer {
color: #706f6f;
font-size: 10px;
margin: 0 25px 0;
}
.footer td {
padding: 20px 0 0 42px;
vertical-align: top;
}
.footer .left {
width: 130px;
padding: 20px 0 0 0;
}
.footer .right {
width: 130px;
padding: 20px 0 0 0px;
}
.bottom-line {
margin-left: 25px;
background: #706f6f;
color: white;
overflow: hidden;
width: 100%;
}
.bottom-line .pager {
font-size: 13px;
float: right;
text-align: center;
width: 104px;
background: #1795d0;
color: white;
border-left: 10px solid white;
padding: 5px 15px;
}
</style>
</head>
<body onload="subst()">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!--<img src="https://dl.dropboxusercontent.com/u/314491/DIN-A4-Wireframe.png" class="background-proof" />-->
<!--<img src="https://dl.dropboxusercontent.com/u/314491/Template-Famelo.png" class="background-proof" />-->
<!--<img src="https://dl.dropboxusercontent.com/u/314491/Pfalzmarken.png" class="background-proof" />-->
<div class="header">
<img src="http://dl.dropbox.com/u/314491/Screenshots/4~0vm7uwo~8z.png" alt="Famelo" width="240px" class="logo"/>
<h1>Rechnung</h1>
<div class="block-address">
<div class="block-sender">
<img src="https://dl.dropboxusercontent.com/u/314491/Famelo-Circle.png"/>Famelo OHG
<img src="https://dl.dropboxusercontent.com/u/314491/Famelo-Circle.png"/>Haverkamp 17
<img src="https://dl.dropboxusercontent.com/u/314491/Famelo-Circle.png"/>33334 Gütersloh
</div>
<strong>An Max Mustermann</strong><br />
Musterstraße 13<br />
12345 Musterhausen<br />
Deutschland
</div>
<div class="block-information">
<table>
<tr>
<th>Rechnungsnummer</th><td><strong>23423</strong></td>
</tr>
<tr>
<th>Rechnungsdatum</th><td>05.01.2015</td>
</tr>
<tr>
<th>Fälligkeit</th><td>05.01.2015</td>
</tr>
</table>
</div>
</div>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<div class="marker1"></div>
<div class="marker2"></div>
<table class="table-positions">
<thead>
<tr>
<th class="text-left left">Beschreibung</th>
<th>Zeit/Anzahl</th>
<th>Einzelpreis</th>
<th class="right">Gesamtpreis</th>
</tr>
</thead>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Aenean commodo ligula eget dolor. Aenean massa. </td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
<tr>
<td class="left">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Nascetur ridiculus mus.</td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
<tr>
<td class="left">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
<tr>
<td class="left">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">3,00</td>
<td class="text-center">23,30 €</td>
<td class="text-center right">69,90 €</td>
</tr>
<tr>
<td class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td class="text-center">6,00</td>
<td class="text-center">80,00 €</td>
<td class="text-center right">420,00 €</td>
</tr>
</table>
<table class="table-total">
<tr>
<td class="text-left left" rowspan="3">
<h3>Vielen Dank für Ihren Auftrag!</h3>
<p>
Wir haben gern für Sie gearbeitet - Josef Kunter
</p>
<img src="https://dl.dropboxusercontent.com/u/314491/Unterschrift-Kunter.png" width="160px" />
</td>
<td class="text-right top" colspan="2">Zwischensumme (netto)</td>
<td class="right text-center top">
0,00 €
</td>
</tr>
<tr>
<td class="text-right" colspan="2">zzgl. MwSt. 19,00%</td>
<td class="right text-center">
2.342,30 €
</td>
</tr>
<tr>
<td class="text-right bottom" colspan="2">Gesamtsumme (brutto)</td>
<td class="right text-center bottom">
2.534,50 €
</td>
</tr>
</table>
<!--<div class="block-notes avoid-page-break">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</div>-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<table class="footer" style="width: 100%">
<tr>
<td class="left">
<img src="http://dl.dropbox.com/u/314491/Screenshots/53hdo-n83zg4.png" width="130px" />
</td>
<td>
<p>
<strong>Famelo OHG</strong><br />
Haverkamp 37 <br />
33334 Gütersloh
</p>
<p>
<strong>Kontakt</strong><br />
Tel.: +49 5241 96459 - 03<br />
eMail: info@famelo.com<br />
Web: www.famelo.com
</p>
<p>
<strong>Handelsregister</strong><br />
USt-IdNr.: DE270947744
</p>
<p>
<strong>Amtsgericht</strong><br />
Gütersloh HRA 6459
</p>
</td>
<td>
<p>
<strong>Empfänger</strong><br />
Famelo OHG
</p>
<p>
<strong>Bankverbindung</strong><br />
Sparkasse Gütersloh<br />
BLZ: 478 500 65<br />
Konto: 36 849<br />
BIC-/SWIFT-Code: <br />
WELADED1GTL<br />
IBAN-Nr: <br />
DE78 4785 0065 0000 0368 49
</p>
<p>
<strong>Verwendungszweck</strong><br />
Rechnung: 23423
</p>
</td>
<td class="right">
Bitte überweisen Sie diesen Betrag innerhalb von 14 Tagen auf das angegebene Konto. Das Leistungsdatum entspricht, soweit in den Positionen nicht anderes angegeben, dem Rechnungsdatum.
</td>
</tr>
</table>
<div class="bottom-line">
<div class="pager">
Seite <span class="page"></span> von <span class="topage"></span>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment