Live demo
Receipt
E.Leclerc
29800 LANDERNEAU
Tél: 02 98 21 47 11
VOUS REMERCIE DE VOTRE CONFIANCE
Caisse 015-2019 15 avril 2019 18:24
Ticket 15/04/170 0QRM 02050
Ecrire en 3D avec CSS3
28.12
Customiser la page d'erreur 40...
26.12
Améliorez la performance de vo...
16.02
Les 10 meilleurs templates Joo...
01.02
Comment créer votre liste d'ad...
08.03
Dois-je accepter ce dossier ?
17.04
4 techniques fondamentales du...
19.10
Comment créer un glossaire Res...
24.09
30 sites web en mode "paysage"
08.02
5 bonnes raisons de passer au...
11.04
Total 10 articles
1.63
Soit en franc : 10.69
(1 euro = 6,55957 francs)
Bon achat carte
1.63
Rendu
0.00
Avec la carte E.Leclerc
CUMUL DISPONIBLE AU 15/04/19 :
42.65€
Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.
Modalités, durée de validité à l'accueil
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @Author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="container-ticket">
<div class="ticket">
<div class="head-ticket">
<p class="x-bold">E.Leclerc</p>
<p class="bold">29800 LANDERNEAU</p>
<p class="bold">Tél: 02 98 21 47 11</p>
<br>
<p class="bold">VOUS REMERCIE DE VOTRE CONFIANCE</p>
<p>Caisse 015-2019 15 avril 2019 18:24</p>
<p>Ticket 15/04/170 0QRM 02050</p>
<div class="code-barre">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="body-ticket">
<div class="produits">
<?php foreach ($list as $item) : ?>
<div class="col2">
<?php if ($params->get('link_titles') == 1) : ?>
<p><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></a></p>
<?php else : ?>
<p><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></p>
<?php endif; ?>
<?php if ($item->displayDate) : ?>
<p class="prix">
<?php echo $item->displayDate; ?> <!-- use the format 'd.m' in module parameters -->
</p>
<?php endif; ?>
</div>
<?php endforeach; ?>
<div class="hr-sm"></div>
<div class="col2 pt-2">
<p>Total 10 articles</p>
<p class="prix">1.63</p>
</div>
<p>Soit en franc : 10.69</p>
<p>(1 euro = 6,55957 francs)</p>
<br>
<div class="col2">
<p>Bon achat carte</p>
<p class="prix">1.63</p>
</div>
<div class="col2">
<p>Rendu</p>
<p class="prix">0.00</p>
</div>
</div>
<div class="hr-lg"></div>
<div class="carte">
<p class="title-carte">Avec la carte E.Leclerc</p>
<br>
<div class="col2">
<p>CUMUL DISPONIBLE AU 15/04/19 :</p>
<p class="prix">42.65€</p>
</div>
<br>
<p>Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.</p>
<br>
<p>Modalités, durée de validité à l'accueil</p>
</div>
<div class="hr-lg"></div>
</div>
<div class="footer-ticket">
<p class="title-footer">Merci de votre<br>visite et à bientôt</p>
</div>
</div>
</div>
CSS
/* Receipt Source:https://codepen.io/EMEDESIGN/pen/xLPLwg */
.serif{
font-family: serif;
}
.sans-serif{
font-family: 'sans-serif';
}
.bold{
font-weight: 700;
}
.x-bold{
font-weight: 900;
text-shadow: 0px 0px 1px #000;
}
.hr{
border-bottom: 1.5px dashed #333;
margin: 10px 0;
}
.hr-sm{
/*@extend .hr;*/
width: 30%;
float: right;
}
.hr-lg{
@extend .hr;
width: 100%;
}
.col2{
display: flex;
width: 100%;
justify-content: space-between;
}
.container-ticket {
background: #e6e6e6;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 50px 0;
box-sizing: border-box;
font-size: 12px;
font-family: 'courier';
}
.container-ticket .ticket {
cursor: default;
position: relative;
width: 350px;
padding: 10px 20px;
background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.container-ticket .ticket .head-ticket {
text-align: center;
padding: 0px 17px;
}
.container-ticket .ticket .head-ticket p {
font-size: 14px;
}
.container-ticket .ticket .head-ticket p:nth-child(1) {
font-size: 18px;
}
.container-ticket .ticket .head-ticket p:nth-child(6), .container-ticket .ticket .head-ticket p:nth-child(7) {
font-size: 12px;
text-align: left;
}
.container-ticket .ticket .head-ticket .code-barre {
height: 50px;
display: flex;
justify-content: space-between;
margin-left: -17px;
margin-right: -17px;
margin-top: 5px;
}
.container-ticket .ticket .head-ticket .code-barre span {
height: 100%;
width: 10px;
display: inline-block;
background: #333;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(1) {
width: 3px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(2) {
width: 5px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(3) {
width: 3px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(4) {
width: 6px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(5) {
width: 1px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(6) {
width: 5px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(7) {
width: 6px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(8) {
width: 2px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(9) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(10) {
width: 3px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(11) {
width: 5px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(12) {
width: 4px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(13) {
width: 3px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(14) {
width: 4px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(15) {
width: 6px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(16) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(17) {
width: 1px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(18) {
width: 2px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(19) {
width: 6px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(20) {
width: 2px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(21) {
width: 1px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(22) {
width: 7px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(23) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(24) {
width: 6px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(25) {
width: 7px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(26) {
width: 7px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(27) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(28) {
width: 2px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(29) {
width: 7px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(30) {
width: 3px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(31) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(32) {
width: 5px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(33) {
width: 5px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(34) {
width: 4px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(35) {
width: 4px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(36) {
width: 2px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(37) {
width: 5px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(38) {
width: 2px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(39) {
width: 2px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(40) {
width: 4px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(41) {
width: 5px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(42) {
width: 1px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(43) {
width: 2px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(44) {
width: 1px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(45) {
width: 3px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(46) {
width: 6px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(47) {
width: 4px;
margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(48) {
width: 5px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(49) {
width: 7px;
margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(50) {
width: 4px;
margin-right: 1px;
}
.container-ticket .ticket .body-ticket {
padding: 0px 17px;
}
.container-ticket .ticket .body-ticket .produits {
margin: 30px 0;
}
.container-ticket .ticket .body-ticket .carte {
text-align: justify;
text-align-last: center;
}
.container-ticket .ticket .body-ticket .carte .title-carte {
font-size: 15px;
font-weight: 600;
letter-spacing: -2px;
}
.container-ticket .ticket .footer-ticket {
padding: 0px 17px;
}
.container-ticket .ticket .footer-ticket .title-footer {
font-size: 16px;
font-weight: 900;
text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
text-align: center;
letter-spacing: 2px;
}Inspiration: https://codepen.io/EMEDESIGN/pen/xLPLwg
