Receipt

: mod_articles_category

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

Responsive design et mobile fi...

04.12

4 techniques fondamentales du...

19.10

Site web de Louise Mélin

28.06

La conscience morale et l'exil...

25.12

10 trucs et astuces pour Boots...

18.02

Pourquoi et comment j'ai chang...

14.04

Le web dans tous les sens

20.03

Tutoriel : réaliser un site we...

30.07

ASCII, langage informatique et...

19.07

Comment bien choisir son formu...

30.10

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;
}
Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.