initial commit
This commit is contained in:
sefaria
+64
@@ -0,0 +1,64 @@
|
||||
/* Change global color variables */
|
||||
:root {
|
||||
/* --primary: #121212; /* default text */
|
||||
/*--primary-dark: blue; /* address, date, no. */
|
||||
/*--primary-light: orange; /* second alternating row */
|
||||
/*--primary-extralight: green; /* first alternating row */
|
||||
--accent: #FF4500; /* total header */
|
||||
--accent-dark: #121212; /* total value */
|
||||
--accent-light: #FFC999; /* total background value */
|
||||
--accent-extralight: #FFE7CC; /* total background header */
|
||||
}
|
||||
|
||||
/* Recolor headline, remove bold style, add more letter-spacing */
|
||||
h1 {
|
||||
color: #ff4500;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Remove bold style, add more letter-spacing */
|
||||
.footer section small b {
|
||||
font-weight: normal; /* or font-weight: 400; */
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Add more letter-spacing */
|
||||
.footer section small i {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Remove bold style, add more letter-spacing */
|
||||
.footer section small span {
|
||||
font-weight: normal !important; /* or font-weight: 400; */
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Remove bold style, add more letter-spacing */
|
||||
.address-row span {
|
||||
font-weight: normal !important; /* or font-weight: 400; */
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Disable circled numbers, activate square punctuation and legible forms for MD UI */
|
||||
.address, .info-table td, .main-table td, .total-table td {
|
||||
font-feature-settings: "ss01" 1, "ss02" 1, "ss03" 0, "ss04" 0;
|
||||
}
|
||||
|
||||
/* Disable circled numbers for MD IO */
|
||||
.info-table th, .main-table th, .total-table th {
|
||||
font-feature-settings: "ss01" 1, "ss02" 0, "ss03" 0, "ss04" 0;
|
||||
}
|
||||
|
||||
/* Change table header to primary color */
|
||||
.info-table tr:last-of-type th, .total-table tr:last-of-type th {
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
/* Change look of folding-marks */
|
||||
.folding-mark {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 16px;
|
||||
background-color: #ff8c00;
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invoice 2026-042</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="header">
|
||||
<h1>Invoice</h1>
|
||||
<small class="address-row"><span>Lena Hoffmann Design</span> · <span>Torstraße 42</span> · <span>10119 Berlin</span></small>
|
||||
<div class="address">
|
||||
Studio Braun & Partner GmbH<br>
|
||||
Friedrichstraße 128<br>
|
||||
10117 Berlin
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<td>5 May 2025</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Service Period</th>
|
||||
<td>1 April<br>to 30 April 2025</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Invoice Number</th>
|
||||
<td>2026-042</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="main-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Hours</th>
|
||||
<th>Price in €</th>
|
||||
<th>Total in €</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Corporate Identity – Logo & Brand Design</td>
|
||||
<td>40</td>
|
||||
<td>60,00</td>
|
||||
<td>2.400,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Web Design – UI/UX Concept & Wireframes</td>
|
||||
<td>30</td>
|
||||
<td>60,00</td>
|
||||
<td>1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Print Templates – Business Cards & Letterhead</td>
|
||||
<td>10</td>
|
||||
<td>60,00</td>
|
||||
<td>600,00</td>
|
||||
</tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="total-table">
|
||||
<tr>
|
||||
<th>Subtotal in €</th>
|
||||
<td>4.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>19% VAT in €</th>
|
||||
<td>912,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total in €</th>
|
||||
<td>5.712,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<aside class="logo-for-footer">
|
||||
<section></section>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<section>
|
||||
<small>
|
||||
<span>Lena Hoffmann Design</span>
|
||||
<span>Torstraße 42</span>
|
||||
<span>10119 Berlin</span>
|
||||
</small>
|
||||
<small>
|
||||
lena@hoffmann-design.de<br>
|
||||
+49 30 98765432<br>
|
||||
www.hoffmann-design.de
|
||||
</small>
|
||||
</section>
|
||||
<section>
|
||||
<small>
|
||||
<b>Tax</b>
|
||||
<span>Tax no.: 14/234/56789</span>
|
||||
<span>VAT no.: DE287654321</span>
|
||||
</small>
|
||||
<small>
|
||||
<b>Bank Details</b>
|
||||
<span>DE89 3704 0044 0532 0130 00</span>
|
||||
<span>COBADEFFXXX</span>
|
||||
</small>
|
||||
<small class="additional">
|
||||
<i>The invoice must be paid within 14 days.</i>
|
||||
</small>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<aside class="footer">
|
||||
<section>
|
||||
<small>
|
||||
<span>Lena Hoffmann Design</span>
|
||||
<span>Torstraße 42</span>
|
||||
<span>10119 Berlin</span>
|
||||
</small>
|
||||
<small>
|
||||
lena@hoffmann-design.de<br>
|
||||
+49 30 98765432<br>
|
||||
www.hoffmann-design.de
|
||||
</small>
|
||||
</section>
|
||||
<section>
|
||||
<small>
|
||||
<b>Tax</b>
|
||||
<span>Tax no.: 14/234/56789</span>
|
||||
<span>VAT no.: DE287654321</span>
|
||||
</small>
|
||||
<small>
|
||||
<b>Bank Details</b>
|
||||
<span>DE89 3704 0044 0532 0130 00</span>
|
||||
<span>COBADEFFXXX</span>
|
||||
</small>
|
||||
</section>
|
||||
<section>
|
||||
<small>
|
||||
<i>The invoice must be paid within 14 days.</i>
|
||||
</small>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<mark class="folding-mark"></mark>
|
||||
<mark class="folding-mark"></mark>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user