view printable_cards/xhtml/souliane.html @ 46:2b82a4eb40a6

update souliane's printable card
author souliane <souliane@mailoo.org>
date Thu, 28 May 2015 01:41:42 +0200
parents dfc5c6be7761
children
line wrap: on
line source

<?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: 2.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 {
    text-align: center;
}
div.name {
    font-weight: bold;
    text-align: center;
}
a:link{
    color: black;
    text-decoration: none;
}
a:visited{
    color: black;
    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>
                <div class="spacer"></div>
                <div class="name">Adrien</div>
                <div><a href="mailto:souliane@mailoo.org">souliane@mailoo.org</a></div>
              </div>
              <div class="photo">
                <img src="sat.svg" alt="image"/>
              </div>
            </div>
            <div class="spacer"></div>
              <div class="central">
                <div class="spacer"></div>
                <div class="title">Salut à Toi</div>
                <div><a href="http://salut-a-toi.org">http://salut-a-toi.org</a></div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>