Télécharger une carte de membre

**Charal72** · 13/09/2019, 12h27

Bonjour,
J'aimerai créer une carte membre pour les membres d'une association lasaucemoto.com avec quelques infos (shortcodes)
Pour l'impression, pas de pb: je vais créer une feuille css, (ou même pas) et ils découperont la carte (format a4, je ne sais pas comment faire sinon..)
Mais j'aimerai aussi qu'ils puissent la télécharger sur leur portable pour pouvoir la montrer chez nos partenaires afin de bénéficier de réductions..et ça je ne sais pas comment faire... il faudrait qu'ils puissent télécharger uniquement la div qui contient le code en un format qcq..
Est ce possible ou il y a t il d'autres solutions?
Merci pour votre aide 👍
Ci joint code de la carte que je placerai dans une div..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<style>
@media print{
h2 {
color:red;
}
}  
.box {
position:absolute;
width: 350px;
height: 232px;
top:0 bottom:0; left:0; right: 0; margin: auto;
}
.carte{
position:absolute;
top:0;
left:0;
width: 350px;
height:232px;
}
.text {
text-align:left;
text-decoration: none;
font-weight: bold;
color: black;
text-decoration: none;
padding: 0px 25px;
font-size: 16px;
color: black;
}
h2 {
text-align: center;
  margin:15px;
font-size: 20px;
color: black;        
}
</style>
<h2>Votre carte de membre</h2>
<div id="box" class="box">
<img src="https://lasaucemoto.com/wp-content/uploads/2019/09/carte.jpg" class="carte" >
<div style="position: absolute; top:47%; right:57px;"><a href="#" class="text">[pmpro_member field="last_name"]</a></div>
<div style="position: absolute; top:30%; right:57px;"><a href="#" class="text"> [pmpro_member field="first_name"]</a></div>
<div style="position: absolute; top:64%; right:57px;"><a href="#" class="text">[pmpro_member field="membership_id"]</a></div>
<div style="position: absolute; top:81%; right:57px;"><a href="#" class="text">[pmpro_member field="membership_enddate"]</a></div>
</div>