-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
81 lines (76 loc) · 5.5 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Do They Know It's Christmas?</title>
<link href='https://fonts.googleapis.com/css?family=Berkshire+Swash|Titan+One|Montserrat:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="❤.css">
</head>
<body>
<div class="ℹ 🚮">
<h1 class="🎄">Do They Know It's Christmas?</h1>
<p>No? Well, let them know… with a printed christmas card from your browser</p>
</div>
<div class="⛄ 🚮">
<p>1. Enter your personal christmas message • 2. Click on "Print" • 3. Disable all headers, footers and margins • 4. Enable background images • 5. Print in landscape orientation • 6. Have a merry christmas</p>
</div>
<button class="🚀 🚮" onclick="window.print()">Print</button>
<div class="📖">
<div class="📄">
<div class="© ✂">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="50px" height="50px" viewBox="0 0 50 50" xml:space="preserve">
<g>
<circle fill="#FFFFFF" cx="25.2" cy="25" r="21.5"/>
<path d="M25,1.1c6.7,0,12.4,2.3,17.1,7c2.2,2.2,4,4.8,5.1,7.7s1.8,6,1.8,9.2c0,3.3-0.6,6.3-1.7,9.2c-1.2,2.9-2.9,5.4-5.1,7.6
c-2.3,2.3-5,4.1-7.9,5.3c-3,1.2-6,1.8-9.2,1.8c-3.2,0-6.2-0.6-9.1-1.8c-2.9-1.2-5.5-3-7.8-5.2c-2.3-2.3-4-4.9-5.2-7.7
c-1.2-2.9-1.8-5.9-1.8-9.1c0-3.2,0.6-6.2,1.8-9.1c1.2-2.9,3-5.5,5.3-7.8C12.7,3.4,18.3,1.1,25,1.1z M25,5.4
c-5.5,0-10.1,1.9-13.8,5.7c-1.9,1.9-3.3,4-4.3,6.4c-1,2.4-1.5,4.9-1.5,7.4c0,2.6,0.5,5,1.5,7.4c1,2.4,2.5,4.5,4.3,6.4
c1.9,1.9,4,3.3,6.4,4.3c2.4,1,4.8,1.5,7.4,1.5c2.6,0,5-0.5,7.4-1.5c2.4-1,4.6-2.4,6.5-4.3c3.7-3.6,5.6-8.2,5.6-13.7
c0-2.6-0.5-5.1-1.5-7.5c-1-2.4-2.4-4.5-4.2-6.3C35.1,7.3,30.4,5.4,25,5.4z M24.7,21l-3.2,1.7c-0.3-0.7-0.8-1.2-1.3-1.5
c-0.5-0.3-1-0.4-1.4-0.4c-2.1,0-3.2,1.4-3.2,4.2c0,1.3,0.3,2.3,0.8,3.1c0.5,0.8,1.3,1.2,2.4,1.2c1.4,0,2.4-0.7,2.9-2l2.9,1.5
c-0.6,1.2-1.5,2.1-2.6,2.8c-1.1,0.7-2.3,1-3.7,1c-2.1,0-3.9-0.7-5.2-2c-1.3-1.3-2-3.1-2-5.5c0-2.3,0.7-4.1,2-5.4c1.3-1.3,3-2,5-2
C21.3,17.6,23.5,18.7,24.7,21z M38.5,21l-3.2,1.7c-0.3-0.7-0.8-1.2-1.3-1.5c-0.5-0.3-1-0.4-1.4-0.4c-2.1,0-3.2,1.4-3.2,4.2
c0,1.3,0.3,2.3,0.8,3.1s1.3,1.2,2.4,1.2c1.4,0,2.4-0.7,2.9-2l3,1.5c-0.7,1.2-1.5,2.1-2.6,2.8c-1.1,0.7-2.3,1-3.6,1
c-2.2,0-3.9-0.7-5.2-2c-1.3-1.3-1.9-3.1-1.9-5.5c0-2.3,0.7-4.1,2-5.4c1.3-1.3,3-2,5-2C35.2,17.6,37.3,18.7,38.5,21z"/></path>
</g>
</svg>
<p class="😊">Created by <a href="http://github.com/fabsrc">fabsrc</a> <i class="fa fa-github"></i></p>
<p class="🍺">Creative Commons Attribution 4.0</p>
</div>
</div>
<div class="📄">
<div class="☝ ✂">
<h1 class="🎅"><span>Merry</span> Christmas</h1>
<p class="🎉">…and Happy Holidays!</p>
</div>
</div>
</div>
<div class="📖">
<div class="📄"></div>
<div class="📄">
<p class="✒" contenteditable="true">
Dear Visitor,
<br><br>
I wish you all the best!
<br><br>
Santa
</p>
</div>
</div>
<div class="🌠 🚮">
<p>This project was created to try out the possibilities of creating print media with CSS in the browser and to implement a way of creating generative pattern styles with SVG and Canvas.</p>
<hr>
<p class="🍻">Copyright © <script>document.write(new Date().getFullYear())</script> <a href="https://github.com/fabsrc">Fabian Schneider</a>. Licensed under the <a href="http://wtfpl.net/">WTFPL</a> license.</p>
<p class="🍴"><a aria-label="Star fabsrc/do-they-know-its-christmas on GitHub" data-icon="octicon-star" href="https://github.com/fabsrc/do-they-know-its-christmas" class="github-button">Star</a>
<a aria-label="Fork fabsrc/do-they-know-its-christmas on GitHub" data-icon="octicon-repo-forked" href="https://github.com/fabsrc/do-they-know-its-christmas/fork" class="github-button">Fork</a>
<a aria-label="Issue fabsrc/do-they-know-its-christmas on GitHub" data-icon="octicon-issue-opened" href="https://github.com/fabsrc/do-they-know-its-christmas/issues" class="github-button">Issue</a>
<a aria-label="Download fabsrc/do-they-know-its-christmas on GitHub" data-icon="octicon-cloud-download" href="https://github.com/fabsrc/do-they-know-its-christmas/archive/master.zip" class="github-button">Download</a>
</p>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.0.0/bowser.min.js"></script>
<script src="💓.js" type="text/javascript"></script>
</body>
</html>