Mercurial > sat_docs

comparison printable_cards/xhtml/souliane.html @ 5:dfc5c6be7761

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add xhtml template for printing "business" (visiting) cards: The output is made for being printed on DECAdry SCW-2090. To print it, it's better to export it first to PDF from your browser. Be sure you disabled all the margins, header and footer set by the browser.
author souliane <souliane@mailoo.org>
date Thu, 03 Jul 2014 12:21:45 +0200
parents
children 2b82a4eb40a6
comparison
equal deleted inserted replaced
4:a6af040be754 5:dfc5c6be7761
1 <?xml version="1.0" encoding="utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <meta name="author" content="Adrien Cossa" />
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <link rel="stylesheet" href="cmc/stylesheet.css" type="text/css" charset="utf-8" media="all" />
9 <style type="text/css">
10 body {
11 background-color: #fffbe7;
12 margin: 0px;
13 }
14 div.page {
15 display: inline-block;
16 background-color: white;
17 width: 21cm;
18 height: 29.7cm;
19 }
20 div.printable-area {
21 display: flex;
22 flex-wrap: wrap;
23 margin-left: 0.5cm;
24 margin-top: 1.35cm;
25 }
26 div.card {
27 width: 8.5cm;
28 height: 5.4cm;
29 box-shadow: 0px 0px 5px 0px black;
30 background-color: white;
31 font-family: 'CMUConcreteRoman';
32 font-weight: normal;
33 font-style: normal;
34 font-size: 0.36cm;
35 margin-top: 0cm;
36 margin-left: 1cm;
37 }
38 div.spacer {
39 height: 0.3cm;
40 }
41 div.main {
42 margin: 0.5cm 0.8cm 0.5cm 0.8cm;
43 }
44 div.header {
45 display: flex;
46 justify-content: space-around;
47 align-items: center;
48 }
49 div.title {
50 font-size: 0.8cm;
51 font-style: italic;
52 text-shadow: 1px 1px 1px grey;
53 }
54 div.abstract {
55 font-size: 0.3cm;
56 font-style: italic;
57 text-shadow: 1px 1px 1px grey;
58 text-align: center;
59 }
60 div.photo img {
61 width: 1.0cm;
62 }
63 div.columns {
64 display: flex;
65 justify-content: space-between;
66 }
67 div.sides {
68 display: flex;
69 flex-direction: column;
70 justify-content: space-around;
71 }
72 div.sides img {
73 width: 0.6cm;
74 }
75 div.central {
76
77 }
78 div.name {
79 font-weight: bold;
80 text-align: center;
81 }
82 a:link{
83 color: blue;
84 text-decoration: none;
85 }
86 a:visited{
87 color: blue;
88 text-decoration: none;
89 }
90 @page {
91 size: A4;
92 margin: 0;
93 }
94 @media print {
95 div.page {
96 margin: 0px;
97 }
98 }
99 </style>
100 </head>
101 <body onload="javascript:duplicate();">
102 <script type="text/javascript">
103 function duplicate() {
104 var div = document.getElementsByClassName("card")[0];
105 for (var i=0; i<9; ++i) {
106 clone = div.cloneNode(true);
107 div.parentElement.appendChild(clone);
108 };
109 };
110 </script>
111 <div class="page">
112 <div class="printable-area">
113 <div class="card">
114 <div class="main">
115 <div class="header">
116 <div class="title">Salut à Toi</div>
117 <div class="photo">
118 <img src="sat.png" alt="image"/>
119 </div>
120 </div>
121 <div class="abstract">Vos communications sont sécurisées et contrôlables.</div>
122 <div class="spacer"></div>
123 <div class="columns">
124 <div class="sides">
125 <img src="tango/applications-internet.png" alt="image"/>
126 <img src="tango/document_encrypted_gold.png" alt="image"/>
127 <img src="tango/internet-group-chat.png" alt="image"/>
128 </div>
129 <div class="central">
130 <div>projet : <a href="http://salut-a-toi.org">http://salut-a-toi.org</a></div>
131 <div>démo : <a href="https://libervia.org">https://libervia.org</a></div>
132 <div class="spacer"></div>
133 <div class="name">Adrien</div>
134 <div>courriel : <a href="mailto:souliane@mailoo.org">souliane@mailoo.org</a></div>
135 <div>XMPP : <a href="xmpp:souliane@libervia.org">souliane@libervia.org</a></div>
136 </div>
137 <div class="sides">
138 <img src="tango/utilities-terminal.png" alt="image"/>
139 <img src="tango/x-office-address-book.png" alt="image"/>
140 <img src="tango/internet-mail.png" alt="image"/>
141 </div>
142 </div>
143 </div>
144 </div>
145 </div>
146 </div>
147 </body>
148 </html>