-
Notifications
You must be signed in to change notification settings - Fork 40
/
hartija.html
97 lines (88 loc) · 6.86 KB
/
hartija.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http:https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hartija - CSS Print Framework</title>
<meta name="author" content="Vladimir Carrer">
<link rel="stylesheet" href="print.css" type="text/css" media="print" charset="utf-8">
</head>
<body>
<h1>Hartija - Css Print Framework</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna.Nunc faucibus mollis lacus. <a href="http:https://www.google.com">Google</a> tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
</p>
<p>
<a href="http:https://www.flickr.com/photos/lobsterstew/242490177.png">
<img src="print.jpg" width="300"/>
</a>
Nulla velit neque, pharetra id, iaculis eget, mattis in, risus. Nulla facilisi. Maecenas vehicula tincidunt enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam viverra, lectus at malesuada venenatis, risus magna auctor odio, et egestas eros nunc id orci. Nulla vel magna non nisi tincidunt scelerisque. Cras sapien. Donec suscipit. Mauris nibh elit, imperdiet nec, hendrerit bibendum, porttitor non, sapien. Ut eu quam. Integer lectus. Integer consequat, risus a pretium lacinia, quam felis laoreet nunc, at interdum odio lorem in ligula. Ut placerat. Curabitur sollicitudin arcu ac odio.
</p>
<h2>H2 Paragraph</h2>
<p>
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
</p>
<h3>Unordered lists</h3>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
<h3>Ordered lists</h3>
<ol>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore</li>
<li>Et dolore magna aliqua</li>
</ol>
<h3>Blockquotes</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</blockquote>
<p>
Mauris porttitor augue ut ante. Nullam blandit ipsum vel pede. Nunc commodo arcu id pede. Phasellus interdum urna nec ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris nec felis eu massa facilisis vehicula. Pellentesque odio eros, congue non, dapibus eget, hendrerit sed, nulla. Curabitur sed pede ultricies lacus tristique tempor. Vivamus eget tellus nec justo sagittis porta. Donec ipsum nulla, hendrerit id, cursus sed, dictum non, lectus. In euismod feugiat nibh. Nam pretium, massa eget bibendum consectetuer, magna mauris tincidunt tellus, quis faucibus risus quam bibendum arcu.
</p>
<hr />
<p>
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus. Aliquam erat volutpat. Sed aliquet, quam quis aliquet lacinia, leo urna mollis tortor, sed nonummy libero leo eget nunc. Fusce at nibh sit amet sem aliquet convallis. Proin non massa. Phasellus ultricies, purus semper malesuada pellentesque, felis sapien euismod nunc, eget lobortis ipsum magna ac dolor. Aliquam erat volutpat. Donec ultrices nibh a massa. Integer tincidunt ultrices nibh. Nulla vehicula sem sit amet nisi. Vestibulum nisi. Donec turpis diam, sodales eu, tristique nec, consequat sit amet, tortor. Quisque velit tellus, volutpat nec, accumsan quis, elementum ut, libero. Cras pretium mauris ultricies risus. Nulla id nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pharetra est in tellus. Cras tempus risus auctor velit.
</p>
<table>
<caption>Lorem ipsum dolor sit amet</caption>
<col id="ingredients">
<col id="serve12">
<col id="serve24">
<thead>
<tr><th>Ingredients</th><th>serves 12</th><th>serves 24</th></tr>
</thead>
<tfoot>
<tr><td colspan="3">Footer</td></tr>
</tfoot>
<tbody>
<tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
<tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
<tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
<tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
<tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
<tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
<tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>Freshly grated nutmeg to taste</td><td> </td><td> </td></tr>
</tbody>
</table>
<h3>Credits:</h3>
<ol>
<li><a href="http:https://www.flickr.com/photos/lobsterstew/242490177/">Photo by Helga's Lobster Stew - CC licensed</a></li>
<li><a href="http:https://24ways.org/2005/tables-with-style">Jonathan Snook</a></li>
<li><a href="http:https://html5boilerplate.com/">HTML5 BOILERPLATE</a></li>
</ol>
<h3>Usefull links & Further Reading:</h3>
<ol>
<li><a href="http:https://alistapart.com/articles/goingtoprint">CSS Design: Going to Print</a></li>
<li><a href="http:https://24ways.org/2007/back-to-the-future-of-print">Back To The Future of Print</a></li>
<li><a href="http:https://webdesign.about.com/od/printerfriendly/a/aa041403a.htm">What is a Printer-Friendly Web Page?</a></li>
</ol>
</body>
</html>