Mercurial > sat_docs
diff printable_cards/xhtml/souliane.html @ 5:dfc5c6be7761
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/printable_cards/xhtml/souliane.html Thu Jul 03 12:21:45 2014 +0200 @@ -0,0 +1,148 @@ +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta name="author" content="Adrien Cossa" /> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <link rel="stylesheet" href="cmc/stylesheet.css" type="text/css" charset="utf-8" media="all" /> + <style type="text/css"> +body { + background-color: #fffbe7; + margin: 0px; +} +div.page { + display: inline-block; + background-color: white; + width: 21cm; + height: 29.7cm; +} +div.printable-area { + display: flex; + flex-wrap: wrap; + margin-left: 0.5cm; + margin-top: 1.35cm; +} +div.card { + width: 8.5cm; + height: 5.4cm; + box-shadow: 0px 0px 5px 0px black; + background-color: white; + font-family: 'CMUConcreteRoman'; + font-weight: normal; + font-style: normal; + font-size: 0.36cm; + margin-top: 0cm; + margin-left: 1cm; +} +div.spacer { + height: 0.3cm; +} +div.main { + margin: 0.5cm 0.8cm 0.5cm 0.8cm; +} +div.header { + display: flex; + justify-content: space-around; + align-items: center; +} +div.title { + font-size: 0.8cm; + font-style: italic; + text-shadow: 1px 1px 1px grey; +} +div.abstract { + font-size: 0.3cm; + font-style: italic; + text-shadow: 1px 1px 1px grey; + text-align: center; +} +div.photo img { + width: 1.0cm; +} +div.columns { + display: flex; + justify-content: space-between; +} +div.sides { + display: flex; + flex-direction: column; + justify-content: space-around; +} +div.sides img { + width: 0.6cm; +} +div.central { + +} +div.name { + font-weight: bold; + text-align: center; +} +a:link{ + color: blue; + text-decoration: none; +} +a:visited{ + color: blue; + text-decoration: none; +} +@page { + size: A4; + margin: 0; +} +@media print { + div.page { + margin: 0px; + } +} + </style> + </head> + <body onload="javascript:duplicate();"> + <script type="text/javascript"> + function duplicate() { + var div = document.getElementsByClassName("card")[0]; + for (var i=0; i<9; ++i) { + clone = div.cloneNode(true); + div.parentElement.appendChild(clone); + }; + }; + </script> + <div class="page"> + <div class="printable-area"> + <div class="card"> + <div class="main"> + <div class="header"> + <div class="title">Salut à Toi</div> + <div class="photo"> + <img src="sat.png" alt="image"/> + </div> + </div> + <div class="abstract">Vos communications sont sécurisées et contrôlables.</div> + <div class="spacer"></div> + <div class="columns"> + <div class="sides"> + <img src="tango/applications-internet.png" alt="image"/> + <img src="tango/document_encrypted_gold.png" alt="image"/> + <img src="tango/internet-group-chat.png" alt="image"/> + </div> + <div class="central"> + <div>projet : <a href="http://salut-a-toi.org">http://salut-a-toi.org</a></div> + <div>démo : <a href="https://libervia.org">https://libervia.org</a></div> + <div class="spacer"></div> + <div class="name">Adrien</div> + <div>courriel : <a href="mailto:souliane@mailoo.org">souliane@mailoo.org</a></div> + <div>XMPP : <a href="xmpp:souliane@libervia.org">souliane@libervia.org</a></div> + </div> + <div class="sides"> + <img src="tango/utilities-terminal.png" alt="image"/> + <img src="tango/x-office-address-book.png" alt="image"/> + <img src="tango/internet-mail.png" alt="image"/> + </div> + </div> + </div> + </div> + </div> + </div> + </body> +</html>